sahandghavidel · Akshat162001 · Jul 11, 2023 · Jul 12, 2023 · Jul 12, 2023 · Jul 12, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "liveServer.settings.port": 5502,
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}
diff --git a/projects/age-calculator/ReadMe b/projects/age-calculator/ReadMe
@@ -0,0 +1,5 @@
+#Age Calculator
+
+This projects calculates the age of a person 
+
+#Happy coding
diff --git a/projects/button-ripple-effect/index.html b/projects/button-ripple-effect/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <a href="#" class="btn"><span>Button</span></a>
+    <button class="ripple">Click Me</button>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/projects/button-ripple-effect/index.js b/projects/button-ripple-effect/index.js
@@ -1,9 +1,32 @@
-const btnEl = document.querySelector(".btn");
+// const btnEl = document.querySelector(".btn");
 
-btnEl.addEventListener("mouseover", (event) => {
-  const x = event.pageX - btnEl.offsetLeft;
-  const y = event.pageY - btnEl.offsetTop;
+// btnEl.addEventListener("mouseover", (event) => {
+//   const x = event.pageX - btnEl.offsetLeft;
+//   const y = event.pageY - btnEl.offsetTop;
 
-  btnEl.style.setProperty("--xPos", x + "px");
-  btnEl.style.setProperty("--yPos", y + "px");
-});
+//   btnEl.style.setProperty("--xPos", x + "px");
+//   btnEl.style.setProperty("--yPos", y + "px");
+// });
+const buttons = document.querySelectorAll('.ripple')
+
+buttons.forEach(button => {
+    button.addEventListener('click', function (e) {
+        const x = e.pageX
+        const y = e.pageY
+
+        const buttonTop = e.target.offsetTop
+        const buttonLeft = e.target.offsetLeft
+
+        const xInside = x - buttonLeft
+        const yInside = y - buttonTop
+
+        const circle = document.createElement('span')
+        circle.classList.add('circle')
+        circle.style.top = yInside + 'px'
+        circle.style.left = xInside + 'px'
+
+        this.appendChild(circle)
+
+        setTimeout(() => circle.remove(), 500)
+    })
+})
diff --git a/projects/button-ripple-effect/style.css b/projects/button-ripple-effect/style.css
@@ -1,43 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
 body {
-  margin: 0;
+  background-color: #000;
+  font-family: 'Roboto', sans-serif;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   height: 100vh;
-  align-items: center;
-  background-color: aliceblue;
-  font-family: sans-serif;
+  overflow: hidden;
+  margin: 0;
 }
 
-.btn {
-  background-color: pink;
-  padding: 20px 40px;
-  border-radius: 5px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  text-decoration: none;
-  color: black;
-  position: relative;
+button {
+  background-color: rgb(225, 12, 147);
+  color: #fff;
+  border: 1px rgb(235, 21, 89) solid;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  padding: 20px 30px;
   overflow: hidden;
+  margin: 10px 0;
+  position: relative;
+  border-radius: 4px;
 }
 
-.btn span {
-  position: relative;
-  z-index: 1;
+button:focus {
+  outline: none;
 }
 
-.btn::before {
-  content: "";
+button .circle {
   position: absolute;
-  background-color: orangered;
-  width: 0;
-  height: 0;
-  left: var(--xPos);
-  top: var(--yPos);
-  transform: translate(-50%, -50%);
+  background-color: #fff;
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
-  transition: width 0.5s, height 0.5s;
+  transform: translate(-50%, -50%) scale(0);
+  animation: scale 0.5s ease-out;
 }
 
-.btn:hover::before {
-  width: 300px;
-  height: 300px;
+@keyframes scale {
+  to {
+    transform: translate(-50%, -50%) scale(3);
+    opacity: 0;
+  }
 }
+
diff --git a/projects/digital-clock/index.html b/projects/digital-clock/index.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Digital Clock</title>
+    <title>Rolex Clock</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h2>Digital Clock</h2>
+    <h2 style="text-align: center;">Digital Clock</h2>
     <div class="clock">
       <div>
         <span id="hour">00</span>

diff --git a/projects/digital-clock/index.js b/projects/digital-clock/index.js
@@ -1,3 +1,33 @@
+// const hourEl = document.getElementById("hour");
+// const minuteEl = document.getElementById("minutes");
+// const secondEl = document.getElementById("seconds");
+// const ampmEl = document.getElementById("ampm");
+
+// function updateClock() {
+//   let h = new Date().getHours();
+//   let m = new Date().getMinutes();
+//   let s = new Date().getSeconds();
+//   let ampm = "AM";
+
+//   if (h > 12) {
+//     h = h - 12;
+//     ampm = "PM";
+//   }
+
+//   h = h < 10 ? "0" + h : h;
+//   m = m < 10 ? "0" + m : m;
+//   s = s < 10 ? "0" + s : s;
+
+//   hourEl.innerText = h;
+//   minuteEl.innerText = m;
+//   secondEl.innerText = s;
+//   ampmEl.innerText = ampm;
+//   setTimeout(() => {
+//     updateClock();
+//   }, 1000);
+// }
+
+// updateClock();
 const hourEl = document.getElementById("hour");
 const minuteEl = document.getElementById("minutes");
 const secondEl = document.getElementById("seconds");
@@ -7,12 +37,10 @@ function updateClock() {
   let h = new Date().getHours();
   let m = new Date().getMinutes();
   let s = new Date().getSeconds();
-  let ampm = "AM";
+  let ampm = h >= 12 ? "PM" : "AM";
 
-  if (h > 12) {
-    h = h - 12;
-    ampm = "PM";
-  }
+  h = h % 12;
+  h = h ? h : 12; // Convert 0 to 12 for 12-hour format
 
   h = h < 10 ? "0" + h : h;
   m = m < 10 ? "0" + m : m;
@@ -22,9 +50,8 @@ function updateClock() {
   minuteEl.innerText = m;
   secondEl.innerText = s;
   ampmEl.innerText = ampm;
-  setTimeout(() => {
-    updateClock();
-  }, 1000);
+
+  setTimeout(updateClock, 1000);
 }
 
-updateClock();
+updateClock();
diff --git a/projects/digital-clock/style.css b/projects/digital-clock/style.css
@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  /* margin: 0; */
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
@@ -8,7 +8,7 @@ body {
   justify-content: center;
   background: url("https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");
   background-size: cover;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 h2 {

diff --git a/projects/loan-calculator/index.html b/projects/loan-calculator/index.html
@@ -7,20 +7,26 @@
     <title>Loan Calculator</title>
     <link rel="stylesheet" href="style.css">
 </head>
-<body>
+<body style="font-family: 'Times New Roman', Times, serif;">
+    <form action="" id="from">
     <div class="container">
         <h1>Loan Calculator</h1>
         <p>Loan Amount $
-            <input onchange="calculateLoan()" class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
+            <input  class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
         </p>
         <p>Interest Rate %
-            <input onchange="calculateLoan()" class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
+            <input  class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
         </p>
         <p>Months to pay
-            <input onchange="calculateLoan()" class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
+            <input   class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
         </p>
-        <p class="payment" id="payment">Monthly Payment:</p>
+        <button id="c" class="Cen" onclick="calculateLoan()" style="font-size: 15px; border-radius: 5px;height: 30px;text-align: center;">Calculate</button>
+        <br>
+        <br>
+
+        <div id="payment"></div>
     </div>
+</form>
 
     <script src="index.js"></script>
 </body>

diff --git a/projects/loan-calculator/index.js b/projects/loan-calculator/index.js
@@ -1,15 +1,21 @@
 function calculateLoan() {
-  loanAmountValue = document.getElementById("loan-amount").value;
+  event.preventDefault();
 
-  interestRateValue = document.getElementById("interest-rate").value;
+   var loanAmountValue = document.getElementById("loan-amount").value;
 
-  MonthsToPayValue = document.getElementById("months-to-pay").value;
+   var interestRateValue = document.getElementById("interest-rate").value;
 
-  interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
+  var MonthsToPayValue = document.getElementById("months-to-pay").value;
+
+ var interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
 
   monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);
 
-  document.getElementById(
-    "payment"
-  ).innerHTML = `Monthly Payment: ${monthlyPayment}`;
+
+  document.getElementById("payment").innerHTML="Total Loan to be paid is Ruppees " + monthlyPayment
+  document.getElementById("loan-amount").value = "";
+  document.getElementById("interest-rate").value = "";
+  document.getElementById("months-to-pay").value = "";
+
+
 }
diff --git a/projects/loan-calculator/style.css b/projects/loan-calculator/style.css
@@ -6,6 +6,7 @@ body{
     justify-content: center;
     align-items: center;
     font-family: 'Courier New', Courier, monospace;
+    background-color: rgb(246, 150, 82);
 }
 
 .container{
@@ -24,4 +25,10 @@ body{
 .payment{
     font-weight: 600;
     font-size: 20px;
+}
+.Cen{
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    margin-left: 80px;
 }