-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (57 loc) · 1.97 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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="./styles.css">
</head>
<body>
<!-- Box Structure -->
<div class="box">
<!-- Grid Div -->
<div class="grid-container"></div>
</div>
<!-- Add Slider-->
<div class="container">
<input type="range" min="1" max="60" value="30" class="slider" id="myRange">
<label id="pixel">Pixel Size: </label>
<label id="demo"></label>
</div>
<div class="btns">
<button value = "Rainbow" id="rainbowBtn">Rainbow</button>
<button value = "Eraser" id="erase">Eraser</button>
<button value = "ColorPicker" class="pickColor">Color Picker</button>
</div>
<div class="colorPicker">
<h2>Choose a Color</h2>
<fieldset>
<label for="r">R</label>
<input type="range" min="0" max="255" id="r" step="1" value="0">
<output for="r" id="r_out">0</output>
</fieldset>
<fieldset>
<label for="g">G</label>
<input type="range" min="0" max="255" id="g" step="1" value="0">
<output for="g" id="g_out">0</output>
</fieldset>
<fieldset>
<label for="b">B</label>
<input type="range" min="0" max="255" id="b" step="1" value="0">
<output for="b" id="b_out">0</output>
</fieldset>
<div id="hex-color">
<output id="hex">#000000</output>
</div>
<div class="cancelBtn">
<button value="ok" id="ok">Ok</button>
<!--<button value="cancel" id="cancel">Cancel</button>-->
</div>
</div>
<div class="footer">
<p>Copyright Ⓒ Adeola Praise 2022</p>
</div>
<script src="./scripts.js"></script>
</body>
</html>