My First JavaScript Project

Welcome to MY First JavaScript Project 👩!

Link :"https://quotesapps.netlify.app/"

I created a Single Page Application (SPA) Website "Quotes Apps" that will when user refresh it a quote to be displayed on the page and for it to be a different quotes every time and user could rate them by using "RATE" button and if click "NEW QUOTE" random quotes pop-up , you know this apps kind of lighten up your day.

Project Walk-Through /How do a Project Work Structure

---

Base on Project Requirements , My frontend was build with HTML, CSS, and JavaScript that accesses data from a public API. All interactions between the client and the API was handled asynchronously and used JSON as the communication format.

Adding a "RATE" button and adding "NEW QUOTE" button. These interactions do not need to persist after reloading the page.

MY project's DOM Manipulation is well structured, following the pattern of creating reusable components and appending them to the DOM.

Project PLANNING,MVP & MVP Feature

---

***MY MVP & USER STORY ::

[✔]users should able to see a new quotes when the enter the website
[✔]users should be able see rate button for rate quotes
[✔]users should be able to rate the quotes on a scale of 1 to 10
[✔]user should be see new quotes and character name if the press the new quote button.

Stretch

[✔]If a quotes is rated 4 or below , the screen will turn red
[✔]If a quotes is rated 8 or above , the screen will turn green

ROADMAP

[✔]Create file Structure
[✔]fetch the data
[✔] Reusable function
[✔]use the quotes API-
"https://got-quotes.herokuapp.com/quotes"

DOM

[✔] Modify the DOM
[✔]create a reusable div to hold quotes
[✔]Append a new quotes

[✔]Generate new Quotes
[✔]Remove the old quotes
[✔]fetch the API for a new quotes

[✔] Add rating Functionality
[✔]this should be unique for each individual quotes

Style CSS

[✔] Work for styling
[✔]Title
[✔]text in center
[✔]h1
[✔]background of page
[✔]cadet blue
[✔]Quote container in a box
[✔]title/Perfect quotes for you!
[✔]quote container title in center and h3 format
[✔]Everything text aligned in left
[✔] style for button
[✔]black background
[✔]white text
[✔]white Quote container background
[✔]thicker border
[✔]drop shadow
[✔]Turn rating number green if rating is 8 or above
[✔]if rating >=8 make color green
[✔]if rating >=4 make color red
—————————————————————

Rough Timeline

I worked on 7 days to created this project planning :
⏰⏰⏰ Day 0 - Project Pitches

💻Create File System
💡index.html
💡index.js
💡styles.css
💻Set up HTML on the page

⏰⏰⏰ Days 1-3 - Access API, Build out DOM Components

💻Need External API
💡Find on API
💡Play around with the API
💡create Fetch Functions

⏰⏰⏰Days 4-5 - Reach MVP

💻Create a container from the data
💡create a function that creates a quote component.
💻Display the New quote function that appends the quote
container .
💻Find a way to randomize quotes or get a new quote

⏰⏰⏰ Days 6-7 - Additional Features, Polish, Bug Fixes

💻Style page
💻Test and Polish

🧧🧧🧧NOT IN THE LISTS :
Basically Ends Up is a half hour on stuck on a problem. A good guideline for a small bug is the rule of 10s:

♦10 minutes debugging the code on self
♦10 minutes using Google and Stack-Overflow to try to find an answer
♦10 minutes asking your teammates or fellow students for help
Asking an instructor

Not to mention, when you are ending one project, you’re likely beginning another. Therefore, you want to get transition support for this changeover. You’ll have to release resources, archive documents and don’t forget to acknowledge the project success with a party or some type of celebration, That’s important, too 🍕🥂🍰