├── .eslintrc.js
├── .gitignore
├── README.md
├── app.js
├── css
├── modern-normalize.min.css
└── styles.css
├── index.html
├── package-lock.json
└── package.json
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | },
6 | extends: 'airbnb-base',
7 | overrides: [
8 | {
9 | env: {
10 | node: true,
11 | },
12 | files: [
13 | '.eslintrc.{js,cjs}',
14 | ],
15 | parserOptions: {
16 | sourceType: 'script',
17 | },
18 | },
19 | ],
20 | parserOptions: {
21 | ecmaVersion: 'latest',
22 | sourceType: 'module',
23 | },
24 | rules: {
25 | },
26 | };
27 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Etch A Sketch toy
2 |
3 | Project to create something like [**Etch A Sketch**](https://en.wikipedia.org/wiki/Etch_A_Sketch) toy using only HTML, CSS and Vanilla JS.
4 |
5 | From The Odin Project's [curriculum](https://www.theodinproject.com/courses/foundations/lessons/etch-a-sketch-project).
6 |
7 | 🔗 **Live preview:** [here](https://artis-dev.github.io/etch-a-sketch/)
8 |
9 | ## Built with
10 |
11 | ### Technologies
12 |
13 | * HTML
14 | * CSS
15 | * JS
16 |
17 | ### Tools
18 |
19 | * Visual Studio Code
20 | * Linux terminal
21 | * Git and GitHub
22 | * ESLint + Airbnb JavaScript Style Guide
23 |
24 | ### Third party code
25 |
26 | * [modern-normalize](https://github.com/sindresorhus/modern-normalize)
27 | * [Google Fonts](https://fonts.google.com/)
28 |
29 | ## Outcome
30 |
31 | * Used HTML5 **semantic elements** for better readability and structure.
32 | * Used CSS3 **grid** and **flex** to create layout.
33 | * Used **Git** and **GitHub** for project management.
34 | * Tried to maintain **clean code**.
35 | * **Cross tested** on Firefox and Chromium based browsers.
36 |
37 | ## Summary
38 |
39 | ### What I learned
40 |
41 | * Better knowledge of **Javascript**.
42 | * Improved **code structure** and **code readability**.
43 | * Improved **clean code** writing.
44 | * A lot of minor things.
45 |
46 | ## Author
47 |
48 | 👤 **ArtisDev**
49 | * GitHub: [Artis-Dev](https://github.com/artis-dev)
50 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const sizeButtons = document.querySelectorAll('.size');
2 | const modeButtons = document.querySelectorAll('.mode');
3 |
4 | let currentMode = 'classic';
5 |
6 | function generateGrid(size = 32 * 44, cssClass = 'medium-grid-default') {
7 | const gameContainer = document.getElementById('grid-container');
8 |
9 | gameContainer.innerHTML = '';
10 |
11 | gameContainer.classList.remove('small-grid', 'medium-grid-default', 'big-grid');
12 | gameContainer.classList.add(cssClass);
13 |
14 | for (let i = 0; i < size; i += 1) {
15 | const div = document.createElement('div');
16 | gameContainer.appendChild(div);
17 | }
18 | }
19 |
20 | function erase() {
21 | const gridItems = document.querySelectorAll('#grid-container > div');
22 |
23 | gridItems.forEach((item) => {
24 | const gridItem = item;
25 | gridItem.style.backgroundColor = '#D8D8D8';
26 | gridItem.style.opacity = '1';
27 | gridItem.count = 0;
28 | });
29 | }
30 |
31 | function startPainting(mode) {
32 | const gridItems = document.querySelectorAll('#grid-container > div');
33 |
34 | gridItems.forEach((item) => {
35 | const gridItem = item;
36 | gridItem.count = 0;
37 | gridItem.addEventListener('mouseenter', (e) => {
38 | if (mode === 'classic') {
39 | e.target.style.backgroundColor = '#707070';
40 | e.target.style.opacity = 1;
41 | } else if (mode === 'modern') {
42 | e.target.style.backgroundColor = '#707070';
43 | e.target.count += 1;
44 | e.target.style.opacity = 0.2 * e.target.count;
45 | } else if (mode === 'psychedelic') {
46 | const psychedelicPallete = ['#EF476F', '#FFD166', '#06D6A0', '#118AB2', '#073B4C'];
47 | const randomColor = Math.floor(Math.random() * psychedelicPallete.length);
48 | e.target.style.opacity = 1;
49 | e.target.style.backgroundColor = psychedelicPallete[randomColor];
50 | }
51 | });
52 | });
53 | }
54 |
55 | function selectButton(button) {
56 | if (button.classList.contains('mode')) {
57 | modeButtons.forEach((selection) => {
58 | selection.classList.remove('active-button');
59 | });
60 | } else {
61 | sizeButtons.forEach((selection) => {
62 | selection.classList.remove('active-button');
63 | });
64 | }
65 | button.classList.add('active-button');
66 | }
67 |
68 | function changeSize() {
69 | const small = 16 * 22;
70 | const medium = 32 * 44;
71 | const big = 64 * 88;
72 |
73 | sizeButtons[1].classList.add('active-button');
74 |
75 | sizeButtons.forEach((selection) => {
76 | selection.addEventListener('click', () => {
77 | if (selection.classList.contains('small')) {
78 | erase();
79 | generateGrid(small, 'small-grid');
80 | startPainting(currentMode);
81 | selectButton(selection);
82 | } else if (selection.classList.contains('medium')) {
83 | erase();
84 | generateGrid(medium, 'medium-grid-default');
85 | startPainting(currentMode);
86 | selectButton(selection);
87 | } else {
88 | erase();
89 | generateGrid(big, 'big-grid');
90 | startPainting(currentMode);
91 | selectButton(selection);
92 | }
93 | });
94 | });
95 | }
96 |
97 | function changeMode() {
98 | modeButtons[0].classList.add('active-button');
99 |
100 | modeButtons.forEach((selection) => {
101 | selection.addEventListener('click', () => {
102 | if (selection.classList.contains('classic')) {
103 | startPainting('classic');
104 | selectButton(selection);
105 | currentMode = 'classic';
106 | } else if (selection.classList.contains('modern')) {
107 | startPainting('modern');
108 | selectButton(selection);
109 | currentMode = 'modern';
110 | } else {
111 | startPainting('psychedelic');
112 | selectButton(selection);
113 | currentMode = 'psychedelic';
114 | }
115 | });
116 | });
117 | }
118 |
119 | function eraseListener() {
120 | const eraseButton = document.querySelector('.erase');
121 |
122 | eraseButton.addEventListener('click', erase);
123 | }
124 |
125 | function startGame() {
126 | generateGrid();
127 | startPainting('classic');
128 | changeSize();
129 | changeMode();
130 | eraseListener();
131 | }
132 |
133 | startGame();
134 |
--------------------------------------------------------------------------------
/css/modern-normalize.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Minified by jsDelivr using clean-css v4.2.3.
3 | * Original file: /npm/modern-normalize@1.1.0/modern-normalize.css
4 | *
5 | * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
6 | */
7 | /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
8 | *,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
9 | /*# sourceMappingURL=/sm/b8ae781793ee4eb86edef3f2a2ac43a5575d063ed8cd287d7553f9f1b2776616.map */
10 |
--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
1 | /* COLOR PALETTE
2 | ---
3 | RED: #FF5E5B
4 | GREY: #D8D8D8
5 | CREAM: #FFFFEA
6 | LIGHT BLUE: #78CCCB
7 | YELLOW: #FFED66 */
8 |
9 | body {
10 | background-color: #78CCCB;
11 | font-family: 'Montserrat', sans-serif;
12 | padding: 50px 0;
13 | }
14 |
15 | main {
16 | text-align: center;
17 | }
18 |
19 | .header {
20 | background-color: #FF5E5B;
21 | border-radius: 20px 20px 0 0;
22 | width: 1079px;
23 | height: 94px;
24 | margin: 0 auto;
25 | }
26 |
27 | .heading {
28 | font-family: 'Lobster', cursive;
29 | font-size: 70px;
30 | color: #FFED66;
31 | text-align: center;
32 | margin: 0;
33 | line-height: 1;
34 | padding-top: 14px;
35 | }
36 |
37 | .controls {
38 | display: flex;
39 | justify-content: space-evenly;
40 | align-items: center;
41 | margin: 0 auto;
42 | padding: 0 80px;
43 | width: 1079px;
44 | height: 100px;
45 | background-color: #FF5E5B;
46 | border-radius: 0 0 20px 20px;
47 | }
48 |
49 | .controls > div {
50 | display: flex;
51 | align-items: center;
52 |
53 | }
54 | .controls > div > p {
55 | color: #FFFFEA;
56 | font-weight: 700;
57 | margin: 0;
58 | }
59 |
60 | .controls button {
61 | background-color: #FFFFEA;
62 | color: #000000;
63 | border: none;
64 | border-radius: 3px;
65 | padding: 6px 8px;
66 | margin-left: 20px;
67 | transition: all 0.3s;
68 | cursor: pointer;
69 | outline: none;
70 | }
71 |
72 | .controls button:hover {
73 | background-color: #FFED66;
74 | transition: all 0.3s;
75 | }
76 |
77 | .mode-controls {
78 | margin-left: 20px;
79 | }
80 |
81 | .active-button {
82 | background-color: #FFED66 !important;
83 | }
84 |
85 | .erase {
86 | color: #FF5E5B !important;
87 | font-weight: 700;
88 | }
89 |
90 | /* Game container */
91 | /* small(16x22) medium.default(32x44) big(64x88) */
92 |
93 | #grid-container {
94 | display: inline-grid;
95 | border: solid #FF5E5B;
96 | border-width: 6px 100px 0;
97 | grid-gap: 1px;
98 | background-color: #AAAAAA;
99 | /* cursor: crosshair; */
100 | }
101 |
102 | #grid-container > div {
103 | background-color: #D8D8D8;
104 | }
105 |
106 | .small-grid {
107 | grid-template-columns: repeat(22, auto);
108 | }
109 | .small-grid > div {
110 | height: 39px;
111 | width: 39px;
112 | }
113 |
114 | .medium-grid-default {
115 | grid-template-columns: repeat(44, auto);
116 | }
117 | .medium-grid-default > div {
118 | height: 19px;
119 | width: 19px;
120 | }
121 |
122 | .big-grid {
123 | grid-template-columns: repeat(88, auto);
124 | }
125 | .big-grid > div {
126 | height: 9px;
127 | width: 9px;
128 | }
129 |
130 | .footer {
131 | text-align: center;
132 | margin-top: 15px;
133 | color: #000000;
134 | }
135 |
136 | .footer-link {
137 | color: #FF5E5B;
138 | font-weight: bold;
139 | transition: all 0.2s;
140 | }
141 |
142 | .footer-link:hover {
143 | color: #FFED66;
144 | transition: all 0.2s;
145 | }
146 |
147 | /* Breakpoints */
148 |
149 | @media only screen and (max-width: 1080px) {
150 | .header {
151 | width: 739px;
152 | }
153 |
154 | .controls {
155 | flex-direction: column;
156 | width: 739px;
157 | }
158 |
159 | .mode-controls {
160 | margin-left: 0;
161 | }
162 |
163 | #grid-container {
164 | border-width: 6px 50px 0;
165 | }
166 |
167 | .small-grid {
168 | grid-template-columns: repeat(16, auto);
169 | }
170 |
171 | .medium-grid-default {
172 | grid-template-columns: repeat(32, auto);
173 | }
174 |
175 | .big-grid {
176 | grid-template-columns: repeat(64, auto);
177 | }
178 | }
179 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Etch A Sketch
7 |
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Grid density:
23 |
24 |
25 |
26 |
27 |
28 |
Mode:
29 |
30 |
31 |
32 |
33 |
34 |