diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..15b0a24 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "liveServer.settings.port": 5502, + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ] +} \ No newline at end of file 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 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; + } } + 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 { 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