keivanmojmali / ajax-project Goto Github PK

💰 Motivation

Users like to be a part of the community! 😄

📐 Plan

Create a welcoming page that will lead people into clicking on sign up and then filling out our sign up form on the next page

✅ Task List

• code HTML section to hidden for welcome page
• add data model to data.js
• add localStorage capability
• design section to show a welcome page with filler text and buttons
• code HTML section to hidden for sign up page
• design a form that takes basic information

💰 Motivation

Users like to play favorites! 😄

📐 Plan

Create a profile page that will showcase their "starred" beers

✅ Task List

• create a top div set to hidden that will show profile information - with filler information
• create a div list to hidden that will showcase all of the beers that a user has set to favorite
• add css styling of ability to expand for favorites beer
• [ ]

💰 Motivation

Users like to see good design! 😄

📐 Plan

Change stylings to make the page more attractive

✅ Task List

• add fonts for headers and paragraphs
• add color schemes for different pages and the website as a whole
• add button styling
• when users start on explorer page the beers are loaded
• when users star their favorite beer it changes the star to filled in and vice versa and saves that data
• increase the speed by fixing the network call issue and adding modals that can load more and make them wait while it loads
• optimize the code by removing and joining things that can be joined
• fix loading issue when the user is a returning user
• change to page function on punk api that returns 25 instead of looping 25 times - you can also add a function at the bottom of the explorer that will load 25 more - you will need a loading now function to make sure the ajax is working
• fix more or less info on favorites page - fix the star problem on favorites page
• [ ]

💰 Motivation

Users like having a website that works! 😄

📐 Plan

Add data model and JavaScript functionality

✅ Task List

• add a data model in data.js
• add ability for data to be stored in localStorage
• add ability for website to recognize if there is a profile or not
• if there is not profile set - start user in join now page
• add ability for form to be stored to data model
• add functionality of sign up button to store data and also take to explorer view
• add functionality of buttons on bottom nav bar to change views
• add funtionality to bottom nav bar
• add JS that will expand the clicked beer on explorer page and show other information about it
• add ability to minimize expanded view
• add ability for user to edit profile information
• add ability for user to store beers on favorites list
• add fucntionality to lets do it button on plan my meal page
• add randomizer meal planner for tonights beer paired with tonights food list

💰 Motivation

Users like to use intuitive design! 😄

📐 Plan

Create a intuitive and uniform html and css code that can be re-used throughout website.

🖼️ Wireframe

https://www.figma.com/file/jmZmglNe6BIQhJ8WZeKdfh/Beer?node-id=0%3A1

✅ Task List

• Plan HTML layout
• Plan Responsive features
• Plan Placeholders for later issues
• Code HTML according to plans from previous steps
• Code CSS with minimal styling - further styling to be applied later
• Add proper data-view attributes

💰 Motivation

Users like to drink good beer! 😄

📐 Plan

Allow the user to have a flight option made for them

✅ Task List

• design a flight option page
• add view capabilities
• add a function that will grab a beer from each abv category and store it in a flight array
• function to display that flight once its picked
• style for function not beauty
• [ ]

💰 Motivation

Users like to quickly find what they need! 😄

📐 Plan

Crate a well functioning top bar

✅ Task List

• add ability to target div in favorites
• add button to div that initiates adding a comment
• add a div that pops in with ability to write
• that note is now displayed and will stay there
• add ability to edit the note

💰 Motivation

Users like having help in deciding what to eat and drink! 😄

📐 Plan

Create a simple 'Plan My Meal' page with filler text

✅ Task List

• add simple HTML section set to hidden
• add an html section set to hidden with filler text for random beer that will be chosen later when functionality is added

💰 Motivation

Users like to explore! 😄

📐 Plan

Design a page that showcases an Instagram style explorer page for beers

✅ Task List

• code HTML section for explorer page
• HTML should include a fill list of details and an image
• all information besides image should be display:none
• container should be flex and wrap
• add top bar with absolute positioning styled according to wireframe
• add navigation bar with absolute positioning styled according to wire frame
• add ability to "star" a beer that will save it to their favorites
• add data rendering function
• add Ajax ability to load random beers
• add load more option
• [ ]

💰 Motivation

Users like to understand what the website is for! 😄

📐 Plan

Change elements and CSSto show the user value

✅ Task List

• update carousel to show information about what the website does
• add other styling as necessary
• update words on website to actual words
• update website name
• [ ]
• fix any bugs