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 2 days 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
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) +...
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...
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
C++ Data Structures: Implement a Stack and a Queue using Linked list In this lab you...
C++ Data Structures: Implement a Stack and a Queue using Linked list In this lab you will implement the functionality of a stack and a queue using a linked list. Your program must use of the declaration of the Stack and Queue class in Stack.h and Queue.h You have to implement the functionalities of queue (enq, deq, displayQueue) in a file called Queue.cpp. All the functions in Queue.cpp should follow the prototypes declared in Queue.h. Your code should make use...
Complete the provided partial C++ Linked List program. Main.cpp is given and Link list header file...
Complete the provided partial C++ Linked List program. Main.cpp is given and Link list header file is also given. The given testfile listmain.cpp is given for demonstration of unsorted list functionality. The functions header file is also given. Complete the functions of the header file linked_list.h below. ========================================================= // listmain.cpp #include "Linked_List.h" int main(int argc, char **argv) {      float           f;      Linked_List *theList;      cout << "Simple List Demonstration\n";      cout << "(List implemented as an Array - Do...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT