From 4ad3011290064abd3dfc2a67ab0d9d8dac98430f Mon Sep 17 00:00:00 2001 From: Akshat Verma <112319520+Akshat162001@users.noreply.github.com> Date: Wed, 12 Jul 2023 00:18:35 +0530 Subject: [PATCH 1/4] Chnages the Repel Effect #6 --- .vscode/settings.json | 3 ++ projects/button-ripple-effect/index.html | 2 +- projects/button-ripple-effect/index.js | 37 +++++++++++--- projects/button-ripple-effect/style.css | 64 ++++++++++++++---------- 4 files changed, 71 insertions(+), 35 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/projects/button-ripple-effect/index.html b/projects/button-ripple-effect/index.html index d89a32f..9c5d5b0 100644 --- a/projects/button-ripple-effect/index.html +++ b/projects/button-ripple-effect/index.html @@ -8,7 +8,7 @@ - Button + diff --git a/projects/button-ripple-effect/index.js b/projects/button-ripple-effect/index.js index 69ab30a..dc1fe6e 100644 --- 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 index 4089395..4bf9cc5 100644 --- 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; + } } + From e872995b45d3e02c7ab990a08fb9a72eee9e26ec Mon Sep 17 00:00:00 2001 From: Akshat Verma <112319520+Akshat162001@users.noreply.github.com> Date: Wed, 12 Jul 2023 09:07:09 +0530 Subject: [PATCH 2/4] Create ReadMe --- projects/age-calculator/ReadMe | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 projects/age-calculator/ReadMe diff --git a/projects/age-calculator/ReadMe b/projects/age-calculator/ReadMe new file mode 100644 index 0000000..4f9d5fa --- /dev/null +++ b/projects/age-calculator/ReadMe @@ -0,0 +1,5 @@ +#Age Calculator + +This projects calculates the age of a person + +#Happy coding From 0a26c623ae15687d0069b5ab4069e525d6ffeb2c Mon Sep 17 00:00:00 2001 From: Akshat Verma <112319520+Akshat162001@users.noreply.github.com> Date: Thu, 13 Jul 2023 00:03:06 +0530 Subject: [PATCH 3/4] made the working laon calculator --- .vscode/settings.json | 5 ++++- projects/loan-calculator/index.html | 16 +++++++++++----- projects/loan-calculator/index.js | 20 +++++++++++++------- projects/loan-calculator/style.css | 7 +++++++ 4 files changed, 35 insertions(+), 13 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index f673a71..15b0a24 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,6 @@ { - "liveServer.settings.port": 5502 + "liveServer.settings.port": 5502, + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ] } \ No newline at end of file diff --git a/projects/loan-calculator/index.html b/projects/loan-calculator/index.html index 8285844..c9f03cf 100644 --- a/projects/loan-calculator/index.html +++ b/projects/loan-calculator/index.html @@ -7,20 +7,26 @@ Loan Calculator - + +

Loan Calculator

Loan Amount $ - +

Interest Rate % - +

Months to pay - +

-

Monthly Payment:

+ +
+
+ +
+
diff --git a/projects/loan-calculator/index.js b/projects/loan-calculator/index.js index fb038fe..d0bc080 100644 --- 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 index 6ca571b..763926f 100644 --- 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; } \ No newline at end of file From b16df210a591742cdf3114176e32ecf00dad856a Mon Sep 17 00:00:00 2001 From: Akshat Verma <112319520+Akshat162001@users.noreply.github.com> Date: Thu, 13 Jul 2023 00:16:49 +0530 Subject: [PATCH 4/4] Fixed #9 ampm is not working --- projects/digital-clock/index.html | 4 +-- projects/digital-clock/index.js | 45 ++++++++++++++++++++++++------- projects/digital-clock/style.css | 4 +-- 3 files changed, 40 insertions(+), 13 deletions(-) diff --git a/projects/digital-clock/index.html b/projects/digital-clock/index.html index ff048e3..31307d8 100644 --- a/projects/digital-clock/index.html +++ b/projects/digital-clock/index.html @@ -4,11 +4,11 @@ - Digital Clock + Rolex Clock -

Digital Clock

+

Digital Clock

00 diff --git a/projects/digital-clock/index.js b/projects/digital-clock/index.js index e93964b..31c9491 100644 --- 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(); \ No newline at end of file diff --git a/projects/digital-clock/style.css b/projects/digital-clock/style.css index 3c45871..43260cb 100644 --- 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 {