diff --git a/NumberGuessingGame/LakshmanRam/index.html b/NumberGuessingGame/LakshmanRam/index.html new file mode 100644 index 000000000..a2b70300e --- /dev/null +++ b/NumberGuessingGame/LakshmanRam/index.html @@ -0,0 +1,41 @@ + + + + + Number Guessing Game + + + + + + +
+ +
+

Number Guessing Game

+

+ I am thinking of a number between 1-100.
+ Can you guess it? +

+

What I'm Thinking?

+
+ + +
+

No.Of Guesses: 0

+

Guessed Numbers are: None

+
+ +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/NumberGuessingGame/LakshmanRam/script.js b/NumberGuessingGame/LakshmanRam/script.js new file mode 100644 index 000000000..0b390c27c --- /dev/null +++ b/NumberGuessingGame/LakshmanRam/script.js @@ -0,0 +1,69 @@ +const hint = document.getElementById("hint"); +const noOfGuessesRef = document.getElementById("no-of-guesses"); +const guessedNumsRef = document.getElementById("guessed-nums"); +const restartButton = document.getElementById("restart"); +const game = document.getElementById("game"); +const guessInput = document.getElementById("guess"); +const checkButton = document.getElementById("check-btn"); + +let answer, noOfGuesses, guessedNumsArr; + +const play = () => { + const userGuess = guessInput.value; + if (userGuess < 1 || userGuess > 100 || isNaN(userGuess)) { + alert("Please enter a valid number between 1 and 100."); + return; + } + guessedNumsArr.push(userGuess); + noOfGuesses += 1; + if (userGuess != answer) { + if (userGuess < answer) { + hint.innerHTML = "Too low. Try Again!"; + } else { + hint.innerHTML = "Too high. Try Again!"; + } + noOfGuessesRef.innerHTML = `No. Of Guesses: ${noOfGuesses}`; + guessedNumsRef.innerHTML = `Guessed Numbers are: ${guessedNumsArr.join( + "," + )}`; + hint.classList.remove("error"); + setTimeout(() => { + hint.classList.add("error"); + }, 10); + } else { + hint.innerHTML = `Congratulations!
The number was ${answer}.
You guessed the number in ${noOfGuesses} tries.`; + hint.classList.add("success"); + game.style.display = "none"; + restartButton.style.display = "block"; + } +}; + +const init = () => { + console.log("Game Started"); + answer = Math.floor(Math.random() * 100) + 1; + console.log(answer); + noOfGuesses = 0; + guessedNumsArr = []; + noOfGuessesRef.innerHTML = "No. Of Guesses: 0"; + guessedNumsRef.innerHTML = "Guessed Numbers are: None"; + guessInput.value = ""; + hint.classList.remove("success", "error"); +}; + +guessInput.addEventListener("keydown", (event) => { + if (event.keyCode === 13) { + event.preventDefault(); + play(); + } +}); + +restartButton.addEventListener("click", () => { + game.style.display = "grid"; + restartButton.style.display = "none"; + hint.innerHTML = ""; + hint.classList.remove("success"); + init(); +}); + +checkButton.addEventListener("click", play); +window.addEventListener("load", init); \ No newline at end of file diff --git a/NumberGuessingGame/LakshmanRam/style.css b/NumberGuessingGame/LakshmanRam/style.css new file mode 100644 index 000000000..ded22b16b --- /dev/null +++ b/NumberGuessingGame/LakshmanRam/style.css @@ -0,0 +1,109 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + } + body { + background-color: #7296fa; + } + .container { + width: min(90%, 40.25em); + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + background-color: #fffcfce4; + padding: 5em 2em; + border-radius: 0.5em; + box-shadow: 1.5em 1.5em #26233e; + text-align: center; + } + + + #check-btn { + font-size: 1.2em; + font-weight: 800; + } + h3 { + font-size: 1.5em; + font-weight: 900; + line-height: 2em; + color: #303030; + } + .input-wrapper { + width: 70%; + display: grid; + grid-template-columns: 2fr 3fr; + gap: 1em; + margin: 3em auto 1.5em auto; + } + input[type="number"] { + width: 100%; + padding: 1em; + font-size: 1.2em; + text-align: center; + border: 2px solid #adaeae; + border-radius: 0.3em; + outline: none; + appearance: text-field; + -moz-appearance: textfield; + } + input[type="number"]::-webkit-outer-spin-button, + input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + input[type="number"]:focus { + border-color: #3c6fff; + } + button { + font-size: 1em; + background-color: #3c6fff; + color: #ffffff; + border: none; + outline: none; + border-radius: 0.5em; + font-weight: 500; + cursor: pointer; + } + #restart { + margin: 0 auto 0 auto; + padding: 0.9em 4.5em; + font-size: large; + font-weight: 800; + position: relative; + } + .result { + margin-top: 1em; + } + p { + font-size: 1em; + font-weight: 400; + color: #565b70; + word-break: break-all; + } + .error, + .success { + padding: 0.5em 0; + border-radius: 0.3em; + margin-bottom: 1em; + animation: pop 0.5s forwards; + transform: scale(0); + } + .error { + background-color: #ffcbcb; + color: #ff3e3e; + } + .success { + background-color: #b9ffd5; + color: #05c451; + } + @keyframes pop { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } + } \ No newline at end of file