Merge pull request #5032 from shellygarg10/animal_guessing

[new game] : animal name guessing game added
kunjgit · Aug 1, 2024 · fb59995 · fb59995
2 parents 1bf8386 + 911d808
commit fb59995
Show file tree

Hide file tree

Showing 9 changed files with 528 additions and 0 deletions.
diff --git a/Games/Animal_Name_Guessing/Readme.md b/Games/Animal_Name_Guessing/Readme.md
@@ -0,0 +1,20 @@
+# Animal_Name_Guessing_Game
+
+--- 
+
+## **Functionality**
+
+-  User have to guess to animal name by asking a question
+- Right answer 5m and for wrong answer loos 1 chance to play!
+
+<br>
+
+## **Tech Stack 🎮**
+
+- HTML
+- CSS
+- JS
+
+<br>
+
+### **Thanks for using this project**
diff --git a/Games/Animal_Name_Guessing/game.html b/Games/Animal_Name_Guessing/game.html
@@ -0,0 +1,31 @@
+<!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">
+   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;900&display=swap" rel="stylesheet">
+   <title>What Animal? | Game</title>
+</head>
+
+<body>
+
+   <div class="container">
+
+      <h4 id="question-number">Question <span id="counter">1</span></h4>
+      <div id="board">
+         <h4>Score: <span id="score">0</span></h4>
+         <h4>Guesses left: <span id="guesses">3</span></h4>
+      </div>
+      <h1 id="question"></h2>
+      <input type="text" id="input">
+      <p id="error"></p>
+      <button id="submit">Submit</button>
+      <button id="next" disabled>Next</button>
+
+   </div>
+
+   <script src="js/script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Animal_Name_Guessing/index.html b/Games/Animal_Name_Guessing/index.html
@@ -0,0 +1,44 @@
+<!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">
+      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;900&display=swap" rel="stylesheet">
+      <link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
+			integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
+			crossorigin="anonymous"
+		/>
+      <title>What Animal? | Home</title>
+   </head>
+
+   <body>
+         <div class="container">
+            <script src="js/script.js"></script>
+            <div class="header">
+               <h1>What Animal?</h1>
+               <h3>An Animal Guessing Game</h3>
+            </div>
+
+            <div class="instructions">
+               <h3>Instructions</h3>
+               <p>· Type in only the name of the animal in singular form. Eg: dog, cat, lion, etc</p>
+               <p>· Each correct answer is 5 points </p>
+               <p>· You have 3 chances to guess the correct animal </p>
+               <p>· If you fail to guess the correct animal after your three chances are up, you lose 1 point </p>
+               <p>· Use the submit button or your enter key to submit an answer</p>
+               <a class="btn" href="game.html">Start Game</a>
+            </div>
+
+
+                  </div>
+               </div>
+
+            </footer>
+
+         </div>
+   </body>
+
+</html>
diff --git a/Games/Animal_Name_Guessing/js/results.js b/Games/Animal_Name_Guessing/js/results.js
@@ -0,0 +1,29 @@
+const scoreDisplay = document.querySelector('#final-score'), 
+      score = localStorage.getItem('finalScore'),
+      scoreMessage = document.querySelector('#message')
+
+scoreDisplay.textContent = score
+
+if (score == 40){
+   scoreMessage.innerHTML = 'Great. You got all correct!'
+}
+
+if (score < 40 && score > 29){
+   scoreMessage.innerHTML = "Good job. You almost got it all."
+}
+
+if (score < 30 && score > 19){
+   scoreMessage.innerHTML = "Nice game. You did alright."
+}
+
+if (score < 20 && score > 9){
+   scoreMessage.innerHTML = "Fair try. You can always do better."
+}
+
+if (score == 0){
+   scoreMessage.innerHTML = "Ouch, you got none correct."
+}
+
+if (score < 0){
+   scoreMessage.innerHTML = "Uhm... What went wrong?"
+}
diff --git a/Games/Animal_Name_Guessing/js/script.js b/Games/Animal_Name_Guessing/js/script.js
@@ -0,0 +1,174 @@
+let score,
+ 	 answer,
+ 	 chances,
+	  currentQuestion;
+
+const question = document.querySelector("#question"),
+		counter = document.querySelector("#counter"),
+		message = document.querySelector("#error"),
+		submitButton = document.querySelector("#submit"),
+		nextButton = document.querySelector("#next"),
+		scoreDisplay = document.querySelector("#score"),
+		input = document.querySelector('#input'),
+		guessDisplay = document.querySelector('#guesses');
+
+const database = [
+	{
+		question: "What animal is the tallest?",
+		answer: "giraffe",
+	},	
+	{
+		question: "What animal's baby is called a 'joey'?",
+		answer: "kangaroo",
+	},
+	{
+		question: "What animal is the fastest on land?",
+		answer: "cheetah",
+	},
+	{
+		question: "What animal can sleep for 3 years?",
+		answer: "snail",
+	},
+	{
+		question: "What animal's group name is 'Crash'?",
+		answer: "rhinoceros",
+	},
+	{
+		question: "What animal makes a neighing sound?",
+		answer: "horse",
+	},
+	{
+		question: "What animal is the only flying mammal?",
+		answer: "bat",
+	},
+	{
+		question: "What animal has teeth in its stomach?",
+		answer: "lobster",
+	},
+];
+
+const init = () => {
+	score = 0;
+	currentQuestion = 0;
+	chances = 3;
+	displayQuestion();
+	checkAnswer();
+	next()
+};
+
+const displayQuestion = () => {
+	question.innerText = database[currentQuestion].question;
+	answer = database[currentQuestion].answer;
+};
+
+const checkAnswer = () => {
+
+	submitButton.addEventListener('click', function(){
+		checkInput()
+	})
+
+	document.querySelector('.container').addEventListener('keypress', function(e){
+		if (e.keyCode == 13){
+			checkInput()
+		}
+	})
+
+}
+
+const checkInput = () => {
+
+	if (!input.value){
+		showMessage('Please enter a value', 'red')
+		setTimeout(clearError, 2500)
+		return
+	}
+
+	if (typeof (input.value) == "number"){
+		showMessage('Numbers are invalid', 'red')
+		setTimeout(clearError, 2500)
+		return
+	}
+
+	if (input.value.toLowerCase() === answer){
+		input.classList.remove('bad')
+		input.classList.add('good')
+		input.disabled = true
+		showMessage(`${answer} is correct. Well-done!`, 'green')
+		submitButton.disabled = true
+		nextButton.disabled = false
+		score += 5
+		scoreDisplay.textContent = score
+		// input.setAttribute.disabled = 'true'
+		answeredCorrect = true
+	} 
+
+	else {
+
+		chances -= 1
+		guessDisplay.textContent = chances
+
+		if (chances === 0) {
+			input.disabled = true
+			showMessage(`You've run out of chances, the answer is ${answer}`, 'red')
+			submitButton.disabled = true
+			nextButton.disabled = false
+			score -= 1
+			scoreDisplay.textContent = score
+		} 
+		else {
+			showMessage(`${input.value} is wrong. Try again`, '#db1414')
+			input.classList.add('bad')
+			submitButton.disabled = true
+			setTimeout(clearError, 2500)
+		}
+	}
+}
+
+const next = () => {
+
+	nextButton.addEventListener('click', function(){
+
+		if (currentQuestion === (database.length - 1)){
+			localStorage.setItem('finalScore', score)
+			reset()
+			return window.location.href = "results.html"	 
+		}
+
+		if (currentQuestion === (database.length - 2)){
+			nextButton.textContent = 'Finish'
+		}
+
+		reset()
+		currentQuestion++
+		displayQuestion()
+		counter.textContent = currentQuestion + 1
+
+	})
+}
+
+
+const showMessage = (messageContent, messageColor) => {
+	message.textContent = messageContent;
+	message.style.color = messageColor
+}
+
+const clearError = () => {
+	message.textContent = ''
+	input.classList.remove('bad')
+	input.value = ''
+	submitButton.disabled = false
+}
+
+const reset = () => {
+	nextButton.disabled = true
+	submitButton.disabled = false
+	input.disabled = false
+	input.classList.remove('good')
+	input.value = ''
+	message.textContent = ''
+	chances = 3
+	guessDisplay.textContent = chances
+}
+
+
+init();
diff --git a/Games/Animal_Name_Guessing/results.html b/Games/Animal_Name_Guessing/results.html
@@ -0,0 +1,36 @@
+<!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">
+      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;900&display=swap" rel="stylesheet">
+      <link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
+			integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
+			crossorigin="anonymous"
+		/>
+      <title>What Animal? | Results</title>
+   </head>
+
+   <body>
+         <div class="container">
+
+            <div class="header">
+               <h1>What Animal?</h1>
+               <h3>An Animal Guessing Game</h3>
+            </div>
+
+            <div class="instructions">
+               <h4>Your score: <span id="final-score"></span></h4>
+               <p id="message"></p>
+               <a class="btn" href="game.html">Play Again</a>
+            </div>
+
+         </div>
+
+      <script src="js/results.js"></script>
+   </body>
+
+</html>