{"id":25108478,"url":"https://github.com/marcraphael12/launch-countdown-timer","last_synced_at":"2025-09-06T00:47:44.183Z","repository":{"id":119357041,"uuid":"509958287","full_name":"Marcraphael12/Launch-countdown-timer","owner":"Marcraphael12","description":"This is a solution to the Launch countdown timer challenge on Frontend Mentor ","archived":false,"fork":false,"pushed_at":"2022-07-05T17:07:40.000Z","size":367,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-04-02T09:12:57.446Z","etag":null,"topics":["reactjs","scss","useeffect-hook","usestate-hook"],"latest_commit_sha":null,"homepage":"https://launch-countdown-timer-marc12.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Marcraphael12.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-07-03T07:54:34.000Z","updated_at":"2022-07-05T16:47:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"c586a725-77d9-4401-b39c-7155789c16e9","html_url":"https://github.com/Marcraphael12/Launch-countdown-timer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Marcraphael12/Launch-countdown-timer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcraphael12%2FLaunch-countdown-timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcraphael12%2FLaunch-countdown-timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcraphael12%2FLaunch-countdown-timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcraphael12%2FLaunch-countdown-timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marcraphael12","download_url":"https://codeload.github.com/Marcraphael12/Launch-countdown-timer/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcraphael12%2FLaunch-countdown-timer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261363804,"owners_count":23147639,"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":["reactjs","scss","useeffect-hook","usestate-hook"],"created_at":"2025-02-07T23:52:18.394Z","updated_at":"2025-09-06T00:47:44.168Z","avatar_url":"https://github.com/Marcraphael12.png","language":"SCSS","readme":"# Frontend Mentor - Launch countdown timer solution\n\nThis is a solution to the [Launch countdown timer challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n- [Author](#author)\n\n**Note: Delete this note and update the table of contents based on what sections you keep.**\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 (start the count at 14 days)\n- **Bonus**: When a number changes, make the card flip from the middle\n\n### Screenshot\n\n![Design preview for the EasyBank Landing Page coding challenge](./design/illustration.png)\n\n### Links\n\n- Solution URL: [see solution](https://www.frontendmentor.io/solutions/responsive-landing-page-using-webpack-and-scss-mixins-khp0AoiiAm)\n- Live Site URL: [see live](https://launch-countdown-timer-marc12.netlify.app/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- SCSS variables\n- Flexbox\n- Mobile-first workflow\n- Reactjs framework\n\n### What I learned\n\nTo day's challenge was a great was to learn how to work with reactjs useState and useEffect, work with Date() function.\n\n```html\n\u003ch1\u003eSome HTML code I'm proud of\u003c/h1\u003e\n```\n```jsx\nfunction App() {\n  const [setDays, setDaysState] = useState();\n  const [setHours, setHoursState] = useState();\n  const [setMinutes, setMinutesState] = useState();\n  const [setSeconds, setSecondsState] = useState();\n\n  let interval ;\n\n  const startTimer = () =\u003e {\n    const countDown = new Date ('Jully 4, 2024').getTime();\n\n    interval = setInterval(() =\u003e {\n      const nowDate = new Date().getTime();\n      const difference = countDown - nowDate;\n\n      // Now we need to get the days, hours, minutes and seconds, by dividing the difference by 1000, 60, 60 and 24 respectively.\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n\n      const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n\n      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\n\n      const seconds = Math.floor((difference % (1000 * 60)) / 1000);\n\n      // Now we need a condition to check how long the inteval should run\n      // we clear the interval if the difference is less than 0\n      if (difference \u003c 0) {\n        clearInterval(interval);\n      } else {\n\n        // update the timer constantly\n        setDaysState(days);\n        setHoursState(hours);\n        setMinutesState(minutes);\n        setSecondsState(seconds);\n      }\n   });\n  }\n\n  // now we need to load the timer when the page loads\n  useEffect(() =\u003e {\n    startTimer();\n  })\n  return (\n    \u003cdiv className=\"App\"\u003e\n     \u003cClock setDays={setDays} setHours={setHours} setMinutes={setMinutes} setSeconds={setSeconds} /\u003e\n    \u003c/div\u003e\n  );\n}\n\n```\n\n### Continued development\n- CSS animations\n\n## Author\n- Frontend Mentor - [@Marcraphael12](https://www.frontendmentor.io/profile/Marcraphael12)\n- GitHub - [@Marcraphael12](https://github.com/Marcraphael12)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcraphael12%2Flaunch-countdown-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcraphael12%2Flaunch-countdown-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcraphael12%2Flaunch-countdown-timer/lists"}