├── .prettierrc ├── README.md ├── images └── power-button.svg ├── index.html ├── app.js └── main.css /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Etch a Sketch 2 | 3 | ## TheOdinProject - [site](https://www.theodinproject.com/) 4 | 5 | #### Check out [demo](https://tarekvisch.github.io/etch-a-sketch/) 6 | -------------------------------------------------------------------------------- /images/power-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etch A Sketch 7 | 8 | 9 | 10 | 11 |

Etch A Sketch

12 |

Swirl around and have fun

13 |
14 |
15 |
16 |

Controls

17 |
8x8
18 | 19 | 20 | 23 |
24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const grid = document.querySelector('.grid'); 2 | let gridValue = document.querySelector('.grid-size'); 3 | let gridSize = document.querySelector('input'); 4 | const resetBtn = document.querySelector('.reset'); 5 | const applyGridSize = document.querySelector('.apply'); 6 | let squareSize = 8; 7 | 8 | createGrid(squareSize); 9 | 10 | // Create Squared Divs 11 | function createDiv(size) { 12 | const div = document.createElement('div'); 13 | div.classList.add('box'); 14 | div.style.width = `${size}px`; 15 | div.style.height = `${size}px`; 16 | 17 | return div; 18 | } 19 | 20 | // Creat The Grid and append it to grid 21 | function createGrid(gridSize) { 22 | for (let i = 0; i < gridSize; i++) { 23 | for (let j = 0; j < gridSize; j++) { 24 | grid.appendChild(createDiv(grid.clientWidth / gridSize)); 25 | } 26 | } 27 | } 28 | 29 | function reset() { 30 | while (grid.firstChild) { 31 | grid.removeChild(grid.lastChild); 32 | } 33 | createGrid(squareSize); 34 | } 35 | 36 | // Used event delegation to target children of the grid 37 | grid.addEventListener('mouseover', function (e) { 38 | // Add the "active" class to only divs with a "box" class 39 | if (e.target.matches('.box')) { 40 | e.target.classList.add('active'); 41 | } 42 | }); 43 | 44 | gridSize.addEventListener('input', function (e) { 45 | squareSize = e.target.value; 46 | gridValue.textContent = `${squareSize}x${squareSize}`; 47 | }); 48 | 49 | applyGridSize.addEventListener('click', function () { 50 | reset(); 51 | }); 52 | 53 | resetBtn.addEventListener('click', reset); 54 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap'); 3 | 4 | :root { 5 | --color-blue: #457b9d; 6 | --color-black: #171719; 7 | --color-red: #e63946; 8 | } 9 | 10 | *, 11 | *::before, 12 | *::after { 13 | box-sizing: border-box; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | html { 19 | font-size: 62.5%; 20 | } 21 | 22 | body { 23 | font-family: 'Roboto', sans-serif; 24 | color: var(--color-black); 25 | background-color: #f5f5f5; 26 | font-size: 1.6rem; 27 | } 28 | 29 | h1 { 30 | text-align: center; 31 | margin-top: 3.5rem; 32 | margin-bottom: 1.5rem; 33 | color: var(--color-blue); 34 | font-size: 4rem; 35 | text-shadow: 5px 5px #eddcd2; 36 | } 37 | 38 | h2 { 39 | text-align: center; 40 | margin-bottom: 3rem; 41 | font-family: 'Sacramento', cursive; 42 | font-size: 5rem; 43 | font-style: italic; 44 | background: linear-gradient(to right, #2196f3, #f44336); 45 | -webkit-background-clip: text; 46 | -webkit-text-fill-color: transparent; 47 | } 48 | 49 | .container { 50 | padding: 0 2vw; 51 | display: flex; 52 | justify-content: center; 53 | } 54 | 55 | .controls { 56 | display: flex; 57 | align-items: center; 58 | } 59 | 60 | .controls h3 { 61 | margin-bottom: 1rem; 62 | font-size: 2rem; 63 | color: var(--color-blue); 64 | } 65 | 66 | .controls-inner { 67 | background-color: #a8dadc; 68 | text-align: center; 69 | padding: 2rem; 70 | border-top-left-radius: 1rem; 71 | border-bottom-left-radius: 1rem; 72 | } 73 | 74 | .grid-size { 75 | margin-bottom: 0.5rem; 76 | color: var(--color-black); 77 | font-weight: 500; 78 | font-size: 1.8rem; 79 | } 80 | 81 | .apply { 82 | display: block; 83 | margin: 0 auto; 84 | padding: 0.5rem 1rem; 85 | border: none; 86 | background-color: var(--color-blue); 87 | color: #ffffff; 88 | font-weight: 500; 89 | font-size: 1.8rem; 90 | margin-top: 1rem; 91 | border-radius: 0.5rem; 92 | } 93 | 94 | .reset { 95 | display: block; 96 | width: 3rem; 97 | height: 3rem; 98 | background-color: transparent; 99 | border: none; 100 | margin: 0 auto; 101 | margin-top: 1rem; 102 | cursor: pointer; 103 | } 104 | 105 | .grid { 106 | border: 2px solid #a8dadc; 107 | border-radius: 1rem; 108 | width: 70rem; 109 | height: 70rem; 110 | position: relative; 111 | display: flex; 112 | flex-flow: row wrap; 113 | justify-content: space-around; 114 | } 115 | 116 | .box { 117 | border: 0.5px solid rgba(0, 0, 0, 0.05); 118 | border-radius: 0.5rem; 119 | } 120 | 121 | .box.active { 122 | background-color: var(--color-blue); 123 | } 124 | --------------------------------------------------------------------------------