Question

In: Computer Science

Add a header to the lab with "YourName's List Of Countries" Using JS, inject an ordered...

  1. Add a header to the lab with "YourName's List Of Countries"
  2. Using JS, inject an ordered list into the div with the class "content"
  3. Give your new ordered list the class "countries"
  4. Design the following function to run on the click of a button from the index page
  5. Select 25 random countries from your list by writing a separate function that makes use of Math.random
    • You may need to explore how to do this by looking it up at MDN
  6. Make sure the selection is unique
  7. Using a .forEach or a .map function, inject a new list item for each country into the ol from #3
  8. Display the name of each country in a normal font weight
  9. Display the country code for each in a bold font weight
  10. Log the unselected countries to your console

Extra Credit (0.5 per)

  • Make sure your random countries display in alphabetical order OR
  • Make sure your countries are definitely not in alphabetical order
  • Guarantee a given country cannot appear twice in any given click of the button (point 7 but really do it)
  • Use JS to attach an event listener rather than using the onclick attribute on a button

Here is the link w/country codes:

https://www.iban.com/country-codes

Solutions

Expert Solution

NOTE :-

1. I made sure a country won't appear twice in the list.

2. I used axios to fetch the list of countries from a REST API available for free.

Here is the code :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>
</head>
<body>
    <div class="content">
        <ol class="countries"></ol>
    </div>
    <button id="fetch">Fetch Countries</button>
    <script>
        document.querySelector("#fetch").addEventListener('click',()=>{start()});

        const generateRandom=(totalCountries,memory)=>{
            let rand=Math.floor(Math.random()*totalCountries+1);
            for(let i=0;i<memory.length;i++){
                if(memory[i]==rand){
                    return generateRandom(totalCountries,memory);
                }
            }
            memory.push(rand);
            return rand;
        }

        async function start(){
            const countries= (await axios.get("https://api.first.org/data/v1/countries")).data.data;
            const countryCodes=Object.keys(countries);
            const countryNames=Object.values(countries);
            const totalCountries=countryCodes.length;
            const MAX=25;
            let randomArr=[];
            let memory=[];
            for(let i=0;i<MAX;i++){
                rand=generateRandom(totalCountries,memory);
                let temp={
                    [countryCodes[rand-1]]:countryNames[rand-1]
                }
                randomArr.push(temp);
            }
            renderList(randomArr,countryCodes,countries);
        }

        const renderList=(arr,countryCodes,countries)=>{
            const html=document.querySelector('.countries');
            html.innerHTML='';
            arr.map(country=>{
                const code=Object.keys(country)[0];
                countryCodes=countryCodes.filter(c=>c!==code)
                const name=Object.values(country)[0].country;
                let template=`<li><span style="font-weight:bold;">${code}</span> ${name}</li>`;
                html.innerHTML+=template;
            })
            countryCodes.forEach(code=>console.log(countries[`${code}`].country))
        }
    </script>
</body>
</html>

venereology answered 8 months ago
Next > < Previous

Related Solutions

Assignment: The Ordered List In this assignment, you will create an ordered list of movies. The...
Assignment: The Ordered List In this assignment, you will create an ordered list of movies. The list will always be maintained in sorted order (ascending order, by movie title) by assuring that all new movies are inserted in the correct location in the list. Create a new project to hold your implementation of an ordered singly-linked list. You will need a main.cppto use as a test driver, as well as header and implementation files as described below. Movie To represent...
using the header: #include <pthread.h> // This is a header file for a Read/Right Lock Library....
using the header: #include <pthread.h> // This is a header file for a Read/Right Lock Library. Your C code //SHOULD access your routines using these exact function // prototypes typedef struct RW_lock_s { } RW_lock_t; void RW_lock_init(RW_lock_t *lock); /* This routine should be called on a pointer to a struct variable of RW_lock_t to initialize it and ready it for use. */ void RW_read_lock(RW_lock_t *lock); /* This routine should be called at the beginning of a READER critical section */...
please create a calculator using p5.js web editor. Please make sure it works with only js....
please create a calculator using p5.js web editor. Please make sure it works with only js. No added html or css; p5.js only
please create a calculator using p5.js web editor. Please make sure it works with only js....
please create a calculator using p5.js web editor. Please make sure it works with only js. No added html or css; p5.js only. PLEASE MAKE SURE IT WORKS
Create a List Create a class that holds an ordered list of items. This list should...
Create a List Create a class that holds an ordered list of items. This list should have a variable size, most importantly this class should implement the interface SimpleArrayList. Feel free to add as many other functions and methods as needed to your class to accomplish this task. In other words, you have to write the code for each of the functions specified in the SimpleArrayList interface. You are not allowed to use any 3rd party data structures or libraries...
1. List all the anions in this lab that are identified using: A. precipitation reactions B....
1. List all the anions in this lab that are identified using: A. precipitation reactions B. redox reactions C. acid-base reactions D. gas-forming reactions The Equations Given: Ca+2(aq) + SO4 -2(aq) ↔ CaSO4(s) Equation 1 Ca+2(aq) + CO3 -2(aq) ↔ CaCO3(s) Equation 2 CaCO3(s) + 2H+ (aq) → Ca+2(aq) + CO2(g) + H2O(l) Equation 3 CaSO4(s) + H+ (aq) → No Reaction (precipitate remains) Equation 4 2NO2 - (aq) → NO(aq) + NO3 - (aq) Equation 5 2NO(g) (colorless) +...
how do you add two matrices linked list in java? (am using linked list because 2D...
how do you add two matrices linked list in java? (am using linked list because 2D arrays are not allowed.) ex [1st matrix] 1 3 2 4 2 1 3 2 4 + [2nd matrix] 3 2 3 2 1 4 5 2 3 = [3rd matrix] 4 5 5 6 3 5 8 4 7
Assume that a singly linked list is implemented with a header node, but no tail node,...
Assume that a singly linked list is implemented with a header node, but no tail node, and that it maintains only a pointer to the header node. Write a class in C++ that includes methods to a. return the size of the linked list b. print the linked list c. test if a value x is contained in the linked list d. add a value x if it is not already contained in the linked list e. remove a value...
Assume that a singly linked list is implemented with a header node, but no tail node,...
Assume that a singly linked list is implemented with a header node, but no tail node, and that it maintains only a pointer to the header node. Write a class that includes methods to a. return the size of the linked list b. print the linked list c. test if a value x is contained in the linked list d. add a value x if it is not already contained in the linked list e. remove a value x if...
Hi! I 'm writing a code for a doubly linked list and this is the header...
Hi! I 'm writing a code for a doubly linked list and this is the header file #include<iostream> #include <string> using namespace std; struct node { int data; node *next,*prev; node(int d,node *p=0,node *n=0) { data=d; prev=p; next=n; } }; class list { node *head,*tail; public: list(); bool is_empty(); int size(); void print(); void search(); int search2(int el); void add_last(int el); void add_first(int el); bool add_pos(); bool delete_first(); bool delete_last(); void delete_pos(int pos); void delete_el(); void add_sorted(); }; i want...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT