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/app.js b/SimonGame/imHardik1606/app.js new file mode 100644 index 000000000..6c92d7a9a --- /dev/null +++ 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: ${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/index.html b/SimonGame/imHardik1606/index.html new file mode 100644 index 000000000..6b9d96528 --- /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/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