ICOM6034
Website engineering
Lab 1B: JavaScript, HTML5 and CSS3
S.1
Lab 1B: JavaScript, HTML5 and CSS3
Outline of today's lab:
1) Currency conversion using JavaScript
2) Migrate to HTML5
Home exercises:
1) Tutorial on JavaScript
2) Tutorials on HTML5 and CSS3
S.2
Lab 1B: JavaScript, HTML5 and CSS3
1. Currency conversion using JavaScript
a) Download Lab1B.zip from Moodle and extract it to xampp\htdocs
b) Open your bookinfo1.html in Visual Studio Code Editor
c) Add the JavaScript code by
copy and paste the content of code3a.txt to the location
copy and paste the content of code3b.txt to the location
d) Complete the missing parts for JavaScript function
currency_translate2
which performs the currency conversion
e) Link this function to the currency select box
(Note: When you view bookinfo1.html in a browser, depending on your screen
resolution, some elements might be misplaced. If this happens, please
adjust the “zoom-level” of the browser (e.g., by using Ctrl-‘+’ or Ctrl-‘-’ in
Windows) until the entire page is properly displayed.)
S.3
Lab 1B: JavaScript, HTML5 and CSS3
1. Currency conversion using JavaScript
The missing function for the select box is
onchange="currency_translate2() "
The missing code is:
Your code should be similar to
model answer/bookinfo1_OK.html
S.4
Lab 1B: JavaScript, HTML5 and CSS3
2. Migrate to HTML5
- Go to html5_css3 folder and open bookstore.html in Visual Studio
Code editor
- Extract the web contents from bookinfo1_OK.html (from the model
answer) of Task 1 and insert into the suitable locations in
bookstore.html
- In HTML5, use the new header, nav, article, footer, section elements
instead of