From c99cd8d748a470b74a29c8b1db435baadd2a641b Mon Sep 17 00:00:00 2001 From: Nisarg Patel Date: Mon, 5 Jun 2023 10:36:44 +0530 Subject: [PATCH] guess the number --- task-1/index.html | 20 +++++++++++++ task-1/index.js | 25 ++++++++++++++++ task-1/style.css | 76 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 121 insertions(+) create mode 100644 task-1/index.html create mode 100644 task-1/index.js create mode 100644 task-1/style.css diff --git a/task-1/index.html b/task-1/index.html new file mode 100644 index 0000000..29a1d2e --- /dev/null +++ b/task-1/index.html @@ -0,0 +1,20 @@ + + + + + + + Task-1 + + + +
+

GUESS THE NUMBER

+

Type The Number


+

+ +

+
+ + + diff --git a/task-1/index.js b/task-1/index.js new file mode 100644 index 0000000..51a34da --- /dev/null +++ b/task-1/index.js @@ -0,0 +1,25 @@ +const randomNumber = Math.floor(Math.random() * 10) + 1; + +const output = document.getElementById("output"); + +let trial = 0; + +function checkNumber() { + trial += 1; + let number = document.getElementById("num").value; + if (number) { + const ans = + randomNumber < number + ? ((output.innerHTML = `Number is too high.`), + (output.style.color = "red")) + : randomNumber > number + ? ((output.innerHTML = `Number is too low.`), + (output.style.color = "red")) + : ((output.innerHTML = `Correct guess - ${trial} Trials.`), + (output.style.color = "green")); + document.getElementById("num").value = ""; + } else { + output.innerHTML = "Please enter the number."; + output.style.color = "red"; + } +} diff --git a/task-1/style.css b/task-1/style.css new file mode 100644 index 0000000..c5d5e81 --- /dev/null +++ b/task-1/style.css @@ -0,0 +1,76 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + background-color: #f7f5eb; + color: #6a80e1; + font-family: Arial, sans-serif; +} +.game { + text-align: center; +} +.title { + color: #2db8eb; + font-size: 50px; +} +h3 { + margin: 30px 0 0 0; + font-size: 35px; +} +input[type="number"] { + height: 30px; + width: 150px; + + padding: 5px; + + font-size: 14px; + + border: 1px solid #ccc; + border-radius: 5px; + + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + + background-color: #f5f5f5; + + text-align: center; + + -moz-appearance: textfield; + appearance: textfield; +} + +input[type="number"]::-webkit-inner-spin#btn1, +input[type="number"]::-webkit-outer-spin#btn1 { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"]:hover, +input[type="number"]:focus { + border-color: #888; + outline: none; +} + +#btn1 { + padding: 10px 20px; + + font-family: Arial, sans-serif; + font-size: 14px; + + border: none; + border-radius: 5px; + + background-color: #0a174e; + color: #f5d042; + + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + + transition: background-color 0.3s ease; +} +#btn1:hover { + background-color: #4b60c2; +} +#btn1:focus { + outline: none; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); +} +