I made a calculator in html because i was board and needed to learn something new for fun (source code at the bottom of page)
Embedded Files
Source
<!DOCTYPE html>
<body>
<title>Calculator</title>
<style>
html, body {
height: calc(100% - 20px);
margin: 10;
}
.cont1{
height: calc(100% + 20px);
border-radius: 10px;
background-color: darkgrey;
min-height: calc(100% + 20px);
}
.cont2{
height: calc(100% - 20px);
max-width: calc(100% - 20px);
transform: translate(10px, 10px);
border-radius: 10px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
#btn1{
height: 100px;
width: 100px;
border-radius: 10px;
border-color: green;
border-width: 4px;
border-style: solid;
background-color: darkgray;
transition: all 0.5s;
color: rgb(106, 106, 106);
font-weight: bold;
font-family:'trebuchet ms', sans-serif;
font-size: 50px;
margin: 5px;
}
#btn1:hover{
transition: all 0.1s;
box-shadow: 0px 0px 15px green inset;
text-shadow: 0px 0px 5px black;
color: white;
}
#btn1:active{
transition: all 0.05s;
box-shadow: 0px 0px 30px green inset;
text-shadow: 0px 0px 5px black;
color: white;
}
#div{
margin: 0px;
display:flex;
justify-content: center;
/* background-color: rgba(255, 0, 0, 0.1); */
}
.display{
height: 120px;
width: 425px;
border-radius: 10px;
border-color: green;
border-width: 4px;
border-style: solid;
background-color: darkgray;
transition: all 0.5s;
color: rgb(106, 106, 106);
font-weight: bold;
font-family:'trebuchet ms', sans-serif;
font-size: 60px;
margin: 5px;
display: flex;
justify-content: right;
align-items: center;
}
</style>
<script>
i = 0;
function AddDigit(x){
if (document.getElementById("display").textContent.length < 20)
if (x == '+' || x == '-' || x == '.')
{
if (
!document.getElementById("display").textContent.endsWith('+') &&
!document.getElementById("display").textContent.endsWith('-') &&
!document.getElementById("display").textContent.endsWith('.') && document.getElementById("display").textContent.length > 0)
{
if (x == '.')
{
if (i == 0)
{
i = i + 1;
document.getElementById("display").textContent = document.getElementById("display").textContent + x;
}
}
else{
i = 0;
document.getElementById("display").textContent = document.getElementById("display").textContent + x;
}
}
}
else{
document.getElementById("display").textContent = document.getElementById("display").textContent + x;
}
}
function DoCalc(){
if (
!document.getElementById("display").textContent.endsWith('+') &&
!document.getElementById("display").textContent.endsWith('-') &&
!document.getElementById("display").textContent.endsWith('.') && document.getElementById("display").textContent.length > 0)
{
let str = "";
int = 0;
type = 1;
for(i = 0; i < document.getElementById("display").textContent.length; i++){
if (
document.getElementById("display").textContent[i] == '+' || // 1
document.getElementById("display").textContent[i] == '-') // 2)
{
if (i == 0)
{
str = str + document.getElementById("display").textContent[i];
}
else{
if (type == 1)
int = int + parseFloat(str);
if (type == 2)
int = int - parseFloat(str);
str = "";
if (document.getElementById("display").textContent[i] == '+')
type = 1;
else
type = 2;
}
}
else{
str = str + document.getElementById("display").textContent[i];
}
}
if (type == 1)
int = int + parseFloat(str);
if (type == 2)
int = int - parseFloat(str);
document.getElementById("display").textContent = int;
i = 0;
}
}
function Clear(){
document.getElementById("display").textContent = "";
i = 0;
}
</script>
<div class="cont1">
<div class="cont2">
<div>
<div id="div">
<label class="display" id="display"> </label>
</div>
<div id="div">
<button id="btn1" onclick="AddDigit('7')"> 7 </button>
<button id="btn1" onclick="AddDigit('8')"> 8 </button>
<button id="btn1" onclick="AddDigit('9')"> 9 </button>
<button id="btn1" style="width: 100px;" onclick="AddDigit('+')"> + </button>
</div>
<div id="div">
<button id="btn1" onclick="AddDigit('4')"> 4 </button>
<button id="btn1" onclick="AddDigit('5')"> 5 </button>
<button id="btn1" onclick="AddDigit('6')"> 6 </button>
<button id="btn1" style="width: 100px;" onclick="AddDigit('-')"> - </button>
</div>
<div id="div">
<button id="btn1" style="transform: translate(-55px);" onclick="AddDigit('1')"> 1 </button>
<button id="btn1" style="transform: translate(-55px);" onclick="AddDigit('2')"> 2 </button>
<button id="btn1" style="transform: translate(-55px);" onclick="AddDigit('3')"> 3 </button>
</div>
<div id="div">
<button id="btn1" onclick="AddDigit('0')"> 0 </button>
<button id="btn1" onclick="AddDigit('.')"> . </button>
<button id="btn1" onclick="Clear()"> clr </button>
<div style="height: 100px;"><button id="btn1" style="width: 100px; height: 210px; transform: translate(0px, -110px);" onclick="DoCalc()"> = </button></div>
</div>
</div>
</div>
</div>
</body>
Google Sites
Report abuse