Create an interactive program with HTML, CSS, JavaScript and DOM

computer science


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


Step 1. Create the overall HTML structure

1. Save your Word document in your homework folder. Add this to your web site in the homework

folder after you have completed both problems.

2. Gather your data and create your basic page navigation structure.

3. 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!

4. 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!

5. Make sure there is someplace 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 creates a link to at least to the first page for each week.

6. 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 direction should help you when you are troubleshooting your homework!I’ve given

some direction. It’s up to you to be creative.

Instruction Files

Related Questions in computer science category