{"id":26505570,"url":"https://github.com/siddami/birthday_wish","last_synced_at":"2026-05-03T10:32:14.163Z","repository":{"id":219593434,"uuid":"749419385","full_name":"Siddami/birthday_wish","owner":"Siddami","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-26T20:59:21.000Z","size":20,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-05T21:53:22.397Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Siddami.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-28T14:35:11.000Z","updated_at":"2025-01-26T20:59:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"d07d4be3-a010-41fa-8e7c-00b64139c8fb","html_url":"https://github.com/Siddami/birthday_wish","commit_stats":null,"previous_names":["siddami/birthday_wish"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Siddami/birthday_wish","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fbirthday_wish","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fbirthday_wish/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fbirthday_wish/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fbirthday_wish/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Siddami","download_url":"https://codeload.github.com/Siddami/birthday_wish/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fbirthday_wish/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32566443,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-20T21:47:42.627Z","updated_at":"2026-05-03T10:32:14.148Z","avatar_url":"https://github.com/Siddami.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Happy Birthday Countdown\n\nThis project is a simple yet beautiful birthday countdown webpage created with HTML, CSS, and JavaScript. The page displays a countdown timer to a specified birthday and shows a heartfelt birthday message when the time arrives.\n\n## Table of Contents\n\n- [Happy Birthday Countdown](#happy-birthday-countdown)\n  - [Table of Contents](#table-of-contents)\n  - [Demo](#demo)\n  - [Features](#features)\n  - [Usage](#usage)\n  - [Code Overview](#code-overview)\n    - [HTML](#html)\n    - [CSS](#css)\n    - [JavaScript](#javascript)\n  - [License](#license)\n\n## Demo\n\nCheck out the live demo of the project [here](https://birthdaybiodun.netlify.app/).\n\n## Features\n\n- Responsive design that adapts to different screen sizes\n- Animated bubbles background\n- Countdown timer that updates every second\n- Displays a birthday message when the countdown ends\n\n## Usage\n\nTo use this project, follow these steps:\n\n1. Clone the repository:\n\n    ```sh\n    git clone https://github.com/your-username/happy-birthday-countdown.git\n    cd happy-birthday-countdown\n    ```\n\n2. Open `index.html` in your favorite web browser.\n\n## Code Overview\n\n### HTML\n\nThe HTML structure includes a title, a container for the countdown timer, and the birthday message.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n    \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n    \u003clink href=\"https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1\u0026display=swap\" rel=\"stylesheet\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003ctitle\u003eHappy Birthday Papi\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"full--container\"\u003e\n        \u003cdiv class=\"bubbles\"\u003e\n            \u003c!-- Bubble elements here --\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003ch3 id=\"bdayW\" class=\"hidden\"\u003eIt's Birthday Time!\u003c/h3\u003e\n            \u003cp id=\"countdown\"\u003e\u003c/p\u003e\n            \u003cp id=\"birthdayMessage\" class=\"hidden\"\u003e\n                \u003c!-- Birthday poem here --\u003e\n            \u003c/p\u003e\n            \u003ch3 id=\"bday-end\" class=\"hidden\"\u003eHappy Birthday Abiodunmi, I love you more than words can express\u003c/h3\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### CSS\n\nThe CSS styles provide the layout and animation for the bubbles and make the page responsive.\n\n```css\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: 'Libre Baskerville', serif;\n    min-height: 100vh;\n    background: #00040f;\n    color: antiquewhite;\n}\n\n.full--container {\n    position: relative;\n    width: 100%;\n    height: 100vh;\n    overflow: hidden;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n.bubbles {\n    position: relative;\n    display: flex;\n}\n\n.bubbles span {\n    position: relative;\n    width: 25px;\n    height: 25px;\n    background: #3fd9ffab;\n    margin: 0 4px;\n    border-radius: 50%;\n    box-shadow: 0 0 0 10px #03293fab, 0 0 50px #3fd9ffab, 0 0 100px #3fd9ffab;\n    animation: animate 15s linear infinite;\n    animation-duration: calc(115s / var(--i));\n}\n\n.bubbles span:nth-child(even) {\n    background: #fc0442;\n    box-shadow: 0 0 0 10px #3a0210ab, 0 0 50px #fc0442, 0 0 100px #fc0442;\n}\n\n.bubbles .down {\n    animation: down 15s linear infinite;\n    animation-duration: calc(115s / var(--i));\n}\n\n@keyframes animate {\n    0% {\n        transform: translateY(100vh) scale(0);\n    }\n    100% {\n        transform: translateY(-10vh) scale(1);\n    }\n}\n\n@keyframes down {\n    100% {\n        transform: translateY(100vh) scale(1);\n    }\n    0% {\n        transform: translateY(-10vh) scale(0);\n    }\n}\n\n.container {\n    padding: 20px;\n    background: rgb(13, 13, 14);\n    background: linear-gradient(90deg, rgba(13, 13, 14, 0.891) 99%, rgb(1, 1, 22) 100%, rgba(0, 212, 255, 1) 100%);\n    width: 80%;\n    text-align: center;\n    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);\n    margin: 0 auto;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 2rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 10px;\n}\n\n#birthdayMessage {\n    color: #00d9ff;\n    font-size: 1.5rem;\n    text-align: center;\n    line-height: 1.5;\n}\n\n.hidden {\n    display: none;\n}\n\n#countdown {\n    font-size: 5rem;\n    color: #3fd9ffab;\n    font-weight: bolder;\n}\n\n@media screen and (min-width: 320px) and (max-width: 728px) {\n    .bubbles span {\n        width: 18px;\n        height: 18px;\n        margin: 0 2px;\n    }\n\n    .container {\n        width: 90%;\n        padding: 5px;\n        margin: 10px auto;\n    }\n\n    #countdown {\n        font-size: 2.5rem;\n    }\n\n    #birthdayMessage {\n        font-size: 1.2rem;\n        line-height: 1.5;\n    }\n\n    #bday-end {\n        font-size: 1.5rem;\n    }\n}\n```\n\n### JavaScript\n\nThe JavaScript code updates the countdown timer every second and displays the birthday message when the countdown ends.\n\n```javascript\nfunction updateCountdown() {\n    const today = new Date();\n    const birthday = new Date('2025-01-29T00:00:00');\n    const timeDifference = birthday - today;\n\n    if (timeDifference \u003c= 0) {\n        document.getElementById('countdown').innerText = \"Happy Birthday Abiodunmi!\";\n        document.getElementById('bdayW').classList.remove('hidden');\n        document.getElementById('birthdayMessage').classList.remove('hidden');\n        document.getElementById('bday-end').classList.remove('hidden');\n    } else {\n        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));\n        const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n        const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));\n        const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);\n\n        document.getElementById('countdown').innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s \u003cspan style='font-weight: bolder; \n        color: white; \n        font-size: 1.5rem;\n        display: block;'\n        \u003euntil my baby's birthday\u003c/span\u003e`;\n    }\n}\n\n// Update countdown every second\nsetInterval(updateCountdown, 1000);\n\n// Run the initial update\nupdateCountdown();\n```\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fbirthday_wish","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiddami%2Fbirthday_wish","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fbirthday_wish/lists"}