Frontend Mentor - Clock app solution

By Jose Furtado - @JoseDigiweb

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
• My process
  • Built with
  • Useful resources
• 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

Links

• Solution URL: https://www.frontendmentor.io/solutions/html5-sass-javascript-webpack-babel-axios-postcss-netlifycli-PNmwVwDut
• Live Site URL: https://time-app-webpack.netlify.app/

My process

Built with

• Semantic HTML5 markup
• Sass, SCSS custom properties
• Flexbox
• JavaScript - Vanilla JavaScript
• Webpack - JavaScript bundler
• Babel - JavaScript compiler
• Postcss - A tool for transforming CSS with JavaScript
• Axios - Promise based HTTP client for the browser and node.js
• Netlify Functions - Serverless Lambda functions
• Git - version control system
• GitHub - version control platform

Useful resources

• W3School - This website is always the best resource for me.
• stackoverflow - The second usefull resource.
• Den Fletcher Channel - Youtube video tutorial to learn about Netlify Functions
• Traversy Media - Youtube video tutorial to learn about Axios

Author

• LinkedIn - https://www.linkedin.com/in/jose-digiweb/
• Frontend Mentor - @JoseDigiweb
• Twitter - @JoseDigiweb