Merge pull request #10 from tinkersain/tanisha

calculator file
tinkersain · Jul 2, 2024 · 041c63c · 041c63c
2 parents c395471 + fd5b98d
commit 041c63c
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 10 deletions.
diff --git a/calculator.css b/calculator.css
@@ -0,0 +1,64 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background: linear-gradient(45deg, #3dd3c4, #d69d5c);
+}
+.calculator {
+  width: 320px;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+.display {
+  width: 100%;
+  height: 60px;
+  background-color: #222;
+  color: #fff;
+  text-align: right;
+  font-size: 2em;
+  padding: 10px;
+  border-radius: 5px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin-top: 20px;
+}
+.button {
+  width: 100%;
+  padding: 20px;
+  font-size: 1.5em;
+  text-align: center;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  user-select: none;
+}
+.button:active {
+  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+.button.operator {
+  background-color: #f1a035;
+  color: #fff;
+}
+.button.equal {
+  background-color: #4caf50;
+  color: #fff;
+  grid-column: span 2;
+}
+.button.clear {
+  background-color: #36b1f4;
+  color: #fff;
+}
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Simple Calculator</title>
+    <link rel="stylesheet" href="./calculator.css" />
+    <script src="./calculator.js"></script>
+  </head>
+  <body>
+    <div class="calculator">
+      <div class="display" id="display">0</div>
+      <div class="buttons">
+        <div class="button clear" onclick="clearDisplay()">C</div>
+        <div class="button" onclick="appendToDisplay('7')">7</div>
+        <div class="button" onclick="appendToDisplay('8')">8</div>
+        <div class="button" onclick="appendToDisplay('9')">9</div>
+        <div class="button operator" onclick="appendToDisplay('/')">/</div>
+        <div class="button" onclick="appendToDisplay('4')">4</div>
+        <div class="button" onclick="appendToDisplay('5')">5</div>
+        <div class="button" onclick="appendToDisplay('6')">6</div>
+        <div class="button operator" onclick="appendToDisplay('*')">*</div>
+        <div class="button" onclick="appendToDisplay('1')">1</div>
+        <div class="button" onclick="appendToDisplay('2')">2</div>
+        <div class="button" onclick="appendToDisplay('3')">3</div>
+        <div class="button operator" onclick="appendToDisplay('-')">-</div>
+        <div class="button" onclick="appendToDisplay('0')">0</div>
+        <div class="button" onclick="appendToDisplay('.')">.</div>
+        <div class="button equal" onclick="calculate()">=</div>
+        <div class="button operator" onclick="appendToDisplay('+')">+</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/calculator.js b/calculator.js
@@ -0,0 +1,17 @@
+function clearDisplay() {
+  document.getElementById("display").innerText = "0";
+}
+
+function appendToDisplay(value) {
+  const display = document.getElementById("display");
+  if (display.innerText === "0") {
+    display.innerText = value;
+  } else {
+    display.innerText += value;
+  }
+}
+
+function calculate() {
+  const display = document.getElementById("display");
+  display.innerText = eval(display.innerText);
+}
diff --git a/webpage.html b/webpage.html
@@ -8,16 +8,22 @@
       background-color: aqua;
     }
     div {
-      border: 2px solid black;
+      /* border: 2px solid black; */
       /* display: flex;
       flex-direction: column; */
-      grid-template-columns: 1fr;
-      grid-gap: 10px;
-      background-color: beige;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
     }
     div + h1 {
       color: goldenrod;
     }
+    @media screen and(min-width:320px) and (max-width: 425px) {
+      div {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
   </style>
   <body style="background-color: lightpink">
     <h1>All about happy faces</h1>
@@ -68,13 +74,12 @@ <h1>Contact Us</h1>
     <p style="margin: 100px 40px 45px 56px">Say hello to all cuties</p>
     <div>
       <div class="h">
-        <div><h1>Hello</h1></div>
-        <div><h1>Hello</h1></div>
+        <div style="background-color: aliceblue"><h1>Hello</h1></div>
+        <div style="background-color: blue"><h1>Hello</h1></div>
       </div>
-      <div></div>
-      <h1>Hello</h1>
-      <div><h1>Hello</h1></div>
+      <div style="background-color: rgb(182, 22, 22)"><h1>Hello</h1></div>
+      <div style="background-color: blueviolet"><h1>Hello</h1></div>
     </div>
-    <h1>Hello</h1>
+    <h1 style="background-color: rgb(159, 128, 187)">Hello</h1>
   </body>
 </html>