Tutorial:Wedding Concierge




Day 4: Shopping Cart Information HTML page

We need to have a section of our page to display a summary of what the person purchased. The text appears below. This information should be copied and pasted into the HTML article section between the <Article> and </Article> tags

Right after the headline three tag, <H3>, we have the title of this flexbox section:Shopping Cart.

The next sequence of lines are designed to show the items that have been purchased. There are a total of 24 items displayed in a table. After completing all coding associated with this function when each item picture is clicked, the following should take place.


Day 5: Shopping Cart javaScript file


The javaScript file must be linked from the HTML file between the head tags.

The lines that follow are the ones that comprise the javaScript file that handles onClick event handler.

Copy the code above. Paste it into a new Notepad++ file and call it buyItems.js

Add the line below to the html file in between the beginning <Head> and ending </Head> tags.

<script type="text/javascript" src="buyItems.js"></script>


Save your file and run it in Chrome. Click on the first picture, a wedding dress. Your screen should look like the one below.



If all goes as planned, the selected image is enlarged. The boxes for price and item should be checked. The description and price of item should be displayed in the shopping cart area. Subtotal, sales tax total and total are calculated Explanation of the coding for this file appears below.

Day 6: Customer information : footer section

The next section of our assignment contains the customer information and totals portion necessary to process the order. Copy the information below and paste it into the footer section of your html project file.

The following lines should already be at the end of your html file
</form>
</body>
</html>

Explanation of HTML5 code for customer information section

This section is designed for the user to enter contact information.



Day 7: defaultFile.css file

The purpose of the default file is to cover screen sizes that we do not include in the media queries. It also helpful if there are errors in the coding for other screen sizes. The default values will show up instead. Here are the screen sizes that we will be targeting for our project.




Add the Link Rel for the default cascading style sheet file to your html document page.

Here is the content of the defaultFile.css file. Copy and paste it into a new file. Save with a .css extension.

Here listed below is the contents of the defaultFile.cas file

Try out the new web page with the default cascading style sheet formatting. It should look like the example below.

You will notice that it has only one column.


Responsive web design tester tools are very helpful in emulating different screen sizes. The product can be added to Google's Chrome. Click on video link to see how this responsive web design tester works. You can complete this assignment without this tool yet it is handy to see the width of the screen in pixels when you use the tester. Without this tool, you need to rely on color changes for each media query.
Responsive Design Video

The following three links contain an alphabetical listing of colors using hexdecimal and RGB codes. Experiment with these colors changing header, footer, nav, article and aside elements in the default file. Remember colors should be relevant to your product and services and convey the image of your business. Pick a pallet of colors that reflect your image. There has also a lot of study done and the psychology of colors.

Wikipedia list of colors a-f
Wikipedia list of colors g-m
Wikipedia list of colors n-z