Assignment 2

Due: Mon, Apr.15, 23:59:59

Change log:

Tue, Apr. 9: assignment posted
Thu, Apr. 11: added hint section

Simple interactive webpage

Objective:

Familiarize yourselves with interactive web page design using HTML, CSS, and JavaScript through a first example

Task:

Implement a simple interactive webpage, showing a tabbed UI (which is implemented not through widgets but by interacting with and controlling the Document Object Model with JavaScript and CSS). We will give you the HTML for the page, and expect you to use CSS and JavaScript to create something like the following behavior:

animated example solution

Features:

This page consists of a centered container with 3 tabs each for showing a text, an image and a youtube video. A div containing three Buttons is used as a tab bar and pressing each button displays the corresponding tab. Only one tab should be displayed at a time The button showing the current tab must remain highlighted from the moment your page is loaded.

Centering and size:

Main container should have a minimum width of 300px and should scale with the windows size.

It should remain centered both vertically and horizontally. All tabs should have 10-20 px of padding. Individual tabs should be the same height regardless of the content.

If you need help for centering your elements please check this guide:  https://css-tricks.com/centering-css-complete-guide/

Text tab:

Text should overflow with a vertical scroll as shown in the demo.

(If you want more text in the HTML, in VSCode, typing lorem# and pressing tab generates a placeholder text with # of words.)

Image tab:

Show the embedded image from an external URL. Image should be both vertically and horizontally centered. It should maintain the aspect ratio and resize to fill the container horizontally. Use overflow property to keep the image within the container.

Video tab:

Display a youtube video using iFrame html tag. You can get a pre written tag using Youtube embedding options. Video should fill the tab vertically and horizontally.

Colors and fonts:

You should choose a google web font from (https://fonts.google.com/) for your page and import it either using link tag in your html or using @import directly in your css.

You are free to choose your own color scheme, button style and fonts. Try to make it beautiful and get creative!

 

The starting HTML code for this assignment is here.

 

Overall Hints:

    - Start with understanding the above HTML code.
  • - CSS should control the visibility of the different elements via the 'is-visible' class and the display property.
  • - Your JavaScript needs to implement onClick listeners for the buttons, and set the correct membership in the is-visible class. Loop through the example-content elements to do this.
  • - Your CSS should implement an attractive look and feel

 

 

Please submit your solution (index.html and style.css files, as well as a README file in which you briefly decribe your design desicions, and acknowledge used resources) on Gauchospace!