Challenge Charlie

screenshot of Challenge Charlie
bootstrap
less

Frontend code challenge

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/.

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.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.