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
  • Screenshot
  • Links
• My process
  • Built with
  • What I used
• Author

Overview

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

Links

• Solution URL: GitHub Repository
• Live Site URL: Vercel Deploy

My process

Built with

• Vite - Build tool
• TypeScript - JS Superset
• React - JS library
• Mobile-first workflow
• SASS - CSS pre-processor
• CSS Grid and Flexbox
• Vercel

What I used

Custom Hooks

Created custom hooks for handling each of the API's data responses.

export const useTime = () => {

  const [ timeData, setTimeData ] = useState<TimeApiResponse | null >(null);
  const [ currentTime, setCurrentTime ] = useState<Date | null>(null);

  // Get time API
  useEffect( () => {
    getTimeAPI()
      .then( data => {
        setTimeData(data)
        setCurrentTime(new Date(data.datetime));
      })
      .catch(err => {
        console.error(err)
      })

  }, []);

  // Starts internal clock
  useEffect( () => {
    if(!currentTime) return;

    const interval = setInterval(() => {
      setCurrentTime(prev => prev ? new Date(prev.getTime() + 60_000) : null);
    }, 60_000);

    return () => clearInterval(interval)
  }, [currentTime]);

  return { currentTime, timeData };
}

Dynamic Features

The background and the greeting icon changes acording to the user's hour.

  const themeMode = (greeting === 'morning' || greeting === 'afternoon') ? 'sun' : 'moon';

  <img
    src={`/assets/desktop/icon-${ themeMode }.svg`}
    alt="Day Icon"
  />

Environment Variables

• Created and setted environment varibles for deployment on Vercel.
• Using local variables on Vite

Author

• Raul Galicia
• GitHub - @raulgaliciab
• Frontend Mentor - @raulgaliciab