{"id":26919470,"url":"https://github.com/oge-dev/launch-countdown-timer","last_synced_at":"2025-04-01T21:34:13.135Z","repository":{"id":231351715,"uuid":"667952902","full_name":"oge-dev/Launch-Countdown-Timer","owner":"oge-dev","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-27T18:21:53.000Z","size":388,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-27T21:12:34.709Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://oge-dev.github.io/Launch-Countdown-Timer/","language":"SCSS","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/oge-dev.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":"2023-07-18T17:11:41.000Z","updated_at":"2024-10-27T18:21:57.000Z","dependencies_parsed_at":"2024-10-27T19:03:34.017Z","dependency_job_id":"99aec28a-ac39-4197-ac9d-9f68bf252b69","html_url":"https://github.com/oge-dev/Launch-Countdown-Timer","commit_stats":null,"previous_names":["oge-dev/tempokeeper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oge-dev%2FLaunch-Countdown-Timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oge-dev%2FLaunch-Countdown-Timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oge-dev%2FLaunch-Countdown-Timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oge-dev%2FLaunch-Countdown-Timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oge-dev","download_url":"https://codeload.github.com/oge-dev/Launch-Countdown-Timer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246714592,"owners_count":20822095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-04-01T21:34:12.179Z","updated_at":"2025-04-01T21:34:13.122Z","avatar_url":"https://github.com/oge-dev.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Launch Countdown Timer Solution\n\nThis repository contains my solution to the [Launch Countdown Timer challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-). Completing this challenge has strengthened my skills in creating interactive UI components with JavaScript and styling with SCSS.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Challenge](#challenge)\n- [Solution](#solution)\n- [Development Process](#development-process)\n  - [Technologies Used](#technologies-used)\n  - [Key Learnings](#key-learnings)\n  - [Future Enhancements](#future-enhancements)\n  - [Resources](#resources)\n- [Author](#author)\n\n## Overview\n\nThe Launch Countdown Timer project is a dynamic web component where users can observe a live countdown timer that updates every second. The project also includes interactive hover states for all interactive elements, with an optional flipping card animation for added visual appeal.\n\n## Challenge\n\n![Desktop Design Preview](./design/desktop-design.jpg)\n\n### Requirements\n- See a live countdown timer that ticks down every second (start the count at 14 days)\n- See hover states for all interactive elements on the page\n- **Bonus**: When a number changes, make the card flip from the middle\n\n## Solution\n\n- **Solution URL**: [GitHub Repository](https://github.com/oge-dev/Launch-Countdown-Timer)\n- **Live Demo**: [Live Site](https://oge-dev.github.io/Launch-Countdown-Timer/)\n\n## Development Process\n\n### Technologies Used\n\n- **HTML5** for semantic structure\n- **SASS** for streamlined and organized CSS\n- **JavaScript** for countdown functionality and interactivity\n\n### Key Learnings\n\nWorking on this project enhanced my understanding of:\n- CSS `content` property and positioning for creative designs.\n- SCSS for modular, reusable styling with variables and mixins.\n- JavaScript countdown logic and DOM manipulation.\n\nHere’s an example of the SCSS mixin and nesting structure used in this project:\n\n```scss\n$White: hsl(0, 0%, 100%);\n$Grayish-blue: hsl(237, 18%, 59%);\n$Soft-red: hsl(345, 95%, 68%);\n@mixin center-content {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n@mixin font-content(\n  $textTransform,\n  $size,\n  $weight,\n  $wordSpacing,\n  $letterSpacing\n) {\n  text-transform: $textTransform;\n  font-size: $size;\n  font-weight: $weight;\n  word-spacing: $wordSpacing;\n  letter-spacing: $letterSpacing;\n}\n\nbody {\n  color: $White;\n  @include center-content;\n}\n\nmain {\n  h1 {\n    @include font-content(uppercase, 1.6rem, 700, 0.4rem, 0.5rem);\n  }\n  footer {\n    .social-icons {\n      @include center-content;\n      gap: 2rem;\n      a {\n        color: $Grayish-blue;\n        \u0026:hover {\n          color: $Soft-red;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n}\n```\n\n### Future Enhancements\n\nTo further develop this project, I plan to:\n- Integrate it into an existing website or web application.\n- Experiment with additional animations for the countdown cards.\n\n### Resources\n\n- [SASS Documentation](https://sass-lang.com/) - Comprehensive guide for SASS features.\n- [CSS `content` Property](https://www.w3schools.com/cssref/pr_gen_content.php) - Excellent resource to understand how to use the `content` property.\n- [JavaScript Countdown Timer](https://www.w3schools.com/howto/howto_js_countdown.asp) - A helpful guide for building a countdown timer.\n- [Code with Curious](https://codewithcurious.com/projects/countdown-timer-using-html-css-javascript/) - Article on building a countdown timer with HTML, CSS, and JavaScript.\n\n## Author\n\n- **Portfolio** - [Oge](https://uhegbu-ogechi-juliet.vercel.app/)\n- **Frontend Mentor** - [@oge-dev](https://www.frontendmentor.io/profile/oge-dev)\n- **Twitter** - [@oge_dev](https://x.com/oge_dev)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foge-dev%2Flaunch-countdown-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foge-dev%2Flaunch-countdown-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foge-dev%2Flaunch-countdown-timer/lists"}