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;
 }