Answer to Question #314667 in HTML/JavaScript Web Application for yash

Question

Answer to Question #314667 in HTML/JavaScript Web Application for yash

Question #314667

It is a good idea to open the HTML file in Live Server (if using VS Code) or a browser and check your code frequently. The easiest way to find errors is to see them as soon as you make them! It is also a good idea to open the browser console to see if there are any errors. 1. Add code to the HTML file to reference the script.js file using best practices. Other than this, do not modify either the HTML or CSS file. 2. In the script.js file set strict mode for JavaScript. 3. Create a new h3 element with your name in it and insert it before the first paragraph. 4. In the footer, add a cite element with the text "Information and photos from Wikipedia" where "Wikipedia" is a link to the page "https://en.wikipedia.org/wiki/Bumblebee". 5. console.log the number of paragraphs with some descriptive text (open the browser console to see the output). 6. Add the class "special" to the second h2 element. 7. Select all the figcaptions and make the font italic.

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <header></header>
    <p>Lorem ipsum dolor sit amet.</p>
    <footer></footer>

    <!-- 1 -->
    <script>
        // 2
        'use strict'; 

        // 3
        let firstParagraph = document.querySelector('p');
        let h3 = document.createElement('h3');
        h3.innerText = 'My Name';
        firstParagraph.parentElement.prepend(h3);

        // 4
        let footer = document.querySelector('footer');
        footer.innerHTML = `
            <cite>Information and photos from <a href="https://en.wikipedia.org/wiki/Bumblebee" target="__blank">Wikipedia</a></cite>
        `;

        // 5
        let allParagraph = document.querySelectorAll('p');
        console.log(allParagraph.length);

        // 6
        let allH2 = document.querySelectorAll('h2');
        let secondH2 = allH2.length > 0 ? allH2[1] : null;
        secondH2 ? secondH2.classList.add('special') : '';

        // 7
        let allFigcaptions = document.querySelectorAll('figcaption');
        if (allFigcaptions.length > 0) {
            for(let i = 0; i <= allFigcaptions.length; i++) {
                allFigcaptions[i].style.fontStyle = "italic";
            }
        }
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #314667 in HTML/JavaScript Web Application for yash

Comments

Leave a comment

Related Questions