From 3a789f0f89b84ec20c6465c96dfe5b99eb25e0a3 Mon Sep 17 00:00:00 2001
From: Vidhisha Katariya <99196797+VIDHISHAK15@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:49:22 +0530
Subject: [PATCH 1/4] Update index.html

---
 Calculators/Percentage-Calculator/index.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/Calculators/Percentage-Calculator/index.html b/Calculators/Percentage-Calculator/index.html
index af7830e93..1b75c0a52 100644
--- 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>

From d4df5840d4017f66fb8d042f592c1834476b5343 Mon Sep 17 00:00:00 2001
From: Vidhisha Katariya <99196797+VIDHISHAK15@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:49:46 +0530
Subject: [PATCH 2/4] Update script.js

---
 Calculators/Percentage-Calculator/script.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Calculators/Percentage-Calculator/script.js b/Calculators/Percentage-Calculator/script.js
index 764b931af..0b4cf74c3 100644
--- a/Calculators/Percentage-Calculator/script.js
+++ b/Calculators/Percentage-Calculator/script.js
@@ -7,6 +7,7 @@ function calculatePercentage() {
     alert("Please enter valid numbers");
     return;
   }
+  
 
   var result = (number * percentage) / 100;
 
@@ -17,6 +18,7 @@ function calculatePercentage() {
   document.getElementById(
     "result"
   ).innerText = `Result: ${percentage}% of ${number} is ${result}`;
+
 }
 
 // Add a reset function to clear input fields and result
@@ -27,5 +29,6 @@ function resetCalculator() {
   document.getElementById("result").innerText = "";
 }
 
+
 // Add an event listener to the reset button
 document.getElementById("reset").addEventListener("click", resetCalculator);

From 66449e76fd352a88b5cee3f6e94d0f95589c6228 Mon Sep 17 00:00:00 2001
From: Vidhisha Katariya <99196797+VIDHISHAK15@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:50:16 +0530
Subject: [PATCH 3/4] Update style.css

---
 Calculators/Percentage-Calculator/style.css | 131 ++++++++++++++------
 1 file changed, 90 insertions(+), 41 deletions(-)

diff --git a/Calculators/Percentage-Calculator/style.css b/Calculators/Percentage-Calculator/style.css
index e3e1212fe..057fae7cc 100644
--- 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;
 }
-

From 6bbf5a963ed5c3826f38e0168bb6718d48c47f0d Mon Sep 17 00:00:00 2001
From: Rakesh Roshan <roshanrakesh7362@gmail.com>
Date: Wed, 21 Feb 2024 23:49:35 +0530
Subject: [PATCH 4/4] Update script.js

---
 Calculators/Percentage-Calculator/script.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/Calculators/Percentage-Calculator/script.js b/Calculators/Percentage-Calculator/script.js
index 0b4cf74c3..764b931af 100644
--- a/Calculators/Percentage-Calculator/script.js
+++ b/Calculators/Percentage-Calculator/script.js
@@ -7,7 +7,6 @@ function calculatePercentage() {
     alert("Please enter valid numbers");
     return;
   }
-  
 
   var result = (number * percentage) / 100;
 
@@ -18,7 +17,6 @@ function calculatePercentage() {
   document.getElementById(
     "result"
   ).innerText = `Result: ${percentage}% of ${number} is ${result}`;
-
 }
 
 // Add a reset function to clear input fields and result
@@ -29,6 +27,5 @@ function resetCalculator() {
   document.getElementById("result").innerText = "";
 }
 
-
 // Add an event listener to the reset button
 document.getElementById("reset").addEventListener("click", resetCalculator);
