CREATE A WEB APP DART PROJECT USING WEBSTORM IN VIRTUAL MACHINE. PROGRAM SHOULD BE WRITTEN IN DART AND TABLE added in HTML.

Once project is created, note the following important files:

index.html : this is where you will add the static content of your page in addition to placeholders for dynamic content

main.dart : this is the dart code that will dynamically alter the content and appearance of the web page

style.css : this is where you can add your custom CSS styles

this is webstorm when the program shoukd be written in DART

The external links are just pictures of the fruits they want us to use. Strawberry, apple, grapes, lemon, watermelon and orange

Part B: Our First Loop & Table (6 marks) We will use loops to create 3 math fact tables in a single HTML page. Create a project called lab04_1. 1. Add a table in your HTML page, then use a for loop to generate a table that looks something like this: (1 mark) n^1 n12 2 4 125 2. Add another table to the HTML page, and use a for loop to generate this table by adding a n^3 column (2 marks) n^1 n^2 1 1 24 5 25 125 3. Finally we want to add a third table that adds columns for up to n^10. For this table, you MUST use a nested loop. It will make your code look much nicer (3 marks) n1 n^2 2 4 39 4 16 5 25 n1 n 2 n3 2 3 4 5 4 8 9 27 16 64 25 125 n1 n 2 n3 n4 n5 n6 07 n8 n9 10 2 4 8 16 32 64 128 256 512 1024 3 9 27 81 243 7292187 6561 19683 59049 4 16 64 256 1024 4096 16384 65536 262144 1048576 5 25 125 625 3125 15625 78125390625 1953125 9765625 6 36 216 1296 7776 46656 279936 1679616 10077696 60466176 7 49 343 2401 16807 117649 823543 5764801 40353607 282475249 8 64 512 4096 32768 262144 2097152 16777216 134217728 1073741824 9 81 729 6561 59049 531441 4782969 43046721 387420489 3486784401 Part C: Dart Collections (4 marks) We will use a List of Dart maps that represent fruits to display the name of a fruit together with its imane Part C: Dart Collections (4 marks) We will use a List of Dart maps that represent fruits to display the name of a fruit together with its image in a table. 1. Create a new project called lab04_2 2. Download the images archive images.zip 3. Create an 'images' folder inside the 'web' folder of your project and extract the images from the archive there 4. In your Dart code, define a List of Maps to store the fruits data. This should look like this: o var fruits = [ { 'name': 'Strawberry', { 'name': 'Apple', 'ima 5. Now add a table to the HTML page and write Dart code that uses the fruits List to generate a table that looks like this: Strawberry Apple Grapes New project Location: D:\MyCode\labo3 Dart SDK path: C:\tools\dart-sdk Version: 2.7.0 New Project Empty Project A Angular CLI 6 AngularJS B Bootstrap Cordova App Dart 5 HTML5 Boilerplate Meteor App Node.js Node.js Express App React App React Native V Vue.js Yeoman Generate sample content: AngularDart Web App - a web app with material design components. Bare-bones Web App - a web app that uses only core Dart libraries. Console Application - a command-line application sample. Dart Package - a starting point for Dart libraries or applications. StageXL Web App - a starting point for 2D animation and games. Web Server - a web server built using the shelf package. CREATE Dart + Tables Query or create an HTML table TableElement table = querySelector('#table'); Add table body or header sections var table Body = table.create TBody(); var tableHeader = table.create THead(); Add/insert a row var newrow = table. addRow(); var another Row = tableBody.insertRow(index); var headerRow = tableHeader.addRow(); NG 10009 -Web Applications WE Part B: Our First Loop & Table (6 marks) We will use loops to create 3 math fact tables in a single HTML page. Create a project called lab04_1. 1. Add a table in your HTML page, then use a for loop to generate a table that looks something like this: (1 mark) n^1 n12 2 4 125 2. Add another table to the HTML page, and use a for loop to generate this table by adding a n^3 column (2 marks) n^1 n^2 1 1 24 5 25 125 3. Finally we want to add a third table that adds columns for up to n^10. For this table, you MUST use a nested loop. It will make your code look much nicer (3 marks) n1 n^2 2 4 39 4 16 5 25 n1 n 2 n3 2 3 4 5 4 8 9 27 16 64 25 125 n1 n 2 n3 n4 n5 n6 07 n8 n9 10 2 4 8 16 32 64 128 256 512 1024 3 9 27 81 243 7292187 6561 19683 59049 4 16 64 256 1024 4096 16384 65536 262144 1048576 5 25 125 625 3125 15625 78125390625 1953125 9765625 6 36 216 1296 7776 46656 279936 1679616 10077696 60466176 7 49 343 2401 16807 117649 823543 5764801 40353607 282475249 8 64 512 4096 32768 262144 2097152 16777216 134217728 1073741824 9 81 729 6561 59049 531441 4782969 43046721 387420489 3486784401 Part C: Dart Collections (4 marks) We will use a List of Dart maps that represent fruits to display the name of a fruit together with its imane Part C: Dart Collections (4 marks) We will use a List of Dart maps that represent fruits to display the name of a fruit together with its image in a table. 1. Create a new project called lab04_2 2. Download the images archive images.zip 3. Create an 'images' folder inside the 'web' folder of your project and extract the images from the archive there 4. In your Dart code, define a List of Maps to store the fruits data. This should look like this: o var fruits = [ { 'name': 'Strawberry', { 'name': 'Apple', 'ima 5. Now add a table to the HTML page and write Dart code that uses the fruits List to generate a table that looks like this: Strawberry Apple Grapes New project Location: D:\MyCode\labo3 Dart SDK path: C:\tools\dart-sdk Version: 2.7.0 New Project Empty Project A Angular CLI 6 AngularJS B Bootstrap Cordova App Dart 5 HTML5 Boilerplate Meteor App Node.js Node.js Express App React App React Native V Vue.js Yeoman Generate sample content: AngularDart Web App - a web app with material design components. Bare-bones Web App - a web app that uses only core Dart libraries. Console Application - a command-line application sample. Dart Package - a starting point for Dart libraries or applications. StageXL Web App - a starting point for 2D animation and games. Web Server - a web server built using the shelf package. CREATE Dart + Tables Query or create an HTML table TableElement table = querySelector('#table'); Add table body or header sections var table Body = table.create TBody(); var tableHeader = table.create THead(); Add/insert a row var newrow = table. addRow(); var another Row = tableBody.insertRow(index); var headerRow = tableHeader.addRow(); NG 10009 -Web Applications WE