Scribd
Upload
4 views

cThings Front-end Interview Task Instructions-1

The document outlines a front-end interview task to create a single-page weather web application using HTML, CSS, and JavaScript. The application should allow users to search for a city and display the current weather and temperature, utilizing the Open Weather API for data retrieval. It emphasizes design, user experience, responsiveness, and includes requirements for datetime manipulation and UI animation based on day/night conditions.

Uploaded by

Cardinals Mistress
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

cThings Front-end Interview Task Instructions-1

The document outlines a front-end interview task to create a single-page weather web application using HTML, CSS, and JavaScript. The application should allow users to search for a city and display the current weather and temperature, utilizing the Open Weather API for data retrieval. It emphasizes design, user experience, responsiveness, and includes requirements for datetime manipulation and UI animation based on day/night conditions.

Uploaded by

Cardinals Mistress
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

cThings Front-end Interview Task

cThings Front-end Interview Task


1. Introduction
IMPORTANT - PLEASE READ THE WHOLE DOCUMENT BEFORE STARTING

The aim of this front-end interview task is to create a simple single-page weather web application
using HTML, CSS and JavaScript. The web application will consist of a single web page that allows a
user to search for a city and return the current weather and temperature. This is a design and UX/UI
focused task so the interface should look good, provide a good user interface/experience as well as
being fully functional. The web application should work in the latest version of all cross-platform
modern web browsers (Firefox, Google Chrome).

Included with this task are weather icons (Designed by Freepik). You can use your own if preferred.

2. Task
2.1. DESIGN THE USER INTERFACE

The user interface should consist of a simple search


input and button (figure 2.1.1). When a city is entered Cambridge, UK SEARCH
into the search input and the search button is clicked the
weather and temperature should be returned (figure
2.1.2). The weather should be returned as an icon and
the temperature as a number. The user interface should Figure 2.1.1
consider: end-user device/screen-size (be responsive);
and accessibility (input focus, enter key should trigger a
search).
Cambridge, UK SEARCH

You can use any JavaScript/CSS frameworks/libraries


that are publicly available; for example: Bootstrap, React,
jQuery. Icons and images can be sourced from any 15ºC
royalty-free website; for example: Pixabay, Unsplash,
Noun Project, Flaticon.
Figure 2.1.2

Version 1.0 1
cThings Front-end Interview Task

2.2. INTERACT WITH A WEB API

The web application should retrieve weather data from a web API – the Open Weather API
(https://openweathermap.org) is recommended although other free APIs are available. You will need
to register and generate an API key to make requests.

Open Weather API hints and tips:

• The API key can take between 10 minutes and 2 hours to be activated (if you get a 401 error
it probably hasn’t been activated yet)
• The basic API call for the Open Weather API looks like this (other endpoints are available):

GET api.openweathermap.org/data/2.5/weather?q={city name}&appid={api_key}

• A list of weather conditions and icons for the Open Weather API can be found here:
https://openweathermap.org/weather-conditions
• The temperature returned by the Open Weather API is in Kelvin (you’ll need to convert it to
degrees Celsius)

2.3. DATETIME MANIPULATION

The Open Weather API returns sunrise and sunset as Cambridge, UK SEARCH
unix timestamps. Using the Moment JS library
(https://momentjs.com/) – or an alternative if preferred –
compare the sunrise/sunset time to the current time to 15ºC
display the time until sunrise/sunset below the weather
and temperature (figure 2.3.1). This could be as simple as
sunset in 4 hours
“sunrise in 4 hours” or “sunset at 16:54”. Display sunrise if
night-time; display sunset if day-time. Figure 2.3.1

2.4. ANIMATE THE USER INTERFACE

Cambridge, UK SEARCH
Change the background image, fade the background or
switch the theme of the page depending on whether it is
day-time or night-time in the city currently searched.
15ºC

sunrise in 4 hours

Figure 2.4.1

Version 1.0 2

You might also like