swati-jagtap / javascript-practice

0 stars 0 forks source link

22 DOM projrct 2 #167

Open swati-jagtap opened 3 years ago

swati-jagtap commented 3 years ago
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation 2</title>
</head>
<body>
    <script>  

const countries = [
  'Afghanistan',  'Albania',  'Algeria',  'Andorra',  'Angola','Antigua and Barbuda',  'Argentina',  'Armenia',  'Australia',  'Austria',
  'Azerbaijan',  'Bahamas',  'Bahrain',  'Bangladesh',  'Barbados',  'Belarus',  'Belgium',  'Belize',  'Benin',  'Bhutan',  'Bolivia',
  'Bosnia and Herzegovina','Botswana', 'Brazil',  'Brunei',  'Bulgaria','Burkina Faso',  'Burundi',  'Cambodia',  'Cameroon',  'Canada',  'Cape Verde',
  'Central African Republic',  'Chad',  'Chile',  'China',  'Colombi', 'Comoros',  'Congo (Brazzaville)',  'Congo',  'Costa Rica',  "Cote d'Ivoire",  'Croatia',
  'Cuba',  'Cyprus',  'Czech Republic',  'Denmark',  'Djibouti',  'Dominica',  'Dominican Republic',  'East Timor (Timor Timur)',  'Ecuador',  'Egypt',
  'El Salvador',  'Equatorial Guinea',  'Eritrea',  'Estonia',  'Ethiopia',  'Fiji',  'Finland',  'France',  'Gabon',  'Gambia, The',  'Georgia',  'Germany',
  'Ghana',  'Greece', 'Grenada',  'Guatemala',  'Guinea',  'Guinea-Bissau',  'Guyana',  'Haiti',  'Honduras',  'Hungary',
  'Iceland',  'India',  'Indonesia',  'Iran',  'Iraq',  'Ireland',  'Israel',  'Italy',  'Jamaica',  'Japan',  'Jordan',  'Kazakhstan',
  'Kenya',  'Kiribati','Korea, North','Korea, South',  'Kuwait',  'Kyrgyzstan',  'Laos',  'Latvia',  'Lebanon',  'Lesotho',  'Liberia',
  'Libya',  'Liechtenstein',  'Lithuania',  'Luxembourg',  'Macedonia',  'Madagascar',  'Malawi',  'Malaysia',  'Maldives',
  'Mali',  'Malta',  'Marshall Islands',  'Mauritania',  'Mauritius',  'Mexico',  'Micronesia',  'Moldova',  'Monaco',  'Mongolia',  'Morocco',
  'Mozambique',  'Myanmar',  'Namibia',  'Nauru',  'Nepal',  'Netherlands',  'New Zealand',  'Nicaragua', 'Niger',  'Nigeria',  'Norway',  'Oman',  'Pakistan',
  'Palau',  'Panama', 'Papua New Guinea',  'Paraguay',  'Peru',  'Philippines',  'Poland',  'Portugal',  'Qatar',  'Romania',  'Russia',
  'Rwanda',  'Saint Kitts and Nevis',  'Saint Lucia',  'Saint Vincent',  'Samoa',  'San Marino',  'Sao Tome and Principe',  'Saudi Arabia',
  'Senegal',  'Serbia and Montenegro',  'Seychelles',  'Sierra Leone',  'Singapore',  'Slovakia',
  'Slovenia',  'Solomon Islands',  'Somalia',  'South Africa',  'Spain',  'Sri Lanka',  'Sudan',  'Suriname',  'Swaziland',
  'Sweden',  'Switzerland',  'Syria',  'Taiwan',  'Tajikistan',  'Tanzania',  'Thailand',  'Togo',  'Tonga',  'Trinidad and Tobago',  'Tunisia',  'Turkey',  'Turkmenistan',
  'Tuvalu',  'Uganda',  'Ukraine',  'United Arab Emirates',  'United Kingdom',  'United States',  'Uruguay',  'Uzbekistan',  'Vanuatu',
  'Vatican City',  'Venezuela',  'Vietnam',  'Yemen',  'Zambia',  'Zimbabwe'
]  

        const heading=document.createElement('h1');
        heading.textContent="World Countries List"
        document.body.appendChild(heading).style.textAlign='center';

           const table = document.createElement('table');
           table.setAttribute("style","width:80%; margin:auto; border-spacing: 10px; ")

           document.body.appendChild(table).style.textAlign='center';

           let index=0;

           for(let row=0;row<=parseInt(countries.length/6);row++){
               const tr=document.createElement('tr');
               table.appendChild(tr)
               for(let col=0;col<6;col++){
                   const td=document.createElement('td')
                   td.textContent=countries[index];
                   //td.style.boxShadow = "1px 2px 3px blue"; 
                   if(td.textContent!=""){
                   tr.appendChild(td).setAttribute("style","border:0px solid darkgray;box-shadow: 2px 2px 10px darkgray;height:60px;");
                   }
                   index++;
               }

           }

    </script>
</body>
</html>

image