Homework SourseProblem 1 Your boss has asked you to create a web page that
Problem 1
Your boss has asked you to create a web page that he can use to create invitations to the rummage sales! He wants to have different dates, text, colors and images in each invitation. You are going to use your programming skills and mix them with what you learn in this weeks lessons.
Learning Outcomes
Demonstrate creativity and problem-solving skills.
Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.
Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.
Step 1. Create the overall HTML structure
Save your Word document in your homework folder. Add this to your web site in the homework folder after you have completed both problems.
Gather your data and create your basic page navigation structure.
Edit the week6-1.html page to have the same style sheet: homework.css * Note that problem 1 and 2 will use the same file!
Make sure you have links to all of the pages for this week and the home button in your main navigation menu. You should have a consistent style or theme for your web site that is unique. Don’t copy off of other web sites!
Make sure there is some place on the home page that has links to all of the other pages. You can do this in the main menu if you chose the first page layout from week 2. If you chose the Jumbotron, just create a link to at least to the first page for each week.
For Problem 1, we’ll work with week6-1.html.
Step 2. Create an interactive program with HTML, CSS, JavaScript and DOM
This part of the activity, you will create the form using JavaScript and the DOM. goal is to meet the program requirements above, demonstrate your understanding of the DOM and write efficient code that works. As part of this assignment you will change the styles dynamically in JavaScript, create elements and append the styles and elements to other elements in the page.
Program Requirements:
Build an interactive program with JavaScript. Remember that your form should be different, showing your creativity. *Note that there are many different ways to solve this problem. The TIPS at the end of the Problem 1 directions should help you when you are troubleshooting your homework!I’ve given some direction. It’s up to you to be creative.
Create the web page structure
Create a main div element and assign it a class called main. Inside the div element insert an aside with the id, leftaside and a div with the id placeholder. The left side will be the form you will build. Format the layout of the main, leftaside and placeholder. The leftaside should be about one third of the window. Let’s start in Problem 1 with just the form.
Create the form elements
You will need labels for each of the form fields and will want to set the width property, and set the inline attribute to inline-block. You will need to come up with your own naming conventions for your form fields! We are at that point in the coure where you should be able to do this.
Use different form field types. The minimum types include textbox, textarea, color, date, dropdown list, radiobutton or checkbox, and a submit button.
The values of at least one of the dropdown lists should be dynamically generated. You need to incorporate images in some dynamic way as well. To get the image to be next to a radio button or checkbox list, use the display property and set it to inline as well.
In the submit button call the function that will apply the styles.
Create the functions
*Note that there are many different ways to solve this problem. However, it’s up to you to follow the DOM and verify the syntax with the standards and your readings!
Create the three functions, populateStyles, populateFonts and populateImages. Again you can rename them to be appropriate to your program!
Each form element that ‘binds’ to some data structure should have it’s own function. In the example, there is one function for populating the border styles in the dropdown list, one for the fonts, and one for the radiobutton and images. Your program may be different.
In each function populate the form field using JavaScript
For example, in the populateStyles function you might:
Create a string variable, which contains a semi-colon separated list of the values of the border styles attribute. You can look them up on the W3Schools site.
Create a variable for the array.
Split the string with the border styles using the semi-colon as the delimiter, and pass it to the variable you created.
Rotate through the array.
Retrieve the style for each element (i).
Create an option element and set the name, value and text properties using the border style name from the array.
Append the option element to the form dropdown list or radiobutton list elements in your form.
You could do something similar to bind a list of font names to a dropdown list. The key is you are creating ‘option’ tags/elements to the parent element which may be a select tag, input tag, etc.
Display the forms
Note: This is just a few suggestions. How you choose to create the form dynamically is up to you to design.
Combining elements can be tricky. In the example, I combined the input tag for the radio button and the images.
For each element in the list, you need to create both, an input element and an image element, set the properties of each and append them to the parent element. In this example, there are two images in a row. You can customize this. You can use the modulus operator to determine if the element is an even or odd element and append a line break object as needed.
The key is depending on your properties the image source will need to have a path concatenated with the image name. You can customize the id, name, value, class name and other attributes. Again, the best way to do this is to create what you want as your output, as an example, and then, go back and replace the static text with your variables.
Customize the styles
17. Don’t forget to modify the style properties of the elements dynamically! The evalution of your program will include how the output appears in the browser. You can make modifications in the JavaScript program and/or use CSS and modify the style rules for the HTML element(s) that display the results
Step 3. Review and document your HTML, CSS and JavaScript programs
Review and document your program
Review your program to make sure you also used descriptive names for the variables, classes and other elements and stuctures.
Preview and test your program. Again, make sure there is adequate documentation in the CSS, HTML and JavaScript programs!
If you need additional screen shots to show your program, just add them here.
Screen shots go here. Show the web page in the browser with the values displayed!
Screen shots go here. Show the HTML, CSS code and Javascript
TIP: Choosing to work with Objects or InnerHTML
You have many choices on how to program. You can assemble the innerHTML using a string, as shown. However this can be messy with multiple quotation marks. If you use this method, it helps to have the ‘output’ of what code you want to write first, and reverse engineer and put in the variables. This can be very tricky with the single and double nested quotes and where you append values to variables. Most students have done this kind of thing in their first programming course.
\' + name + \'
\'; } // After creating all of the
tags you would add them to the innerHTML // of the parent object, in this case the dropdown list or
tag. var bs = document.getElementById(\"borderStyle\"); bs.innerHTML = myResults; But working with objects can be cleaner and more manageable. I suggest you try this method first! var name = borderStyles[i]; var myOption = document.createElement(\"option\"); myOption.name = name; myOption.value = name; myOption.text = name; document.getElementById(\"borderStyle\").appendChild(myOption); Note that above only partial snippets are shown to give you an idea. It’s up to you to write your own program! Do you see the difference? Mixing and matching can be very difficult, so choose wisely! TIP: Retrieving colors and populating a dropdown list. This is to show you that you ‘can’ create your own list of colors and populate the list. However, the support for background color for the individual options varies with browsers Furthermore this is only the 16 named colors. There are 140 named colors supported. With 32-bit colors you can have millions of colors. A color picker is much more useful if you want the range of options and much easier to work with. However, we still use this basic technique when we don’t have that option. function populateColors(){ var myResults =\"\"; var namedColors =\"Aqua=#00FFFF;Black=#000000;Blue=#0000FF;Fuchsia=#FF00FF;\" + \"Gray=#808080;Green=#008000;Lime=#00FF00;Maroon=#800000;Navy=#000080;\" + \"Olive=#808000;Purple=#800080;Red=#FF0000;Silver=#C0C0C0;Teal=#008080;\" + \"White=#FFFFFF;Yellow=#FFFF00\"; var colorArray = namedColors.split(\";\"); // put into an array for(var i = 0; i < colorArray.length; i++){ var name = colorArray[i].split(\'=\')[0]; var value = colorArray[i].split(\'=\')[1]; myResults += \'\' + name + \"\"; } var bc = document.getElementById(\"backgroundColor\"); bc.innerHTML = myResults; }
Attached is the Zip file.
Week2-1.html
Week 2-1 Skeleton code
New Website
This a new website that I\'m creating.
My Website
New Website :
Created by Hamed Adam
mailto:570562@park.edu
Week2-2.html
Week2-2
CSS File main.css
body{
width: 100%;
height: 100%;
position: fixed;
padding: 0 0 0 0;
background-image: url(\"../images/HamedNewWebsiteLogo.jpg\");
background-repeat: no-repeat;
background-size: cover;
}
{
margin-top: 5px;
margin-left: 40%;
width: 20%;
padding: 15px;
border: 2px solid black;
background-color: #042841;
}
Stylesheet{
background : #042841;
}
label{
font-size: 20px;
font-weight: bold;
font-family: \"Segoe UI\";
}
span{
font-family: \"Segoe UI\";
color: red;
}
th{
font-style: italic;
font-size: 48px;
color: white;
}
*******************************************************************************************************************************************************
This the first assignment that link to the above:
Gather your images and resources
You will need at least one image that is 960 by 180 and one that is 180 by 100 for the week2-1logo and week2-1banner. In your code you’ll need to refer to the file types for your images (Use only gif, jpg, and png). Don’t spend too much time! You can always go back and play with your images after you code your program.
Create the skeleton code in the head section of the week2-1.html page
Insert the html and head tags, a comment with your name, the page name and date, the title tag, meta tags (including the description and keywords), closing head tag, opening and closing body tags, and closing html tags.
Above the title tag enter this meta tag to set the window to open to the full scale.
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
Give the page title a descriptive name about your project.
Below the title, insert a link to a style sheet. The style sheet will be located in the css folder. The page will be named week2-1.css.
Note that every time we refer to a relative file you should review the URL. In this case it’s “../css/week2-1.css”. You need to remember to include the “../” in your file path.
Under the link tag, insert a set of opening and closing style tags. Configure the type property to be text/css and rel to stylesheet.
Create a style rule for a class named content. Set the font size to 10 pixels and the color to CC9900.
Use the HTML 5 header tag to group the heading section
On the line after the opening body tag, insert a comment that says, “insert header here”.
Insert a pair of opening and closing header tags. (You can assume when I say insert a tag, to insert both opening and closing tags!)
Inside the header tag insert an image tag. Set the class to “logo”. Set the alternative text to “Logo”. Set the image source to the week2-1.logo in the images directory.
Insert the navigation tags (nav tag). Set the class of the nav tag to topMenu.
Inside the nav tags, insert three sets of hyperlink (<a>) tags. The first should be <a href=\"week2-1.html\">Week 2-1</a>. Create the other two links to go to the other two homework pages. Each link will go to a page on your homework.
After the closing navigation tag, insert a heading 1 element that has a catchy title to your web site.
Use the HTML 5 section tag layout the body of the page
On the line after the closing header tag, insert a comment that says “insert main section here”
Insert a pair of div tags. Assign the section the class called “main”.
Inside the div tags, insert a comment, “insert left content”
Then insert a pair of aside tags. Assign the aside the class called “leftAside”.
Inside the left aside, insert a pair of nav tags. Set the class to “leftMenu”.
Below the aside tags, insert a comment that says, “insert main content”.
Then insert a pair of section tags. Assign the section the class called “content”.
Use the HTML 5 footer tag to group the footing section
On the line after the closing div tag, insert a comment that says “insert footer here”
Insert a pair of footer tags.
Inside the footer tag, insert a paragraph. Inside the paragraph type “Created by John Smith”. But replace John Smith with your name.
Create a hyperlink. Set the text displayed to be your name above. Set the href attribute to your email address. (mailto:youremailaddress@yourplace.com)
Create the navigation
Inside the nav tags and inside the left aside insert unordered list tags (<ul>)
Create four bullets for your list using the list item tags (<li>).
Inside each list item, insert a hyperlink (<a>). The hyperlinks should be configured similar to what you created in the top menu. You should have links to each page on your web site, plus the home page. This includes for all of the pages from week 1. (Example: <li><a href=\"week2-1.html\">Week 2-1</a></li>)
The last link should go to the W3Schools.com web site and should say W3Schools.
After the closing nav tag, insert a line break using the <br /> tag.
Insert a paragraph with the p tag. Insert some text content here.
After the closing p tag, insert another line break.
Configure the content area with content and HTML elements and attributes.
In the content section (<section class=\"content\">), insert a heading 2 tag that says “Welcome to My Rummage Store”.
For the rest of the page, insert content and text using a variety of HTML elements and attributes you learned from all of your readings.
Step 2. Validating your HTML
Validate the code using the validator.w3.org tool as you did last week
If you have any errors fix them before moving on. When you are finished, take a screen shot of the validation report showing you have validated your HTML.
Step 3. Create the Cascading Style Sheet and customize the program
Some of the style rules are structural, such as the height, width, margin, padding, float. Changes can make big impacts on your overall page layout. The header, main div and footer all need the same basic layout so they line up on the page in this page design. Layouts will vary with your preferences. For this activity, use the basic layout. You can use different layouts in problem 2. Other styles such as fonts, colors, styles of text have more impact on the design and less impact on the layout.
Create the style rules
In the style sheet, add a comment with your name, data and file name.
Insert comments for the body, header section, main section, left aside, content section and body.
Configure the default body rule
In the body section insert a body tag that sets the margin to 0 and auto.
Set the font to black, Verdana, Arial, Helvetica, and sans-serif and size 12 points. (All fonts are in points for this class and measurements in pixels).
Set the background color is 042841.
Configure the header section style rules
Under the header section comment, insert the style rules:
The header selector should be set to:
960 by 100 pixels, no padding, margin is 0 and auto in order to center the header, and the background color is d8e6b3.
The background image should point to your week2-1banner image.
The background size is 960 by 100, not repeating, with a z-index of 100.
The heading 2 selectors will align in the center with right adding at 225, and set color to white, font to Papyrus.
Add a text shadow. (Use text-shadow: 2px 1px #042841)
The logo class used for the logo image is set to float left, with a width of 180 and height of 100.
Configure the styles for the mouseover links
The links are configured using the topMenu class.
The topMenu class has padding on the right set to 40, text align set to right, color set to 042841, text decoration set to none so there is no underline with the links, font size set to 9 and family set to Verdana, Geneva, sans-serif.
Set the default hyperlinks and the visited hyperlinks in the topMenu class to this color: 141919.
Set the hover hyperlinks in the topMenu class to this color: A69055. This creates the mouseover effect!
Hint: When referring to html selectors inside another element where we just know the class, use: classname selector {style rules} For example, use: .topMenu a:hover {color:#ff0000;}
Configure the style for the left aside content and navigation
The navigation links are in the aside.
Configure the aside using the selector because it’s our only aside in the page. Set the width to 180, margin to 0 and auto, vertical alignment to top, padding to 0 and display to ‘table-cell’.
Configure the paragraph inside the aside, set the padding to 0 and center the text alignment and the left padding to 5 pixels.
For the unordered list inside the aside, set the margin to 0 and padding to 10 and 20, the background color to 1A5476, and the list syle and text decoration to none.
For the default link and visited links, inside the aside, the font family is set to Verdana, Geneva, sans-serif, with no text decoration, and the color is set to white.
For the hyperlinks inside the aside, the color for the hover state is set to CC9900, creating the mouseover effect.
Hint: When referring to html selectors inside another element where we just know the selector name, use parentSelector childSelector {style rules} For example, use: aside p {color:#ff0000;}
Configure the main section of the page.
Like the header element you need to set the content area.
Set the content width to 780 because it can’t take up all the width. Add 0 and 10 for padding, set vertical alignment to the top and the display to table-cell.
Set the color of the heading 2 tags inside the content class to 042841.
Set the default and visited links inside the content class to have no decoration and set the color to 141919.
Set the color of the mouseover links (hover) to be A69055.
Configure the footer
Like the header and main div tags, you need to configure the content area structure.
Set the properties for the content class.
Set the dimensions to 960, 10 and 0 for padding, margin is 0 and auto, center text alignment.
Set the background color to 508d8d and the text color to d8e6b3.
Set the clear property to both.
Create custom HTML, CSS and content
It is expected that you will add your own content, html elements, styles, images, colors and style rules to make this page, ‘uniquely yours’ You will be given creativity for going beyond the basic assignment and customizing the page.
Problem 2
Web site topic: Your boss has asked you to create a web site for: a local community non-profit organization that sells rummage sale items. This week, they have asked you to set up 1 page to show what the site will look like with a more modern look that will work on mobile devices.
Step 4. Create your web site structure and files
Get the Files
Visit http://getbootstrap.com/examples/jumbotron/# (Links to an external site.). You can learn more about bootstrap at http://www.w3schools.com/bootstrap/default.asp (Links to an external site.) and http://getbootstrap.com/ (Links to an external site.). Get the template html for the jumbotron and a favicon image and create the custom CSS file. You will work with with week2-2.html for this problem. The favicon is used to format the picture in the tab in your browser.
You can create a favicon using http://www.xiconeditor.com/ (Links to an external site.) for free. Just store the favicon.ico file in your images folder. Name the file week2-2favicon.ico. Locate an image for the jumbotron.
Copy the code from the jumbotron example on page http://getbootstrap.com/examples/jumbotron/ (Links to an external site.) to your week2-2.html page.
Modify the html code
Modify the code to reference your favicon in the images folder and make sure to use the correct file name.
<link rel=\"icon\" href=\"../images/week2-2favicon.ico\">
Change the reference in the web page, from the jumbotron.css file to the custom week2-2.css. Make sure it refers to your css folder. This is the custom CSS file you would edit to modify the style rules for your web pages.
<!-- Custom styles for this template -->
<link href=\"../css/jumbotron.css\" rel=\"stylesheet\">
Inside the CSS file, insert the style rule for the body so that the navbar is fixed.
body { padding-top: 50px; padding-bottom: 20px; }
Step 5. Setup the links to the Bootstrap CSS and JS files and JQuery files
In the html code, configure the html to use the bootstrap CSS files.
You can use a local copy or CDN version. You need 2 style sheets to format your page. You need the bootstrap CSS and a custom CSS file. You could have downloaded the files, but if you do, never change the core files so that your program will be easier to maintain as new files are updated often online.
Although you can download the files, using links to the CDN resources is more efficient for beginners. Use a content delivery network CDN, like https://www.bootstrapcdn.com/ (Links to an external site.) Change the href attribute in the first style sheet link to this core bootstrap file to an absolute URL. Just copy and paste the code for the URL on this web site to the href attribute in your page.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css (Links to an external site.)
Your references to your boostrap CSS files should look like this:
Get the core Bootstrap JS files
Again, use the CDN version of the JQuery and Bootstrap files. At the bottom of the html page, modify the code to just include these two lines.
Don’t split the URLs across lines in your web file. It’s faster to copy the URL for the Boostrap JS file from https://www.bootstrapcdn.com/ (Links to an external site.)
You can get the core CSS files here too.
Step 6. Create your content & customize your content using HTML & CSS
Insert your own content
Customize your Jumbotron example:
Add content to the page.
Modify the links to link to ONLY this weeks pages including home.html. To modify the links, locate the Project name link. Simply add additional links immediately after this link.
Customize the content using HTML
Customize your page
Customize html tags and elements to format your content and text.
Configure the jumbotron to display an image and custom text.
Customize the content with CSS
Customize CSS file to make this page look like your own page! How? You can add style rules to the style sheet. You can also overrule the styles defined in the Bootstrap CSS file. Howeve, you have to find which rule applied the setting you are trying to overrule. That can be time consuming. However you can use Google Chrome to help you.
Save and Preview and Debug Your Code!
View your page in Google Chrome. Right click on the banner and select Inspect. On the right side of the window you’ll see some tools that we use to help us locate information about our page and style sheet. You can click on any element on the page, and the styles that are ‘inherited’ are shown to you. The striked out style rules means they have no impact. I located the rule that configured the color to the banner that was not crossed out. Then, I insert it into the CSS file. Make your changes to the style rule. Here I just changed the color, but I could have changed or even added other style rule properties and values. Save your changes and reload the page in the browser to see the effect. If you don’t see it, it’s probably because another style rule is interfering (hence the word cascading style sheet). So go back to Google Chrome and try to find the style rule that is overriding the property you want to set.
| content |
|---|
Solution
/*This is the style for the body of week2-2*/
body{
padding-top: 50px; padding-bottom: 20px;
border:double;
background-color:black;
}
/*This is the style for the picture used for week2-2*/
.Pic{
float:right;
width:500px;
height:300px;
padding-top:50px;
padding-right:5px;
}
/*This is the style for the main message of week2-2*/
.jumbotron{
color:black;
font-size: 20pt;
font-family:Papyrus;
background-color: forestgreen;
border-style:groove;
border-color:gray;
}
/*This is the style for the div rows of week2-2*/
.col-md-4{
border:dashed;
margin:4px;
background-color: lightgray;
}
/*This is the style for the footer of week2-2*/
footer {
width:960px;
height: 17px;
padding:0;
margin:0 auto;
text-align:center;
background-color:#508d8d;
color:#d8e6b3;
clear:both;
}
