diff --git a/Games/Guess_the_friends_name/Readme.md b/Games/Guess_the_friends_name/Readme.md new file mode 100644 index 0000000000..5da38736ad --- /dev/null +++ b/Games/Guess_the_friends_name/Readme.md @@ -0,0 +1,39 @@ +# **Guess_the_friends_name** + +--- + +
+ +## **Description 📃** +- Gameplay Overview: In “Guess the Friend's Name” players embark on a journey of memory and luck. player enters the names of four close friends into the game. The game then generates a random name from the list, and the player must use their intuition and knowledge about their friends to guess which name has been chosen. + +## **functionalities 🎮** +- random name generation +- fully responsive design +- user friendly +- assessment availability +
+ +## **How to play? 🕹️** + +How to Play: + +-Enter Names: Start by typing in the names of four friends you know well. + +-Make Your Guess: Your task is to select the name you believe the game randomly chose. + +-Reveal & Score: After making your selection,If your guess was right, you score points; if not, better luck next time! + +
+ +## **Screenshots 📸** + +
+ +![image](images/guess_name.png) + +![image](images/Name.png) + +
+ +## **Working video 📹** \ No newline at end of file diff --git a/Games/Guess_the_friends_name/images/Name.png b/Games/Guess_the_friends_name/images/Name.png new file mode 100644 index 0000000000..ccf0ddae39 Binary files /dev/null and b/Games/Guess_the_friends_name/images/Name.png differ diff --git a/Games/Guess_the_friends_name/images/guess_name.png b/Games/Guess_the_friends_name/images/guess_name.png new file mode 100644 index 0000000000..8e5d2e8908 Binary files /dev/null and b/Games/Guess_the_friends_name/images/guess_name.png differ diff --git a/Games/Guess_the_friends_name/index.html b/Games/Guess_the_friends_name/index.html new file mode 100644 index 0000000000..458b960734 --- /dev/null +++ b/Games/Guess_the_friends_name/index.html @@ -0,0 +1,40 @@ + + + + + + + Guess the Friend Game + + + + +
+

Guess the Friend's Name

+
+
+
+ + + + +
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/Games/Guess_the_friends_name/script.js b/Games/Guess_the_friends_name/script.js new file mode 100644 index 0000000000..80ba81cc6e --- /dev/null +++ b/Games/Guess_the_friends_name/script.js @@ -0,0 +1,37 @@ +let friends = []; + +function startGame() { + friends = [ + document.getElementById('friend1').value, + document.getElementById('friend2').value, + document.getElementById('friend3').value, + document.getElementById('friend4').value + ]; + + if (friends.some(name => name === '')) { + alert('Please enter all four friend names.'); + return; + } + + document.querySelector('.input-section').style.display = 'none'; + document.querySelector('.game-section').style.display = 'block'; +} + +function makeGuess() { + const guess = document.getElementById('guess').value; + const randomFriend = friends[Math.floor(Math.random() * friends.length)]; + + if (guess === randomFriend) { + document.getElementById('result').textContent = `You guessed right! The name was ${randomFriend}.`; + } else { + document.getElementById('result').textContent = 'Try again!'; + } +} + +function exitGame() { + document.querySelector('.game-section').style.display = 'none'; + document.querySelector('.input-section').style.display = 'block'; + document.getElementById('result').textContent = ''; + document.getElementById('guess').value = ''; + friends = []; +} diff --git a/Games/Guess_the_friends_name/styles.css b/Games/Guess_the_friends_name/styles.css new file mode 100644 index 0000000000..87bbd59a00 --- /dev/null +++ b/Games/Guess_the_friends_name/styles.css @@ -0,0 +1,93 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + text-align: center; + padding: 50px; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + display: inline-block; +} + + +button { + margin-top: 10px; + padding: 10px 20px; + background-color: #28a745; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #218838; +} + +#result { + margin-top: 20px; + font-size: 1.2em; +} + +#guess{ + width:100%; +} + +.box-input { + position: relative; + } + + .border { + background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00); + box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.5), + 25px -10px 30px -5px rgba(255, 0, 212, 0.5), + 25px 10px 30px -5px rgba(255, 174, 0, 0.5), + -25px 10px 30px -5px rgba(255, 230, 0, 0.5); + padding: 4px; + } + + .input { + background-color: #212121; + max-width: 250px; + height: 40px; + padding: 0 19px 0 10px; + font-size: 1.1em; + position: relative; + border: none; + color: white; + outline: 0; + overflow: hidden; + } + + .box-input::after, + .box-input::before { + content: ""; + width: 0px; + height: 30px; + position: absolute; + z-index: -1; + } + + .box-input::after { + bottom: 0; + right: 0; + } + + .box-input::before { + top: 0; + left: 0; + } + + .input::placeholder { + transition: all 0.5s ease-in, transform 0.2s ease-in 0.6s; + } + + .input:focus::placeholder { + padding-left: 165px; + transform: translateY(-50px); + } + \ No newline at end of file