Dulimarta: 每天学习

Appearance

Preparation ​

This homework is a continuation of the previous homework of authoring an HTML page. The new portion of this assignment is to generate some of the contents in TypeScript.

IMPORTANT

You will continue to use the same GitHub repo (thus the save Vercel deployment) to work on this assignment.

  1. Go to the same directory where you have index.html from the previous assignment, create a new TypeScript file mycode.ts (or any proper name of your choice) with the following code:

    ts
    console.log("Hello World")

  2. Modify your index.html by adding two <script> tags

    • One <script> in the <head> section of the document to enable Babel transpilation
    • One <script> towards the end of your HTML <body> to include your own TypeScript code:
    html
    <html>
 <head>
   <!-- other stuff goes here -->
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <link rel="stylesheet" href="mystyles.css">
 </head>
 <body>
   <!-- your previous HTML contents here -->
   <script type="text/babel" src="mycode.ts" />
 </body>
</html>

    TIP

    To earn credit for this assignment, you are required to use TypeScript (and not JavaScript) Be sure to include type="text/babel" for the second script tag. Otherwise, your TypeScript program will not be transpiled and interpreted by your browser.

Structure and Contents ​

In the following section, Area 1, Area 3, .... refer to the same section of your web page built in the previous homework.

Modifications in Area 4 ​

Generate the table of courses programmatically in mycode.ts.

  • In index.html replace the entire table with a <div>. You may replace area4-table with an ID of your preference:

    html
    <div id="area4-table"></div>

  • In mycode.ts:

    • Declare a type alias for a course:

      ts
      type Course = {
  courseNumber: string;
  courseName: string;
  semesterTaken: string
}

    • Setup an array for the courses you have taken:

      ts
      const myCourses: Array<Course> = [ /* initilize this array */]

    • Build the table programmatically:

      ts
      const tArea4 = document.getElementById("area4-table")
// Add more code here

Area 6 ​

Use the same approach as for Area 4 to generate the list company names, and use a type alias which is similar to the following:

ts
type Company = {
  name: string,           // Ex: "MSFT"
  abbreviation: string,   // Ex: Microsoft
  url: string             // Ex: https://microsoft.com
}

Area 8 ​

Use the same approach as for Area 4 to generate the list of social media icons, and use the following type alias (or something similar):

ts
type SocialMedia = {
  icon: string;   // this can be a name of a local image or a URL to a remote image
  url: string;    // URL of the said social media company
}

Grading ​

DANGER

IMPORTANT: keep your files after it has been graded. It may be used again for a future assignment.

Deliverables ​

  1. After hosting the page to a publicly accessible web server, please confirm everything works

  2. Copy the Vercel Production URL and your GitHub URL and paste it to Bb submission link for this assignment.

    WARNING

    IMPORTANT: after completing the submission, go back to your Bb submission to make sure the URL to your homework is not broken. Common issues are: misspelling or incorrect paths.

Grading Rubrics ​

FeaturePoint
Course Table (Area 4)5
Company list (Area 7)3
Social Media list (Area 8)3