-
Notifications
You must be signed in to change notification settings - Fork 0
/
number-guessing-game.html
138 lines (133 loc) · 6.22 KB
/
number-guessing-game.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Guessing Game</title>
</head>
<body style="background-image: url(images/index\ bg2.png); background-size: 100%;">
<div class="container mt-5">
<div class="row">
<div class="col-sm-12 mb-5">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="works.html">works</a></li>
<li class="breadcrumb-item active" aria-current="page">Number Guessing Game</li>
</ol>
</nav>
</div>
<!-- <div class="container mt-5">
<div class="row">
<div class="col-4"></div>
<div class="col-4">
<h4>Number Guessing Game</h4>
</div>
<div class="col-4"></div>
</div>
</div> -->
<div class="container mt-5">
<div class="row">
<div class="col-4 mx-auto">
<h4 class="text-center text-white bg-secondary mb-5 py-3">Number Guessing Game</h4>
<div id="inputForm">
<div class="mb-3">
<label for="userInputNumber" class="form-label">Your Input</label>
<input type="number" class="form-control" id="userInputNumber" placeholder="Give any number from 1 to 100">
</div>
<button type="button" class="btn btn-secondary" id="submitButton">Submit Input</button>
</div>
<p id="result" class="text-danger my-3"></p>
<ul class="list-group mt-4" id="userInputListElement">
<li class="list-group-item active">
Your Inputs
</li>
</ul>
<div class="alert alert-success mt-4" id="successMessageBlock" role="alert" style="display: none;">
You have guessed correctly.
</div>
</div>
</div>
</div>
<script>
var programNumber = Math.floor(Math.random() * 100 + 1);
console.log(Math.floor(Math.random() * 100 + 1));
var userTries = 0;
// when the submit button is clicked, we need to fetch the user input value.
// click event
// Querying using the selector
var submitButtonElement = document.getElementById('submitButton');
console.log(submitButtonElement);
submitButtonElement.addEventListener("click", processUserGuess);
function nameOfTheFunction() {
console.log('This is the name displayed from the name of the function.');
}
function processUserGuess() {
// call name function
nameOfTheFunction();
// update user tries
userTries = userTries + 1;
console.log('user tries', userTries);
if (userTries > 10) {
alert('Cannot try for more than 10 times.');
return;
}
// we need to fetch the user input value.
console.log('Submit button has been clicked.');
var userFormInput = document.getElementById('userInputNumber');
console.log(userFormInput);
var userFormInputValue = userFormInput.value;
if (userFormInputValue == '') {
alert('Input cannot be empty. Give a value.');
return;
}
// convert string to intergers
// userFormInputValue = parseInt(userFormInputValue);
// console.log('Type of the input is: ', typeof userFormInputValue);
if (userFormInputValue > 100 || userFormInputValue < 0) {
alert('Number should be between 1 and 100');
return;
}
// if (userFormInputValue < 1) {
// alert('Number cannot be less than 1.');
// return;
// }
console.log('User from input value: ', userFormInputValue);
// Update user input value on the list
var userInputListElement = document.getElementById('userInputListElement');
console.log(userInputListElement);
var newListItem = document.createElement("LI"); // Create a <li> node
// adding two string is done with + sign
var textnode = document.createTextNode("Try " + userTries + " - " + userFormInputValue);
newListItem.classList.add("list-group-item"); // Create a text node
newListItem.appendChild(textnode);
userInputListElement.appendChild(newListItem);
// check whether the user input is equal to our program's number
// if the number guessed is correct, show the message that the user wins.
var resultElement = document.getElementById('result');
if (userFormInputValue == programNumber) {
console.log('You have guessed correctly.');
var successMessageElement = document.getElementById('successMessageBlock');
console.log(successMessageElement);
successMessageElement.style.display = "block";
resultElement.innerText = '';
var inputFormElement = document.getElementById('inputForm');
inputFormElement.style.display = "none";
}
// The user did not guess the number right, so we need to give some hints.
// if the number gusessed is wrong and is less than program's number, give a hint
if (userFormInputValue < programNumber) {
console.log('Wrong guess. You number is less than the program number.');
resultElement.innerText = 'Your guess is wrong. Your number is low.';
}
// if the number gusessed is wrong and is greater than program's number, give a hint
if (userFormInputValue > programNumber) {
console.log('Wrong guess. You number is greater than the program number.');
resultElement.innerText = 'Your guess is wrong. Your number is high.';
}
}
</script>
</body>
</html>