Lesson Fourteen: Changing Design

1. You should be getting comfortable with your ability to change information or input information with the onclick property of the button object.
2. Once you get the basic idea down it becomes very enjoyable to manipulate and make adjustments to your HTML. If you like working with design you can also adjust your CSS with the button onclick property. Copy your histevents.css file to a second and third file and rename the two new files: histevents2.css and histevents3.css.
3. Change the code in your histevents2.css file as shown below:

   body { background-color: maroon; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.6em; }
   h1{ color: tan; }
   input { color: darkblue; font-size: 30px; width: 225px; }
   img { width: 150px; }
   #b2 { margin-top: 10px; }
   #b3 { margin-top: 10px; }
   #b4 { margin-top: 10px; }
   #b5 { margin-top: 10px; }
   #b6, #b7, #b8, { margin-top: 10px; font-size: 20px; color: blue; }
   p { color: tan; font-size: 30px; }

4. Change the code in your histevents3.css file as shown below:

   body { background-color: darkblue; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.6em; }
   h1{ color: tan; }
   input { color: darkblue; 
   font-size: 30px; width: 225px; 
   }
   img { width: 150px; }
   #b2 { margin-top: 10px; }
   #b3 { margin-top: 10px; }
   #b4 { margin-top: 10px; }
   #b5 { margin-top: 10px; }
   #b6, #b7, #b8 { margin-top: 10px; font-size: 20px; color: blue; }
   p { color: tan; font-size: 30px; }

   
   
   
5. Add these two buttons after the Reset button in your HTML file:

   <input type="button" id="b7" value="Design Two" onclick="changedesign1();" >
   <input type="button" id="b8" value="Design Three" onclick="changedesign2();" >

   
   
   
6. Add this id to your CSS link element in your HTML file:

   <link id="link1" rel="stylesheet" type="text/css" href="histevents.css">

   
   
   
7. Add these two functions in your Java Script file to enable the user to switch the CSS files:

   function changedesign1() {
   link = document.getElementById("link1");
   link.href = "histevents2.css";
   }
   
   function changedesign2() {
   link = document.getElementById("link1");
   link.href = "histevents3.css";
   }

   
   Test your program with the new code. Your page should look like this: Sample

Lesson Fifteen: The Onclick Property