Flatiron School, phase 1 MVP
flatDash is a simple dashboard website with multiple useful and fun widgets included for user convenience.
Functionalities
**Host will request location permission for weather geolocation services
Dark Light Mode Toggle
- Dark/Light mode toggle.
- Dark mode will persist on refresh until toggled off.
Weather Widget
- Renders current city weather via geolocation
- Enter any city to get weather in that city
- Pulls data from weather API
- Weather will render with temperature, conditions, and corresponding weather icon.
- If field is not filled out, an error will display.
To-Do List
- Add items to a to-do list.
- Delete to-do list items.
- Items will persist until manually deleted.
Meme of the Day
- Renders a meme on page load
- Randomize button returns a new random meme.
- Pulls from a j-son to randomize meme.
Analog Clock
- Working analog clock
Here is a video showing the deliverables in action!
flatDash.Detail.mp4
Initial Rough Draft & Project Planning:
Deliverables:
- User will be able to input current city and weather widget will return current weather for said city.
- User will see a featured meme of the day (specifically programming themed). User will be able to click randomize to regenerate a new one to display.
- User will be able to input tasks as part of a to-do list. Task will then populate for user reference.
- User will then be able to delete the task once complete.
- User will be able to toggle the widget from dark/light backgrounds.
Stretch Deliverables:
- User will automatically see the current weather in their city based on geo-location
- User will automatically see the current time in their respective time zone.
- User will see an analog clock showing the current time.
- User will be able to click memes to cycle through different memes.
API's with JSON structure:
Weather Widget: https://www.weatherapi.com/
Meme of the day widget: https://github.com/deep5050/programming-memes/blob/main/memes.json
Analog Clock Widget: https://timeapi.io/
Event listeners to be used: Submit(2), Click, Change