HTML5 simple calculator(html,css,javascript)

Video by via Dailymotion
Source

Sponsored:

Atlas of AI: Power, Politics, and the Planetary Costs of Artificial Intelligence - Audiobook


Uncover the true cost of artificial intelligence.

"Atlas of AI" by Kate Crawford exposes how power, politics, and profit extract from our planet, our labor, and our freedom.

From hidden mines to massive data empires, discover how AI is reshaping who we are—and who holds control.

Listen now, and see the system behind the screens before the future listens to you. = > Atlas of AI $0.00 with trial. Read by Larissa Gallagher


HTML:

CSS:

#calculator {
width: 250px;
height: 350px;
border: 5px solid black;
text-align: center;
background: lightgreen;
margin: 150px auto;
box-shadow: 0px 0px 30px gray;
}

#display {
margin-top: 30px;
margin-bottom: 20px;
width: 220px;
height: 30px;
border: 1px solid red;
box-shadow: 0px 0px 30px red;
text-align: right;
font: 20px bold;
color: blue
}

#keys {
-webkit-appearance: button;
width: 40px;
height: 35px;
margin-left: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 20px skyblue;
cursor: pointer
}

#keys:hover {
background: yellow;
font-weight: bold;
}

#equal {
-webkit-appearance: none;
width: 90px;
height: 35px;
margin-left: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 20px skyblue;
cursor: pointer
}

JAVASCRIPT:

“use strict”;

// Initilization of calculator screen value
let box = document.getElementById(“display”);
box.value = “”;

// append character to screen
function addToScreen(e) {
box.value += e;
if (e == “c”) {
resetScreen();
}
}

// reset screen
function resetScreen() {
box.value = ”;
}

// evaluate a mathematical expression string
function answer() {
let s = box.value;
box.value = String(eval(s));
}

function backSpace() {
let s = box.value;
let len = s.length;
if (len > 0) {
s = s.slice(0, len-1);
}
box.value = s;
}

function power(y) {
let x = box.value;
box.value = Math.pow(x, y);
}

Read More: https://codepen.io/At

SOURCES: codepen.io

Go to Source