Answer to Question #326127 in HTML/JavaScript Web Application for suresh

Question

<h1> Capital and Country </h1>

  <div class="block">

    <select name="capital" id="capital-select" >

      <option value="paris"> Paris </option>

      <option value="london"> London </option>

      <option value="newYour"> New Your </option>

      <option  value="newDelhi" selected> New Delhi </option>

    </select>

    <p class="block__text"> is the capital of ? </p>

  </div>

  <span class="county-name" id="county-name"> India </span>

Answer 1

    <h1> Capital and Country </h1>


    <div class="block">
        <select name="capital" id="capital-select" onchange="select_capital()">
        </select>


        <p class="block__text"> is the capital of ? </p>


    </div>


    <span class="county-name" id="county-name">Afghanistan</span>


    <script>
        'use strict'
        let country = [];
        let url = 'https://countriesnow.space/api/v0.1/countries/capital'
        fetch(url, {
            method: 'GET'
        }).then(res => res.json()).then(res => {
            country = res.data.filter(x=>x.capital.length>0);
            country.sort((a,b)=>a>b)
            let select = document.getElementById('capital-select')
            for (let i = 0; i < country.length; i++) {
                let option = document.createElement('option')
                option.value = country[i].capital
                option.innerHTML = country[i].capital
                select.append(option)
            }
            console.log('country',country)


        })
        function select_capital(){
        let new_span = document.createElement('span')
         let countries = country.find(x=>x.capital == document.getElementById('capital-select').value).name
         new_span.innerHTML = countries
         new_span.setAttribute('id','county-name')
        //  document.body.removeChild(document.getElementById('county-name'))
        document.getElementById('county-name').remove();
         document.body.append(new_span)
         console.log(document.getElementsByTagName('span').innerHTML)
            }
    </script>