Add files via upload

Gouravchouhan202 · Jan 19, 2024 · 296ab7f · 296ab7f
1 parent a4565d9
commit 296ab7f
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 0 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,48 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+h3{
+    text-align: center;
+    margin: 25px;
+}
+#calci
+{
+    background-image: repeating-linear-gradient(rgb(36, 183, 70),rgb(131, 27, 131),rgb(125, 26, 26),white);
+    border: 5px double blue;
+    width: 35%;
+    height: auto;
+    margin: 20px auto;
+}
+
+input[type="text"]
+{
+color: rgb(8, 124, 226);
+background-image: repeating-linear-gradient(white);
+width: 98%;
+height: 70px;
+border-color: black;
+font-size: 50px;
+}
+
+#OnOff
+{
+    font-size: 50px;
+    font-weight: 600;
+    text-align: center;
+}
+#ce
+{
+    text-align: right;
+    margin-right: 10px;
+}
+button{
+    background-image: linear-gradient(white , grey);
+    height: 70px;
+    width: 70px;
+    border-radius: 50%;
+    font-size: 40px;
+    font-weight: 700;
+    margin: 25px;
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>calculator</title>
+<link rel="stylesheet" href="./index.css">
+</head>
+<body>
+<h3>calculator</h3>
+<div id="calci">
+
+<input type="text" name="" id="display">
+<div class="row" id="OnOff">
+<input type="radio" name="turnon" onclick="turnOn()">
+<label for="">ON</label>
+<input type="radio" name="turnon" id="" onclick="turnOff()">
+<label for="">OFF</label>
+
+</div>
+<div class="row" id="ce">
+    <button onclick="clearOnechar()">C</button>
+    <button onclick="clearAll()">CE</button>
+</div>
+<div class="row">
+<button onclick="displayInInput(this)">1</button>
+<button onclick="displayInInput(this)">2</button>
+<button onclick="displayInInput(this)">3</button>
+<button onclick="displayInInput(this)">+</button>
+</div>
+<br>
+<div class="row">
+    <button onclick="displayInInput(this)">1</button>
+    <button onclick="displayInInput(this)">2</button>
+    <button onclick="displayInInput(this)">3</button>
+    <button onclick="displayInInput(this)">+</button>
+    </div>
+<br>
+<div class="row">
+    <button onclick="displayInInput(this)">4</button>
+    <button onclick="displayInInput(this)">5</button>
+    <button onclick="displayInInput(this)">6</button>
+    <button onclick="displayInInput(this)">-</button>
+    </div>
+    <br>
+    <div class="row">
+        <button onclick="displayInInput(this)">7</button>
+        <button onclick="displayInInput(this)"> 8</button>
+        <button onclick="displayInInput(this)">9</button>
+        <button onclick="displayInInput(this)">*</button>
+        </div>
+        <br>
+        <div class="row">
+            <button onclick="displayInInput(this)">0</button>
+            <button onclick="displayInInput(this)">.</button>
+            <button onclick="displayInInput(this)">/</button>
+            <button onclick="calculate()">=</button>
+            </div>
+</div>
+
+
+    <script src="./index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,47 @@
+var isTurnOn=false;
+
+function turnOn()
+{
+    isTurnOn=true;
+    document.getElementById('display').disabled=false;
+}
+function trunOff()
+{
+    isTurnOn=false;
+    document.getElementById('display').value=""
+    document.getElementById('display').disabled=true;
+}
+function displayInInput(clickedElement)
+{
+if(isTurnOn)
+{
+    let clickedvalue=clickedElement.innerText;
+    console.log(clickedvalue)
+    let curvalue=document.getElementById('display').value;
+    document.getElementById('display').value=curvalue+clickedvalue;
+}
+else
+{
+    alert("please turn on calculator")
+}
+}
+
+
+function calculate()
+{
+    let expression=document.getElementById('display').value;
+    let result =eval(expression);
+    document.getElementById('display').value=result;
+}
+
+function clearALl()
+{
+    document.getElementById('display').value='';
+}
+
+function clearOnechar()
+{
+    let expression=document.getElementById('display').value;
+    let size=expression.substring(size-1);
+    document.getElementById('display').value=expression;
+}