{"id":20085071,"url":"https://github.com/clairekarsenti/launch-countdown-timer","last_synced_at":"2026-05-08T05:04:18.420Z","repository":{"id":135461850,"uuid":"566899774","full_name":"ClaireKarsenti/Launch-Countdown-Timer","owner":"ClaireKarsenti","description":"This is my solution for the Launch countdown timer challenge on Frontend Mentor.","archived":false,"fork":false,"pushed_at":"2023-01-05T21:32:32.000Z","size":1883,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-02T14:25:06.356Z","etag":null,"topics":["countdown","css","css-flex","css-flexbox","css-flexbox-layout","css3","flexbox","frontend","frontend-mentor","frontend-mentor-challenge","frontendmentor-challenge","html","html-css","mobile-first","react","styled-components","timer","typescript"],"latest_commit_sha":null,"homepage":"https://clairekarsenti.github.io/Launch-Countdown-Timer/","language":"TypeScript","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/ClaireKarsenti.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}},"created_at":"2022-11-16T16:45:33.000Z","updated_at":"2024-01-29T10:08:01.000Z","dependencies_parsed_at":"2024-01-29T13:12:05.514Z","dependency_job_id":"b6e91192-91ad-4001-89a8-cae479ca64f7","html_url":"https://github.com/ClaireKarsenti/Launch-Countdown-Timer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ClaireKarsenti/Launch-Countdown-Timer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClaireKarsenti%2FLaunch-Countdown-Timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClaireKarsenti%2FLaunch-Countdown-Timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClaireKarsenti%2FLaunch-Countdown-Timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClaireKarsenti%2FLaunch-Countdown-Timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ClaireKarsenti","download_url":"https://codeload.github.com/ClaireKarsenti/Launch-Countdown-Timer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClaireKarsenti%2FLaunch-Countdown-Timer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263643192,"owners_count":23493713,"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":["countdown","css","css-flex","css-flexbox","css-flexbox-layout","css3","flexbox","frontend","frontend-mentor","frontend-mentor-challenge","frontendmentor-challenge","html","html-css","mobile-first","react","styled-components","timer","typescript"],"created_at":"2024-11-13T15:54:35.054Z","updated_at":"2026-05-08T05:04:13.373Z","avatar_url":"https://github.com/ClaireKarsenti.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Launch countdown timer solution\n\nThis is a solution to the [Launch countdown timer form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-).\nFrontend Mentor challenges help me improve my coding skills by building realistic projects.\n\n## Table of contents\n\n- [Frontend Mentor - Launch countdown timer solution](#frontend-mentor---launch-countdown-timer-solution)\n  - [Table of contents](#table-of-contents)\n  - [Overview](#overview)\n    - [The challenge](#the-challenge)\n    - [Models \\\u0026 my works](#models--my-works)\n      - [Desktop version](#desktop-version)\n      - [Mobile version](#mobile-version)\n      - [Active states version](#active-states-version)\n    - [Links](#links)\n  - [My process](#my-process)\n    - [Built with](#built-with)\n    - [What I learned](#what-i-learned)\n    - [Useful resource](#useful-resource)\n  - [Setup](#setup)\n  - [Author](#author)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- See hover states for all interactive elements on the page\n- See a live countdown timer that ticks down every second\n\n### Models \u0026 my works\n\n#### Desktop version\n\n| Model   | ![desktop version](./src/assets/design/desktop-design.jpg)           |\n| ------- | -------------------------------------------------------------------- |\n| My work | ![desktop version](./src/assets/my-work/my-work-desktop-version.png) |\n\n#### Mobile version\n\n| Model                                                    | My work                                                            |\n| -------------------------------------------------------- | ------------------------------------------------------------------ |\n| ![mobile version](./src/assets/design/mobile-design.jpg) | ![mobile version](./src/assets/my-work/my-work-mobile-version.png) |\n\n#### Active states version\n\n| Model   | ![Active states version](./src/assets/design/active-states.jpg)                 |\n| ------- | ------------------------------------------------------------------------------- |\n| My work | ![Active states version](./src/assets/my-work/my-work-active-state-version.png) |\n\n#### Demo video\n\nhttps://user-images.githubusercontent.com/102292921/205677208-03fbd84e-74b4-44f3-a71a-fa3a8471b702.mov\n\n### Links\n\n- Solution URL: [Code on GitHub](https://github.com/ClaireKarsenti/Launch-Countdown-Timer)\n- Live Site URL: [GitHub Pages Live URL](https://clairekarsenti.github.io/Launch-Countdown-Timer)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- Styled Components\n- React\n- TypeScript\n- Mobile-first workflow\n\n### What I learned\n\nI choose to do this project in TypeScript language and with the framework React to deepen my skills in these fields, especially in the creation and the use of React custom hooks.\nThis challenge also allowed me to deepen my knowledge of CSS.\n\nHere are some example of my code and some of my customization I added to this project:\n\n- :play_or_pause_button: I added a button to control the start of the countdown. This button can also pause the countdown.\n- :arrows_counterclockwise: I also added a reset button. This button is available only when the countdown is running.\n\n  ```html\n  \u003cCountDownControl\u003e\n    \u003cbutton onClick={() =\u003e setIsStarted(!isStarted)}\u003e\n        {isStarted ? 'pause' : 'start'}\n    \u003c/button\u003e\n    \u003cbutton onClick={reset} disabled={!isStarted}\u003e\n        reset\n    \u003c/button\u003e\n  \u003c/CountDownControl\u003e\n  ```\n\n  ```js\n  // Start and pause buttons:\n  useEffect(() =\u003e {\n    const initialInterval: any = setInterval(() =\u003e {\n      setTimeSpan((prevCount) =\u003e prevCount - SECOND);\n    }, SECOND);\n\n    if (!isStarted) {\n      clearInterval(initialInterval);\n    }\n\n    //Just a simple handler to make sure that the counter doesn't go to infinity negative:\n    if (timeSpan === 0) {\n      setTimeIsUp(true);\n      clearInterval(initialInterval);\n      return;\n    }\n\n    return () =\u003e clearInterval(initialInterval);\n  }, [timeSpan, isStarted, interval]);\n\n  // Reset button:\n  const reset: () =\u003e void = () =\u003e setTimeSpan(deadLine);\n  ```\n\n### Useful resource\n\n[Resource 1](\u003chttps://dev.to/yuridevat/how-to-create-a-timer-with-react-7b9#:~:text=%2F%2F%20Timer.-,js%20import%20React%20from%20'react'%3B%20import%20%7B%20useState%20%7D,getTime%20%3D%20()%20%3D%3E%20%7B%20const\u003e) - This helped me to created custom hooks.\n\n## Setup\n\nTo run this project, install it locally using yarn:\n\n```\nyarn install \u0026\u0026 yarn start\n```\n\n## Author\n\n- Linkedin - [Claire Karsenti](https://www.linkedin.com/in/claire-karsenti/)\n- Frontend Mentor - [@ClaireKarsenti](https://www.frontendmentor.io/profile/ClaireKarsenti)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclairekarsenti%2Flaunch-countdown-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclairekarsenti%2Flaunch-countdown-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclairekarsenti%2Flaunch-countdown-timer/lists"}