Create Day 22 Ex 2-2

3 years ago · f05c4ea74b
parent cf633cd8e7
commit f05c4ea74b
1 changed files with 79 additions and 0 deletions
--- a/Solutions/Day
+++ b/Solutions/Day
@ -0,0 +1,79 @@
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>
            30DaysOfJavaScript:DOM Day 2
        </title>
    </head>
    <body>
        <div>
            <h1 style="font-size: 45px"> W O R L D   C O U N T R I E S   L I S T </h1>
        </div>
        <div>
            <h3 style="font-size: 20px"> Total Number of countries: 193</h3>
        </div>
        <div>
            <h2  style="font-size: 15px"> 30DaysOfJavaScript:DOM-Day-2 </h2>
        </div>
        <div>
            <h2 style="font-size: 15px"> Author: Suvrat Jain </h2>
        </div>
        <div id="wrapper" style="padding: 10px; max-width: 100%;max-height: 100%" >
        </div>
       <script src="./countries.js"> </script>
        <script>
                const h1 = document.querySelector('h1')
                h1.style.display = 'flex'
                h1.style.justifyContent = 'center'
                const h3 = document.querySelector('h3')
                h3.style.display = 'flex'
                h3.style.justifyContent = 'center'
                h3.style.margin = '-35px'
                const h2 = document.querySelectorAll('h2')
                h2[0].style.display = 'flex'
                h2[0].style.justifyContent = 'center'
                h2[1].style.display = 'flex'
                h2[1].style.justifyContent = 'center'
                h2[0].style.margin = '35px'
                h2[1].style.margin = '-35px'
                const div = document.getElementById('wrapper')
                for(let i = 0; i<countries.length;i++) {
                const newdiv = document.createElement('div')
                newdiv.textContent = countries[i]
                newdiv.style.boxShadow = '0px 0px 6px #D3D3D3'
                newdiv.style.borderRadius = '2px'
                newdiv.style.padding = '30px'
                newdiv.style.margin = '7px'
                div.style.margin = '40px'
                newdiv.style.fontWeight = 'bold'
                newdiv.style.fontFamily = 'jokerman'
                newdiv.style.width = '70px'
                newdiv.style.height = '80px'
                div.style.display = 'flex'
                newdiv.style.alignItems = 'center'
                div.style.justifyContent = 'center'
                newdiv.style.display = 'flex'
                newdiv.style.justifyContent = 'center'
                // newdiv.style.flexDirection = 'row'
                // newdiv.style.flexWrap = 'wrap'
                div.style.flexDirection = 'row'
                div.style.flexWrap = 'wrap'
                div.appendChild(newdiv)
                }
                //console.log(div)
        </script>
    </body>
 </html>