Planets-fact-site

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Planets-fact-site. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was to set the different element and keep them steady for the different planets.

And to display the image for the planet following the size of the planet and the size of the window user :

    fetch(url) // extract svg
        .then(response => response.text())
        .then(svgCode => {

            document.querySelector('.container-svg').innerHTML = svgCode;

            if(window.innerWidth >= 704 && window.innerWidth < 1440){  
                document.querySelector('.container-svg svg').style.width = 
`${Number( window.getComputedStyle(document.querySelector('.container-svg svg') ).width.split('px')[0] ) * 1.6}px`;
                document.querySelector('.container-svg svg').style.height = 
`${Number( window.getComputedStyle(document.querySelector('.container-svg svg') ).height.split('px')[0] ) * 1.6}px`;
            }

            else if(window.innerWidth >= 1440){  
                document.querySelector('.container-svg svg').style.width = 
`${Number( window.getComputedStyle(document.querySelector('.container-svg svg') ).width.split('px')[0] ) * 2.6}px`;
                document.querySelector('.container-svg svg').style.height = 
`${Number( window.getComputedStyle(document.querySelector('.container-svg svg') ).height.split('px')[0] ) * 2.6}px`;
            }

        });

What specific areas of your project would you like help with?

Feel free to leave any comments.

Thanks.