Update Fav Star icon if object is already in results.

Description

• make a note of the relevant api url syntax
• note the types of queries we may encounter for the project

Description

• When a user has removed all favorites and the clicks the favorites button, the console will show the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at makeFirstResult (script.js:256:24)

Requirements

• Add validation check for empty favorites
• Simple solution, refresh the page so the default empty results card shows
• Longer/cleaner solution, make a function to dynamically generate that default view card from script.js

Description

• the results card elements will be created from a function call

Requirements

• store variables for brewery info: name, id, tel., address., etc.
• create elements for each of the required items
• set the classes and attributes
• add the created elements to their necessary parents
• finally add the elements to the card and add the card to the appropriate results section.

• This task should come after the MVP
• Create a Favorites link so that when a user clicks on the Favorites they are taken to a separate html page that displays the favorite breweries
• There needs to be a link to take back to the original index html

Description

• When page loads, the cards should have a default view
• If there are no favorites..
• There should be a blank note on the first results card
  • e.g., 'search to show breweries'
• If there are favorites, the favorites should load in

• the brewery API is only capable of functioning correctly in England, France, Scotland, Ireland, and the United States.
• If a user enters a city not in these countries the results will be inaccurate. We should add some conditionals to check the country of the search and prompt the user if the country is not one of the ones above.
• This prompt should be in the form of a modal

Issue

• phone numbers displaying as single set of numbers without separators (555) 555-555 etc.
  • Use string formatting and '...'.slice(start, stop) to format them (may require validation).
• web urls have the protocols http...w., but should display simply the domain name
  • Use regex to replace any protocol substrings with empty strings ''

  let urlStr = 'https://www.example.com'
  // either use URL constructor && regex
  let urlDomain = new URL( urlStr ).host.replace(/^www./, '')
  
  // or regex only
  let regex = /.*www.|.*\/\//
  urlStr.replace(regex, '')

Description

• One-page proposal that contains a project title, project description, user story, wireframe or sketch of the design, APIs, and rough breakdown of tasks

Application Flow

on document ready

• 1. load page, load default views ('no results')
• 2. load favorites from storage
• 3. create cards from favorites
• 4. wait for search input

on search input submit

• 5. validate response
• a. show modal popup
• b. return early if empty string
• 6. fetch position data from openweather
• a. validate country is in ['usa', 'eng', 'fr', 'scot', 'ire']
• b. show modal popup if not in acceptedCountries
• c. clear search field if successful search
• 7. use coords to fetch brewery data
• 8. parse brewery data
• 9. store brewery data in results array
• 10. create card elements from results array
• a. create elements
• b. add class list or attributes
• - check if brewery is in favorites
• - add star state
• c. assign data-id
• d. set element text
• e. append elements to DOM
• 11. wait for user input

on fav star icon pressed

• 12. add/remove brewery from favorites array
• - validate brewery is not null/undefined
• a. check if brewery is in favorites array
• b. remove brewery if in favorites
• c. otherwise add brewery
• d. save array to storage

on load fav button pressed

• 13. clear search input field first
• 14. clear results cards
• 15. load favorites
• 16. create cards
• ...

Issue

• favorites array can get null values which breaks the app
• Occasionally the brewery can get added twice to the array, then it won't be removed during toggle

possible fix

• validate null values while looping thru data and removed them from the array
• validate fav toggle using brewery.name

Description

• Find an alternative css framework to use instead of Bootstrap
• List the benefits of at least 2 other frameworks
• Note some basic syntax

• Add functionality to the "Star" button on the results to save that result to local storage
• We would want the brewery name, the brewery address, and type of brewery saved
• We should be mindful of if the Star is clicked multiple times it may add more than one of the same brewery to local storage (conditional to filter out maybe?)

Description

• When the submit button is clicked and there is a city in the search field, a fetch request retrieves the data from the appropriate api

Description

• basic styling to organize the elements of the page
• add comments to note the sections

Description

• outline the basic functionality of the script file.

Description

• create the outline of all the static elements that will be on the page
• assign appropriate class names and ids
• link required script imports (ie., cdnjs...)
• make sure comments delimit the various sections