Basic HTML, CSS, JavaScript

Table of Contents

  1. Objective
  2. Additional material
  3. Notes
  4. Exercise 1
  5. Exercise 2
  6. Exercise 3
  7. Exercise 4
  8. Exercise 5

Objective

Practice the basics of creating a CSS styled HTML document. In this set of exercises you should not use any JavaScript library such as jQuery, not use any CSS animation techniques.

  • Manipulate DOM elements and attributes through JavaScript
  • Apply CSS styles through ID and Class selectors
  • Associate JavaScript code to events (loading, timers)

Additional material

Notes

You can solve these exercises directly in Codepen or by downloading the provided files to your personal computer and editing and running them locally.

To solve an exercise directly in Codepen you should first register to make sure you can save your "Pens".

On each exercise, click on the "Edit on Codepen" on the top-right corner of the embedded example, than "fork" the Pen and edit at will.

To download, click on "Edit on Codepen", then click on "Export" at the bottom right corner of the window and select "Export .zip".

Exercise 1

Example of result for exercise 1.

Create a page with a single background image occupying the entire window. Over the image there should be a 3X3 grid that fills the entire window. Each grid cell should have a circular opaque shape. No space between grid cells.

When hovering the mouse cursor over the grid cell, it should change its opacity to 0. Solve this without using any JavaScript!

See the Pen Basics - 01 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 2

Example of result for exercise 2.

Modify the previous exercise so that the colour of the grid cells changes every time you click on the window. Use JavaScript and a list of pre-defined colors:

See the Pen Basics - 02 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 3

Example of result for exercise 3.

Make a timer similar to the one on the animated gif above.

Your main task is to create the CSS styles to achieve a visual result similar to the figure.

Make sure you apply the following classes to the "clock" div:

  .blue {
    background-color: #0781D4;
}

.red {
    background-color:red;
}

The “blue” class is applied at the beginning, and the "red" class is applied when the value of the timer exceeds the predefined value.

To help you, use the following provided structure in the Codepen below.

See the Pen Basics - 03 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 4

Example of result for exercise 4.

Modify the previous exercise in order to apply the "edit in place" technique. When users click on the clock, the they should be able to edit the time. When they press enter, the timer should start.

Exercise 5

Example of result for exercise 5.

Modify the previous exercise in order to have separate text inputs for the minutes and for the seconds. When pressing ENTER in the "minutes" input, the focus should go to the "seconds" input.