Challenge Charlie screenshot

Challenge Charlie

Author Avatar Theme by Hurbcom
Updated: 28 Mar 2023
95 Stars

Frontend code challenge

Categories

Overview

The Charlie Challenge is to build a responsive microsite that displays the weather forecast for a given location. The user can change the location by entering it into an input field. The site will collect the user’s geographic coordinates to determine the city name, and will use the Bing highlight image as the background. The weather forecast will include information for today, tomorrow, and the day after tomorrow. The background image will have a gradient overlay that reflects the current temperature. The site will also allow the user to switch between Celsius and Fahrenheit temperature units.

Features

  • Location Input: User can change the location by entering it into an input field.
  • Geographic Coordinates Collection: The site will collect the user’s geographic coordinates to determine the city name.
  • Bing Background Image: The Bing highlight image will be used as the background of the microsite.
  • Weather Forecast: The site will display the weather forecast for today, tomorrow, and the day after tomorrow.
  • Temperature Gradient: The background image will have a gradient overlay that reflects the current temperature.
  • Temperature Unit Conversion: User can switch between Celsius and Fahrenheit temperature units.
  • Background Image URL Extraction: The background image URL will be extracted from the Bing API.
  • External Resources: Icons can be found at http://www.alessioatzeni.com/meteocons/.

Installation

To install and run the Charlie Challenge microsite, follow these steps:

  1. Clone the repository to your local machine:
git clone [repository url]
  1. Change into the project directory:
cd [project directory]
  1. Install the necessary dependencies:
npm install
  1. Start the development server:
npm start
  1. Access the microsite in your browser at http://localhost:3000.

Summary

The Charlie Challenge is a weather forecast microsite that allows users to view the weather information for different locations. It has features such as location input, geographic coordinates collection, background image selection from the Bing API, and temperature gradient overlay on the background image. The microsite also supports temperature unit conversion and uses icons from an external resource. It can be installed and run on a local machine using the provided installation steps.