diff --git a/Emoji_Charades/images/Emoji_Charades.jpg b/Emoji_Charades/images/Emoji_Charades.jpg new file mode 100644 index 0000000..66afd01 Binary files /dev/null and b/Emoji_Charades/images/Emoji_Charades.jpg differ diff --git a/Emoji_Charades/index.html b/Emoji_Charades/index.html new file mode 100644 index 0000000..5eda488 --- /dev/null +++ b/Emoji_Charades/index.html @@ -0,0 +1,23 @@ + + + + + + + Emoji Charades + + + + +

Emoji Charades

+

Score: 0

+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/Emoji_Charades/script.js b/Emoji_Charades/script.js new file mode 100644 index 0000000..b525f61 --- /dev/null +++ b/Emoji_Charades/script.js @@ -0,0 +1,99 @@ +// List of emoji and corresponding answers +const emojiList = [ + { emoji: "🍎🍏", answer: "apple" }, + { emoji: "🐱đŸļ", answer: "pets" }, + { emoji: "🌞🏖ī¸", answer: "summer" }, + { emoji: "📚🎓", answer: "education" }, + { emoji: "🍕🍔", answer: "fast food" }, + { emoji: "🌈đŸĻ„", answer: "rainbow" }, + { emoji: "🎮🕹ī¸", answer: "video games" }, + { emoji: "📷📸", answer: "photography" }, + { emoji: "🚗đŸ›Ŗī¸", answer: "road trip" }, + { emoji: "🌙🌟", answer: "starry night" }, + { emoji: "🎉🎊", answer: "celebration" }, + { emoji: "🌍🌱", answer: "environment" }, + { emoji: "☕📚", answer: "coffee and books" }, + { emoji: "đŸŒŧ🐝", answer: "flowers and bees" }, + { emoji: "đŸĻ🎂", answer: "ice cream cake" }, + { emoji: "đŸŒē🌴", answer: "tropical paradise" }, + { emoji: "🎈🎁", answer: "birthday party" }, + { emoji: "🌞🌊", answer: "sunshine and beach" }, + { emoji: "đŸŧ🎋", answer: "panda and bamboo" }, + { emoji: "🚀🌕", answer: "moon landing" }, + { emoji: "🎭🎟ī¸", answer: "theater tickets" }, + { emoji: "đŸ“ēđŸŋ", answer: "movie night" }, + { emoji: "đŸŒŽđŸŒ¯", answer: "taco and burrito" }, + { emoji: "đŸŽĩđŸŽļ", answer: "music festival" }, + { emoji: "🌈🍀", answer: "luck of the Irish" }, + { emoji: "📚📝", answer: "study notes" }, + { emoji: "🎮👾", answer: "video game characters" }, + { emoji: "🏰👑", answer: "royal castle" }, + { emoji: "🎤đŸŽĩ", answer: "singing performance" }, + { emoji: "🍩☕", answer: "coffee and donuts" }, + { emoji: "🐠🐟", answer: "underwater world" }, + { emoji: "🌴🏖ī¸", answer: "palm tree beach" }, + { emoji: "🎭đŸŽŦ", answer: "theater play" }, + { emoji: "🍔🍟", answer: "burger and fries" }, + { emoji: "🌞đŸŒģ", answer: "sunflower" }, + { emoji: "đŸŽŖ🐠", answer: "fishing" }, + { emoji: "📸🌇", answer: "cityscape photography" }, + { emoji: "🍩đŸĢ", answer: "chocolate donut" }, + { emoji: "🚲đŸŒŗ", answer: "bike ride in the park" }, + { emoji: "🎭🤡", answer: "circus performance" }, + { emoji: "🎉🎁", answer: "birthday celebration" }, + { emoji: "🏰👸", answer: "fairytale castle" }, + { emoji: "🌍✈ī¸", answer: "world travel" }, + { emoji: "đŸĻ🍨", answer: "ice cream delight" }, + { emoji: "🎮🕹ī¸", answer: "gaming session" }, + { emoji: "🎭🎟ī¸", answer: "theater show" }, + { emoji: "🌴🍹", answer: "tropical cocktail" }, +]; + +let currentQuestion; // Stores the current question +let score = 0; // Stores the player's score + +let winSound = new Audio("./sounds/correct.mp3"); +let wrongSound = new Audio("./sounds/wrong.mp3"); + +const guessInput = document.getElementById("guess-input"); + +// Select random emoji and set it as the current question +function selectRandomQuestion() { + currentQuestion = emojiList[Math.floor(Math.random() * emojiList.length)]; + document.getElementById("emoji").textContent = currentQuestion.emoji; +} + +guessInput.addEventListener("keypress", function (e) { + // If the user presses the "Enter" key on the keyboard + if (e.key === "Enter") { + e.preventDefault(); + document.getElementById("submit-btn").click(); + } +}); + +// Get user input and compare with the answer +document.getElementById("submit-btn").addEventListener("click", function () { + const resultDiv = document.getElementById("result"); + + const userGuess = guessInput.value.toLowerCase(); + const answer = currentQuestion.answer.toLowerCase(); + + if (userGuess === answer) { + winSound.play(); + resultDiv.textContent = "Correct!"; + resultDiv.style.color = "green"; + score++; + document.getElementById("score").textContent = score; + } else { + wrongSound.play(); + resultDiv.textContent = "Incorrect. Try again!"; + resultDiv.style.color = "red"; + } + + // Reset input field and select new random question + guessInput.value = ""; + selectRandomQuestion(); +}); + +// Call selectRandomQuestion() when the page loads +window.addEventListener("load", selectRandomQuestion); diff --git a/Emoji_Charades/sounds/correct.mp3 b/Emoji_Charades/sounds/correct.mp3 new file mode 100644 index 0000000..5c82f39 Binary files /dev/null and b/Emoji_Charades/sounds/correct.mp3 differ diff --git a/Emoji_Charades/sounds/wrong.mp3 b/Emoji_Charades/sounds/wrong.mp3 new file mode 100644 index 0000000..164e96e Binary files /dev/null and b/Emoji_Charades/sounds/wrong.mp3 differ diff --git a/Emoji_Charades/style.css b/Emoji_Charades/style.css new file mode 100644 index 0000000..d892fb9 --- /dev/null +++ b/Emoji_Charades/style.css @@ -0,0 +1,56 @@ +body { + text-align: center; + font-family: Arial, sans-serif; + background-image: url("./images/Emoji_Charades.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +h1 { + color: #e57c23; + margin-top: 20px; +} + +#emoji-container { + font-size: 72px; + margin: 50px 0; +} + +#guess-input { + padding: 12px; + font-size: 16px; + width: 300px; + margin: 10px; +} + +.score { + color: #025464; +} + +#submit-btn { + padding: 12px 20px; + font-size: 16px; + background-color: #bebb0a; + color: #fff; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#submit-btn:hover { + background-color: #fffb09; +} + +#result { + margin-top: 20px; + font-weight: bold; + font-size: 21px; + color: #e8aa42; +} + +#score { + color: #e8aa42; + font-weight: bold; + font-size: 24px; +}