-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
49 lines (36 loc) · 1.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<link rel="stylesheet" href="style.css">
<script src="code.js" defer></script>
</head>
<body>
<h1 class="title">Etch-a-Sketch</h1>
<h2>About</h2>
<p>
Select your pen, then click and hold your mouse down and move it to draw.
If you make a mistake use the eraser or if you want to start over click Clear All.
Change the granularity of your drawing using the slider. Go crazy
and let those creative juices flow!
</p>
<div class = "buttons">
<button id="black_pen" class="blackPen" >Black Pen</button>
<button id="rainbow_pen" class="rainbowPen">Rainbow Pen</button>
<button id="eraser">Eraser</button>
<button id="clear">Clear All</button>
</div>
<div id="container">
<!-- Create Grid for drawing in code.js -->
</div>
<div id="gridSize"></div>
<div class="slider">
<input type="range" min="2" max="40" value="15" class="slider" id="dimensions">
</div>
<a class='link' href="https://github.com/learner1unknown/odin-etch-a-sketch" target="_blank">Github</a>
<div>Made by <a class='link' href='https://twitter.com/reubenfrith' target="_blank">Reuben Frith</a></div>
</body>
</html>