thinkswell · imHardik1606 · Dec 22, 2024 · Dec 23, 2024 · Dec 24, 2024 · Dec 24, 2024
diff --git a/Color-Picker/imHardik1606/README.md b/Color-Picker/imHardik1606/README.md
@@ -0,0 +1,57 @@
+# Color Picker
+
+A simple and interactive Color Picker web application built with HTML, CSS, and JavaScript. This project allows users to pick a color, view its hexadecimal value, and see a live preview of the selected color.
+
+## Features
+
+- **Real-Time Color Selection**: Users can pick a color using a color input element.
+- **Hexadecimal Color Code**: Displays the selected color's hex code in a text box.
+- **Live Color Preview**: Shows a live preview of the selected color.
+- **Responsive Design**: Works seamlessly on different screen sizes.
+
+## Technologies Used
+
+- **HTML**: Structure of the web page.
+- **CSS**: Styling and layout of the application.
+- **JavaScript**: Adds interactivity to the Color Picker.
+
+## Project Structure
+
+```
+project-folder/
+├── index.html        # Main HTML file
+├── styles.css        # CSS file for styling
+├── script.js         # JavaScript file for interactivity
+└── README.md         # Project documentation
+```
+
+## How to Use
+
+1. Clone or download this repository to your local machine.
+2. Open the `index.html` file in your browser.
+3. Use the color picker to select a color.
+4. View the color's hexadecimal code in the text box and its preview in the box below.
+
+## Screenshots
+
+### Initial View:
+![Initial View](screenshots/initialView.png)
+
+### After Selecting a Color:
+![Color Selected](screenshots/colorSelected.png)
+
+## Demo
+
+You can view a live demo of the Color Picker [here](screenshots/Color-Picker%20Demo.mp4).
+
+## Customization
+
+Feel free to modify the code to:
+
+- Add more color formats (e.g., RGB, HSL).
+- Enhance the UI/UX with additional styling.
+- Save the selected colors to a palette.
+
+---
+
+Happy Coding!
diff --git a/Color-Picker/imHardik1606/index.html b/Color-Picker/imHardik1606/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Color Picker</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="color-picker-container">
+    <h1>Color Picker</h1>
+    <input type="color" id="colorPicker" value="#ff0000">
+    <input type="text" id="colorCode" value="#ff0000" readonly>
+    <div class="color-preview" id="colorPreview"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Color-Picker/imHardik1606/screenshots/Color-Picker Demo.mp4 b/Color-Picker/imHardik1606/screenshots/Color-Picker Demo.mp4
diff --git a/Color-Picker/imHardik1606/screenshots/colorSelected.png b/Color-Picker/imHardik1606/screenshots/colorSelected.png
diff --git a/Color-Picker/imHardik1606/screenshots/initialView.png b/Color-Picker/imHardik1606/screenshots/initialView.png
diff --git a/Color-Picker/imHardik1606/script.js b/Color-Picker/imHardik1606/script.js
@@ -0,0 +1,10 @@
+const colorPicker = document.getElementById('colorPicker');
+const colorCode = document.getElementById('colorCode');
+const colorPreview = document.getElementById('colorPreview');
+
+// Update the color preview and text input when the color changes
+colorPicker.addEventListener('input', () => {
+  const selectedColor = colorPicker.value;
+  colorCode.value = selectedColor;
+  colorPreview.style.backgroundColor = selectedColor;
+});
diff --git a/Color-Picker/imHardik1606/style.css b/Color-Picker/imHardik1606/style.css
@@ -0,0 +1,41 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f4f4f4;
+  }
+
+  .color-picker-container {
+    text-align: center;
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  #colorPicker {
+    margin: 10px 0;
+    padding: 5px;
+    cursor: pointer;
+  }
+
+  #colorCode {
+    border: none;
+    padding: 5px;
+    width: 100px;
+    text-align: center;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .color-preview {
+    margin-top: 15px;
+    height: 100px;
+    width: 100px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+  }
+
diff --git a/SimonGame/imHardik1606/README.md b/SimonGame/imHardik1606/README.md
@@ -0,0 +1,92 @@
+# Simon Says Game
+
+## Table of Contents
+- [Introduction](#introduction)
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [How to Play](#how-to-play)
+- [Installation](#installation)
+- [Directory Structure](#directory-structure)
+- [Screenshots](#screenshots)
+
+---
+
+## Introduction
+The **Simon Says Game** is a memory-based game where the player must replicate a sequence of colors and sounds. As the game progresses, the sequence becomes longer, challenging the player's memory and reflexes. This project is built using **HTML**, **CSS**, and **JavaScript**, and is designed to work seamlessly on both desktop and mobile devices.
+
+---
+
+## Features
+- Dynamic color and sound sequence generation.
+- Animated buttons to enhance user experience.
+- Tracks the highest score during the session.
+- Easy-to-use interface.
+- Responsive design for all screen sizes.
+
+---
+
+## Technologies Used
+- **HTML**: Structure of the game.
+- **CSS**: Styling and animations.
+- **JavaScript**: Game logic and interactivity.
+
+---
+
+## How to Play
+1. Start the game by pressing the "Start" button.
+2. The game will highlight a color and play a sound. Memorize the sequence.
+3. Repeat the sequence by clicking the buttons in the correct order.
+4. With each round, the sequence grows longer.
+5. If you make a mistake, the game ends, and your score is displayed.
+6. Try to beat your highest score!
+
+---
+
+## Installation
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/{USERNAME}/SimonSaysGame.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd SimonSaysGame
+   ```
+3. Open the `index.html` file in any web browser.
+
+---
+
+## Directory Structure
+```
+SimonSaysGame/
+|-- index.html
+|-- styles/
+|   |-- style.css
+|-- scripts/
+|   |-- script.js
+|-- assets/
+    |-- sounds/
+    |   |-- green.mp3
+    |   |-- red.mp3
+    |   |-- yellow.mp3
+    |   |-- blue.mp3
+    |-- images/
+        |-- screenshot1.png
+        |-- screenshot2.png
+```
+
+---
+
+## Screenshots
+1. **Initial Screen**
+   ![Initial Screen](screenshots/initialScreen.png)
+
+2. **Gameplay**
+   ![Gameplay](screenshots/gamePlay.png)
+
+3. **Game Over**
+    ![Game Over Screen](screenshots/gameOver.png)
+
+---
+
+Enjoy the game and challenge your memory!
+
diff --git a/SimonGame/imHardik1606/index.html b/SimonGame/imHardik1606/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Simon Says Game</title>
+</head>
+
+<body>
+    <h1>Simon Game</h1>
+    <h2>Press any key to start the game</h2>
+    <h3>High Score: </h3>
+    <h4>Your Score: </h4>
+    <div class="btn-container">
+        <div class="line-one">
+            <div class="btn red" type="button" id="red">1</div>
+            <div class="btn yellow" type="button" id="yellow">2</div>
+        </div>
+
+        <div class="line-two">
+            <div class="btn green" type="button" id="green">3</div>
+            <div class="btn purple" type="button" id="purple">4</div>
+        </div>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/SimonGame/imHardik1606/screenshots/gameOver.png b/SimonGame/imHardik1606/screenshots/gameOver.png
diff --git a/SimonGame/imHardik1606/screenshots/gamePlay.png b/SimonGame/imHardik1606/screenshots/gamePlay.png
diff --git a/SimonGame/imHardik1606/screenshots/initialScreen.png b/SimonGame/imHardik1606/screenshots/initialScreen.png
diff --git a/SimonGame/imHardik1606/script.js b/SimonGame/imHardik1606/script.js
@@ -0,0 +1,107 @@
+let gameSeq = [];
+let userSeq = [];
+
+let btns = ["yellow", "red", "purple", "green"];
+
+let started = false;
+let level = 0;
+let score = 0;
+let highScore = Number.MIN_SAFE_INTEGER;
+
+let h2 = document.querySelector("h2");
+let h3 = document.querySelector("h3");
+let h4 = document.querySelector("h4");
+
+//keypress ==> Game Start
+document.addEventListener("keypress", function () {
+  if (started == false) {
+    console.log("Game is Started");
+    started = true;
+  }
+
+  levelUp();
+});
+
+function gameFlash(btn) {
+  btn.classList.add("flash");
+
+  setTimeout(function () {
+    btn.classList.remove("flash");
+  }, 250);
+}
+
+function userFlash(btn) {
+  btn.classList.add("userflash");
+
+  setTimeout(function () {
+    btn.classList.remove("userflash");
+  }, 250);
+}
+
+function levelUp() {
+  userSeq = [];
+  level++;
+  h2.innerText = `Level ${level}`;
+  h4.innerText = `Your Score : ${score}`;
+  score++;
+
+  let randomIdx = Math.floor(Math.random() * 3);
+  let randomColor = btns[randomIdx];
+  let randomBtn = document.querySelector(`.${randomColor}`);
+  //   console.log(randomIdx);
+  //   console.log(randomColor);
+  //   console.log(randomBtn);
+  gameSeq.push(randomColor);
+  console.log(gameSeq);
+  gameFlash(randomBtn);
+}
+
+function checkAns(idx) {
+  // console.log("curr level : ", level);
+
+  if (userSeq[idx] === gameSeq[idx]) {
+    if (gameSeq.length == userSeq.length) {
+
+      if (score > highScore) {
+        highScore = score;
+        h3.innerHTML = `High Score: <u>${highScore}</u>`;
+      }
+
+      setTimeout(levelUp, 1000);
+    }
+  } else {
+    h2.innerHTML = `Game Over! Your score was <b>${score}</b> <br>Press any key to start`;
+
+    document.querySelector("body").style.backgroundColor = "red";
+
+    setTimeout(function () {
+      document.querySelector("body").style.backgroundColor = "white";
+    }, 120);
+    reset();
+  }
+}
+
+function btnpress() {
+  let btn = this;
+  console.log(btn);
+  userFlash(btn);
+
+  userColor = btn.getAttribute("id");
+  userSeq.push(userColor);
+
+  checkAns(userSeq.length - 1);
+}
+
+let allBtns = document.querySelectorAll(".btn");
+
+for (btn of allBtns) {
+  btn.addEventListener("click", btnpress);
+}
+
+function reset() {
+  started = false;
+  gameSeq = [];
+  userSeq = [];
+  level = 0;
+  score = 0;
+}