diff --git a/README.md b/README.md index 779b5cb..b8b538c 100644 --- a/README.md +++ b/README.md @@ -276,6 +276,17 @@ In order to run this project you need: +
  • +
    +Countdown Timer +

    The Countdown Timer is an intuitive and visually appealing tool built using HTML, CSS, and JavaScript. This project allows users to set a countdown to a specific event or deadline, providing a real-time display of the remaining days, hours, minutes, and seconds. It's a great project for beginners to practice and enhance their web development skills.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/CountdownTimer/assets/eid.jpg b/Source-Code/CountdownTimer/assets/eid.jpg new file mode 100644 index 0000000..6603387 Binary files /dev/null and b/Source-Code/CountdownTimer/assets/eid.jpg differ diff --git a/Source-Code/CountdownTimer/index.html b/Source-Code/CountdownTimer/index.html new file mode 100644 index 0000000..c5c6e82 --- /dev/null +++ b/Source-Code/CountdownTimer/index.html @@ -0,0 +1,33 @@ + + + + + + Countdown Timer + + + +

    EID CELEBRATIONS

    + +
    +
    +

    0

    + days +
    +
    +

    0

    + hours +
    +
    +

    0

    + mins +
    +
    +

    0

    + seconds +
    +
    + + + + \ No newline at end of file diff --git a/Source-Code/CountdownTimer/script.js b/Source-Code/CountdownTimer/script.js new file mode 100644 index 0000000..82113f0 --- /dev/null +++ b/Source-Code/CountdownTimer/script.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', () => { + const daysEl = document.getElementById('days'); + const hoursEl = document.getElementById('hours'); + const minsEl = document.getElementById('mins'); + const secondsEl = document.getElementById('seconds'); + + const eid = '30 Mar 2025'; + const formatTime = (time) => (time < 10 ? `0${time}` : time); + const countdown = () => { + const EidDate = new Date(eid); + const currentDate = new Date(); + + const totalSeconds = (EidDate - currentDate) / 1000; + + const days = Math.floor(totalSeconds / 3600 / 24); + const hours = Math.floor(totalSeconds / 3600) % 24; + const mins = Math.floor(totalSeconds / 60) % 60; + const seconds = Math.floor(totalSeconds) % 60; + + daysEl.innerHTML = days; + hoursEl.innerHTML = formatTime(hours); + minsEl.innerHTML = formatTime(mins); + secondsEl.innerHTML = formatTime(seconds); + }; + + // initial call + countdown(); + + setInterval(countdown, 1000); +}); diff --git a/Source-Code/CountdownTimer/style.css b/Source-Code/CountdownTimer/style.css new file mode 100644 index 0000000..3bea40f --- /dev/null +++ b/Source-Code/CountdownTimer/style.css @@ -0,0 +1,44 @@ +* { + box-sizing: border-box; +} + +body { + background-image: url(./assets/eid.jpg); + background-size: cover; + background-position: center center; + background-attachment: fixed; + background-repeat: no-repeat; + font-family: "Roboto", sans-serif; + margin-top: 4rem; + color: #c9cc6b; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 10rem; + flex-wrap: wrap; +} + +h1 { + font-size: 4rem; + margin-top: 1rem; + text-align: center; + flex-wrap: wrap; +} + +.big-text { + font-weight: bold; + font-size: 8rem; + line-height: 0.5; + margin: 1rem 2rem; +} + +.countdown { + text-align: center; +} + +.countdown span { + font-size: 2rem; +}