From 24b4307b01c2e44d099e40e5557d8503025d2e8d Mon Sep 17 00:00:00 2001 From: Vinay S <124019116+vinay-s36@users.noreply.github.com> Date: Sun, 8 Oct 2023 21:17:42 +0530 Subject: [PATCH 1/4] Added Guess It project --- Guess It/index.html | 33 +++++++++++++++++++++++++++ Guess It/script.js | 38 +++++++++++++++++++++++++++++++ Guess It/style.css | 55 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 Guess It/index.html create mode 100644 Guess It/script.js create mode 100644 Guess It/style.css diff --git a/Guess It/index.html b/Guess It/index.html new file mode 100644 index 000000000..b0f0aa759 --- /dev/null +++ b/Guess It/index.html @@ -0,0 +1,33 @@ + + + + + + + + + Guess It + + +
+
+

Guess My Number 😉

+

Guess the number between 1 and 100

+
+ + + +

+

+

+
+
+ + + diff --git a/Guess It/script.js b/Guess It/script.js new file mode 100644 index 000000000..a393da139 --- /dev/null +++ b/Guess It/script.js @@ -0,0 +1,38 @@ +let num = Math.floor(Math.random() * 100)+1; +let chances = 0; +let message; +const guess=document.getElementById("result"); +const errorMessage = document.getElementById("error-message"); + +function makeGuess() { + var inputElement=document.getElementById("number"); + var inputValue=inputElement.value; + + if (inputValue.trim() === "") { + errorMessage.textContent = "Please enter a number before guessing."; + return; // Stop execution if no input is provided + } + errorMessage.textContent = ""; + + chances++; + if (inputValue == num) { + message=`Congratulations! You guessed the number ${num} in ${chances} attempts.`; + } + else + { + if (num > inputValue) { + message=`Your guess is less than the number`; + } else { + message=`Your guess is greater than the number`; + } + } + inputElement.value = ""; + guess.innerHTML=message; +} + +function newtarget() { + num = Math.floor(Math.random() * 100)+1; + chances=0; + result.innerHTML = ""; + errorMessage.textContent = ""; +} \ No newline at end of file diff --git a/Guess It/style.css b/Guess It/style.css new file mode 100644 index 000000000..cf22959f3 --- /dev/null +++ b/Guess It/style.css @@ -0,0 +1,55 @@ +body { + background-image: linear-gradient(120deg, #C6EA8D 0%, #FE90AF 100%); + background-size: cover; + background-attachment: fixed; + font-size: 16px; + margin: 0; + padding: 0; +} + +@media (max-width: 768px) { + body { + font-size: 14px; + } +} + +.card{ + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + max-width: 500px; + width: 80%; + margin: 10% auto; + height: 320px; + padding: 20px; + font-family: 'Open Sans', sans-serif; + background-color: #fff; +} + +.card-content{ + text-align: center; +} + +.numberguess{ + width: 130px; + padding:15px; + font-size: larger; + border-radius: 10px; +} + +p{ + font-size: larger; +} +button{ + cursor: pointer; + width: 23%; + border-radius: 10px; + position: relative; + top: 15px; + padding: 10px; + font-size: larger; +} + +button:hover{ + background-color: #ccc; +} \ No newline at end of file From 37180c7f3de78b9727700ebc68f2efb8f37b4c18 Mon Sep 17 00:00:00 2001 From: Vinay S <124019116+vinay-s36@users.noreply.github.com> Date: Sun, 8 Oct 2023 23:55:09 +0530 Subject: [PATCH 2/4] updated structure of the project and added files --- NumberGuessingGame/vinay-s36/index.html | 33 +++++++++++++++ NumberGuessingGame/vinay-s36/script.js | 38 +++++++++++++++++ NumberGuessingGame/vinay-s36/style.css | 55 +++++++++++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 NumberGuessingGame/vinay-s36/index.html create mode 100644 NumberGuessingGame/vinay-s36/script.js create mode 100644 NumberGuessingGame/vinay-s36/style.css diff --git a/NumberGuessingGame/vinay-s36/index.html b/NumberGuessingGame/vinay-s36/index.html new file mode 100644 index 000000000..b0f0aa759 --- /dev/null +++ b/NumberGuessingGame/vinay-s36/index.html @@ -0,0 +1,33 @@ + + + + + + + + + Guess It + + +
+
+

Guess My Number 😉

+

Guess the number between 1 and 100

+
+ + + +

+

+

+
+
+ + + diff --git a/NumberGuessingGame/vinay-s36/script.js b/NumberGuessingGame/vinay-s36/script.js new file mode 100644 index 000000000..a393da139 --- /dev/null +++ b/NumberGuessingGame/vinay-s36/script.js @@ -0,0 +1,38 @@ +let num = Math.floor(Math.random() * 100)+1; +let chances = 0; +let message; +const guess=document.getElementById("result"); +const errorMessage = document.getElementById("error-message"); + +function makeGuess() { + var inputElement=document.getElementById("number"); + var inputValue=inputElement.value; + + if (inputValue.trim() === "") { + errorMessage.textContent = "Please enter a number before guessing."; + return; // Stop execution if no input is provided + } + errorMessage.textContent = ""; + + chances++; + if (inputValue == num) { + message=`Congratulations! You guessed the number ${num} in ${chances} attempts.`; + } + else + { + if (num > inputValue) { + message=`Your guess is less than the number`; + } else { + message=`Your guess is greater than the number`; + } + } + inputElement.value = ""; + guess.innerHTML=message; +} + +function newtarget() { + num = Math.floor(Math.random() * 100)+1; + chances=0; + result.innerHTML = ""; + errorMessage.textContent = ""; +} \ No newline at end of file diff --git a/NumberGuessingGame/vinay-s36/style.css b/NumberGuessingGame/vinay-s36/style.css new file mode 100644 index 000000000..cf22959f3 --- /dev/null +++ b/NumberGuessingGame/vinay-s36/style.css @@ -0,0 +1,55 @@ +body { + background-image: linear-gradient(120deg, #C6EA8D 0%, #FE90AF 100%); + background-size: cover; + background-attachment: fixed; + font-size: 16px; + margin: 0; + padding: 0; +} + +@media (max-width: 768px) { + body { + font-size: 14px; + } +} + +.card{ + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + max-width: 500px; + width: 80%; + margin: 10% auto; + height: 320px; + padding: 20px; + font-family: 'Open Sans', sans-serif; + background-color: #fff; +} + +.card-content{ + text-align: center; +} + +.numberguess{ + width: 130px; + padding:15px; + font-size: larger; + border-radius: 10px; +} + +p{ + font-size: larger; +} +button{ + cursor: pointer; + width: 23%; + border-radius: 10px; + position: relative; + top: 15px; + padding: 10px; + font-size: larger; +} + +button:hover{ + background-color: #ccc; +} \ No newline at end of file From 4dad9f998728af63cf651b86eed1f7e152986c7b Mon Sep 17 00:00:00 2001 From: Vinay S <124019116+vinay-s36@users.noreply.github.com> Date: Sun, 8 Oct 2023 23:55:53 +0530 Subject: [PATCH 3/4] Delete Guess It directory --- Guess It/index.html | 33 --------------------------- Guess It/script.js | 38 ------------------------------- Guess It/style.css | 55 --------------------------------------------- 3 files changed, 126 deletions(-) delete mode 100644 Guess It/index.html delete mode 100644 Guess It/script.js delete mode 100644 Guess It/style.css diff --git a/Guess It/index.html b/Guess It/index.html deleted file mode 100644 index b0f0aa759..000000000 --- a/Guess It/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - Guess It - - -
-
-

Guess My Number 😉

-

Guess the number between 1 and 100

-
- - - -

-

-

-
-
- - - diff --git a/Guess It/script.js b/Guess It/script.js deleted file mode 100644 index a393da139..000000000 --- a/Guess It/script.js +++ /dev/null @@ -1,38 +0,0 @@ -let num = Math.floor(Math.random() * 100)+1; -let chances = 0; -let message; -const guess=document.getElementById("result"); -const errorMessage = document.getElementById("error-message"); - -function makeGuess() { - var inputElement=document.getElementById("number"); - var inputValue=inputElement.value; - - if (inputValue.trim() === "") { - errorMessage.textContent = "Please enter a number before guessing."; - return; // Stop execution if no input is provided - } - errorMessage.textContent = ""; - - chances++; - if (inputValue == num) { - message=`Congratulations! You guessed the number ${num} in ${chances} attempts.`; - } - else - { - if (num > inputValue) { - message=`Your guess is less than the number`; - } else { - message=`Your guess is greater than the number`; - } - } - inputElement.value = ""; - guess.innerHTML=message; -} - -function newtarget() { - num = Math.floor(Math.random() * 100)+1; - chances=0; - result.innerHTML = ""; - errorMessage.textContent = ""; -} \ No newline at end of file diff --git a/Guess It/style.css b/Guess It/style.css deleted file mode 100644 index cf22959f3..000000000 --- a/Guess It/style.css +++ /dev/null @@ -1,55 +0,0 @@ -body { - background-image: linear-gradient(120deg, #C6EA8D 0%, #FE90AF 100%); - background-size: cover; - background-attachment: fixed; - font-size: 16px; - margin: 0; - padding: 0; -} - -@media (max-width: 768px) { - body { - font-size: 14px; - } -} - -.card{ - border: 1px solid #ccc; - border-radius: 10px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - max-width: 500px; - width: 80%; - margin: 10% auto; - height: 320px; - padding: 20px; - font-family: 'Open Sans', sans-serif; - background-color: #fff; -} - -.card-content{ - text-align: center; -} - -.numberguess{ - width: 130px; - padding:15px; - font-size: larger; - border-radius: 10px; -} - -p{ - font-size: larger; -} -button{ - cursor: pointer; - width: 23%; - border-radius: 10px; - position: relative; - top: 15px; - padding: 10px; - font-size: larger; -} - -button:hover{ - background-color: #ccc; -} \ No newline at end of file From 00be0a7a8a98ffb37c3ac586719b1f2b946b52a0 Mon Sep 17 00:00:00 2001 From: Vinay S <124019116+vinay-s36@users.noreply.github.com> Date: Mon, 9 Oct 2023 00:09:20 +0530 Subject: [PATCH 4/4] Create and update README.md --- NumberGuessingGame/vinay-s36/README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 NumberGuessingGame/vinay-s36/README.md diff --git a/NumberGuessingGame/vinay-s36/README.md b/NumberGuessingGame/vinay-s36/README.md new file mode 100644 index 000000000..1ed58459d --- /dev/null +++ b/NumberGuessingGame/vinay-s36/README.md @@ -0,0 +1,19 @@ +#### Summary +Guess It - The Random Number Guesser project in JavaScript is an interactive web application that challenges users to guess a randomly generated number within a specified range. It provides an engaging way to learn and practice JavaScript programming while creating a fun user experience. + +#### Setup +1. Fork the repository from github [vinay-s36](https://github.com/vinay-s36/Guess-It) +2. clone the repository +3. Run it using any IDE like [VSCode](https://code.visualstudio.com/) or even simple text editors will work + +#### Live project link - https://vinay-s36.github.io/Guess-It/ + +#### Screenshot +![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/bc76a0db-5a8e-4e7c-ba68-1d7a349f2039) + +![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/057b5532-dd81-4b24-9b60-790a62b1ee7f) + +![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/661e2419-e582-40f2-92de-81b1adfe86b8) + +Let me know if there are any issues 😁 +#### Happy Coding All ####