thinkswell · imHardik1606 · Dec 22, 2024 · Dec 23, 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/app.js b/SimonGame/imHardik1606/app.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;
+}
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="app.js"></script>
+</body>
+
+</html>
diff --git a/SimonGame/imHardik1606/style.css b/SimonGame/imHardik1606/style.css
@@ -0,0 +1,40 @@
+body{
+    text-align: center;
+}
+
+.btn{
+    height: 200px;
+    width: 200px;
+    border-radius: 20%;
+    border: 10px solid black;
+    margin: 1.5rem;
+}
+
+.btn-container{
+    display: flex;
+    justify-content: center;
+}
+
+.yellow{
+    background-color: #f99b45;
+}
+
+.red{
+    background-color: #d95980;
+}
+
+.green{
+    background-color: #81f99b;
+}
+
+.purple{
+    background-color: #70a2e4;
+}
+
+.flash{
+    background-color: white;
+}
+
+.userflash{
+    background-color: green;
+}