uoft-project1-group5 / cocktail-map

https://uoft-project1-group5.github.io/cocktail-map
1 stars 0 forks source link

Online Barkeep

Description

Week 8 - Interactive Front-End Project Online Barkeep by Group 5

Online Barkeep is a subscription-based website that will allow learners access to ingredients and recipes to foster a learning environment to prepare students for the work-field. At Online Barkeep, we bring a positive learning experience coupled with our massive database of drinks to create the perfect learning experiences. We are dedicated to creating world class bartenders who will succeed and thrive in every environment. Join today, and get unlimited access to all the ingredients and learn how to signature the perfect cocktails.

User Story

When a user navigates onto the page from any social media platform, or google search, the user will land on our home page and will be greeted with the hero and the name of our site, Online Barkeep. The user will now see the header with a nav bar that has these headings: Sign Up, About Us, Subscription, Contact Us and Student Portal.

When the user clicks on the Sign Up button, the page will navigate to the Sign Up Here sheet which is below the hero. The Sign Up sheet has a submit button that will send the user's request to reach out to the team for more information and for the next steps on the signing up process. If the user hits submit without an email address, a message pops stating "Please fill the email address!" as it is a required field on the sheet.

When the user clicks on the About Us button, then the page will navigate to the About Us section which is below the Sign up here sheet.

When the user clicks on the Subscription button, then the page will navigate to the Subscription section which is below the About Us section.

When the user clicks on the Contact Us button, then the page will navigate to the Footer, where the Reach Out section is, which is below the Subscription section. Here the user can either fill in the Contact Us section and hit submit, to contact the team or use the phone number provided or use the google map to figure out the location. The Footer also has a small greeting that reads "Mix and Drink Responsibly ❤️" to deter the abuse of the website.

When the user clicks on Student Portal button, then the page will navigate to the page student-portal.html ; here the nav bar next to the logo will remain the same as the homepage and when clicked will take the user back to the respective sections in the homepage. The user will now see a bar, where the user can type in the name of a cocktail, hit the search icon and be presented with the ingredients, steps, nutrients facts and a picture of the cocktail. Also, the user can click the Random Cocktail button that will then generate details about the random cocktail, the same: the name of the cocktail, the ingredients, the steps, the nutrients and the picture. The user can look up as many cocktail recipes, and also hit the Clear History button to clear the space below the Clear History button. At the end of the page, will be The Footer that has a small greeting that reads "Mix and Drink Responsibly ❤️" to deter the abuse of the website.

Built with

Website link:

https://uoft-project1-group5.github.io/cocktail-map/index.html##

Preview

Launch Cocktail Map

demo

Resources

The lists of resources used to complete this project:

  1. Google (https://www.google.ca/) and Google Fonts (https://fonts.googleapis.com/css?family=Open+Sans&display=swap).
  2. MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/JavaScript).
  3. w3schools (https://www.w3schools.com/).
  4. Font Awesome (https://fontawesomeicons.com/).
  5. Foundation (https://get.foundation/).
  6. Food Database API (https://developer.edamam.com/food-database-api-docs).
  7. TheCocktailDB API (https://www.thecocktaildb.com/api.php).
  8. Supports from instructor, assistant instructor and Tutor.

Contribution

Made with ❤️ by Group5