Interactive Webpage
There are 3 DEMOs, the first two are built with Basic JavaScript and a JavaScript library jQuery.
The third one is a DEMO of Ajax, but which we will not cover in this course, but you can play with optionally.
Hopefully we can have an advanced Interactive Web Design course in the future to cover it.
HOVER over main images over the DEMO titles to see instructions.
Two players take turns to get random numbers for 5 rounds. Whoever gets the larger number in total wins the game.
Random Numbers
5 round(s) left.
Player 1
Total Points: 0
Round 0 Points :
Player 2
Total Points: 0
Round 0 Points :
Click on icons to see what would happen. Then drag images to the trash bin to see what would happen.
Drag and Drop
-
Family
delete
-
Puppy
-
Party
-
Beach
-
Birthday
-
School
-
Wedding
-
Zoo
A Simple DEMO of Advanced Topic
NASA API
The very purpose of this DEMO is to illustrate Ajax and API technique. The APOD you see here varies every day, since it is synchronized and updated automatically in real time retrieved from NASA. The techniques we used here to make this happen are Ajax and API, which are widely used.
APOD (Astronomy Picture of the Day)
{{title}} -- {{date}}
NEO (Near-earth Objects)
showing {{numAstroids}} items
{{largestObject.name}} has the largest diameter among these NEOs. It's about {{largestObject.diameter}} feet.
| # | Name | Close Approach Date | Estimated Diameter (ft) | Remove |
|---|---|---|---|---|
| {{index + 1}} | {{a.name}} | {{getApproachDate(a)}} |
|