Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clairekarsenti/launch-countdown-timer
This is my solution for the Launch countdown timer challenge on Frontend Mentor.
https://github.com/clairekarsenti/launch-countdown-timer
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
Last synced: 5 days ago
JSON representation
This is my solution for the Launch countdown timer challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/clairekarsenti/launch-countdown-timer
- Owner: ClaireKarsenti
- Created: 2022-11-16T16:45:33.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T21:32:32.000Z (almost 2 years ago)
- Last Synced: 2024-01-29T13:37:16.989Z (10 months ago)
- 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
- Language: TypeScript
- Homepage: https://clairekarsenti.github.io/Launch-Countdown-Timer/
- Size: 1.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Launch countdown timer solution
This is a solution to the [Launch countdown timer form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-).
Frontend Mentor challenges help me improve my coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - Launch countdown timer solution](#frontend-mentor---launch-countdown-timer-solution)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Models \& my works](#models--my-works)
- [Desktop version](#desktop-version)
- [Mobile version](#mobile-version)
- [Active states version](#active-states-version)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resource](#useful-resource)
- [Setup](#setup)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- See hover states for all interactive elements on the page
- See a live countdown timer that ticks down every second
### Models & my works
#### Desktop version
| Model |  |
| ------- | -------------------------------------------------------------------- |
| My work |  |
#### Mobile version
| Model | My work |
| -------------------------------------------------------- | ------------------------------------------------------------------ |
|  |  |
#### Active states version
| Model |  |
| ------- | ------------------------------------------------------------------------------- |
| My work |  |
#### Demo video
https://user-images.githubusercontent.com/102292921/205677208-03fbd84e-74b4-44f3-a71a-fa3a8471b702.mov
### Links
- Solution URL: [Code on GitHub](https://github.com/ClaireKarsenti/Launch-Countdown-Timer)
- Live Site URL: [GitHub Pages Live URL](https://clairekarsenti.github.io/Launch-Countdown-Timer)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Styled Components
- React
- TypeScript
- Mobile-first workflow
### What I learned
I 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.
This challenge also allowed me to deepen my knowledge of CSS.
Here are some example of my code and some of my customization I added to this project:
- :play_or_pause_button: I added a button to control the start of the countdown. This button can also pause the countdown.
- :arrows_counterclockwise: I also added a reset button. This button is available only when the countdown is running.
```html
setIsStarted(!isStarted)}>
{isStarted ? 'pause' : 'start'}
reset
```
```js
// Start and pause buttons:
useEffect(() => {
const initialInterval: any = setInterval(() => {
setTimeSpan((prevCount) => prevCount - SECOND);
}, SECOND);
if (!isStarted) {
clearInterval(initialInterval);
}
//Just a simple handler to make sure that the counter doesn't go to infinity negative:
if (timeSpan === 0) {
setTimeIsUp(true);
clearInterval(initialInterval);
return;
}
return () => clearInterval(initialInterval);
}, [timeSpan, isStarted, interval]);
// Reset button:
const reset: () => void = () => setTimeSpan(deadLine);
```
### Useful resource
[Resource 1]() - This helped me to created custom hooks.
## Setup
To run this project, install it locally using yarn:
```
yarn install && yarn start
```
## Author
- Linkedin - [Claire Karsenti](https://www.linkedin.com/in/claire-karsenti/)
- Frontend Mentor - [@ClaireKarsenti](https://www.frontendmentor.io/profile/ClaireKarsenti)