├── Readme.md
├── index.html
├── style.css
└── script.js
/Readme.md:
--------------------------------------------------------------------------------
1 | # MyPortfolioBlog
2 |
3 |
4 | This is an Odin project, I built a simulation of Ecth a sketch that enables users to draw on a drawing pad on their browser. I built this using JavaScript
5 |
6 | 
7 |
8 |
9 |
10 | ## Live Preview
11 |
12 | LIVE DEMO: [Myportfolio](https://ginohmk.github.io/etch-a-sketch/)
13 |
14 |
15 | ## Built With
16 |
17 | - Javascript
18 | - Html
19 | - Css
20 |
21 | ## Getting Started
22 |
23 | To get a local copy up and running follow these simple example steps. 👷♂️
24 |
25 | ### Prerequisites
26 |
27 | clone repo: `https://https://github.com/Ginohmk/etch-a-sketch.git`
28 |
29 |
30 | then
31 | `cd etch-a-sketch`
32 |
33 | ### Install
34 |
35 | run `npm install` to install dependencies
36 |
37 | ## Authors
38 |
39 | 👤 **Author**
40 |
41 | - GitHub: [@Ginohmk](https://github.com/Ginohmk)
42 | - Twitter: [@michotall95](https://www.twitter.com/michotall95)
43 | - LinkedIn: [@kanumike](https://www.linkedin.com/in/kanu-mike-497119211/)
44 | - Instagram: [@savy_kanu_mike](https/instagram.com/savy_kanu_mike)
45 | - Facebook: [@mike.kanu](https://www.facebook.com/mike.kanu)
46 |
47 | ## 🤝 Contribute
48 |
49 | Contributions, issues, and feature requests are welcome!
50 |
51 | Feel free to check the [issues page](https://github.com/Ginohmk/etch-a-sketch/issues)
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Etch a Sketch
13 |
14 |
15 |
16 |
17 | Etch a Sketch
18 | (Developed By Kanu Mike Chibundu)
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
Selected Color
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | }
4 |
5 | *,
6 | *::after,
7 | *::before {
8 | box-sizing: inherit;
9 | }
10 |
11 | body,
12 | h1,
13 | h2,
14 | h3,
15 | h4,
16 | h5.h6,
17 | div {
18 | padding: 0;
19 | margin: 0;
20 | }
21 |
22 | body {
23 | background-color: rgba(204, 198, 198, 0.4);
24 | }
25 |
26 | .title {
27 | margin-top: 15px;
28 | text-align: center;
29 | font-size: 1.3rem;
30 | }
31 |
32 | .smallText {
33 | font-size: 0.8rem;
34 | letter-spacing: 1.5px;
35 | }
36 |
37 | .sketchPad {
38 | background-color: white;
39 | box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
40 | display: flex;
41 | justify-content: center;
42 | align-items: flex-start;
43 | flex-direction: row;
44 | flex-wrap: wrap;
45 | height: 453px;
46 | width: 500px;
47 | overflow: hidden;
48 | margin: 25px auto;
49 | margin-bottom: 15px;
50 | border: 2px solid rgba(201, 200, 200, 0.3);
51 | }
52 |
53 | .odin {
54 | font-weight: bold;
55 | text-align: center;
56 | margin-bottom: 30px;
57 | }
58 |
59 | .controls {
60 | width: 70%;
61 | margin: 20px auto;
62 | text-align: center;
63 | display: flex;
64 | flex-direction: row;
65 | justify-content: center;
66 | align-items: center;
67 | gap: 15px;
68 | }
69 |
70 | .adjustbtn {
71 | width: 100%;
72 | margin: 15px auto;
73 | display: flex;
74 | flex-direction: row;
75 | align-items: center;
76 | justify-content: center;
77 | gap: 15px;
78 | }
79 |
80 | #enterSquare {
81 | text-align: center;
82 | max-width: 50%;
83 | margin-top: 20px;
84 | }
85 |
86 | .colorSelected {
87 | text-align: center;
88 | display: flex;
89 | flex-direction: column;
90 | align-items: center;
91 | justify-content: center;
92 | gap: 16px;
93 | }
94 |
95 | .color-selected {
96 | width: 28px;
97 | height: 27px;
98 | }
99 |
100 | .textColorSelect {
101 | width: 60px;
102 | }
103 |
104 | .colorChoice {
105 | text-align: center;
106 | display: flex;
107 | flex-direction: column;
108 | justify-content: center;
109 | align-items: center;
110 | gap: 15px;
111 | width: 32px;
112 | z-index: 10;
113 | }
114 |
115 | button {
116 | padding: 10px;
117 | font-size: 0.8rem;
118 | }
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const pad = document.querySelector('.sketchPad');
2 | const box = document.createElement('div');
3 | const eraseBtn = document.querySelector('#eraser');
4 | const cleanBtn = document.querySelector('#clean');
5 | const drawBtn = document.querySelector('#draw');
6 | const enterSize = document.querySelector('#enterSquare');
7 | const colorSelected = document.querySelector('.color-selected');
8 | const randomColor = document.querySelector('#randomColor');
9 | const colorPicker = document.querySelector('.colorChoice');
10 |
11 |
12 |
13 |
14 |
15 | //To make size global
16 | let size = 16;
17 |
18 | // Simple example, see optional options for more configuration.
19 | //Simonwep picker library : https://github.com/Simonwep/pickr
20 | const pickr = Pickr.create({
21 | el: '.color-picker',
22 | theme: 'classic', // or 'monolith', or 'nano'
23 |
24 | position: 'right-start',
25 |
26 |
27 |
28 | swatches: [
29 | 'rgba(244, 67, 54, 1)',
30 | 'rgba(233, 30, 99, 0.95)',
31 | 'rgba(156, 39, 176, 0.9)',
32 |
33 | ],
34 |
35 | components: {
36 |
37 | // Main components
38 | preview: true,
39 | opacity: true,
40 | hue: true,
41 |
42 | // Input / output Options
43 | interaction: {
44 | hex: true,
45 | rgba: true,
46 | input: true,
47 | }
48 | }
49 | });
50 |
51 |
52 |
53 | //main function declaration
54 | function createEtch(size = 12, count = 0) {
55 |
56 | //Initail color of brush
57 | let rgbaColor = 'black';
58 |
59 | size = parseInt(size);
60 | console.log(size)
61 |
62 | //To wipe the Pad clear for new grid size
63 | if (count !== 0) {
64 | for (let i = 0; i <= 310; i++) {
65 | pad.innerHTML = ' ';
66 | }
67 | count = 0;
68 |
69 | }
70 |
71 | //loop to create the grid pixels
72 | for (let i = 0; i <= 1700; i++) {
73 | const box = document.createElement('div');
74 | box.style.cssText = ` width:${size}px;height:${size}px;flex-grow:1;margin-top:auto;`;
75 | pad.appendChild(box);
76 |
77 | //Erase Event and draw when Clicked
78 | eraseBtn.addEventListener('click', () => {
79 | box.addEventListener('mouseover', () => box.style.backgroundColor = 'white');
80 | drawBtn.addEventListener('click', () => {
81 | box.addEventListener('mouseover', () => box.style.backgroundColor = `${rgbaColor}`);
82 |
83 | })
84 | });
85 | //Random Color event
86 | randomColor.addEventListener('click', () => {
87 | box.addEventListener('mouseover', () => {
88 | let colorValueOne = ((Math.random() * 255) - 1);
89 | let colorValueTwo = ((Math.random() * 255) - 1);
90 | let colorValueThree = ((Math.random() * 255) - 1);
91 | box.style.backgroundColor = `rgba(${colorValueOne },${colorValueTwo },${colorValueThree },1)`;
92 | })
93 | });
94 |
95 | //Color Picker Event
96 | colorPicker.addEventListener('click', () => {
97 | console.log('here here');
98 | pickr.on('change', (color, source, instance) => {
99 | rgbaColor = color.toRGBA().toString(1);
100 | colorSelected.style.backgroundColor = `${rgbaColor}`
101 | box.addEventListener('mouseover', () => box.style.backgroundColor = `${rgbaColor}`);
102 |
103 |
104 | });
105 | })
106 |
107 | //Initail hover draw effect
108 | box.addEventListener('mouseover', () => box.style.backgroundColor = `${rgbaColor}`);
109 |
110 | //To clear the drawing pad
111 | cleanBtn.addEventListener('click', () => box.style.backgroundColor = 'white');
112 |
113 | }
114 |
115 |
116 |
117 | }
118 |
119 |
120 |
121 | //Initial Call of main Function
122 | createEtch();
123 |
124 |
125 |
126 |
127 |
128 | //Enter new Brush Size event
129 | enterSize.addEventListener('click', () => {
130 | // const rgbaColor;
131 | const count = 1;
132 | let size = prompt('enter size of brush strokes', 12);
133 | console.log(size)
134 |
135 | if (size > 64 || size < 12 || size === NaN || size === null) {
136 | alert(`${size} as size too invalid, enter size within the range 12 - 64`);
137 | size = 12;
138 | }
139 |
140 |
141 | createEtch(size, count);
142 |
143 | });
--------------------------------------------------------------------------------