simple calculator developed

shahidafridi-321 · Apr 18, 2024 · b8a6670 · b8a6670
commit b8a6670
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 0 deletions.
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="script.js" defer></script>
+  <link rel="stylesheet" href="style.css">
+  <title>calculator</title>
+</head>
+
+<body>
+  <div class="container bg">
+    <div class="text-container">
+      <input type="text" id="screen" disabled placeholder="00.0">
+    </div>
+    <div class="top-btn-container">
+      <div class="button-container">
+        <button class="btns btnOne">1</button>
+        <button class="btns btnTwo">2</button>
+        <button class="btns btnThree">3</button>
+        <button class="btns btnPlus">+</button>
+      </div>
+      <div class="button-container">
+        <button class="btns btnFour">4</button>
+        <button class="btns btnFive">5</button>
+        <button class="btns btnSix">6</button>
+        <button class="btns btnMinus">-</button>
+      </div>
+      <div class="button-container">
+        <button class="btns btnSeven">7</button>
+        <button class="btns btnEight">8</button>
+        <button class="btns btnNine">9</button>
+        <button class="btns btnMul">x</button>
+      </div>
+      <div class="button-container">
+        <button class="btns btnReset">AC</button>
+        <button class="btns btnZero">0</button>
+        <button class="btns btnRemove">C</button>
+        <button class="btns btnDiv">/</button>
+      </div>
+      <div class="button-container">
+        <button class="btns btnModulo">%</button>
+        <button class="btns btnDot">-</button>
+        <button class="btns btnPower">^</button>
+        <button class="btns btnMode">M</button>
+      </div>
+      <div class="button-container">
+        <button class="btns btnEquals">Equals</button>
+
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,71 @@
+
+const text = document.getElementById('screen');
+const btnOne = document.querySelector('.btnOne');
+const btnTwo = document.querySelector('.btnTwo');
+const btnThree = document.querySelector('.btnThree');
+const btnPlus = document.querySelector('.btnPlus');
+const btnFour = document.querySelector('.btnFour');
+const btnFive = document.querySelector('.btnFive');
+const btnSix = document.querySelector('.btnSix');
+const btnMinus = document.querySelector('.btnMinus');
+const btnSeven = document.querySelector('.btnSeven');
+const btnEight = document.querySelector('.btnEight');
+const btnNine = document.querySelector('.btnNine');
+const btnMul = document.querySelector('.btnMul');
+const btnReset = document.querySelector('.btnReset');
+const btnZero = document.querySelector('.btnZero');
+const btnEquals = document.querySelector('.btnEquals');
+const btnDiv = document.querySelector('.btnDiv');
+const btnModulo = document.querySelector('.btnModulo');
+const btnDot = document.querySelector('.btnDot');
+const btnPower = document.querySelector('.btnPower');
+const btnMode = document.querySelector('.btnMode');
+const btnRemove = document.querySelector('.btnRemove');
+btnOne.addEventListener('click', () => { text.value += '1'; });
+btnTwo.addEventListener('click', () => { text.value += '2'; });
+btnThree.addEventListener('click', () => { text.value += '3'; });
+btnPlus.addEventListener('click', () => { text.value += '+'; });
+btnFour.addEventListener('click', () => { text.value += '4'; });
+btnFive.addEventListener('click', () => { text.value += '5'; });
+btnSix.addEventListener('click', () => { text.value += '6'; });
+btnMinus.addEventListener('click', () => { text.value += '-'; });
+btnSeven.addEventListener('click', () => { text.value += '7'; });
+btnEight.addEventListener('click', () => { text.value += '8'; });
+btnNine.addEventListener('click', () => { text.value += '9'; });
+btnMul.addEventListener('click', () => { text.value += '*'; });
+btnReset.addEventListener('click', () => { text.value = ''; });
+btnZero.addEventListener('click', () => { text.value += '0'; });
+btnEquals.addEventListener('click', resultfun);
+btnDiv.addEventListener('click', () => { text.value += '/'; });
+btnModulo.addEventListener('click', () => { text.value += '%'; });
+btnDot.addEventListener('click', () => { text.value += '.'; });
+btnPower.addEventListener('click', () => { text.value += '**'; });
+btnMode.addEventListener('click', changeBg , {once:true});
+btnRemove.addEventListener('click', cutLastChar);
+
+function resultfun() {
+  let expression = text.value;
+  let result = eval(expression);
+  if(result) {
+    text.value = result;
+  } else {
+    text.value = null;
+  }
+}
+function changeBg() {
+  const container = document.querySelector('.bg');
+  const btnContainer = document.querySelectorAll('.btns');
+  container.classList.remove('bg');
+  container.classList.add('changebg');
+  btnContainer.forEach((btn) => btn.classList.add('changebg'));
+  text.classList.add('changebg');
+  text.style.color = 'black';
+  text.style.paddingRight = '30px';
+}
+
+function cutLastChar() {
+  let str = text.value.slice(0, text.value.length - 1);
+  text.value = str;
+}
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,76 @@
+body {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+}
+
+.bg {
+  background-color: rgba(3, 3, 3, 0.815);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: auto;
+  height: auto;
+  border: none;
+  border-radius: 10px;
+}
+
+.text-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+  margin-bottom: 20px;
+}
+
+#screen {
+  width: 90%;
+  height: 50px;
+  border-radius: 5px;
+  border: none;
+  color: #fefefe;
+  text-align: right;
+  font-size: large;
+  font-style: oblique;
+  padding-right: 20px;
+
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.top-btn-container {
+  margin: 20px 0;
+}
+
+.btns {
+  color: #fefefe;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-size: large;
+  font-style: italic;
+  width: 40px;
+  height: 30px;
+  border: none;
+  border-radius: 15px;
+  box-shadow: 3px 3px 10px black;
+  background-color: rgba(3, 3, 3, 0.1);
+  cursor: pointer;
+}
+
+.changebg {
+  background-color: #c9c0c0;
+  border: none;
+  color: black;
+}
+
+.btnEquals {
+  display: flex;
+  width: 90%;
+  padding-top: 5px;
+  justify-content: center;
+}