Skip to content

Latest commit

 

History

History
75 lines (44 loc) · 2.29 KB

File metadata and controls

75 lines (44 loc) · 2.29 KB

Frontend Mentor - Clock app

This is a solution to the Clock app challenge on Frontend Mentor. This challenge covers working with external APIs to set data based on a visitor's location. You'll also be using logic to set content depending on the time of day.

🧐 What's inside?

This Starter includes

  • ⚡ [vite] (https://vitejs.dev/) - a fast and lightweight development server
  • ⚛️ React 18 - A JavaScript library for building user interfaces
  • TypeScript - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
  • 🎉 Sass - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Overview

🚀 Getting Started

# Install dependencies

npm install
# or
yarn install

# Start development server

yarn dev
# or
npm run dev

# Build for production

yarn build
# or
npm run build

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size

  • See hover states for all interactive elements on the page

  • View the current time and location information based on their IP address

  • View additional information about the date and time in the expanded state

  • Be shown the correct greeting and background image based on the time of day they're visiting the site

  • Generate random programming quotes by clicking the refresh icon near the quote

Screenshot

Mobile view of solution

Mobile active view of solution

Desktop view of solution

Desktop active view of solution

Links

Author