Tue May 22

Goals

• I can explain the difference between HTML/CSS and JavaScript
• I understand the concepts of variable, condition, loop, array & function
• I know how to manipulate HTML elements with Javascript
• I practice JavaScript
• I have set up a tipp10 account to start learning 10-finger touch typing

JavaScript Practice 1

• Open your Portfolio home page and add this "about me" section where it fits best:

  <ul>

    <li>Nickname: <span id="nickname"></span>

    <li>Hobby: <span id="hobby"></span>

    <li>Hometown: <span id="hometown"></span>

  </ul>

• Add a <script> tag to the bottom of the HTML body.
• (In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
• (In the JavaScript) Insert in each of the spans (nickname, hobby, hometown) your own information.
• Iterate through each li and change the class to "list-item".
• Add a tag that sets a rule for .list-item to make the color red.
• Create a new img element and set its src attribute to a picture of you. Append that element to the page.

Solution (View page source)

JavaScript Practice 2

• Add a new <ul> section to your personal home page with the ID "my_books".
• In the JavaScript section, create an array of objects of your favourite books, similar to this:

  var books = [

    {

      title: 'The Design of EveryDay Things',

      author: 'Don Norman',

      alreadyRead: false

    }, {

      title: 'The Most Human Human',

      author: 'Brian Christian',

      alreadyRead: true

    }

  ];

• Now iterate (loop) through this list. For each book, create a <li> element within your "my_books" list with the book name and author.
• Bonuses:
  • Add an <img> to each book
  • Change the style of the book depending on whether you have read it or not.

Solution (View page source)

JavaScript Practice 3

Use JavaScript to display the current day, date and time in the following format.

Sample Output :

Today is : Friday

Date: dd/mm/yyyy

Current time is : 2 PM : 32 : 10

Solution (View page source)

JavaScript Practice 4

Use JavaScript to get the width and height of the window (any time the window is resized).

Solution (View page source)

JavaScript Practice 6

Generate many images!

• Create an Array of images and insert it in you HTML
• Set the width of you images to 20%

Solution (View page source)