Cinnamon Magic Austria

Please note the entire project is described under the "Documentation for Project" folder in the word document named FinalProjectStreamOne.doc.

The aim of this project is to build a font-end responsive Website. I therefore chose to build an Austrian Bakery Website called Cinnamon Magic Austria

The Website was built for a colleague whose wish it is to open an Austrian bakery based on the cinnamon spice (a lot of Austrian bakery confectionary includes the cinnamon spice!).

The Website includes the following technologies:

• Balsamiq for prototyping
• Sublime Editor for writing code into files
• HTML 5 for creating webpages
• CSS for semantic front end
• JavaScript and JQuery for responsive features
• Bootstrap for nice front end features such as the nav bar
• Repl.it and code pen for testing code

Using the technologies above the below Website features were achieved:

1. Home page

This includes Bootstrap nav bar, a CSS animated banner directing users to the online booking page using JQuery, a JavaScript store look-up and store opening times.

2. About Us page

This includes Boostrap nav bar, jumbotron div and modal.

3. Bakery Products

This page has an audio file playing Mozart, a Bootstrap carousel and thumbnails. There is also a translate feature using JavaScript.

4. Order Online

The order online page has a HTML form for users to complete using JavaScript code for validation.

5. Payment Page

This is a short form in order for users to complete payment. Users are redirected after successfully filling out the order online form.

My own JavaScript and JQuery files are found under the js folder.

The below table explains how to deploy the application.

1. For the live version please go to: https://gallant-agnesi-c75db0.netlify.com/home.html

2. To run locally download all files from https://github.com/ChristineMWilde/Stream_One_Project_GH.

3. The test folder can be excluded if needed.

4. The prototype folder can be excluded if needed.

5. Click on home.html file. Once the page launches users can navigate all other html pages using the Bootstrap navbar.

6. Please read "FinalProjectStreamOne.doc" for detailed information on this project. This document is found under the folder "Documentation for project" folder

TESTING observations:

• The DOM did not load property which is a common error so an Event Listener property was added to the JavaScript files.

• JQuery was used for certain interactive coding but most of that was updated to use JavaScript instead e.g creating a dictionary for the Bakery Products translation feature.

• Code pen was used to test some code since it HTML, CSS and JS can be view on one page with the results at the bottom.

• Dev tools on the browser was used during testing to ensure files were loading properly and to catch any errors in the console.