nicorithner / fe-mentor-clock-app-solution

React - TypeScript - Styled-components

Frontend Mentor - Clock App Solution

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

Table of contents

• Overview
• The challenge
• Links
• Built with
• Screenshot

Overview

The challenge

A clock app that tell the time live based on the user's current IP address.

Users should be able to:

• View the optimal layout for the interface depending on whether their device's screen size is mobile or tablet. In this example set up for Iphone SE and IPad Mini.

• See hover and focus states for all interactive elements on the page

Links

• Live Site URL: github page

Built with

• React - JS library
• TypeScript - TypeScript is JavaScript with syntax for types.
• Styled Components - For styles.
• Quotable API - A quotes api.
• World Time API - An API with time data based on IP address
• React-Live-Clock - A live clock package for React
• Figma - Figma, as design source

Screenshots

Desktop View

Mobile View

Tablet View