Teach 02 Assignment

In this assignment I will be leveraging CSS and JavaScript and will also demonstrate changing the DOM dymanically through the use of JavaScript and jQuery.

JavaScript

Here is some example text in my first div.

Here is some example text in my second div.
Here is some example text in my third div.

jQuery

Here is some example text in my first div.


Here is some example text in my second div.
Here is some example text in my third div.

Core Requirements

  1. Create an HTML page with a head element that provides a title for your page, and links to external CSS and JavaScript files.
    On the HTML page, create 3 divs and a button labeled "Click Me".
    Add classes and/or ids to your divs, then use the CSS to set their font-size and background color. Add function in your JavaScript file to alert the text "Clicked!", and have your button call this function when it is clicked.
  2. Use CSS to make it so that hovering over any of the 3 divs causes the text to temporarily become bold.
  3. Make it so that the user can specify custom colors for the first div. To accomplish this, add a text box and another button labeled "Change color". Write a JavaScript function that gets invoked by clicking this button that gets the text from the textbox and sets the color of the first div.

Stretch Challenges

  1. Repeat the previous step (changing the background color to the value in the box), but this time, use jQuery instead of vanilla JavaScript.
  2. Add another button to toggle the visibility of the third div. Use jQuery to make it slowly fade in and fade out, rather than just turning on and off.
  3. Try out Bootstrap. Use bootstrap styles to make it so that your three divs look nice, and respond well when the page is resized.