This is the source code of the Pizzeria Vecchia Milano.

To see it in action just click this link.

The goal of this website is to easily display the content, and facilitate customers to make their choice and to place their own order.

• everyone who want to enjoy a delicious pizza in the pizzeria or at home.
• any age from 16 years old.

To have as many of the attendees of the Pizzeria, as possible, take up usage of the web app. Interactive web-app. Fully functional web app. Intuitive design. Easy to navigate.

• Have a great food experience.
• Find easy to place an order on line for the home delivery or the take away.

In the head of the project I have installed the links to have access to different libraries.

1. Bootstap 4: a library with templates for buttons, forms, jumbotrons and so many other components. For this project for example I used it to build the responsive navigation bar and the green button on the navabar.
2. Font Awesome: is an icon library.
3. Cdnjs is a Javascript library and below the external link to the style.css file.
4. In the of the orderonline page there is the link to connect to the sendEmailJs service. This service, every time an order is sent, make sure to send an email with the order to the pizzeria, and a confirmation email to the customer.
5. At the bottom of the page is where the javascript files are located. In every page html page for example there is the <script> to make the navbar responsive for every screen size.

I built a responsive navbar, that shows a toggle menu when the screen size is below 991px. To build it I followed an accurate and guided tutorial that you can find at this link

The homepage presents a carousel with pictures followed by the awards won by the pizzeria and a google map.

The menu page gives the possibility to see the pizza that you desire when you click on the button below every pizza: infact an image of the relative pizza, will appear. Same thing happen with every dessert.

The ourstory page is telling a piece of history of the pizzeria. At the bottom of the page there is also a short video of the staff in action.

The gallery page is a collection of pictures shared by the pizzeria staff and the customers.

The order on-line page is for who want a home delivery or to pick up at the pizzeria.

The CSS file is divided by comments, that I used as title to separate the html pages or elements like map and carousel and the different screen sizes.

This make any future correction or research much easier.

I built the wireframes using the Balsamiq Cloud service.

This project makes use of:

• [HTML] - base language for this project.
• [CSS] - Used for Styling the HTML code
• [JavaScript] - Used to make the web app interactive.

• Bootstrap - Used for responsive navbar, for the menu page and the form.
• JQuery - The project uses JQuery to simplify DOM manipulation.
• FontAwseome - Used for all the icons on the site.
• Google Fonts - Used for the 'Sansita Swashed' fonts.
• Hover.css - Used to animate the social media icons.

• Emailjs - Used to send the contact form in an email format to my gmail account.
• Google Cloud Platform - Used to display a map provided from Google service, to show the pizzeria location.

• [Google Chrome] - Used for browser and dev tools
• [Mozilla Firefox] - Used for browser and dev tools
• [Microsoft Edge] - Used for browser and dev tools
• [Google] - Google was used for research.
• Balsamiq Cloud - Used for creation of wireframes.
• Gitpod - Used as IDE for this project.
• Git - Used for Version Control
• GitHub - Used to host repository and live website.
• Github Pages - Website hosted on Github Pages
• Am I Responsive - Used for testing purposes as well as creating the image to display the web pages on different devices.
• W3 Html validator - Used to test and validate my html code.
• W3 Css validator - Used to test and validate my css code.
• JSHint - Used to validate my Javascript code.
• Color Scheme Designer - Used to test colour combinations.
• Free Formatter - Used to format my html, css and javascript code.
• PageSpeed insights - Used for testing the loading speed of the site.

Navbar:

1. Go to any html page.
2. Try to reduce the screen size to any size below 991px and verify that a toggle menu appears on the top right angle of the screen.
3. Try to click on the toggle menu and verify that a list with all the pages of the website appears to you.
4. Try to click on every page provided by the toggle menu and verify that the pages are all connected between each other and reachable from any other page.
5. Try to hover the mouse over the Menu, Ourstory and Gallery links in the navbar and verify that their color text change to yellow and back to white when you move the mouse out.
6. Try to hover the mouse over the social media icons in the footer and verify that the icons color change to yellow and back to white when you move the mouse out.
7. Try to click on the social media icons and verify that they are correctly linked.
8. Try to click on the logo and verify that it redirect you to the "index" page.
9. Try to scroll any html page and verify that the navbar is fixed.

Carousel:

1. Go to the "index" page.
2. Click on the right arrow of the carousel and verify that the second image slide to the center of the carousel.
3. Click on the right arrow of the carousel and verify that the left arrow appears.
4. After the first click on the right arrow, click on left arrow to go back to the first picture, and verify that the left arrow disappears.
5. Click on the right arrow until you reach the last picture, and verify that the right arrow disappears.
6. Click on the dots right below the carousel and verify that every dot matches a picture.

Menu:

1. Go to the "menu" page.
2. Click on any button and verify that an image of the relative pizza or dessert will appear on the page.
3. Click on any button and verify that the text "Show" on the button change in "Hide".

Video:

1. Go to the "our story" page.
2. Scroll to the end of the page where the video is placed, try to click on the "play" command and verify that the video is starting.

Gallery:

1. Go to the "gallery" page.
2. Set the size of the screen to at least 992px and verify that every raw has 4 columns of pictures.
3. Set the size of the screen between 576px and 992px and verify that every raw has 3 columns of pictures.
4. Set the size of the screen to less than 576px and verify that every raw has 2 columns of pictures.

Contact form:

1. Go to the "Order on-line" page.
2. Try to submit the form with empty fields and verify that an error message about the required fields appears.
3. Try to submit the form with an invalid email address and verify that a relevant error message appears.
4. Try to submit the form with all inputs valid (and a valid email ) and verify that a confirmation email is sent to the email address provided.
5. Try to submit the form and verify that all the fields are cleared.

• I used the W3 Html validator service to validate my html code.

• I used the W3 Css validator service to validate my css code.

• I used the JSHint service to validate my javascript code.

The project presents two little bugs that I still need to correct:

1. When the carousel is at last picture, the right arrow suppose to disappear but it doesn't.
2. Can't make the submit button to submit and clear the form at the same time. The two funtions for now, work only alternatively.

This web app was developed in Gitpod and pushed to the remote repository, GitHub. The live page is hosted on GitHub Pages.

• git add . - to add the files to the staging area.
• git commit -m "text message here" - to commit the files.
• git push - to push to origin master branch on to GitHub.
• git status - to see the current status of the files.

• Log into GitHub.
• From the list of repositories choose PizzeriaVecchiaMilano.
• Go to settings.
• Scroll down to GitHub Pages section.
• Select as a source master branch.
• The page is now automatically refreshed and the project is deployed.
• To access the project scroll down again to GitHub Pages section and click on the provided link.

For more detailed information regarding deployment to GitHub Pages click here.

• Go to PizzeriaVecchiaMilano GitHub repository.
• Click on "Clone or download" green button.
• Copy the URL to the repository.
• Open the terminal in your IDE.
• Choose the working directory where you would like to have the cloned repository.
• Type git clone, and add the URL you copied from Github: git clone https://github.com/OmarBedawi/PizzeriaVecchiaMilano-Web-App.git
• Press Enter and your local clone will be created.

For more information regarding cloning of a repository click here.

Thank you to the following for inspiration, motivation and the direction I needed:

• Seun Owonikoko (my mentor)
• Code Institute staff

This web page was created for educational purposes only.