Skip to content

Update minimal-calculator-basic.html #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+113 −221
Open

Update minimal-calculator-basic.html #144

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
334 changes: 113 additions & 221 deletions minimal/minimal-calculator-basic.html
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,78 @@
<!-- origenal : https://codepen.io/dishabansal/pen/xypOBB -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=MuseoModerno:wght@300;400&display=swap" rel="stylesheet">


<style>

body {
margin: 0 auto;
text-align: center;
font-size: 23px;


}

.main {
max-width: 10%;
}




.button > .over {
text-decoration:overline;
text-decoration: overline;
display: inline-block;
position:relative;
position: relative;
top: 3px;
left: -4px;
}

.calculator {

display: inline-block;
background: white;
margin: 1% 0;
color: black;
border: 3px solid #000000;
border-radius: 5px;
box-shadow: 2px 2px 1px 0px #000000;
max-width: 240px;


display: inline-block;
background: white;
margin: 1% 0;
color: black;
border: 3px solid #000000;
border-radius: 5px;
box-shadow: 2px 2px 1px 0px #000000;
max-width: 240px;
}

.calculator .button {

font-size: x-large;
width: 2em;
min-height: 2em;
margin: 0.8%;
border-radius: 15%;
border: 0.08em solid #000;
font-family: monospace;
background: white;
box-shadow: 0.03em 0.03em 0.01em 0px #000000;


font-size: x-large;
width: 2em;
min-height: 2em;
margin: 0.8%;
border-radius: 15%;
border: 0.08em solid #000;
font-family: monospace;
background: #fee8f7; /* Regular Button Color: light pink */
box-shadow: 0.03em 0.03em 0.01em 0px #000000;
}

.calculator .accent{
background: #f3fff3; background: #f3fff3;;
.calculator .accent {
background: #e2dcfe; /* Accent Button Color: light lavender */
}

.calculator .space {

font-size: x-large;
width: 2.4em;
min-height: 2.4em;
margin: 0.5%;
border-radius: 15%;
border: 0.08em solid #ffffff;
background: white;


font-size: x-large;
width: 2.4em;
min-height: 2.4em;
margin: 0.5%;
border-radius: 15%;
border: 0.08em solid #ffffff;
background: white;
}


.calculator button:hover,
#backspace:hover {
background: #f3fff3;
color:#000000;
color: #000000;
transform: scale(0.9);
border-radius: 20%;

}

.calculator
#clear:hover , #rad:hover ,#deg:hover{
background: rgb(0, 0, 0)!important;
color:#ffffff;
.calculator #clear:hover, #rad:hover, #deg:hover {
background: rgb(0, 0, 0) !important;
color: #ffffff;
transform: scale(0.9);
border-radius: 20%;
}
@@ -106,43 +86,40 @@
.button:active,
.button-active {
background: rgb(0, 0, 0);
color:#ffffff;
color: #ffffff;
transform: scale(0.8);
}

#screen{

border: 3px solid #000000;
border-radius: 5px;
width: 80%;
height: 50px;
margin : 5%;
text-align: right;
overflow: auto;
overflow-wrap: break-word;
font-size: 30px;
font-family: monospace;
background-color: #000;
color: #fff;

#screen {
border: 3px solid #000000;
border-radius: 5px;
width: 80%;
height: 50px;
margin: 5%;
text-align: right;
overflow: auto;
overflow-wrap: break-word;
font-size: 30px;
font-family: monospace;
background-color: #000;
color: #fff;
}


#clean {
background: rgb(27, 27, 27);
color:#ffffff;
color: #ffffff;
}
#rad {
background: rgb(27, 27, 27);
color:#ffffff;
color: #ffffff;
}
#deg {
background: rgb(27, 27, 27);
color:#ffffff;
color: #ffffff;
}

.rows{
margin: 5%;
.rows {
margin: 5%;
}

.calculator__row1,
@@ -159,103 +136,87 @@

.calculator__row5 {
margin-bottom: 3%;
}
}

.footer {

position: absolute;
left: 0;
right: 0;
bottom: 0;
}


</style>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
<div id="main">
<div class="calculator">
<input type="text" id="screen">
<div id="main">
<div class="calculator">
<input type="text" id="screen">

<div class="rows">
<div class="calculator__row1">

<button class="button accent">(</button>
<button class="button accent">)</button>
<div class="space" ></div>
<div class="space" ></div>
<button class="button" id="clean">AC</button>
</div>
<div class="calculator__row2">

<button class="button accent">x^</button>
<button class="button ">7</button>
<button class="button ">8</button>
<button class="button ">9</button>
<button class="button accent">*</button>
</div>
<div class="calculator__row3">


<button class="button accent">%</button>
<button class="button ">4</button>
<button class="button ">5</button>
<button class="button ">6</button>
<button class="button accent">/</button>
</div>
<div class="calculator__row4">
<button class="button accent">&radic;<span class="over"></span></button>
<button class="button ">1</button>
<button class="button ">2</button>
<button class="button ">3</button>
<button class="button accent">-</button>
</div>
<div class="calculator__row5">

<div class="space" ></div>
<button class="button accent">.</button>
<button class="button ">0</button>
<button class="button accent">=</button>
<button class="button accent">+</button>
<div class="calculator__row2">
<button class="button accent">x^</button>
<button class="button ">7</button>
<button class="button ">8</button>
<button class="button ">9</button>
<button class="button accent">*</button>
</div>
<div class="calculator__row3">
<button class="button accent">%</button>
<button class="button ">4</button>
<button class="button ">5</button>
<button class="button ">6</button>
<button class="button accent">/</button>
</div>
<div class="calculator__row4">
<button class="button accent">&radic;<span class="over"></span></button>
<button class="button ">1</button>
<button class="button ">2</button>
<button class="button ">3</button>
<button class="button accent">-</button>
</div>
<div class="calculator__row5">
<div class="space" ></div>
<button class="button accent">.</button>
<button class="button ">0</button>
<button class="button accent">=</button>
<button class="button accent">+</button>
</div>

</div>


</div>
</div>




</body>
</div>
</div>

<script>
var display = document.getElementById("screen");
var buttons = document.getElementsByClassName("button");
Array.prototype.forEach.call(buttons, function(button) {

Array.prototype.forEach.call(buttons, function(button) {
button.addEventListener("click", function() {
if (button.textContent != "=" &&
button.textContent != "AC" &&
button.textContent != "*" &&
button.textContent != "/" &&
button.textContent != "√" &&
button.textContent != "+" &&
button.textContent != "%" &&
button.textContent != "=" &&
button.textContent != "-" &&
button.textContent != "sin" &&
button.textContent != "cos" &&
button.textContent != "tan" &&
button.textContent != "log" &&
button.textContent != "ln" &&
button.textContent != "x^" &&
button.textContent != "x!" &&
button.textContent != "pi" &&
button.textContent != "Rad"
&& button.textContent != "Deg") {
button.textContent != "AC" &&
button.textContent != "*" &&
button.textContent != "/" &&
button.textContent != "√" &&
button.textContent != "+" &&
button.textContent != "%" &&
button.textContent != "=" &&
button.textContent != "-" &&
button.textContent != "sin" &&
button.textContent != "cos" &&
button.textContent != "tan" &&
button.textContent != "log" &&
button.textContent != "ln" &&
button.textContent != "x^" &&
button.textContent != "x!" &&
button.textContent != "pi" &&
button.textContent != "Rad"
&& button.textContent != "Deg") {
display.value += button.textContent;
} else if (button.textContent === "=") {
equals();
@@ -267,7 +228,7 @@
divide();
} else if (button.textContent === "+") {
plus();
} else if (button.textContent === "-") {
} else if (button.textContent === "-") {
Minus();
} else if (button.textContent === "%") {
percent();
@@ -297,38 +258,30 @@
});
});


function syntaxError() {
if (eval(display.value) == SyntaxError || eval(display.value) == ReferenceError || eval(display.value) == TypeError) {
display.value == "Syntax Error";
}
}


function equals() {
if ((display.value).indexOf("^") > -1) {
var base = (display.value).slice(0, (display.value).indexOf("^"));
var exponent = (display.value).slice((display.value).indexOf("^") + 1);
display.value = eval("Math.pow(" + base + "," + exponent + ")");
} else {
display.value = eval(display.value)
checkLength()
syntaxError()
display.value = eval(display.value);
checkLength();
syntaxError();
}
}

function clear() {
display.value = "";
}


function multiply() {
display.value += "*";
}

function divide() {
display.value += "/";
}

function plus() {
display.value += "+";
}
@@ -337,71 +290,10 @@
display.value += "-";
}

function factorial() {
var number = 1;
if (display.value === 0) {
display.value = "1";
} else if (display.value < 0) {
display.value = "undefined";
} else {
var number = 1;
for (var i = display.value; i > 0; i--) {
number *= i;
}
display.value = number;
}
}

function pi() {
display.value = (display.value * Math.PI);
}

function square() {
display.value = eval(display.value * display.value);
}

function squareRoot() {
display.value = Math.sqrt(display.value);
}

function percent() {
display.value = display.value / 100;
}

function sin() {
display.value = Math.sin(display.value);
}


function cos() {
display.value = Math.cos(display.value);
}

function tan() {
display.value = Math.tan(display.value);
}

function log() {
display.value = Math.log10(display.value);
}

function ln() {
display.value = Math.log(display.value);
}

function exponent() {
display.value += "^";
}


function radians() {
display.value = display.value * (Math.PI / 180);
}

function degrees() {
display.value = display.value * (180 / Math.PI);
}

</script>

</html>
function pi() {
display.value = (display
<!-- origenal : https://codepen.io/dishabansal/pen/xypOBB -->