DevToolKit1/Day1Exercise

Day 1 Exercise

Business Card

• HTML5 Guide
• HTML5 Developer Guide
• Web Technology for Developer

Useful html tags <header><article><footer><section>

Sample Output

D3.JS

Draw a scatter plot graph

Data = [ [ 10,15], [20,20], [5,20], [7,4], [22, 6] ]

Tips :

• Use SVG circles
• Scale data by 10 times

Note :

• D3.js v5 and v4 have different behaviour for read csv
• v5 have promise framework. Thus v4 code will not work on v5

Additional References

• Making scatter Plot
• D3.js Practical Introduction
• Interactive chart with D3.js
• d3-scale
  • <script src="https://d3js.org/d3-scale.v3.min.js"></script>
• d3-axis
  • <script src="https://d3js.org/d3-axis.v2.min.js"></script>
• Javascript Promise

Javascript

Create code to reverse a string

• Given string : "Hello!"
• Output: "!olleH"

Self Assessment

Self Assessment

Image Gallery

Image

Bank List

• Create an HTML document which shows a list of Banks. [use,
  • to create the list).

  <ul>
    <li>DBS</li>
    <li>UOB</li>
    <li>OCBC</li>
    <li>Citi</li>
  </ul>
  

  • Write a javaScript function addNew(), which when called through a button-click in the HTML page, adds a new bank to the list in the HTML document.
  • New bank to add. “MYDigi bank”

  Tips: use “ appendChild() ” to ac a new child to list.