Skip to content

Instantly share code, notes, and snippets.

@bikashthapa01

bikashthapa01/calc.html

Created March 15, 2023 14:25
Show Gist options
  • Save bikashthapa01/146e6b402adfc3334d6481cb4e1079c1 to your computer and use it in GitHub Desktop.
Save bikashthapa01/146e6b402adfc3334d6481cb4e1079c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calc.html
<!DOCTYPE html>
<html>
<head>
<title>Web Development</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,td,tr {
border: 2px solid black;
border-collapse: collapse;
font-family: 'Courier New';
text-align: center;
}
input[type=button] {
width: 50px;
}
</style>
</head>
<body>
<div>
<h1>Task 1</h1>
<table>
<tr>
<td colspan="3">
<input type="text" id="txtBox">
</td>
</tr>
<tr>
<td><input type="button" id="btn1" value="1"></td>
<td><input type="button" id="btn2" value="2"></td>
<td><input type="button" id="btn3" value="3"></td>
</tr>
<tr>
<td><input type="button" id="btn4" value="4"></td>
<td><input type="button" id="btn5" value="5"></td>
<td><input type="button" id="btn6" value="6"></td>
</tr>
<tr>
<td><input type="button" id="btn7" value="7"></td>
<td><input type="button" id="btn8" value="8"></td>
<td><input type="button" id="btn9" value="9"></td>
</tr>
<tr>
<td><input type="button" id="btnCLR" value="CLR"></td>
<td><input type="button" id="btn0" value="0"></td>
<td><input type="button" id="btnENT" value="ENT"></td>
</tr>
</table>
</div>
</body>
<script>
let numbers = [];
function getNumber() {
let data = document.querySelectorAll("input[type=button]");
let txtBox = document.getElementById("txtBox");
data.forEach((item) => {
item.addEventListener("click", (event) => {
if(!isNaN(item.value)){
numbers.push(item.value); // add click number to list and save it
txtBox.value = numbers.join(""); // displaying numbers by joining them, since the list will have number in [1,3,4,5] format
}else if(item.value == "ENT"){
//check the condition
if(numbers.join("") == "1234"){
window.location.href ="https://www.uws.ac.uk";
}else {
alert("Invalid Pin");
}
}else {
// clear the field
numbers = [];
txtBox.value = numbers;
}
});
});
}
getNumber();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment