Example: what's required: What I have currently: videos 87 through 92, listening for readystatechange, parsing the response text to JSON, and calling the callback function
Example:what's required:
What I have currently:
videos 87 through 92, listening for readystatechange, parsing the response text to JSON, and calling the callback function with that data. As previously mentioned, the callback function will include the event listeners for each of the radio buttons, and each will call another function to do that work, passing the data to the other functions. Create 4 functions that do the work of scanning through the data to find the appropriate information. Call those in the event listeners that are inside the callback function for the HTML request. STRONG suggestion: log to the console to get the basics working, don't worry about displaying in the web page. Once you are sure you are getting good JSON data, then work on getting one single radio button to work. Again, log to the console, until it is doing what you want, then add code to insert that data into the web page. For all of the radio buttons, build in some user flexibility. That is, allow the user to type in lowercase, uppercase, or any combination, so "Bermuda" and "bermuda" both return the data about that country. (Hint: remember about the string function "toLowerCase()"). For info about a single country, look for portions of names. For example, if the user types "Russia", there is no match, because that country is in this data as "Russia Federation". Check if the user input is included in the country name (hint, remember about the string processing function "includes()" to help here). Try looking for "states", as in United States, and make sure you get that result (and there will be some others as well). Here is an example: About Countries Enter Request north america Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) Countries in subregion north america Count of countries in subregion north america is o That subregion was not found, check spelling About Countries Enter Request .uk Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) That domain was not found, check spelling -- no periods, please Notice that the domain should be typed as letters, not with a preceding period. The data from the API will include that period, so add it in the code before trying to match it to the data. This request could have 2 errors the user typed the period, or the Launch: About Countries Enter Request Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) First radio button, information about a specific country: About Countries Enter Request Bermuda Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) About Bermuda country: Bermuda The top heading is an h1 tag. The text "Enter Request" is a simple paragraph. Below that paragraph, use a form with an input tag of type "text", and 4 input tags of type "radio". Each radio button needs a label that explains its function, as shown above. To be able to click anywhere in that label as well as directly on the radio button, use the "for" attribute in the label. The radio buttons will have IDs to uniquely identify them, and the labels needs to have the "for" attribute set to that ID, to connect the label with the radio button. It will extend the clickable area from the radio button through all of the label. For example: That attribute 'for="info" in the label links that label with the radio button that has 'id="info". The user can then click anywhere in the radio button or the text of the label to trigger the click event of an event listener on that radio button. Remember that for radio buttons to be exclusive (only one can be checked at a time), all of the must have the same name. They all need unique IDs to be able to create event listeners for each one. Be sure to put break tags between the radio buttons with their labels. Put 2 breaks after the input field to put space between it and the radio buttons. Below the close of the form, add a div for the results. As previously mentioned, the callback function will include the event listeners for each of the radio buttons, and each will call another function to do that work, passing the data to the other functions. Create 4 functions that do the work of scanning through the data to find the appropriate information. Call those in the event listeners that are inside the callback function for the HTML request. STRONG suggestion: log to the console to get the basics working, don't worry about displaying in the web page. Once you are sure you are getting good JSON data, then work on getting one single radio button to work. Again, log to the console, until it is doing what you want, then add code to insert that data into the web page. For all of the radio buttons, build in some user flexibility. That is, allow the user to type in lowercase, uppercase, or any combination, so "Bermuda" and "bermuda" both return the data about that country. (Hint: remember about the string function "toLowerCase()"). For info about a single country, look for portions of names. For example, if the user types "Russia", there is no match, because that country is in this data as "Russia Federation". Check if the user input is included in the country name (hint, remember about the string processing function "includes()" to help here). Try looking for "states", as in United States, and make sure you get that result (and there will be some others as well). Here is an example: 8 D: > SDEV-2110 > countryAssignment > JS script.js > @ outputHtml > [@] html 7 let fits = countries.filter(country => { const regex = new RegExp(*^${searchBox}', 'gi'); 9 return country.name.match(regex) || country.abbr.match(regex); 10 }); 11 12 if (searchBox.length 0) { 13 fits = []; 14 countryList.innerHTML 15 } 16 17 outputHtml(fits); 18 }; 19 20 // show results in HTML 21 const outputHtml fits => { 22 if (fits.length > 0) { 23 const html fits 24 .map 25 fit => 26
) .join(''); document.getElementById('countrylist').innerHTML = html: videos 87 through 92, listening for readystatechange, parsing the response text to JSON, and calling the callback function with that data. As previously mentioned, the callback function will include the event listeners for each of the radio buttons, and each will call another function to do that work, passing the data to the other functions. Create 4 functions that do the work of scanning through the data to find the appropriate information. Call those in the event listeners that are inside the callback function for the HTML request. STRONG suggestion: log to the console to get the basics working, don't worry about displaying in the web page. Once you are sure you are getting good JSON data, then work on getting one single radio button to work. Again, log to the console, until it is doing what you want, then add code to insert that data into the web page. For all of the radio buttons, build in some user flexibility. That is, allow the user to type in lowercase, uppercase, or any combination, so "Bermuda" and "bermuda" both return the data about that country. (Hint: remember about the string function "toLowerCase()"). For info about a single country, look for portions of names. For example, if the user types "Russia", there is no match, because that country is in this data as "Russia Federation". Check if the user input is included in the country name (hint, remember about the string processing function "includes()" to help here). Try looking for "states", as in United States, and make sure you get that result (and there will be some others as well). Here is an example: About Countries Enter Request north america Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) Countries in subregion north america Count of countries in subregion north america is o That subregion was not found, check spelling About Countries Enter Request .uk Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) That domain was not found, check spelling -- no periods, please Notice that the domain should be typed as letters, not with a preceding period. The data from the API will include that period, so add it in the code before trying to match it to the data. This request could have 2 errors the user typed the period, or the Launch: About Countries Enter Request Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) First radio button, information about a specific country: About Countries Enter Request Bermuda Get info about the country (ex: Bermuda) List all countries in a region (ex: Americas) List all countries in a subregion (ex: Northern America) Find country with given top level domain (ex: ly) About Bermuda country: Bermuda The top heading is an h1 tag. The text "Enter Request" is a simple paragraph. Below that paragraph, use a form with an input tag of type "text", and 4 input tags of type "radio". Each radio button needs a label that explains its function, as shown above. To be able to click anywhere in that label as well as directly on the radio button, use the "for" attribute in the label. The radio buttons will have IDs to uniquely identify them, and the labels needs to have the "for" attribute set to that ID, to connect the label with the radio button. It will extend the clickable area from the radio button through all of the label. For example: That attribute 'for="info" in the label links that label with the radio button that has 'id="info". The user can then click anywhere in the radio button or the text of the label to trigger the click event of an event listener on that radio button. Remember that for radio buttons to be exclusive (only one can be checked at a time), all of the must have the same name. They all need unique IDs to be able to create event listeners for each one. Be sure to put break tags between the radio buttons with their labels. Put 2 breaks after the input field to put space between it and the radio buttons. Below the close of the form, add a div for the results. As previously mentioned, the callback function will include the event listeners for each of the radio buttons, and each will call another function to do that work, passing the data to the other functions. Create 4 functions that do the work of scanning through the data to find the appropriate information. Call those in the event listeners that are inside the callback function for the HTML request. STRONG suggestion: log to the console to get the basics working, don't worry about displaying in the web page. Once you are sure you are getting good JSON data, then work on getting one single radio button to work. Again, log to the console, until it is doing what you want, then add code to insert that data into the web page. For all of the radio buttons, build in some user flexibility. That is, allow the user to type in lowercase, uppercase, or any combination, so "Bermuda" and "bermuda" both return the data about that country. (Hint: remember about the string function "toLowerCase()"). For info about a single country, look for portions of names. For example, if the user types "Russia", there is no match, because that country is in this data as "Russia Federation". Check if the user input is included in the country name (hint, remember about the string processing function "includes()" to help here). Try looking for "states", as in United States, and make sure you get that result (and there will be some others as well). Here is an example: 8 D: > SDEV-2110 > countryAssignment > JS script.js > @ outputHtml > [@] html 7 let fits = countries.filter(country => { const regex = new RegExp(*^${searchBox}', 'gi'); 9 return country.name.match(regex) || country.abbr.match(regex); 10 }); 11 12 if (searchBox.length 0) { 13 fits = []; 14 countryList.innerHTML 15 } 16 17 outputHtml(fits); 18 }; 19 20 // show results in HTML 21 const outputHtml fits => { 22 if (fits.length > 0) { 23 const html fits 24 .map 25 fit => 26
Example:
what's required:
