Skip to content

haquanq-frontendmentor/launch-countdown-timer

Repository files navigation

Frontend Mentor - Launch Countdown Timer Solution

This is a solution to the Launch countdown timer challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Solution post Live demo

Table of Contents

🌅 Project Overview

Challenge Requirements

  • See hover states for all interactive elements on the page
  • See a live countdown timer that ticks down every second (start the count at 14 days)
  • Bonus: When a number changes, make the card flip from the middle

Status

Features

  • Countdown timer with number flippers (flip animations using vanilla CSS)

Accessibility

  • Responsive accross different screen sizes
  • Interactive elements have clear focus indicator

Preview

🌠 Tech Stack and Approach

Built With

  • HTML5 – Semantic structure
  • SolidJS – Fine-grained reactivity state management
  • TailwindCSS – Utility-first CSS for fast development
  • TypeScript - Interactivity and application logic
  • Vite - Fast development server, production build and easy configuration

Approach

🍃 Local Development

Prerequisites

Install the following:

  • Git (latest version)
  • Node.js (latest LTS recommended)
  • pnpm (latest version)

Setup

git clone https://github.com/haquanq-frontendmentor/launch-countdown-timer.git cd launch-countdown-timer pnpm install 

Start Development Server

pnpm dev 

🍁 Deployment

Deployed to Github Pages via Github Actions (manually triggered).