Skip to content
Landing page that displays weather and provides quotes
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Landing Page

A landing page that displays quotes, shows current weather (geolocation needs to be enabled) and has a working clock. On top of that you can create a quick to do list and a list of notes.

Quote and Weather Landing Page

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.


You need to register at OpenWeatherMap and subscribe for a free API key of the Current weather data from this page.

Then open the file main.js in your favourite editor and add your API key on line 3.

const weatherApi = "&APPID=" +  "{your API Key here}";


Simply open the index.html page on your favourite browser and everything will work fine.

Things you can do

The landing page is meant to provide you with some basic things that could be useful to you without opening any other application or site.

The Quote

You can get a new quote by pressing the icon with two arrows in a circle. If the quote is something you enjoy, you can share directly to your Twitter account by pressing the Twitter icon.

The To Do List

To open the to-do list you need to press the icon that says "To Do List" a new area will be visible and you can write your to-do items in the list.

You can tick an item by simply pressing the checkbox if you would like to delete the item all you need to do is press the text and the item will be deleted.

The Notes

To open the notes you just need to press the icon that says "Notes" a new area will be visible, there you can start creating your notes.

To create a new note simply click the button + Add note, when you click the button a form will be shown where you can add a title for the note and then you have the text field where you can write your notes.

Note: If you forget to provide a title, the note will have the title of Note <number>.

Only the title of the notes are shown as a list view, to open the note simply click on the title and you will be able to see the full description of the note.

To delete the note just click the delete button.

The Watch

This is meant to be very simple, it shows you the current time and date.

Built With



All the pictures used for the page background were taken from unsplash.

You can’t perform that action at this time.