diff --git a/Color-Picker/imHardik1606/README.md b/Color-Picker/imHardik1606/README.md new file mode 100644 index 000000000..13cc1945f --- /dev/null +++ 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 new file mode 100644 index 000000000..70e765899 --- /dev/null +++ b/Color-Picker/imHardik1606/index.html @@ -0,0 +1,18 @@ + + + + + + Color Picker + + + +
+

Color Picker

+ + +
+
+ + + diff --git a/Color-Picker/imHardik1606/screenshots/Color-Picker Demo.mp4 b/Color-Picker/imHardik1606/screenshots/Color-Picker Demo.mp4 new file mode 100644 index 000000000..cb4b3c6ff Binary files /dev/null and b/Color-Picker/imHardik1606/screenshots/Color-Picker Demo.mp4 differ diff --git a/Color-Picker/imHardik1606/screenshots/colorSelected.png b/Color-Picker/imHardik1606/screenshots/colorSelected.png new file mode 100644 index 000000000..e596a4570 Binary files /dev/null and b/Color-Picker/imHardik1606/screenshots/colorSelected.png differ diff --git a/Color-Picker/imHardik1606/screenshots/initialView.png b/Color-Picker/imHardik1606/screenshots/initialView.png new file mode 100644 index 000000000..156395717 Binary files /dev/null and b/Color-Picker/imHardik1606/screenshots/initialView.png differ diff --git a/Color-Picker/imHardik1606/script.js b/Color-Picker/imHardik1606/script.js new file mode 100644 index 000000000..935ceee14 --- /dev/null +++ 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 new file mode 100644 index 000000000..41a898e1d --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/SimonGame/imHardik1606/README.md b/SimonGame/imHardik1606/README.md new file mode 100644 index 000000000..6e064d6ac --- /dev/null +++ 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 new file mode 100644 index 000000000..12bfb1685 --- /dev/null +++ b/SimonGame/imHardik1606/index.html @@ -0,0 +1,32 @@ + + + + + + + + Simon Says Game + + + +

Simon Game

+

Press any key to start the game

+

High Score:

+

Your Score:

+
+
+
1
+
2
+
+ +
+
3
+
4
+
+ +
+ + + + + \ No newline at end of file diff --git a/SimonGame/imHardik1606/screenshots/gameOver.png b/SimonGame/imHardik1606/screenshots/gameOver.png new file mode 100644 index 000000000..0b28ba8ac Binary files /dev/null and b/SimonGame/imHardik1606/screenshots/gameOver.png differ diff --git a/SimonGame/imHardik1606/screenshots/gamePlay.png b/SimonGame/imHardik1606/screenshots/gamePlay.png new file mode 100644 index 000000000..7ebe85f3c Binary files /dev/null and b/SimonGame/imHardik1606/screenshots/gamePlay.png differ diff --git a/SimonGame/imHardik1606/screenshots/initialScreen.png b/SimonGame/imHardik1606/screenshots/initialScreen.png new file mode 100644 index 000000000..8a53b6667 Binary files /dev/null and b/SimonGame/imHardik1606/screenshots/initialScreen.png differ diff --git a/SimonGame/imHardik1606/script.js b/SimonGame/imHardik1606/script.js new file mode 100644 index 000000000..6c92d7a9a --- /dev/null +++ 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: ${highScore}`; + } + + setTimeout(levelUp, 1000); + } + } else { + h2.innerHTML = `Game Over! Your score was ${score}
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/style.css b/SimonGame/imHardik1606/style.css new file mode 100644 index 000000000..75bd359f9 --- /dev/null +++ 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; +} \ No newline at end of file