diff --git a/index.js b/index.js index 21a25f91..431b4cd8 100644 --- a/index.js +++ b/index.js @@ -1,21 +1,17 @@ - - function filterProjects() { const input = document.getElementById('searchInput'); const filter = input.value.toLowerCase(); - const rows = document.querySelector('tbody').querySelectorAll("tr"); // Choose All Rows That Are Present In Table Body - console.log(rows) + const rows = document.querySelector('tbody').querySelectorAll('tr'); // Choose all rows in the table body let hasResults = false; - rows.forEach(table => { - console.log(table) - const projectName = table.querySelector('.').innerText.toLowerCase(); - - if (projectName.includes(filter)) { - table.style.display = ''; + rows.forEach(row => { + const projectName = row.querySelector('.project-name')?.innerText.toLowerCase(); + + if (projectName && projectName.includes(filter)) { + row.style.display = ''; hasResults = true; - } else if (table.id !== 'table-subheader') { - table.style.display = 'none'; + } else if (row.id !== 'table-subheader') { + row.style.display = 'none'; } }); @@ -33,83 +29,74 @@ function filterProjects() { } // Update Navbar for Login Status -const buttons = document.getElementsByClassName("buttons")[0]; // Refers to the section on NavBar where the Buttons will get appended depending on Login Status - +const buttons = document.getElementsByClassName('buttons')[0]; // Refers to the section on NavBar where buttons will get appended based on login status function updateNavbar() { const username = localStorage.getItem('username'); if (username) { - // Buttons to append if login is present - buttons.innerHTML = - ` + buttons.innerHTML = ` - - GitHub + + GitHub - // ----------------------added contributors to navbar--------------------- - + Contributors - - ------------------------------------------------------------------- // ` + `; document.getElementById('logout').addEventListener('click', () => { localStorage.removeItem('username'); updateNavbar(); }); } else { - // buttons to append if login not present - buttons.innerHTML = ` + buttons.innerHTML = ` + Contributors - - GitHub - - - - Log in - ` + + GitHub + + + Log in + `; } } -document.addEventListener('DOMContentLoaded', updateNavbar()); - -document.addEventListener('DOMContentLoaded', fillTable()); - -function fillTable(){ +// Populate the table with project data +function fillTable() { + const data = [ + ["Day 1","To-Do List"," /public/TO_DO_LIST/todolist.html"],["Day 2","Digital Clock"," /public/digital_clock/digitalclock.html"],["Day 3","Indian Flag"," /public/indianflag/flag.html"],["Day 4","Dropdown Nav Bar"," /public/dropdown_navbar/index.html"],["Day 5","Animated Cursor"," /public/Animated-cursor/animated-cursor.html"],["Day 6","Auto Background Image Slider"," /public/Background-Image-sider/slider.html"],["Day 7","Typewriter"," /public/typewriter/typewriter.html"],["Day 8","Parallel-X Website"," /public/Parallel-x%20website/parallal.html"],["Day 9","Captcha Generator"," /public/captcha/captcha.html"],["Day 10","QR Code Generator"," /public/qr%20generator/qr.html"],["Day 11","Serve Website Using Express"," /public/index.html"],["Day 12","Nodemailer Contact Form"," /public/gmail_nodemailer/public/mail.html"],["Day 13","Login Form Using MERN","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/loginusingmern"],["Day 14","File Uploader","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/file_uploader"],["Day 15","Progress Bar"," /public/progress_bar/progress_bar.html"],["Day 16","Scroll Bar CSS"," /public/index.html"],["Day 17","Slider Using Swiper API"," /public/slider%20box/index.html"],["Day 18","Carousel Solar System"," /public/carousal/index.html"],["Day 19","Planto"," /public/plantwebsite/plant.html"],["Day 20","EveSparks"," /public/https://evesparks.onrender.com/"],["Day 21","Video BG Slider Using React"," /public/https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/travel_website"],["Day 22","Page Loader"," /public/pageloader/pageloader.html"],["Day 23","Jarvis Virtual Assistant"," /public/Jarvis-AI-main/index.html"],["Day 24","Chat Bot"," /public/AI%20ChatBot/chatbot.html"],["Day 25","Tic-Tac-Toe"," /public/TicTacToe/index.html"],["Day 26","Maze Game"," /public/Maze-Game-main/index.html"],["Day 27","Memory Game"," /public/MemoryGame/index.html"],["Day 28","Wordle"," /public/WORDLE/index.html"],["Day 29","Snake Game"," /public/snake_game/index.html"],["Day 30","Flappy-bird-game"," /public/Flappy-bird-main/index.html"],["Day 31","Password Manager"," /public/password%20manager/index.html"],["DAY-32","Missionaries & Cannibals"," /public/Missionaries&Cannibals/index.html"],["Day 33","Weather Forcasting"," /public/Weather%20Forcasting/index.html"],["Day 34","Email Validator"," /public/email%20validator/index.html"],["Day 35","Vanilla-JavaScript-Calculator"," /public/Vanilla-JavaScript-Calculator-master/index.html"],["Day 36","Medical App"," /public/Medical_App/index.html"],["Day 37","2048 Game"," /public/2048_game/index.html"],["Day 38","Github Profile Finder","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/github_profile_finder"],["Day 39","Notes App"," /public/notes-app/index.html"],["Day 40","Analog Clock"," /public/AnalogClock/index.html"],["Day 41","Scroll Dark Game"," /public/Scroll%20Game%20Dark%20Run/index.html"],["Day 42","Amazon App"," /public/Amazon_Clone/index.html"],["Day 43","Password Generator"," /public/Password_Generator/index.html"],["Day 44","BMI Calculator"," /public/BMI_Calculator/index.html"],["Day 45","Black Jack"," /public/BlackJack/blackJ.html"],["Day 46","Palindrome Generator"," /public/Palindrome_Generator/index.html"],["Day 47","Ping Pong Game"," /public/ping/index.html"],["Day 48","TextToVoiceConverter"," /public/TextToVoiceConverter/index.html"],["Day 49","Url Shortener","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/url_shortener"],["Day 50","Recipe Genie","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Recipe-Genie"],["Day 51","Netflix Landing Page Clone"," /public/Netflix_Cloning/Index.html"],["Day 52","ClimaCode"," /public/ClimaCode%202.0/index.html"],["Day 53","E-Commerce Website with Simple Cart Functionality"," /public/e-commerce_cart/index.html"],["Day 54","Budget Tracker"," /public/Budget%20Tracker/index.html"],["Day 55","Cricket Game"," /public/cricket/index.html"],["Day 56","Pastebin using svelte","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/pastebin"],["Day 57","Glowing Social Media Icons"," /public/Social%20Media%20Glowing/index.html"],["Day 58","Music App"," /public/Music%20App/index.html"],["Day 59","Blog Page"," /public/Blog%20Page/index.html"],["Day 60","Marketing template website"," /public/marketing_website/index.html"],["Day 61","Hologram Button"," /public/Holo%20Button/index.html"],["Day 62","Solar System Explorer"," /public/Solar%20System%20Explorer%20in%20CSS%20only%20haml/template.html"],["Day 63","Image to Text App"," /public/Image-To-Text-App/index.html"],["Day 64","Zomato-clone"," /public/zomato-clone/zomato.html"],["Day 65","The Cube"," /public/The%20Cube/index.html"],["Day 66","Flask Authentication App","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/flask_auth_app/README.md"],["Day 67","Blog-Website"," /public/blog/main.html"],["Day 68","3d Rotating Card"," /public/3d%20cards/index.html"],["Day 69","Spotify Clone Project"," /public/spotify-clone%20-project/index.html"],["Day 70","Insect-Catch_Game"," /public/Insect-Catch-Game/index.html"],["Day 71","Quotely Laughs"," /public/Quotely-Laughs/index.html"],["Day 72","Contact Book","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Contact%20Book/README.md"],["Day 73","Candy_Crush_Game"," /public/Candy_Crush_Game/index.html"],["Day 74","Stock Profit Calculator"," /public/Stock-Profit-Calculator/index.html"],["Day 75","code-space-game project"," /public/code-jump-space-game/index.html"],["Day 76","Animated Searchbar"," /public/Animated%20Searchbar/index.html"],["Day 77","Rock-Paper-Scissor-game project"," /public/Stone-Paper-Scissor/index.html"],["Day 78","NPM Package Search"," /public/NPM%20Package%20Search/index.html"],["Day 79","Linkedin Homepage Clone"," /public/Linkedin-Clone/index.html"],["Day 80","Resume Studio"," /public/ResumeStudio/index.html"],["Day 81","Simon Says Game"," /public/Simon_Says_Game/index.html"],["Day 82","Love Calculator Game"," /public/Love-Calculator/index.html"],["Day 83","Exchange Currency"," /public/Exchange_Currency/index.html"],["Day 84","Lights Out Puzzle","/public/Lights_Out_Puzzle/index.html"],["Day 85", "Image Search Engine", "/public/Image Search Engine/index.html"],["Day 86","Profile Card","/public/3d profile Card/index.html"],["Day 87", "Breakout game", "/public/Breakout game/index.html"],["Day 88","Job dashboard","/public/Job dashboard/jobs.html"],["Day 89","N-Queen","/public/N_Queen/index.html"],["Day 90","Kowledge Quiz","public/knowledge quiz/index1.html"],["Day 91","Voting Application Backend", "https://github.com/dhairyagothi/100_days_100_web_project/tree/Main/public"],["Day 92","Slide puzzle Game","public/Slide puzzle Game/index.html"],["Day 93","TextUtils", "/public/Textutils/src/App.js"],["Day 94","Hangman Game","./public/HangmanGame/index.html"] + ]; + + const tbody = document.getElementById('tableBody'); + + data.forEach(e => { + const row = document.createElement('tr'); + const days = document.createElement('td'); + const nameP = document.createElement('td'); + const link = document.createElement('td'); + const a = document.createElement('a'); + + days.innerText = e[0]; + nameP.innerText = e[1]; + a.href = e[2]; + a.innerText = 'Here'; + nameP.classList.add('project-name'); + + link.appendChild(a); + row.appendChild(days); + row.appendChild(nameP); + row.appendChild(link); + + tbody.appendChild(row); + }); +} - data = [["Day 1","To-Do List"," /public/TO_DO_LIST/todolist.html"],["Day 2","Digital Clock"," /public/digital_clock/digitalclock.html"],["Day 3","Indian Flag"," /public/indianflag/flag.html"],["Day 4","Dropdown Nav Bar"," /public/dropdown_navbar/index.html"],["Day 5","Animated Cursor"," /public/Animated-cursor/animated-cursor.html"],["Day 6","Auto Background Image Slider"," /public/Background-Image-sider/slider.html"],["Day 7","Typewriter"," /public/typewriter/typewriter.html"],["Day 8","Parallel-X Website"," /public/Parallel-x%20website/parallal.html"],["Day 9","Captcha Generator"," /public/captcha/captcha.html"],["Day 10","QR Code Generator"," /public/qr%20generator/qr.html"],["Day 11","Serve Website Using Express"," /public/index.html"],["Day 12","Nodemailer Contact Form"," /public/gmail_nodemailer/public/mail.html"],["Day 13","Login Form Using MERN","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/loginusingmern"],["Day 14","File Uploader","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/file_uploader"],["Day 15","Progress Bar"," /public/progress_bar/progress_bar.html"],["Day 16","Scroll Bar CSS"," /public/index.html"],["Day 17","Slider Using Swiper API"," /public/slider%20box/index.html"],["Day 18","Carousel Solar System"," /public/carousal/index.html"],["Day 19","Planto"," /public/plantwebsite/plant.html"],["Day 20","EveSparks"," /public/https://evesparks.onrender.com/"],["Day 21","Video BG Slider Using React"," /public/https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/travel_website"],["Day 22","Page Loader"," /public/pageloader/pageloader.html"],["Day 23","Jarvis Virtual Assistant"," /public/Jarvis-AI-main/index.html"],["Day 24","Chat Bot"," /public/AI%20ChatBot/chatbot.html"],["Day 25","Tic-Tac-Toe"," /public/TicTacToe/index.html"],["Day 26","Maze Game"," /public/Maze-Game-main/index.html"],["Day 27","Memory Game"," /public/MemoryGame/index.html"],["Day 28","Wordle"," /public/WORDLE/index.html"],["Day 29","Snake Game"," /public/snake_game/index.html"],["Day 30","Flappy-bird-game"," /public/Flappy-bird-main/index.html"],["Day 31","Password Manager"," /public/password%20manager/index.html"],["DAY-32","Missionaries & Cannibals"," /public/Missionaries&Cannibals/index.html"],["Day 33","Weather Forcasting"," /public/Weather%20Forcasting/index.html"],["Day 34","Email Validator"," /public/email%20validator/index.html"],["Day 35","Vanilla-JavaScript-Calculator"," /public/Vanilla-JavaScript-Calculator-master/index.html"],["Day 36","Medical App"," /public/Medical_App/index.html"],["Day 37","2048 Game"," /public/2048_game/index.html"],["Day 38","Github Profile Finder","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/github_profile_finder"],["Day 39","Notes App"," /public/notes-app/index.html"],["Day 40","Analog Clock"," /public/AnalogClock/index.html"],["Day 41","Scroll Dark Game"," /public/Scroll%20Game%20Dark%20Run/index.html"],["Day 42","Amazon App"," /public/Amazon_Clone/index.html"],["Day 43","Password Generator"," /public/Password_Generator/index.html"],["Day 44","BMI Calculator"," /public/BMI_Calculator/index.html"],["Day 45","Black Jack"," /public/BlackJack/blackJ.html"],["Day 46","Palindrome Generator"," /public/Palindrome_Generator/index.html"],["Day 47","Ping Pong Game"," /public/ping/index.html"],["Day 48","TextToVoiceConverter"," /public/TextToVoiceConverter/index.html"],["Day 49","Url Shortener","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/url_shortener"],["Day 50","Recipe Genie","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Recipe-Genie"],["Day 51","Netflix Landing Page Clone"," /public/Netflix_Cloning/Index.html"],["Day 52","ClimaCode"," /public/ClimaCode%202.0/index.html"],["Day 53","E-Commerce Website with Simple Cart Functionality"," /public/e-commerce_cart/index.html"],["Day 54","Budget Tracker"," /public/Budget%20Tracker/index.html"],["Day 55","Cricket Game"," /public/cricket/index.html"],["Day 56","Pastebin using svelte","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/pastebin"],["Day 57","Glowing Social Media Icons"," /public/Social%20Media%20Glowing/index.html"],["Day 58","Music App"," /public/Music%20App/index.html"],["Day 59","Blog Page"," /public/Blog%20Page/index.html"],["Day 60","Marketing template website"," /public/marketing_website/index.html"],["Day 61","Hologram Button"," /public/Holo%20Button/index.html"],["Day 62","Solar System Explorer"," /public/Solar%20System%20Explorer%20in%20CSS%20only%20haml/template.html"],["Day 63","Image to Text App"," /public/Image-To-Text-App/index.html"],["Day 64","Zomato-clone"," /public/zomato-clone/zomato.html"],["Day 65","The Cube"," /public/The%20Cube/index.html"],["Day 66","Flask Authentication App","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/flask_auth_app/README.md"],["Day 67","Blog-Website"," /public/blog/main.html"],["Day 68","3d Rotating Card"," /public/3d%20cards/index.html"],["Day 69","Spotify Clone Project"," /public/spotify-clone%20-project/index.html"],["Day 70","Insect-Catch_Game"," /public/Insect-Catch-Game/index.html"],["Day 71","Quotely Laughs"," /public/Quotely-Laughs/index.html"],["Day 72","Contact Book","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Contact%20Book/README.md"],["Day 73","Candy_Crush_Game"," /public/Candy_Crush_Game/index.html"],["Day 74","Stock Profit Calculator"," /public/Stock-Profit-Calculator/index.html"],["Day 75","code-space-game project"," /public/code-jump-space-game/index.html"],["Day 76","Animated Searchbar"," /public/Animated%20Searchbar/index.html"],["Day 77","Rock-Paper-Scissor-game project"," /public/Stone-Paper-Scissor/index.html"],["Day 78","NPM Package Search"," /public/NPM%20Package%20Search/index.html"],["Day 79","Linkedin Homepage Clone"," /public/Linkedin-Clone/index.html"],["Day 80","Resume Studio"," /public/ResumeStudio/index.html"],["Day 81","Simon Says Game"," /public/Simon_Says_Game/index.html"],["Day 82","Love Calculator Game"," /public/Love-Calculator/index.html"],["Day 83","Exchange Currency"," /public/Exchange_Currency/index.html"],["Day 84","Lights Out Puzzle","/public/Lights_Out_Puzzle/index.html"],["Day 85", "Image Search Engine", "/public/Image Search Engine/index.html"],["Day 86","Profile Card","/public/3d profile Card/index.html"],["Day 87", "Breakout game", "/public/Breakout game/index.html"],["Day 88","Job dashboard","/public/Job dashboard/jobs.html"],["Day 89","N-Queen","/public/N_Queen/index.html"],["Day 90","Kowledge Quiz","public/knowledge quiz/index1.html"],["Day 91","Voting Application Backend", "https://github.com/dhairyagothi/100_days_100_web_project/tree/Main/public"],["Day 92","Slide puzzle Game","public/Slide puzzle Game/index.html"],["Day 93","TextUtils", "/public/Textutils/src/App.js"]] - - -// Table body - tbody = document.getElementById("tableBody") - - // ForEach Loop - data.forEach( e => { - - row = document.createElement("tr") // Table Row and The Three Table Data Elements - days = document.createElement("td") - nameP = document.createElement("td") - link = document.createElement("td") - a = document.createElement("a") - - - days.innerText = (e[0]) // Putting Data in the table data elements - nameP.innerText = (e[1]) - a.href = e[2] - a.innerText = "Here" - nameP.classList.add("project-name") // Added this class to search among the results - - - link.appendChild(a) // Appending elements to the document - row.appendChild(days) - row.appendChild(nameP) - row.appendChild(link) - - tbody.appendChild(row) - }) -} +document.addEventListener('DOMContentLoaded', () => { + updateNavbar(); + fillTable(); +}); diff --git a/public/HangmanGame/images/hangman-0.svg b/public/HangmanGame/images/hangman-0.svg new file mode 100644 index 00000000..4413c372 --- /dev/null +++ b/public/HangmanGame/images/hangman-0.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/HangmanGame/images/hangman-1.svg b/public/HangmanGame/images/hangman-1.svg new file mode 100644 index 00000000..700cf117 --- /dev/null +++ b/public/HangmanGame/images/hangman-1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/HangmanGame/images/hangman-2.svg b/public/HangmanGame/images/hangman-2.svg new file mode 100644 index 00000000..780d93b5 --- /dev/null +++ b/public/HangmanGame/images/hangman-2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/HangmanGame/images/hangman-3.svg b/public/HangmanGame/images/hangman-3.svg new file mode 100644 index 00000000..f51cf848 --- /dev/null +++ b/public/HangmanGame/images/hangman-3.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/HangmanGame/images/hangman-4.svg b/public/HangmanGame/images/hangman-4.svg new file mode 100644 index 00000000..1cc6ccfc --- /dev/null +++ b/public/HangmanGame/images/hangman-4.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/HangmanGame/images/hangman-5.svg b/public/HangmanGame/images/hangman-5.svg new file mode 100644 index 00000000..96158f99 --- /dev/null +++ b/public/HangmanGame/images/hangman-5.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/HangmanGame/images/hangman-6.svg b/public/HangmanGame/images/hangman-6.svg new file mode 100644 index 00000000..57d57212 --- /dev/null +++ b/public/HangmanGame/images/hangman-6.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/HangmanGame/images/lost.gif b/public/HangmanGame/images/lost.gif new file mode 100644 index 00000000..dc892b7d Binary files /dev/null and b/public/HangmanGame/images/lost.gif differ diff --git a/public/HangmanGame/images/victory.gif b/public/HangmanGame/images/victory.gif new file mode 100644 index 00000000..d33e5f83 Binary files /dev/null and b/public/HangmanGame/images/victory.gif differ diff --git a/public/HangmanGame/index.html b/public/HangmanGame/index.html new file mode 100644 index 00000000..1cfb203b --- /dev/null +++ b/public/HangmanGame/index.html @@ -0,0 +1,34 @@ + + + + + + Hangman Game + + + + + +

Hangman Game

+
+
+ Game Over Animation +

Game Over!

+

The correct word was: rainbow

+ +
+
+
+
+ Hangman Image +

Hangman Game

+
+
+ +

Hint:

+

Incorrect guesses:

+
+
+
+ + diff --git a/public/HangmanGame/script.js b/public/HangmanGame/script.js new file mode 100644 index 00000000..d6ab3641 --- /dev/null +++ b/public/HangmanGame/script.js @@ -0,0 +1,328 @@ +const wordList = [ + { + word: "guitar", + hint: "A musical instrument with strings." + }, + { + word: "oxygen", + hint: "A colorless, odorless gas essential for life." + }, + { + word: "mountain", + hint: "A large natural elevation of the Earth's surface." + }, + { + word: "painting", + hint: "An art form using colors on a surface to create images or expression." + }, + { + word: "astronomy", + hint: "The scientific study of celestial objects and phenomena." + }, + { + word: "football", + hint: "A popular sport played with a spherical ball." + }, + { + word: "chocolate", + hint: "A sweet treat made from cocoa beans." + }, + { + word: "butterfly", + hint: "An insect with colorful wings and a slender body." + }, + { + word: "history", + hint: "The study of past events and human civilization." + }, + { + word: "pizza", + hint: "A savory dish consisting of a round, flattened base with toppings." + }, + { + word: "jazz", + hint: "A genre of music characterized by improvisation and syncopation." + }, + { + word: "camera", + hint: "A device used to capture and record images or videos." + }, + { + word: "diamond", + hint: "A precious gemstone known for its brilliance and hardness." + }, + { + word: "adventure", + hint: "An exciting or daring experience." + }, + { + word: "science", + hint: "The systematic study of the structure and behavior of the physical and natural world." + }, + { + word: "bicycle", + hint: "A human-powered vehicle with two wheels." + }, + { + word: "sunset", + hint: "The daily disappearance of the sun below the horizon." + }, + { + word: "coffee", + hint: "A popular caffeinated beverage made from roasted coffee beans." + }, + { + word: "dance", + hint: "A rhythmic movement of the body often performed to music." + }, + { + word: "galaxy", + hint: "A vast system of stars, gas, and dust held together by gravity." + }, + { + word: "orchestra", + hint: "A large ensemble of musicians playing various instruments." + }, + { + word: "volcano", + hint: "A mountain or hill with a vent through which lava, rock fragments, hot vapor, and gas are ejected." + }, + { + word: "novel", + hint: "A long work of fiction, typically with a complex plot and characters." + }, + { + word: "sculpture", + hint: "A three-dimensional art form created by shaping or combining materials." + }, + { + word: "symphony", + hint: "A long musical composition for a full orchestra, typically in multiple movements." + }, + { + word: "architecture", + hint: "The art and science of designing and constructing buildings." + }, + { + word: "ballet", + hint: "A classical dance form characterized by precise and graceful movements." + }, + { + word: "astronaut", + hint: "A person trained to travel and work in space." + }, + { + word: "waterfall", + hint: "A cascade of water falling from a height." + }, + { + word: "technology", + hint: "The application of scientific knowledge for practical purposes." + }, + { + word: "rainbow", + hint: "A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light." + }, + { + word: "universe", + hint: "All existing matter, space, and time as a whole." + }, + { + word: "piano", + hint: "A musical instrument played by pressing keys that cause hammers to strike strings." + }, + { + word: "vacation", + hint: "A period of time devoted to pleasure, rest, or relaxation." + }, + { + word: "rainforest", + hint: "A dense forest characterized by high rainfall and biodiversity." + }, + { + word: "theater", + hint: "A building or outdoor area in which plays, movies, or other performances are staged." + }, + { + word: "telephone", + hint: "A device used to transmit sound over long distances." + }, + { + word: "language", + hint: "A system of communication consisting of words, gestures, and syntax." + }, + { + word: "desert", + hint: "A barren or arid land with little or no precipitation." + }, + { + word: "sunflower", + hint: "A tall plant with a large yellow flower head." + }, + { + word: "fantasy", + hint: "A genre of imaginative fiction involving magic and supernatural elements." + }, + { + word: "telescope", + hint: "An optical instrument used to view distant objects in space." + }, + { + word: "breeze", + hint: "A gentle wind." + }, + { + word: "oasis", + hint: "A fertile spot in a desert where water is found." + }, + { + word: "photography", + hint: "The art, process, or practice of creating images by recording light or other electromagnetic radiation." + }, + { + word: "safari", + hint: "An expedition or journey, typically to observe wildlife in their natural habitat." + }, + { + word: "planet", + hint: "A celestial body that orbits a star and does not produce light of its own." + }, + { + word: "river", + hint: "A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." + }, + { + word: "tropical", + hint: "Relating to or situated in the region between the Tropic of Cancer and the Tropic of Capricorn." + }, + { + word: "mysterious", + hint: "Difficult or impossible to understand, explain, or identify." + }, + { + word: "enigma", + hint: "Something that is mysterious, puzzling, or difficult to understand." + }, + { + word: "paradox", + hint: "A statement or situation that contradicts itself or defies intuition." + }, + { + word: "puzzle", + hint: "A game, toy, or problem designed to test ingenuity or knowledge." + }, + { + word: "whisper", + hint: "To speak very softly or quietly, often in a secretive manner." + }, + { + word: "shadow", + hint: "A dark area or shape produced by an object blocking the light." + }, + { + word: "secret", + hint: "Something kept hidden or unknown to others." + }, + { + word: "curiosity", + hint: "A strong desire to know or learn something." + }, + { + word: "unpredictable", + hint: "Not able to be foreseen or known beforehand; uncertain." + }, + { + word: "obfuscate", + hint: "To confuse or bewilder someone; to make something unclear or difficult to understand." + }, + { + word: "unveil", + hint: "To make known or reveal something previously secret or unknown." + }, + { + word: "illusion", + hint: "A false perception or belief; a deceptive appearance or impression." + }, + { + word: "moonlight", + hint: "The light from the moon." + }, + { + word: "vibrant", + hint: "Full of energy, brightness, and life." + }, + { + word: "nostalgia", + hint: "A sentimental longing or wistful affection for the past." + }, + { + word: "brilliant", + hint: "Exceptionally clever, talented, or impressive." + }, +]; + +const wordDisplay = document.querySelector(".word-display"); +const guessesText = document.querySelector(".guesses-text b"); +const keyboardDiv = document.querySelector(".keyboard"); +const hangmanImage = document.querySelector(".hangman-box img"); +const gameModal = document.querySelector(".game-modal"); +const playAgainBtn = gameModal.querySelector("button"); + +// variable bnaye hai game shuru krne ke +let currentWord, correctLetters, wrongGuessCount; +const maxGuesses = 6; + +const resetGame = () => { + correctLetters = []; + wrongGuessCount = 0; + hangmanImage.src = "images/hangman-0.svg"; + guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`; + wordDisplay.innerHTML = currentWord.split("").map(() => `
  • `).join(""); + keyboardDiv.querySelectorAll("button").forEach(btn => btn.disabled = false); + gameModal.classList.remove("show"); +} + +const getRandomWord = () => { + const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)]; + currentWord = word; + document.querySelector(".hint-text b").innerText = hint; + resetGame(); +} + +const gameOver = (isVictory) => { + const modalText = isVictory ? `You found the word:` : 'The correct word was:'; + gameModal.querySelector("img").src = `images/${isVictory ? 'victory' : 'lost'}.gif`; + gameModal.querySelector("h4").innerText = isVictory ? 'Congrats!' : 'Game Over!'; + gameModal.querySelector("p").innerHTML = `${modalText} ${currentWord}`; + gameModal.classList.add("show"); +} + +const initGame = (button, clickedLetter) => { + if(currentWord.includes(clickedLetter)) { + [...currentWord].forEach((letter, index) => { + if(letter === clickedLetter) { + correctLetters.push(letter); + wordDisplay.querySelectorAll("li")[index].innerText = letter; + wordDisplay.querySelectorAll("li")[index].classList.add("guessed"); + } + }); + } else { + wrongGuessCount++; + hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`; + } + button.disabled = true; + guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`; + + if(wrongGuessCount === maxGuesses) return gameOver(false); + if(correctLetters.length === currentWord.length) return gameOver(true); +} + +for (let i = 97; i <= 122; i++) { + const button = document.createElement("button"); + button.innerText = String.fromCharCode(i); + keyboardDiv.appendChild(button); + button.addEventListener("click", (e) => initGame(e.target, String.fromCharCode(i))); +} + +getRandomWord(); +playAgainBtn.addEventListener("click", getRandomWord); \ No newline at end of file diff --git a/public/HangmanGame/style.css b/public/HangmanGame/style.css new file mode 100644 index 00000000..b18a7159 --- /dev/null +++ b/public/HangmanGame/style.css @@ -0,0 +1,210 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Open Sans", sans-serif; +} + +/* Body Styling */ +body { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + background: #e29d1d; +} + +/* Header Styling */ +header { + position: absolute; + top: 20px; + width: 100%; + text-align: center; +} + +header h1 { + font-size: 3rem; + color: #333; + text-transform: uppercase; + letter-spacing: 2px; + text-shadow: 2px 2px 5px rgba(6, 2, 7, 0.3); + margin: 0; +} + +/* Main Content Styling */ +.container { + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: space-between; + width: 850px; + gap: 70px; + padding: 60px 40px; + background: #fff; + border-radius: 10px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + margin-top: 100px; /* Adjust for the header space */ +} + +.hangman-box img { + user-select: none; + max-width: 270px; +} + +.hangman-box h1 { + font-size: 1.45rem; + text-align: center; + margin-top: 20px; + text-transform: uppercase; +} + +.game-box .word-display { + gap: 10px; + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.word-display .letter { + width: 28px; + font-size: 2rem; + text-align: center; + font-weight: 600; + margin-bottom: 40px; + text-transform: uppercase; + border-bottom: 3px solid #000; +} + +.word-display .letter.guessed { + margin: -40px 0 35px; + border-color: transparent; +} + +.game-box h4 { + text-align: center; + font-size: 1.1rem; + font-weight: 500; + margin-bottom: 15px; +} + +.game-box h4 b { + font-weight: 600; +} + +.game-box .guesses-text b { + color: #ff0000; +} + +.game-box .keyboard { + display: flex; + gap: 5px; + flex-wrap: wrap; + margin-top: 40px; + justify-content: center; +} + +.keyboard button { + padding: 7px; + width: calc(100% / 9 - 5px); + color: #fff; + background: #e29d1d; + border: none; + outline: none; + cursor: pointer; + font-size: 1rem; + font-weight: 600; + border-radius: 4px; + text-transform: uppercase; +} + +.keyboard button[disabled] { + pointer-events: none; + opacity: 0.6; +} + +.keyboard button:hover { + background: #795615; +} + +/* Modal Styling */ +.game-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + opacity: 0; + pointer-events: none; + transition: opacity 0.4s ease; +} + +.game-modal.show { + opacity: 1; + pointer-events: auto; +} + +.game-modal .content { + padding: 30px; + max-width: 420px; + background: #fff; + border-radius: 10px; + text-align: center; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +.game-modal img { + max-width: 130px; + margin-bottom: 20px; +} + +.game-modal h4 { + font-size: 1.53rem; +} + +.game-modal p { + font-size: 1.15rem; + margin: 15px 0 30px; + font-weight: 500; +} + +.game-modal button { + padding: 12px 23px; + background: #e29d1d; + color: #fff; + font-size: 1rem; + font-weight: 600; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.game-modal button:hover { + background: #795615; +} + +/* Responsive Design */ +@media (max-width: 782px) { + .container { + flex-direction: column; + padding: 30px 15px; + align-items: center; + } + + .hangman-box img { + max-width: 200px; + } + + .game-box h4 { + font-size: 1rem; + } +}