Long description

Set 1 consists of 21 lines of H T M L code. Line 1: open angle bracket select i d equals open double quotes countries close double quotes close angle bracket, at indentation level 0. Line 2: open angle bracket option value equals 0 close angle bracket Select a country open angle bracket forward slash option close angle bracket, at indentation level 1. Line 3: open angle bracket forward slash select close angle bracket, at indentation level 0. Line 4: open angle bracket script close angle bracket, at indentation level 0. Line 5: document dot addEventListener open parenthesis open double quotes DOMContentLoaded close double quotes comma function open parenthesis close parenthesis open curly brace, at indentation level 0. Line 6: const a p I U R L equals open single quote a p i forward slash countries dot p h p close single quote semicolon, at indentation level 1. Line 7: const countryList equals document dot querySelector open parenthesis open single quote hash countries close single quotes close parenthesis, at indentation level 1. Line 8: fetch open parenthesis a p i U R L close parenthesis, at indentation level 2. Line 8 is marked 1 Make the fetch request.

Line 9: dot then open parenthesis response object operator response dot j son open parenthesis open parenthesis close parenthesis, at indentation level 2. Line 9 is marked 2 Pass the function that will execute when the H T P response is received. Line 10: dot then open parenthesis data object operator open curly brace, at indentation level 2. Data in line 10 and a p i forward slash countries dot php in line 6 point to the set of J S O N code labeled The request returns JSON data in the following format: Set 2, Line 1: open square bracket. Line 2: open curly brace open double quotes iso close double quotes colon open double quotes “A” T close double quotes comma open double quotes name close double quotes colon open double quotes Austria close double quotes comma ellipsis close curly brace comma. Line 3: open curly brace open double quotes iso close double quotes colon open double quotes C “A” close double quotes comma open double quotes name close double quotes colon open double quotes Canada close double quotes comma dots close curly brace comma. Line 5: close square bracket.

Line 11: forward slash forward slash populate list with this J SON country data, at indentation level 3. Line 12: data dot forEach open parenthesis c equals close angle bracket open curly brace, at indentation level 3. Line 13: const opt equals document dot createElement open parenthesis open single quote option close single quote close parenthesis semicolon, at indentation level 4.

Line 14: opt dot setAttribute open parenthesis open single quote value close single quote comma c dot iso close parenthesis semicolon, at indentation level 4. Line 15: opt dot textContent equals c dot name semicolon, at indentation level 4. Line 16: countryList dot appendChild open parenthesis opt close parenthesis semicolon, at indentation level 4. Line 17: close curly brace close parenthesis, at indentation 3. Line 18: close curly brace close parenthesis, at indentation 2. Note: Line 10 to Line 18 is labeled: 3 pass the function that will execute when the J SON data is extracted from that response. Line 19: catch open parenthesis error equals close angle bracket open curly brace console dot error open parenthesis error close parenthesis close curly brace close parenthesis semicolon, at indentation level 2. Note: 4 Handle any error that might occur with the fetch. Line 20: close curly brace close parenthesis, at indentation 0. Line 21: open angle bracket forward slash script close angle bracket, at indentation level 0.

Line 13 to Line 18 is labeled: Create a new open angle bracket option close angle bracket element using the fetched J SON data and points to a set of H T M L code labeled Sample generated markup: Set 3, Line 1: open angle bracket select i d equals open double quotes countries close double quotes close angle bracket, at indentation level 0.

Line 2: open angle bracket option value equals 0 close angle bracket Select a country open angle bracket forward slash option close angle bracket, at indentation level 1. Line 3: open angle bracket option value equals open double quotes “A” T close double quotes close angle bracket Austria open angle bracket forward slash option close angle bracket, at indentation level 1. Line 4: open angle bracket option value equals open double quotes C “A” close double quotes close angle bracket Canada open angle bracket forward slash option close angle bracket, at indentation level 1. Line 5: dots. Line 6. open angle bracket forward slash select close angle bracket, at indentation level 0.