Update index.html

Jayant-1 · Jun 13, 2024 · e4cafc7 · e4cafc7
1 parent fd5fa1f
commit e4cafc7
Showing 1 changed file with 116 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -11,7 +11,122 @@
   <body>
     <div class="main-cantainer" >
       <h1 class="text-center">Calculator</h1>
-      <div class="cantainer">
+      <div class="cantainer"><!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="utile.css">
+    <title>Calc</title>
+</head>
+<body>
+    <h1 class="text-center" >Calculator</h1>
+    <div class="cantainer">
+        <div class="row">
+            <input type="text" class="input">
+        </div>
+        <div class="row">
+            <button class="button" style="background-color: floralwhite; width: 145px; " >AC</button>
+            <!-- <button class="button">+/-</button> -->
+            <button class="button">%</button>
+            <button class="button">/</button>
+        </div>
+        <div class="row">
+            <button class="button">7</button>
+            <button class="button">8</button>
+            <button class="button">9</button>
+            <button class="button">*</button>
+        </div>
+        <div class="row">
+            <button class="button">4</button>
+            <button class="button">5</button>
+            <button class="button">6</button>
+            <button class="button">-</button>
+        </div>
+        <div class="row">
+            <button class="button">1</button>
+            <button class="button">2</button>
+            <button class="button">3</button>
+            <button class="button">+</button>
+        </div>
+        <div class="row">
+            <button class="button">0</button>
+            <!-- <button class="button">0</button> -->
+            <button class="button" style="font-size: 35px;" >.</button>
+            <button class="button" style="width: 145px; background-color: lightcyan;" >=</button>
+        </div>
+    </div>
+</body>
+<style>
+*{
+    margin: 0;
+    padding: 0;
+}
+.text-center{
+    /* text-decoration: underline; */
+    font-family: cursive, Arial,sans-serif;
+    font-style: oblique;
+    font-size: xx-large;
+    text-align: center;
+}
+.cantainer{
+    text-align: center;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.button{
+    font-family: 'math', 'Arial Narrow', Arial, sans-serif;
+    width: 70px;
+    /* padding: 20px; */
+    margin: 0 3px;
+    border: 2px solid black;
+    border-radius: 9px;
+    /* max-height: 7px; */
+    height: 50px;
+    font-size: 25px;
+}
+.row{
+    display: flex;
+    margin: 8px 0;
+    align-items: center;
+    justify-content: center;
+}
+.input{
+    width: 300px;
+    font-size: 20px;
+    margin: 0;
+    padding: 10px 2px;
+    border: 2px solid black;
+    border-radius: 5px; ;
+
+}
+</style>
+<script>
+let string = "";
+let buttons = document.querySelectorAll('.button');
+Array.from(buttons).forEach((button)=>{
+    button.addEventListener('click', (e)=>{
+        if(e.target.innerHTML == "="){
+            string = eval(string);
+            document.querySelector('input').value = string;
+        }
+        else if(e.target.innerHTML == "AC"){
+            string = ""
+            document.querySelector('input').value = string;
+        }
+        else{
+            console.log(e.target)
+            string = string + e.target.innerHTML;
+            document.querySelector('input').value = string;
+        }
+    })
+})
+</script>
+</html> 
         <div class="row">
           <input type="text" class="input" />
         </div>