Build a Online Graphics Scientific Calculator in Browser Using HTML5 CSS3 and Javascript With Full Source Code For Beginners

 

 

 

index.html

 

 

<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
    body {
  padding: 5%;
  margin: 0 auto;
  text-align: center;
  font-size: 23px;
  font-color: white;
  color: white;
  background: white;
}

.main {
  max-width: 10%;
}

a,
a:visited {
  color: lightpink;
}

.calculator button {
  font-size: x-large;
  width: 4em;
  min-height: 3em;
  margin: 0.8%;
  border-radius: 25%;
  border: 2px solid salmon;
  box-shadow: 3px 3px 3px gray;
}

.dark {
  background: lightpink;
}

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

.calculator {
  display: inline-block;
  background: white;
  margin: 1% 0;
  color: hotpink;
  border-radius: 5%;
  border: 5px solid hotpink;
  box-shadow: 5px 5px 5px 3px gray;
}

.calculator button:hover,
#clear:hover,
#backspace:hover {
  background: pink;
  color: white;
  transform: scale(0.9);
  border-radius: 20%;
}

.calculator button:focus,
#clear:focus,
#backspace:focus {
  outline: none;
}

.button:active,
.button-active {
  background: deeppink;
  color: pink;
  transform: scale(0.9);
}

#screen {
  background: pink;
  border: 3px solid salmon;
  box-shadow: 3px 3px 3px 3px gray;
  border-radius: 5%;
  width: 80%;
  height: 120px;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  text-align: right;
  overflow: auto;
  overflow-wrap: break-word;
  font-size: 60px;
}

#clean {
  background: salmon;
}

.calculator__row1,
.calculator__row2,
.calculator__row3,
.calculator__row4,
.calculator__row5 {
  display: flex;
  margin: 0 auto;
  max-width: 80%;
  justify-content: space-around;
  align-items: center;
  font-family: 'Jua', sans-serif;
}

.calculator__row5 {
  margin-bottom: 3%;
}

.footer {
  /* margin-top: 2%;
  font-size: medium; */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

	
</style>
<div id="main">
		<div class="calculator">
		<input type="text" id="screen">
      <div class="calculator__row1">
    <button class="button">Rad</button>
    <button class="button" >Deg</button>
                               
<h1 style="font-size: 200%; margin-left: 20px; margin-right: 20px"> 룽룽 계산기</h1>
<button class="button" id="clean">AC</button>
</div>
    <div class="calculator__row2">
         <button class="button">sin</button>
         <button class="button">cos</button>
         <button class="button">tan</button>
		   <button class="button dark">7</button>
			<button class="button dark">8</button>
			<button class="button dark">9</button>
			<button class="button">*</button>
    </div>
	<div class="calculator__row3">
        <button class="button">x^</button>
        <button class="button">pi</button>
        <button class="button">%</button>
		  <button class="button dark">4</button>
			<button class="button dark">5</button>
			<button class="button dark">6</button>
			<button class="button">/</button>
	</div>
	<div class="calculator__row4">
      <button class="button">ln</button>
      <button class="button">log</button>
      <button class="button">x!</button>
			<button class="button dark">1</button>
			<button class="button dark">2</button>
			<button class="button dark">3</button>
			<button class="button">-</button>
	</div>
			<div class="calculator__row5">
      <button class="button">√<span class="over"></span></button>
      <button class="button">(</button>
      <button class="button">)</button>
			<button class="button">.</button>
      <button class="button dark">0</button>
			<button class="button">=</button>
			<button class="button">+</button>
</div>
</div>
</div>
<script>
    var display = document.getElementById("screen");
var buttons = document.getElementsByClassName("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") {
      display.value += button.textContent;
    } else if (button.textContent === "=") {
      equals();
    } else if (button.textContent === "AC") {
      clear();
    } else if (button.textContent === "*") {
      multiply();
    } else if (button.textContent === "/") {
      divide();
    } else if (button.textContent === "+") {
      plus();
      } else if (button.textContent === "-") {
      Minus();
    } else if (button.textContent === "%") {
      percent();
    } else if (button.textContent === "pi") {
      pi();
    } else if (button.textContent === "√") {
      squareRoot();
    } else if (button.textContent === "sin") {
      sin();
    } else if (button.textContent === "cos") {
      cos();
    } else if (button.textContent === "tan") {
      tan();
    } else if (button.textContent === "log") {
      log();
    } else if (button.textContent === "ln") {
      ln();
    } else if (button.textContent === "x^") {
      exponent();
    } else if (button.textContent === "x!") {
      factorial();
    } else if (button.textContent === "Rad") {
      radians();
    } else if (button.textContent === "Deg") {
      degrees();
    }
  });
});


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()
  }
}

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


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

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

function Minus() {
  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>

Leave a Reply