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.
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.
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.
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.
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.
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.
This is meant to be very simple, it shows you the current time and date.
- Vue - The JavaScript framework used
- Axios - To connect to the APIs
- Bulma.io - The CSS framework used
- OpenWeatherMap - Used to get weather data
- FontAwesome - The icons used
- Fabio Rosado - Initial work - FabioRosado
All the pictures used for the page background were taken from unsplash.