Create an interactive program with HTML, CSS, JavaScript and DOM
computer science
Description
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
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.
