Enhanced Percentage Calculator UI (#602)

Rakesh9100 · Feb 21, 2024 · 2cc6acd · 2cc6acd
1 parent e1d2e7d
commit 2cc6acd
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 42 deletions.
diff --git a/Calculators/Percentage-Calculator/index.html b/Calculators/Percentage-Calculator/index.html
@@ -7,6 +7,9 @@
     <title>Enhanced Percentage Calculator</title>
 </head>
 <body>
+    <div class="header">
+    <h1> % PERCENTAGE CALCULATOR % </h1>
+</div>
     <div class="calculator-container">
         <h2>Percentage Calculator</h2>
         <div class="input-container">
@@ -18,7 +21,7 @@ <h2>Percentage Calculator</h2>
             <input type="number" id="percentage" placeholder="Enter percentage">
         </div>
         <div class="options-container">
-            <label for="round">Round to:</label>
+            <label for="round">Round off to:</label>
             <select id="round">
                 <option value="0">No rounding</option>
                 <option value="1">1 decimal place</option>

diff --git a/Calculators/Percentage-Calculator/style.css b/Calculators/Percentage-Calculator/style.css
@@ -1,76 +1,125 @@
 body {
-    font-family: 'Arial', sans-serif;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    background-color: #f5f5f5;
-    display: flex;
-    flex-direction: column;
+  font-family: "Arial", sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  background: rgb(253, 191, 232);
+  background: linear-gradient(
+    329deg,
+    rgba(253, 191, 232, 1) 0%,
+    rgba(51, 57, 125, 1) 21%,
+    rgba(149, 219, 233, 1) 100%
+  );
 }
 
 .calculator-container {
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    text-align: center;
-    margin-top: 30px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  margin-top: 30px;
+  font-family: "Roboto Mono", "monospace";
+}
+.calculator-container:hover {
+  transform: scale(1.1);
 }
-
 .input-container {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
+  font-family: "Roboto Mono", "monospace";
+
 }
 
 label {
-    display: block;
-    margin-bottom: 5px;
+  display: block;
+  margin-bottom: 5px;
 }
 
 input {
-    padding: 8px;
-    width: 100%;
-    box-sizing: border-box;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 }
 
 button {
-    background-color: #4caf50;
-    color: #fff;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
+  background-color: #4caf50;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.35s ease-Out;
 }
 
 button:hover {
-    background-color: #45a049;
+  background-color: #055ea3;
 }
 
+button:hover #slide {
+  width: 100%;
+  height: 100%;
+  left: -200px;
+  background: #acc9c9;
+  position: absolute;
+  transition: all 0.35s ease-Out;
+  bottom: 0;
+  left: 0;
+}
 .result {
-    margin-top: 20px;
-    font-size: 18px;
-    font-weight: bold;
+  margin-top: 20px;
+  font-size: 18px;
+  font-weight: bold;
+  font-family: "Roboto Mono", "monospace";
 }
 /* Add styles for the new select element */
 .options-container {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
+  font-family: "Roboto Mono", "monospace";
 }
 
 select {
-    padding: 8px;
-    width: 100%;
-    box-sizing: border-box;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: "Roboto Mono", "monospace";
+  border-radius: 8px;
 }
 
 /* Add styling for the reset button */
 button.reset {
-    background-color: #f44336;
+  background-color: #f44336;
 }
 
 button.reset:hover {
-    background-color: #d32f2f;
+  background-color: #d32f2f;
+}
+@font-face {
+  src: url("https://fonts.googleapis.com/css?family=Roboto+Mono:100");
+  font-family: "Roboto Mono", monospace;
+  background: #212121;
+  height: 100%;
+}
+.header {
+  height: 100%;
+  width: 50%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  font-family: "Roboto Mono", monospace;
+  font-weight: 100%;
+  font-size: 24px;
+  color: rgb(6, 0, 4);
+  transition: all 0.5s ease-Out;
 }
-