Add etch-sketch project

vijaygupta18 · Oct 21, 2020 · f6c061b · f6c061b
1 parent c57f6bb
commit f6c061b
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 0 deletions.
diff --git a/Etch-a-Sketch-2/README.md b/Etch-a-Sketch-2/README.md
@@ -0,0 +1,5 @@
+# Etch-a-Sketch
+Practice JavaScript basics, like DOM manipulation:
+- Create DOM elements.
+- Listen to events from DOM elements.
+- Change CSS with JS.
diff --git a/Etch-a-Sketch-2/index.html b/Etch-a-Sketch-2/index.html
@@ -0,0 +1,25 @@
+<html>
+
+<head>
+ <title>Etch-a-Sketch</title>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+ <div class="app">
+
+ <div class="container">
+ <h3> Etch a Sketch </h3>
+ <div class="controls">
+ <button class="clear-btn">Reset Grid</button>
+ <button class="random-btn">Random Color</button>
+ <button class="default-btn">Reset Color</button>
+ </div>
+ <div class="grid"></div>
+ </div>
+ </div>
+ <script type="text/javascript" src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Etch-a-Sketch-2/script.js b/Etch-a-Sketch-2/script.js
@@ -0,0 +1,76 @@
+
+document.addEventListener('DOMContentLoaded', runApp);
+
+function runApp() {
+ let N = 16;
+ let container = document.querySelector('.grid');
+ const clearBtn = document.querySelector('.clear-btn');
+ const randomColorBtn = document.querySelector('.random-btn');
+ const defaultColorBtn = document.querySelector('.default-btn');
+ let COLOR_ON_HOVER = 'black';
+ let isRandomColorEnabled = false;
+
+ defaultColorBtn.addEventListener('click', function () {
+ COLOR_ON_HOVER = 'black';
+ isRandomColorEnabled = false;
+ randomColorBtn.style.backgroundColor = 'white';
+ });
+
+ randomColorBtn.addEventListener('click', function () {
+ if (isRandomColorEnabled) {
+ isRandomColorEnabled = false;
+ this.style.backgroundColor = 'white';
+ }
+ else {
+ isRandomColorEnabled = true;
+ this.style.backgroundColor = '#ccc';
+ }
+ });
+
+ buildGrid(N);
+
+ clearBtn.addEventListener('click', function () {
+ container.innerHTML = "";
+ N = parseInt(prompt("Enter the size of the grid", '16'));
+ buildGrid(N);
+ });
+
+ function buildGrid(n) {
+ container.style.gridTemplateColumns = "repeat(" + n + ", 1fr)";
+ container.style.gridTemplateRows = "repeat(" + n + ", 1fr)";
+
+ for (let i = 0; i < n * n; i++) {
+ const cell = document.createElement("div");
+ cell.classList.add('cell');
+ cell.addEventListener('mouseover', changeBackgroundColor);
+
+ container.appendChild(cell);
+ }
+ }
+
+ function changeBackgroundColor() {
+ let color = COLOR_ON_HOVER;
+ if (isRandomColorEnabled) {
+ color = pickRandomColor();
+ // console.log(color);
+ }
+ this.style.backgroundColor = color;
+ }
+
+ function getRandomHexDigit() {
+ let d = Math.floor(Math.random() * 15);
+ if (d > 9) {
+ d = String.fromCharCode(97 + d - 10);
+ }
+ return d;
+ }
+
+ function pickRandomColor() {
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += getRandomHexDigit();
+ }
+ return color;
+ }
+
+}
diff --git a/Etch-a-Sketch-2/style.css b/Etch-a-Sketch-2/style.css
@@ -0,0 +1,44 @@
+.grid {
+ width: 650px;
+ height: 650px;
+ display: grid;
+ grid-template-columns: repeat(16, 1fr);
+ grid-template-rows: repeat(16, 1fr);
+ background-color: white;
+ margin: auto;
+}
+
+.grid > div {
+ border: .3px solid #cccccc;
+}
+
+body{
+ background-color: lightblue;
+}
+
+.controls{
+ display: flex;
+ justify-content: space-around;
+ width: 315px;
+ margin-bottom: 20px;
+}
+
+.container{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.app {
+ height: 100%;
+ width: 100%;
+}
+
+h3 {
+ margin: 0 0 10 0;
+}
+
+[class*='-btn'] {
+ border-radius: 5px;
+}
diff --git a/Etch-a-Sketch/script.js b/Etch-a-Sketch/script.js
@@ -0,0 +1,76 @@
+
+document.addEventListener('DOMContentLoaded', runApp);
+
+function runApp() {
+ let N = 16;
+ let container = document.querySelector('.grid');
+ const clearBtn = document.querySelector('.clear-btn');
+ const randomColorBtn = document.querySelector('.random-btn');
+ const defaultColorBtn = document.querySelector('.default-btn');
+ let COLOR_ON_HOVER = 'black';
+ let isRandomColorEnabled = false;
+
+ defaultColorBtn.addEventListener('click', function () {
+ COLOR_ON_HOVER = 'black';
+ isRandomColorEnabled = false;
+ randomColorBtn.style.backgroundColor = 'white';
+ });
+
+ randomColorBtn.addEventListener('click', function () {
+ if (isRandomColorEnabled) {
+ isRandomColorEnabled = false;
+ this.style.backgroundColor = 'white';
+ }
+ else {
+ isRandomColorEnabled = true;
+ this.style.backgroundColor = '#ccc';
+ }
+ });
+
+ buildGrid(N);
+
+ clearBtn.addEventListener('click', function () {
+ container.innerHTML = "";
+ N = parseInt(prompt("Enter the size of the grid", '16'));
+ buildGrid(N);
+ });
+
+ function buildGrid(n) {
+ container.style.gridTemplateColumns = "repeat(" + n + ", 1fr)";
+ container.style.gridTemplateRows = "repeat(" + n + ", 1fr)";
+
+ for (let i = 0; i < n * n; i++) {
+ const cell = document.createElement("div");
+ cell.classList.add('cell');
+ cell.addEventListener('mouseover', changeBackgroundColor);
+
+ container.appendChild(cell);
+ }
+ }
+
+ function changeBackgroundColor() {
+ let color = COLOR_ON_HOVER;
+ if (isRandomColorEnabled) {
+ color = pickRandomColor();
+ // console.log(color);
+ }
+ this.style.backgroundColor = color;
+ }
+
+ function getRandomHexDigit() {
+ let d = Math.floor(Math.random() * 15);
+ if (d > 9) {
+ d = String.fromCharCode(97 + d - 10);
+ }
+ return d;
+ }
+
+ function pickRandomColor() {
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += getRandomHexDigit();
+ }
+ return color;
+ }
+
+}
diff --git a/Etch-a-Sketch/style.css b/Etch-a-Sketch/style.css
@@ -0,0 +1,44 @@
+.grid {
+ width: 650px;
+ height: 650px;
+ display: grid;
+ grid-template-columns: repeat(16, 1fr);
+ grid-template-rows: repeat(16, 1fr);
+ background-color: white;
+ margin: auto;
+}
+
+.grid > div {
+ border: .3px solid #cccccc;
+}
+
+body{
+ background-color: lightblue;
+}
+
+.controls{
+ display: flex;
+ justify-content: space-around;
+ width: 315px;
+ margin-bottom: 20px;
+}
+
+.container{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.app {
+ height: 100%;
+ width: 100%;
+}
+
+h3 {
+ margin: 0 0 10 0;
+}
+
+[class*='-btn'] {
+ border-radius: 5px;
+}