Your project should now look like this.
Day 2: Featured Services
The next section, Aside, contains lots of information, the featured services and products.
There 24 images that depict services and products available for purchase. The code is explained as follows.
The first line of each that starts with an explanation point followed by two dashes are programmer's remarks or notes to themselves. They end with two dashes and a less than symbol.
The next line gives each image an ID number that will be referenced in the CSS file.
The next part of the code names the image file, its height, width and border.
The title is to describe the item for the user. When the user hovers over the image using a computer, the title shows up in a small text box.
The onMouseOver event handler enlarges the picture.
The onMouseOut event handler puts the picture back to its original size.
The onClick part of the code is used to purchase the item. A product/service description. and price is displayed.
Copy and paste the above code between the <Aside> and </Aside>
Before running it, however, we need to get the pictures of the products transferred to your computer. The following table contains the images and file names needed for this project.
Day 3: Copying pictures
|Picture and File name|
Right-click on each of the images. Use Save Image As option. Use the file names next to each picture. Save all pictures in your working folder.
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.
The check box to the left if the item receives a check mark.
The box next to the check mark should contain the description of the item purchased.
The check box to the left of the price should be checked.
The next box should contain the price of this item.
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.
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.
The first lines of the file are used to initialize the variables used: total, price, sales tax and subtotal.
There is a separate function for each item.
For some items, the ones that you may purchase more than one of, have code identifying those variables.
For these items a window opens requesting the number of items desired. Examples include, number of bridesmaid dresses, tuxedos for groomsmen, number of people invited to the reception, etc..
There 24 data ids (0 -23) one for each product or service. Here is what happens when an item is clicked.
The value of the item is displayed
The value of the item's price is displayed.
Sales tax is calculated on the item at .08 or 8 percent
The subtotal is calculated by adding the price of this item to the existing subtotal
Sales tax subtotal is calculated
The total is calculated by adding price of item plus the sales tax
The next three lines round off the numbers
The process starts over again if an other item is clicked.
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
Explanation of HTML5 code for customer information section
This section is designed for the user to enter contact information.
The <fieldset> tag groups the form elements on the page.
The <legend> tag is used to add a caption to the top of the form.
Information is entered into a table.
Label for identifies the data in the first cell as a place for the user to key in the first name.
Most of theType describes the input as text. There are ones for email, radio buttons, checkboxes, etc.
Placeholders tell the used what should be entered into the field and fill the space with that information.
Required makes the field so that it cannot be skipped when trying to submit the form.
TheButton input type creates a button.
The value attribute id what is displayed inside the button.
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.
screens with a minimum width of 480 pixels: smart phones
screens with a minimum width of 600 pixels: tablets in the portrait mode
screens with a minimum width of 801 pixels: tablets in the landscape mode
screens with a minimum width of 1025 pixels: desktops, laptops and big landscape tablets
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.
The body tag describes the attributes of text for the body, and background color using the RGB method. Background color of the body should be pink. The body encompasses the article, nav and aside sections.
The #main section encompasses all three columns: article, nav and aside.
All are arranged in the column format with the following code.
column flex items: nav, article, aside are stacked in a column from top to bottom.
In a flex-flow:row arrangement, the flex boxes:nav, article and aside are stacked from left to right.
For larger layouts we want to use the row layout of three columns across.
For smaller layouts like cell phones, we want to layout the material in column layout
We set margins - distance between columns
Padding is the distance between the text and the border of the container.
We set the color and style of the border next.
The border-radius gives each flex container rounded corners.
We next set the color of the background of each flex container.
The flex percentage sets the relative size of each container. We want the nav section to be the smallest at 20% and the other two containers: article and aside each to be 40% of the screen.
The order attribute allows you to change the order of the presentation of the flex boxes.
In our default file, The nav box appears first, followed by the aside box and then the article flex box.
The header and footer are formatted next: block style
Headlines are described next.
Paragraphs are formatted in the next section of this file.
Order and unordered lists are formatted next.
Hyperlink formatting appears next.
The one button on our project is formatted next.
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