Add files via upload

mehendisil2004 · Aug 19, 2024 · 4c159fc · 4c159fc
1 parent f814ede
commit 4c159fc
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 0 deletions.
diff --git a/images/coquette.png b/images/coquette.png
diff --git a/images/icon.png b/images/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="icon" href="/images/icon.png" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Coquette Calculator</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Matemasie&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="calculator">
+      <div class="display" id="display">0</div>
+      <div class="buttons">
+        <button class="buttonp" onclick="clearDisplay()">C</button>
+        <button class="button" onclick="appendToDisplay('7')">7</button>
+        <button class="button" onclick="appendToDisplay('8')">8</button>
+        <button class="button" onclick="appendToDisplay('9')">9</button>
+        <button class="buttonq" onclick="appendToDisplay('/')">/</button>
+        <button class="button" onclick="appendToDisplay('4')">4</button>
+        <button class="button" onclick="appendToDisplay('5')">5</button>
+        <button class="button" onclick="appendToDisplay('6')">6</button>
+        <button class="buttonq" onclick="appendToDisplay('*')">*</button>
+        <button class="button" onclick="appendToDisplay('1')">1</button>
+        <button class="button" onclick="appendToDisplay('2')">2</button>
+        <button class="button" onclick="appendToDisplay('3')">3</button>
+        <button class="buttonq" onclick="appendToDisplay('-')">-</button>
+        <button class="button" onclick="appendToDisplay('0')">0</button>
+        <button class="buttonp" onclick="appendToDisplay('.')">.</button>
+        <button class="buttonp" onclick="calculate()">♡</button>
+        <button class="buttonq" onclick="appendToDisplay('+')">+</button>
+        <h3></h3>
+        <h3></h3>
+        <h3>₊⋆🎀𓍢ִ໋.</h3>
+      </div>
+    </div>
+    <style>
+      body {
+        background-image: url("/images/coquette.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: center;
+      }
+    </style>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,21 @@
+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");
+  try {
+    display.innerText = eval(display.innerText);
+  } catch {
+    display.innerText = "Error";
+  }
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,94 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  font-family: sans-serif;
+  min-height: 100%;
+}
+
+.calculator {
+  background-color: #fadde7;
+  border-radius: 30px;
+  padding: 32px;
+  width: 300px;
+}
+
+.display {
+  background-color: #fbc2d5;
+  border-radius: 10px;
+  box-shadow: inset 0 0 10px rgba(237, 147, 192, 0.2);
+  font-size: 2em;
+  height: 50px;
+  line-height: 50px;
+  margin-bottom: 20px;
+  padding: 0 10px;
+  text-align: right;
+}
+
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 9px;
+}
+
+.button {
+  background-color: #febad2;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px #f297bb;
+  color: #494848;
+  margin: 1px;
+  font-size: 1.5em;
+  height: 60px;
+  width: 60px;
+  text-align: center;
+  line-height: 60px;
+}
+
+.buttonp {
+  background-color: #faf4f6;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px #f9c8dc;
+  color: #494848;
+  margin: 1px;
+  font-size: 1.5em;
+  height: 60px;
+  width: 60px;
+  text-align: center;
+  line-height: 60px;
+}
+
+.buttonq {
+  background-color: #fa7ea7;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px #f75898;
+  color: #494848;
+  margin: 1px;
+  font-size: 1.5em;
+  height: 60px;
+  width: 60px;
+  text-align: center;
+  line-height: 60px;
+}
+
+h3 {
+  color: #b13166ef;
+}
+
+.button:active {
+  transform: translateY(2px);
+}
+
+.buttonp:active {
+  transform: translateY(2px);
+}
+
+.buttonq:active {
+  transform: translateY(2px);
+}
+
+