From 5a6cb117e8e872222f12c9985304922a5368120c Mon Sep 17 00:00:00 2001 From: Hardik Domadiya Date: Mon, 5 Jun 2023 14:52:48 +0530 Subject: [PATCH] initial commit --- index.html | 20 ++++++++++++++ index.js | 26 ++++++++++++++++++ style.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..27ba580 --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + Task-1 + + + +
+

GUESS THE NUMBER

+

Pleasse Guess The number


+

+ +

+
+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..a313f58 --- /dev/null +++ b/index.js @@ -0,0 +1,26 @@ +const randomNumber = Math.floor(Math.random() * 10) + 1; +console.log(randomNumber); + +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 high.`), + (output.style.color = "red")) + : randomNumber > number + ? ((output.innerHTML = `Number is 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/style.css b/style.css new file mode 100644 index 0000000..88d3c5a --- /dev/null +++ b/style.css @@ -0,0 +1,77 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + background-color: #42f569; + color: #0a174e; + font-family: Arial, sans-serif; +} +.game { + text-align: center; +} +.title { + background-color:blue; + color: #f5d042; + 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); +} +