Universal motivational quotes with cool aesthetic
(Do)nt Qu(it)
Expand on my humanitarian skillset by giving advice/short motiovational quotes based on the moods/button selected on the webpage. Easily understood with wireframe demonstration
- Select a random motivational quote api
- Allow user to select moods by button
- Add more design/css to the bottom (a lot of white space so far)
- Add animation, like, button goes up when clicked to show quote and quote glides in
| Day | Deliverable | Status |
|---|---|---|
| July 10-12 | Prompt for Pitch | Complete |
| July 13 | Project Approval | Complete |
| July 13 | Adding layout for mobile | Complete |
| July 13 | Adding CSS | Complete |
| July 13 | Adding Media Queries CSS | Complete |
| July 14 | Adding buttons | Complete |
| July 14 | Adding emojis for graphic | Deleted |
| July 15 | Fetch API | Complete |
| July 15 | Fetch API after each button clicked | Complete |
| July 15 | Remove & Repeat Fetch API after each button clicked again | Complete |
| July 16 | MVP | Complete |
| July 17 | Presentations | Incomplete |
https://app.lucidchart.com/invitations/accept/258c06a4-38f1-4404-a607-ea2c29f0274c
| Component | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Adding layout for mobile | H | 5hrs | 3hrs | 5hrs |
| Adding CSS | L | 4hrs | 3hrs | 3hrs |
| Adding Media Queries CSS | L | 4hrs | 4hrs | 5hrs |
| Adding buttons | H | 4hrs | 1hrs | 1hrs |
| Adding emojis for graphic | M | 3hrs | 5hrs | 5hrs |
| Fetch API | H | 5hrs | 1hrs | 1hrs |
| Fetch API after each button clicked | H | 5hrs | 10hrs | 15hrs |
| Remove & Repeat Fetch API after each button clicked again | H | 3hrs | 1hrs | 1hrs |
| Total | H | 40hrs | 30hrs | 30hrs |
Use this section to include a brief code snippet of functionality that you are proud of and a brief description.
const buttons = document.querySelectorAll('button');
console.log(buttons);
buttons.forEach(button => {
button.addEventListener("click", getDataQuotes);
})
I deleted the emojis on each button because it was not aesthetically pleasing to the eye. It was ugly and took way too much time to crop to circles to fit each button.
I also deleted "|July 15| Let API reset after each button clicked again | Incomplete" because it was no difference in ther fetch API. There are over 1600 quotes and a new one comes up everytime. No need for a reset.
Added new "Remove & Repeat Fetch API after each button clicked again " so users can receive new quotes without the quotes blocking the page or having an overload of quotes on the page.