kunjgit · kunjgit · Jun 15, 2024 · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 2024
diff --git a/Games/Etch_a_Sketch_2/README.md b/Games/Etch_a_Sketch_2/README.md
@@ -0,0 +1,39 @@
+# **Etch-a-Sketch 2**
+
+---
+
+<br>
+
+## **Description 📃**
+
+Etch-a-Sketch 2 is an interactive web-based drawing game inspired by the classic Etch-a-Sketch toy. It allows users to create various patterns and drawings on a grid canvas using different drawing modes.
+
+## **Functionalities 🎮**
+
+- Dynamic grid adjustment up to 100x100 cells.
+- Three drawing modes: Monochromatic, Random Colors, and Darken.
+- Real-time interactive drawing effects based on user interactions.
+
+<br>
+
+## **How to play? 🕹️**
+
+To play Etch-a-Sketch 2:
+
+- Click the "Set Grid Size" button to adjust the grid size.
+- Choose between Monochromatic, Random, or Darken modes by clicking the respective buttons.
+- Hover over the grid cells to draw:
+  - In **Monochromatic mode**, cells turn red when hovered over.
+  - In **Random Colors mode**, cells change to random RGB colors.
+  - In **Darken mode**, cells darken gradually with each hover.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<!-- Add your screenshots like this -->
+
+![image](assets/images/Etch_a_Sketch_2.png)
+
+<br>
diff --git a/Games/Etch_a_Sketch_2/assets/images/Etch_a_Sketch_2.png b/Games/Etch_a_Sketch_2/assets/images/Etch_a_Sketch_2.png
diff --git a/Games/Etch_a_Sketch_2/index.html b/Games/Etch_a_Sketch_2/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Etch a Sketch 2</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"  defer></script>
+</head>
+<body>
+    <h1 class="heading">Etch a Sketch 2</h1>
+    <div class="buttons">
+        <button class="setGridSize">Set Grid Size</button>
+        <button class="mono">Mono</button>
+        <button class="random">Random</button>
+        <button class="darken">darken</button>
+        <button class="reset">Reset Grid</button> <!-- Added reset button -->
+    </div>
+
+    <div id="container"></div>
+</body>
+</html>
diff --git a/Games/Etch_a_Sketch_2/script.js b/Games/Etch_a_Sketch_2/script.js
@@ -0,0 +1,103 @@
+const container = document.querySelector("#container");
+
+const WIDTH = 600;
+
+
+let isRandom = false;
+let isDark = false;
+
+
+function createGrid(numberOfGrid, isDark){
+
+    container.innerHTML = '';
+    for (let i = 0; i < numberOfGrid**2; i++) {
+
+        const grid = document.createElement("div");
+        grid.classList.add("grid");
+        grid.style.width = (WIDTH/numberOfGrid) + "px";    
+        grid.style.height = (WIDTH/numberOfGrid) + "px"; 
+        grid.style.margin = 0;
+
+        if (isDark) {
+            grid.style.backgroundColor = "black";
+            grid.style.opacity = 0;
+        }
+        container.appendChild(grid);
+    }
+
+}
+
+const setGridSize = document.querySelector(".setGridSize");
+
+let numberOfGrid = 50;
+createGrid(numberOfGrid, isDark);
+
+setGridSize.addEventListener("click",()=>{
+
+    numberOfGrid =  parseInt(prompt("Enter number of Rows in the Grid (< 100): ",0));
+    if (numberOfGrid > 100) {
+        alert('Oops!!!, Maximum limit is 100');
+        createGrid(50);
+    }
+    else{
+        createGrid(numberOfGrid, isDark);
+    }
+
+})
+
+function generateRandomRGBColor() {
+    const red = Math.floor(Math.random() * 255);
+    const green = Math.floor(Math.random() * 255);
+    const blue = Math.floor(Math.random() * 255);
+    return `rgb(${red}, ${green}, ${blue})`;
+}
+
+
+container.addEventListener("mouseover",(event)=>{
+
+    if (event.target.classList.contains('grid')) {
+            if (isRandom) {
+                event.target.style.backgroundColor = generateRandomRGBColor();
+            }
+            else if(isDark) {
+                if(event.target.style.opacity < 1){
+                    let currentOpacity = parseFloat(event.target.style.opacity); 
+                    event.target.style.opacity = (currentOpacity + 0.1).toString();
+                }
+            }
+            else{
+                event.target.style.backgroundColor = "red";
+            }
+    }
+})
+
+const random = document.querySelector(".random");
+const darken = document.querySelector(".darken");
+const mono = document.querySelector(".mono");
+
+mono.addEventListener("click",()=>{
+    isRandom = false;
+    isDark = false;
+    createGrid(numberOfGrid, isDark);
+})
+
+darken.addEventListener("click",()=>{
+    isRandom = false;
+    isDark = true;
+    createGrid(numberOfGrid, isDark);
+})
+
+random.addEventListener("click",()=>{
+    isRandom = true;
+    isDark = false;
+    createGrid(numberOfGrid, isDark);
+})
+
+const reset = document.querySelector(".reset");
+reset.addEventListener("click", () => {
+    const grids = document.querySelectorAll(".grid");
+    grids.forEach(grid => {
+        grid.style.backgroundColor = "white";
+        grid.style.opacity = 1;
+    });
+});
diff --git a/Games/Etch_a_Sketch_2/style.css b/Games/Etch_a_Sketch_2/style.css
@@ -0,0 +1,50 @@
+body{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(185, 219, 234);
+}
+
+.heading{
+    margin: 20px 0 20px 0;
+    font-family:'Courier New', Courier, monospace;
+    font-size: 36px;
+    color: rgb(225, 108, 108);
+}
+
+.buttons{
+    display: flex;
+    gap: 30px;
+    margin: 10px 0 30px 0;
+
+}
+button{
+    box-shadow: 0 0 10px crimson;
+}
+
+.buttons > button:hover {
+    transform: scale(1.05);
+}
+
+.buttons > button{
+    height: 40px;
+    width: 150px;
+    border: 0;
+    border-radius: 12px;
+    background-color: rgba(1, 1, 1, 0.152);
+    font-family:'Courier New', Courier, monospace;
+    font-size: 16px;
+    color: rgb(255, 255, 255);
+    font-weight: 600;
+    backdrop-filter: blur(10px);
+}
+#container{
+    width: 600px;
+    height: 600px;
+    background-color: white;
+    display: flex;
+    flex-wrap: wrap;
+    border: 2px solid rgb(249, 129, 129);
+    box-shadow: 0 0 20px red;
+}
diff --git a/assets/images/Etch_a_Sketch_2.png b/assets/images/Etch_a_Sketch_2.png