Build an Amazing Etch-a-Sketch with HTML, CSS, and JavaScript!

Build an Amazing Etch-a-Sketch with HTML, CSS, and JavaScript!

Have you ever wanted to bring the nostalgia of the classic Etch-a-Sketch toy to life on a digital platform? Well, you’re in luck! In this article, we will guide you through the process of creating an interactive Etch-a-Sketch using HTML, CSS, and JavaScript. Strap in, and let’s embark on this creative journey together!

Understanding the Etch-a-Sketch Concept

The Etch-a-Sketch is a mechanical drawing toy that allows users to create images by turning two knobs, one for horizontal movements and the other for vertical movements. To replicate this concept digitally, we will utilize the power of HTML, CSS, and JavaScript to build a virtual Etch-a-Sketch.

Setting Up the HTML Structure

To begin, let’s set up the HTML structure of our Etch-a-Sketch. We will create a container div that holds a grid of individual cells representing the drawing area. Each cell will be an HTML element where the user can interact and create their masterpieces.

Styling the Etch-a-Sketch with CSS

Now that we have the basic structure in place, it’s time to add some style to our Etch-a-Sketch. We can use CSS to define the appearance of the drawing area, knobs, and other elements. Feel free to unleash your creativity here and make it visually appealing.

Implementing JavaScript Functionality

The real magic happens when we implement the JavaScript functionality. We will capture the user’s knob movements and translate them into corresponding actions on the drawing area. By tracking the mouse events and manipulating the CSS properties of the cells, we can create a responsive and interactive experience.

Enhancing the Etch-a-Sketch

Once we have the core functionality working, we can explore additional features to enhance the Etch-a-Sketch experience. For example, we can add options to change the color of the drawing tool, implement an eraser functionality, or even allow users to save and share their artwork.

Conclusion

Congratulations on successfully building your very own Etch-a-Sketch using HTML, CSS, and JavaScript! You’ve learned how to replicate the nostalgic drawing toy on a digital platform and explored various ways to enhance the user experience. Now, it’s time to unleash your creativity and create amazing artworks with your virtual Etch-a-Sketch!

FAQs

  1. Q1. Can I use this Etch-a-Sketch on my website? A1. Absolutely! You can embed the Etch-a-Sketch code into your website and let your visitors enjoy the interactive drawing experience.

    Q2. Is it possible to resize the Etch-a-Sketch drawing area? A2. Yes, you can adjust the size of the drawing area by modifying the CSS properties of the container div.

    Q3. Can I add additional features to the Etch-a-Sketch? A3. Certainly! The basic implementation serves as a starting point, and you can customize it further by adding new functionalities according to your requirements.

    Q4. How can I clear the drawing on the Etch-a-Sketch? A4. You can implement a clear button or shake gesture functionality that resets the drawing area to its initial state.

    Q5. Is it compatible with mobile devices? A5. Yes, with some additional adjustments to make it responsive, you can make the Etch-a-Sketch work seamlessly on mobile devices.

In this article, we explored how to create an Etch-a-Sketch using HTML, CSS, and JavaScript. By following the step-by-step instructions, you now have the knowledge to build your own interactive drawing tool. So, grab your digital knobs and let your imagination run wild with your very own virtual Etch-a-Sketch!

Index.html

				
					<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
   <link rel="manifest" href="/favicon_io/site.webmanifest">
    <script type="litespeed/javascript" data-src="https://www.googletagmanager.com/gtag/js?id=UA-87755577-3"></script> <script type="litespeed/javascript">window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
gtag('js',new Date());gtag('config','UA-87755577-3')</script> <title>Etch a Sketch App </title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="app">
      <center>
         <div class="container">
            <h1>Simple Etch a Sketch</h1>
            <div id="canvasSize">
               <div class="grid-container">
               </div>
            </div>
            <div class="button-container">
               <button class="btn btn-blue" id="reset">Reset</button>
               <button class="btn btn-blue" id="black">black</button>
               <button class="btn btn-blue" id="rainbow">rainbow</button>
               <input class="btn btn-blue" id="colorPicker" type="color" name="favcolor" value="#ff0000">
               <button class="btn btn-blue" id="eraseBtn">erase</button>
            </div>
         </div>
         </center>
   </div> <script type="litespeed/javascript" data-src="script.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://dailywebdesigns.com/wp-content/litespeed/js/ff29a0a4fba699963bbcc0f3bbf70a32.js?ver=0b80d"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
				
			

style.css

				
					@font-face{
   font-family: 'pixel-twist';
   src: url('PixelTwist.ttf'); /* IE9 Compat Modes */
   src: url('PixelTwist.ttf') format('embedded-opentype'), /* IE6-IE8 */
         url('PixelTwist.ttf') format('woff'), /* Modern Browsers */
         url('PixelTwist.ttf')  format('truetype'), /* Safari, Android, iOS */
}

h1 {
   font-family: 'pixel-twist', cursive;
   color: red;
   background-color: white;
   width: 512px;
   height: 45px;
   margin-bottom: 5px;
   border-radius: 5px;
   /* text-shadow: 0 0 1px #fff; */
   /* -webkit-text-shadow: 0 0 2px #000; */
}

.grid-container {
   display: grid;
   background-color: #ffffff;
   border-radius: 5px;
   /* grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; */
   /* grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; */
   /*/
   /* grid-gap: 10px; */
   /* background-color: #2196F3; */
   /* padding: 10px; */
   /* margin: 10px; */
}

.container {
   /* height: 720px; */
   width: 100%;
}

.btn {
   background-color: #2196F3; /* Green */
   border: none;
   color: white;
   /* padding: 16px 32px; */
   padding: auto;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   cursor: pointer;
   border-radius: 3px;
}

.btn-blue {
   background-color: white; 
   color: black; 
   /* border: 5px solid #2196F3; */
}

.btn-blue:hover {
   /* background-color: #2196F3; */
   color: white;
}

#colorPicker {
   width: 40px;
   height: 18px;
}

/* .grid-container > div { */
   /* display: block;
   height: 5.02px; */
   /* background-color: #ffffff; */
   /* text-align: center;
   width: 32px;
   height: 32px;
   padding: 0;
   margin: 0; */
   /* padding: 20px 0; */
   /* font-size: 30px; */
/* } */

body {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

#app { 
   height: 100%;
   width: 100%;
   left:0;
   right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
   background-size: 1800% 1800%;
   -webkit-animation: rainbow 18s ease infinite;
   -z-animation: rainbow 18s ease infinite;
   -o-animation: rainbow 18s ease infinite;
   animation: rainbow 18s ease infinite;}

@-webkit-keyframes rainbow {
   0%{background-position:0% 82%}
   50%{background-position:100% 19%}
   100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
   0%{background-position:0% 82%}
   50%{background-position:100% 19%}
   100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
   0%{background-position:0% 82%}
   50%{background-position:100% 19%}
   100%{background-position:0% 82%}
}
@keyframes rainbow { 
   0%{background-position:0% 82%}
   50%{background-position:100% 19%}
   100%{background-position:0% 82%}
}

				
			

main.js

				
					let dimension = prompt('Masukkan ukuran grid(ex .16) :', 16);

/* NOTE creating grid element */
let grid_container = document.querySelector('.grid-container');

let gridHeight = 502/dimension;
grid_container.setAttribute('style', `display: grid;grid-template-columns: repeat(${dimension}, 1fr);grid-template-rows: repeat(${dimension}, 1fr);`)

/* NOTE Creating canvas with dimention */
for (let i = 0; i < Math.pow(dimension, 2); i++) {
   let grid = document.createElement('div');
   grid.setAttribute('style', `display: block; height: ${gridHeight}px; opacity: 0;`)
   grid_container.appendChild(grid);
}

let color = '#000000';
let type = 'single';
let opacity_first = 0.1;

document.querySelector('#eraseBtn').addEventListener('click', function (e) {
   type = 'single'
   color = 'ffffff'
   opacity_first = 0;
})

let colorPicker = document.querySelector('#colorPicker');

colorPicker.addEventListener('focusout', (e) => {
   type = 'single';
   color = colorPicker.value;
   opacity_first = 0.1;
})

document.querySelector('#black').addEventListener('click', (e) => {
   type = 'single';
   color = 'black';
   opacity_first = 0.1;
})

document.querySelector('#rainbow').addEventListener('click', (e) => {
   type = 'rainbow';
   color = 'black';
   opacity_first = 0.1;
})

/* NOTE Create canvas */
document.querySelector('#canvasSize').setAttribute('style', 'width: 512px; height: 512px;')

/* NOTE Function reset */
document.querySelector('#reset').addEventListener('click', function(e){
   return confirm('Sure reset?') ? location.reload() : '';
})

/* NOTE get all grids in html */
let grids = document.querySelectorAll('.grid-container > div');

/* NOTE adding event to all selected */
grids.forEach(function(grid) {         

   // let color = getRandomColor();
   
   /* NOTE Event when mouse click */
   grid.addEventListener('click', function (e) {
      paintGrid(grid, color, type, opacity_first);
   });

   /* NOTE Event mouseover like hover */
   grid.addEventListener('mouseover', function(e) {
      /* NOTE if button using left click */
      if (e.buttons === 1) {
         paintGrid(grid, color, type, opacity_first);
      }
   });
})

/* NOTE Create function for change grid color */
function changeGrid(grid, color = '#000000', opacity){
   if (opacity === 0) {
      let style = getComputedStyle(grid);
      let opacity = parseFloat(style.opacity);
      // let display = style.
      opacity = parseFloat(0);
      grid.setAttribute('style', `display: block; background-color: ${color}; height: ${gridHeight}px; opacity: ` + opacity);
      // element.style.cssText = "background-color: black";
   } else {
      let style = getComputedStyle(grid);
      let opacity = parseFloat(style.opacity);
      // let display = style.
      opacity += parseFloat(0.1);
      grid.setAttribute('style', `display: block; background-color: ${color}; height: ${gridHeight}px; opacity: ` + opacity);
      // element.style.cssText = "background-color: black";
   }
}

function getRandomColor(){
   let latters = '0123456789ABCDEF';
   let color = '#';
   for (let i = 0; i < 6; i++){
      color += latters[Math.floor(Math.random() * 16)]
   }
   return color;
}

function paintGrid(grid, color, type, opacity){

   if (type == 'rainbow') {
      let warna = getRandomColor();
      changeGrid(grid, warna, opacity);
   } else {
      changeGrid(grid, color, opacity);
   }

}
				
			

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top