Skip to content

Instantly share code, notes, and snippets.

@rapisenpai

rapisenpai/simpleCalculator.html

Created November 25, 2022 15:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rapisenpai/6bf57aa041af8bf4bd6fdd7664a7b677 to your computer and use it in GitHub Desktop.
Save rapisenpai/6bf57aa041af8bf4bd6fdd7664a7b677 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
simpleCalculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="css/font.css"> -->
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-primary bg-primary">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
<h1 class="fw-bolder text-white">Simple Calculator</h1>
</a>
</div>
</nav>
<!-- End of Navbar -->
<div class="container my-5">
<div class="row">
<div class="col-4 bg-primary mx-auto p-5 rounded shadow-lg">
<input type="text" name="" id="screen" class="form-control form-control-lg mb-3">
<div class="row">
<div class="col-3 my-1">
<button onclick="nine(9)" class="btn btn-light w-100">9</button>
</div>
<div class="col-3 my-1">
<button onclick="eight(8)" class="btn btn-light w-100">8</button>
</div>
<div class="col-3 my-1">
<button onclick="seven(7)" class="btn btn-light w-100">7</button>
</div>
<div class="col-3 my-1">
<button onclick="divide('/')" class="btn btn-light w-100">/</button>
</div>
</div>
<div class="row">
<div class="col-3 my-1">
<button onclick="six(6)" class="btn btn-light w-100">6</button>
</div>
<div class="col-3 my-1">
<button onclick="five(5)" class="btn btn-light w-100">5</button>
</div>
<div class="col-3 my-1">
<button onclick="four(4)" class="btn btn-light w-100">4</button>
</div>
<div class="col-3 my-1">
<button onclick="minus('-')" class="btn btn-light w-100">-</button>
</div>
</div>
<div class="row">
<div class="col-3 my-1">
<button onclick="three(3)" class="btn btn-light w-100">3</button>
</div>
<div class="col-3 my-1">
<button onclick="two(2)" class="btn btn-light w-100">2</button>
</div>
<div class="col-3 my-1">
<button onclick="one(1)" class="btn btn-light w-100">1</button>
</div>
<div class="col-3 my-1">
<button onclick="plus('+')" class="btn btn-light w-100">+</button>
</div>
</div>
<div class="row">
<div class="col my-1">
<button onclick="equals('=')" class="btn btn-light w-100">=</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of Calculator -->
<script>
var output = document.getElementById('screen');
function nine() {
output.value += 9;
}
function eight() {
output.value += 8;
}
function seven() {
output.value += 7;
}
function six() {
output.value += 6;
}
function five() {
output.value += 5;
}
function four() {
output.value += 4;
}
function three() {
output.value += 3;
}
function two() {
output.value += 2;
}
function one() {
output.value += 1;
}
function plus() {
output.value += '+';
}
function devide() {
output.value += '/';
}
function minus() {
output.value += '-';
}
function equals() {
output.value = eval(output.value);
}
</script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment