Easy Cocktail Recipes

View the website on GitHub Pages

I have created this site as part of my Milestone 2 project for Code Institute, focusing on Interactive Frontend Website development and design.

This blog is for adults, where the user can easily make the popular cocktail recipes at home using the instructions in the recipe card and entertain their friends and family.

Due to the pandemic and the hospitality industry having one of the worst effects, people have missed going out and socializing. This website will enable adults to create simple cocktail recipes for special occasions or weekends for their friends and family to enjoy!

Table of Content

1 UX

• User Stories
• UI Structure
• Design
• Wireframes

2 Features

• Features Implemented
• Features Left to Implement

3 Technology Used

• Languages Used
• Frameworks Libraries and Programs Used

4 Testing

• TESTING.md file

5 Deployment

• GitHub Pages
• Forking to GitHub Respiratory
• Making a local clone

6 Credits

• Code
• Media
• Acknowledgment

UX

Easy Cocktail Recipes is a blog where the user can browse through the selection of cocktails recipes. The user can choose to make the cocktails at home following instructions.

The main objective of this website is to provide the user with some of the most popular cocktail recipes, which are easy and quick to re-create at home. Therefore, once the user selects their cocktail recipe, the instructions and method will be displayed.

The user can navigate back easily to the recipe page and browse through the cocktail selection. The user can easily navigate to the About page, where they can learn more about a blog. The user can contact the site owner by completing a contact form, once the form is submitted, they will receive a friendly email acknowledging their message. The user can click on the social icons located at the bottom of the page and follow the blog on social media!

back to content

User Stories

The blog has been identified for users over 18 years old, who enjoy going out and drinking cocktails at the bar, following the pandemic, I wanted to give them the tools required to create a happy hour at home.

The following user stories have been identified:

First Time User:

1. As a first-time user, I want to understand what this site is about and what to expect.
2. As a first-time user, I want to view a selection of cocktail recipes available.
3. As a first-time user, I want to be able to see the ingredients and method for each cocktail.
4. As a first-time user, I want to check out the social media links of the blog.

Returning user:

1. As a returning user, I want to make a cocktail and follow the instructions.
2. As a returning user, I want to navigate back to the recipe page for more cocktail recipes.
3. As a returning user, I want to learn more about the blog.
4. As a returning user, I want to learn more about the blog creator and check out their social media accounts.
5. As a returning user, I want to be able to rate the recipes.

Frequent user:

1. As a frequent-user, I want to be able to contact the blog creators and ask a question.
2. As a frequent-user, I want to follow the blog on social media.

Business Goals:

1. As a business owner, I want to build an interactive website for viewers to explore popular recipes.
2. As a business owner, I want to increase the site traffic and get more views.
3. As a business owner, I want to build my social network following.
4. As a business owner, I want to interact with users on a personal level.

back to content

UI Structure

Considering the above user stories, I have decided upon the following UI Structure and styling:

Home Page:

• A clear and simple landing page with a big hero image where the user will have a clear understanding of the website.
• A simple navigation menu will outline the content of the blog.
• Navigation is sticky throughout the site giving the user easy navigation options at any time.
• The user is presented with a famous quote by Luis Bunuel loading of the page, which tells the user what this blog is about.
• Three call-out statements will are displayed to explain to the user what to expect from the blog.

Recipe Page:

• Cocktail recipes are displayed on the page.
• The user has a choice to view the recipes by category by clicking on one of three different buttons at the top of the page.
• Once the user picks its desired category, cocktail recipes under this category are displayed.
• The user also has an option to view all the cocktail recipes by clicking on the button "All".
• Once the user clicks on the name of the cocktail the information will expand.
• The user is able to click on the button at the bottom of the recipe card to collapse the recipe card view.
• Once the user leaves a particular recipe, the information will collapse automatically, as well.
• The user can click on the image of the recipe card again to collapse the view, as well.
• The user can rate the recipe by pressing on the star rating.
• The user will be given feedback via alert once the recipe has been rated.

About Page:

• A brief introduction about how the site has been created.
• Pictures of the two site owners are displayed with their names.
• Once the user clicks on the image or the name of the site owners more information is displayed, which includes their social media accounts.
• The user is presented with links to the bars where the owners use to work, which open in separate tabs.
• The use is also able to check out the owner's social media accounts by clicking on the social links button at the end of the bio div (social media buttons lead to the main page of the social media site, as the characters are fictional and for education purposes only).
• At the bottom of the bio-information there is a button and on click, the information slides up.

Contact Page:

• Contact form is available for users to submit their queries.
• Once the contact form has been submitted, an alert will be displayed, thanking the user for getting in touch.
• Once the contact form is submitted, the user will not be able to submit a form again, as submit button has been temporarily disabled.
• Once all the information is sent, the form is reset to its original view.
• An automated email will be sent to the user once the contact form has been submitted.
• The owner of the site also receives an automated email with all the information which has been submitted and user details.

Common:

• Navigation menu is sticky and responsive.
• Navigation will collapse on the mobile view.
• A favicon icon is added to the site to give it an authentic look.
• Hero-background image will remain the same throughout all the pages, to give consistency to the design and cocktail-bar feel.
• The footer will be minimal with social media icons to the blog.
• All pages will contain copyrights to protect the owner in the footer.
• To give some consistency to the user, if the information (like recipe cards and site owners bio-info) is in the collapsed view.
• The user will be able to view the information on click.
• To collapse the information the user has a few options, the most common one is a click of the button at the end of the information.
• Throughout the site, the user has call-to-action buttons at the end of the page which will lead them to the next logical step, without the need to click on the navigation menu.

back to content

Design

Colour Scheme

• | #ffffff | #d6css2 | #be685 | #b00f16 | #0d0709

Sometimes the colours have been converted to the rgba values to create transparency. The colour palette has been picked from colorpalettes.net

Typography

Google Fonts have been used on this page - To give consistency to the users, the consistent font has been used throughout the site:

    - All the headings are displayed in font-family:'Akaya Telivigala', cursive;
    - All other elements are displayed in font-family: 'Prata', serif;

Imagery

• All the imagery is imported from Pixabay

• Black and White background image is by picturexphotobnb

• Barlady image paolodepascale

• Barman image paolodepascale

• 404 Background Image minka2507

• All the cocktail images are provided by API TheCocktailDB

• Favicon icon has been sourced from icons8

back to content

Wireframes

For wireframes, I have used Balsamiq

Please view my wireframes for desktop, tablet and mobile view: Wireframes

• Landing Page:

• During the development of the project I have added a quote to the landing page to enable the user understand on the landing of the page, what the site is about.

• About Page:

• Recipe Page:

• During the development I was not able to source hint and tips from the API used, therefore this section was left out.

• Also the layout structure for recipe cards has changed, whilst the information provided to the user stayed the same.

• The recipe rating does work, however, at this moment in time, this information is not recorded.

• Looking through the information available to me via API, I have chosen to implement filter buttons, which filter recipes by category.

• Contact Page:

back to content

Features

Features Implemented

• All pages:

  • Dynamic navigation menu collapses on the mobile screen view.
  • Contain sticky navigation allows the user to access the menu at any time.
  • The website has a responsive design based on the screen view.
  • Minimalistic footer with social icons for the webpage.
  • Custom 404.html page has been added
  • All pages have call-to-action buttons (except contact.html) to give the user easy access to the next page, without the need to choose from the navigation menu.

• Recipes.html:

  • Recipe cards take their input from an API.
  • Recipe card information is hidden to the user on document load.
  • Three filter buttons are displayed after the title of the page, giving the user an option to view the recipes by category.
  • Recipe card expand on click to show all the content to the user.
  • The user can close the recipe button by clicking at the button in the end of the page.
  • Recipe card collapses when the user moves to a different recipe.
  • The user can also exit the recipe card with one click on the recipe image.
  • The user can rate a recipe inside the recipe card.
  • The user is given feedback once the recipe is rated via an alert.

• About.html

  • The user is presented with About the blog paragraph.
  • The user is also shown two pictures of the site owners.
  • The user can click on each name or image, and more bio information is available.
  • Bio information for each person has links to the cocktail bars where they use to work.
  • Bio information also social icons links for each person.
  • The user is also provided with a button to collapse the bio information for each person.

• Contact.html

  • Contact form is powered by mailJS.
  • Contact form uses the “POST” method to send information from the user.
  • When the submit button is pressed the button text value is "Sending ... ".
  • The submit button is temporarily disabled to prevent the user from clicking it again during sending.
  • Once the user sends the form, an alert window is displayed letting the user know the content has been sent.
  • If the message is not sent an alert window will be displayed letting the user know something has gone wrong.
  • In case of an error the submit button is disabled.
  • The user also receives an automatic reply from mailJS.
  • The site owner receives an email from emailJS with all the information submitted from the user.

back to content

Features Left to Implement

• Subscription form to the blog's newsletter
• Recipe cards information could appear in the modal on click
• Sharing social media icons for each recipe
• Function recipe rating, which stores the user rating.

back to content

Technology Used

Language Used

• HTML5
• CSS3
• JavaScript

back to content

Frameworks Libraries and Programs Used

1. Bootstrap 4.3

• Mainly for responsive grid layout.
• Recipe card layout has been imported from Bootstrap library and cutomized to to site needs.
• Bootstrap classes have been used to assist with automated margins and layout of elements.

2. CSS tricks

• Used to create a full background image for main site and 404.html page.

3. Google Fonts:

   • Google fonts were used to import the 'Akava and Prata' fonts into the style.css file which is used on all pages throughout the project.

4. Font Awesome:

   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

5. jQuery

   • jQuery library has been used to target html elements and assign event listeners throughout JavaScript files.

6. Git

   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

7. GitHub:

   • GitHub is used to store the project's code after being pushed from Git.

8. Balsamiq:

   • Balsamiq was used to create the wireframes during the design process.

9. TinyPng:

   • TinyPng was used to compress the size of the images and improve loading time.

10. TheCocktailDB

• API used to get cocktail recipes info for recipse.html page.

11. Email-JS

• API is used to submit a contact form and send automated emails to the user.

12. Grammarly

    • Used to fix the thousands of grammar errors across the project.

13. Gitpod

    • Used as the development enviroment.

14. Google Developer Tools

    • Used as a primary method of fixing spacing issues, finding bugs, and testing responsiveness during the project development.

15. Befunky

    • Online platform used to resize and crop images.

back to content

Testing

You can find testing information in TESTING.md

back to content

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps:

1. Log in to GitHub and locate the marina601/easy-cocktail-recipes Repository
2. At the top of the Repository (not top of page), locate the "Settings" button on the menu.
   • Alternatively, click Here for a GIT demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "root" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

back to content

Forking to GitHub Respiratory

By forking the GitHub Repository you can make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following step:

1. Log in to GitHub and locate the marian601/easy-cocktail-recipes Respiratory
2. At the top of the Repository (not top of page) just above the "Settings" on the menu, locate the "Fork" button.
3. You should now have a copy of the original repository in your GitHub account.

back to content

Making a Local Clone

1. Log in to GitHub and locate the marian601/easy-cocktail-recipes Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone and then paste the URL you copied in Step 3.

back to content

Credits

Content

• The main content of the website has been written by a developer.
• Recipe information has been provided by TheCocktailDB API
• Quote which appears on the index.html page has been taken from The Oxfordsd

back to content

Code

• My mentor Medale Oluwafemi has helped me to refactor the code in recipes.js getCocktail function, and write html elements dynamically in JavaScript instead of repeating the same code and targetting html elements from the recipes.html, which I have done initially.

• Also my mentor has introduced me to the filter method in JavaScript recipes.js to filter through the data by category and display the information desired on click of the button and loading of the page. I have tried to solve this issue in many different ways and have received unexpected result, working through this issue with my mentor has helped me to understand and learn the logic of programming language.

• The initial code used to get the contact form to send the information has been taken from emailJS API documentation and modified to fit the site purpose.

• Responsive navbar has been created with help of a tutorial from Web Dev Simplified

• Fully responsive background image code has been taken from CSS tricks

Media

• Background image and the images for about and 404 pages have been sourced from Pixabay

back to content

Acknowledgment

• I would like to thank my mentor Medale Oluwafemi for helping to understand the concept of JavaScript and guided me through the logic of JavaScript and reducing the length of my code and creating dynamic elements in JavaScript, also pointing me in the right direction with UX design of the site.

• My fellow student Aukje Byllsa who took the time to review my project and give me some helpful suggestions on what aspects could be improved.

• Slack community @Code Institute for reviewing my project and helping me throughout the development.

• Tutor support at @Code Institute for their patience and helping me with the logic of JavaScript and problems found along the way.

back to content

Disclaimer

The content of this Website is for educational purposes only.

back to content