thetechnook.github.io/index.html at main · TheTechnook/thetechnook.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free airtime</title>
  <link rel="stylesheet" href="Number.css">
</head>
<body>
  <h1 class="head">Random Number Guess Game</h1>
  <h2 class="head">Guess the number in 5 attempts to win $1000 worth of airtime </h2>
  <div class="container">
  <input id="input" type="number" placeholder="Enter your guess">
  <button id="subbtn" type="button">Submit</button><br>
  <label id="p1">Guess the number between 50 and 100</label>
  <p id="p2"></p>
  <p id="p3"></p>
  <label  class="phone" for="inputnum">Phone number:</label>
  <input id="inputnum" for="subbton" type="number">
  <button id="subbton" type="button">Submit</button>
  <p id="p5"></p>
<div class="p4container">  <p id="p4">Airtime prize available only for Tanzania, Uganda, and Kenya.</p></div>
  </div>
</body>

<script>
  const input = document.getElementById("input");
  const subbtn = document.getElementById("subbtn");
  const p1 = document.getElementById("p1");
  const p2 = document.getElementById("p2");
  const p3 = document.getElementById("p3");
const subbton = document.getElementById("subbton");
const p5 = document.getElementById("p5");

  const min = 50;
  const max = 100;
  const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
  let attempts = 0;

  subbtn.onclick = function() {
    const guess = parseInt(input.value);
    attempts++;

    if (isNaN(guess)) {
      p2.textContent = "Please enter a valid number.";
      return;
    }

    if (guess === randomNum) {
      p2.textContent = `🎉 Correct! You win $1000 airtime!`;
      p3.textContent = `Your number: ${document.getElementById("inputnum").value}`;
      subbtn.disabled = true;
    } else if (attempts >= 5) {
      p2.textContent = `❌ Game over! The correct number was ${randomNum}.`;
      subbtn.disabled = true;
    } else {
      p2.textContent = guess < randomNum ? "Too low!" : "Too high!";
      p3.textContent = ''; //`Attempts left: ${4 - attempts}`;//
    }
  };
subbton.onclick = function() {
  const inputnum = document.getElementById("inputnum").value;
  const phonenumber = parseInt(inputnum);
  if(isNaN(phonenumber) || inputnum.length<10) {
    p5.textContent ="Enter a valid phone number"
  }

    else if (attempts >= 4){
      p5.textContent = " You didnot guess the number";
      subbton.disabled = true;
    }

  else{
    p5.textContent = `Your phonenumber is ${phonenumber}, you will recieve your prize after validation`
  }
};

</script>
</html>