Scribd Logo
Upload

Welcome to Scribd!

  • Activity 04

    Uploaded by

    Ramu lal Sharma
    3 views3 pages
    This document contains code to manipulate elements on a web page using DOM (Document Object Model) methods. It updates the text of a paragraph, toggles the display of an image, changes the background color randomly, and adds a new paragraph to a container div.

    Original Description:

    Original Title

    Activity04

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code to manipulate elements on a web page using DOM (Document Object Model) methods. It updates the text of a paragraph, toggles the display of an image, changes the background color randomly, and adds a new paragraph to a container div.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views3 pages

    Activity 04

    Uploaded by

    Ramu lal Sharma
    This document contains code to manipulate elements on a web page using DOM (Document Object Model) methods. It updates the text of a paragraph, toggles the display of an image, changes the background color randomly, and adds a new paragraph to a container div.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Name-Kapil Sharma

    Sec-K22KN
    Roll-No-67
    Activity-04

    Input:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation Tasks</title>
    <style>
    body {
    text-align: center;
    margin-top: 50px;
    }
    #container {
    margin-top: 20px;
    }
    </style>
    </head>
    <body>
    <p id="paragraph">Original Text</p>
    <button id="toggleButton">Toggle Image Visibility</button>
    <img id="image" src="image.jpg" alt="Sample Image" style="display:
    block;">
    <button id="changeColorButton">Change Background Color</button>
    <div id="container">
    <p>This is the original content.</p>
    </div>

    <script>

    const paragraph = document.getElementById('paragraph');


    paragraph.textContent = 'New Text';

    const toggleButton = document.getElementById('toggleButton');


    const image = document.getElementById('image');
    toggleButton.addEventListener('click', function() {
    image.style.display = image.style.display === 'none' ? 'block' :
    'none';
    });

    const changeColorButton =
    document.getElementById('changeColorButton');
    changeColorButton.addEventListener('click', function() {
    const randomColor = '#' +
    Math.floor(Math.random()*16777215).toString(16);
    document.body.style.backgroundColor = randomColor;
    });
    const newParagraph = document.createElement('p');
    newParagraph.textContent = 'This is the dynamically created
    paragraph.';
    const container = document.getElementById('container');
    container.appendChild(newParagraph);
    </script>
    </body>
    </html>

    You might also like