Scribd Logo
Upload

Welcome to Scribd!

  • Assignment - 1,2

    Uploaded by

    Anushka Gadge
    5 views4 pages
    The document contains code for an assignment involving buttons that change color. It defines styles for three buttons with colors red, green, and blue. It includes JavaScript functions to rotate the button colors clockwise and counterclockwise by swapping their CSS classes. A previous assignment involved buttons that change the background color of all buttons to the color clicked when an event listener is triggered.

    Original Description:

    JS assignment

    Original Title

    Assignment -1,2

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code for an assignment involving buttons that change color. It defines styles for three buttons with colors red, green, and blue. It includes JavaScript functions to rotate the button colors clockwise and counterclockwise by swapping their CSS classes. A previous assignment involved buttons that change the background color of all buttons to the color clicked when an event listener is triggered.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    5 views4 pages

    Assignment - 1,2

    Uploaded by

    Anushka Gadge
    The document contains code for an assignment involving buttons that change color. It defines styles for three buttons with colors red, green, and blue. It includes JavaScript functions to rotate the button colors clockwise and counterclockwise by swapping their CSS classes. A previous assignment involved buttons that change the background color of all buttons to the color clicked when an event listener is triggered.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    Assignment -2

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    /* Style for the buttons */

    button {

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

    /* Style for the BTN1 button */

    .btn1 {

    background-color: red;

    color: white;

    /* Style for the BTN2 button */

    .btn2 {

    background-color: green;

    color: white;

    /* Style for the BTN3 button */

    .btn3 {

    background-color: blue;

    color: white;

    </style>

    </head>

    <body>

    <!-- Buttons -->

    <button id="btn1" class="btn1">BTN1</button>

    <button id="btn2" class="btn2">BTN2</button>

    <button id="btn3" class="btn3">BTN3</button>

    <br><br>

    <button onclick="rotateClockwise()">Rotate Clockwise</button>

    <button onclick="rotateCounterClockwise()">Rotate Counterclockwise</button>


    <script>

    // Function to rotate the colors of the buttons clockwise

    function rotateClockwise() {

    var btn1 = document.getElementById('btn1');

    var btn2 = document.getElementById('btn2');

    var btn3 = document.getElementById('btn3');

    var tempClass = btn1.className;

    btn1.className = btn3.className;

    btn3.className = btn2.className;

    btn2.className = tempClass;

    // Function to rotate the colors of the buttons counterclockwise

    function rotateCounterClockwise() {

    var btn1 = document.getElementById('btn1');

    var btn2 = document.getElementById('btn2');

    var btn3 = document.getElementById('btn3');

    var tempClass = btn1.className;

    btn1.className = btn2.className;

    btn2.className = btn3.className;

    btn3.className = tempClass;

    </script>

    </body>

    </html>
    Assignment-1

    HTML CODE-

    <!DOCTYPE html>

    <html>

    <head>

    <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

    <h3>Assignment -1 </h3>

    <button id="redButton">Red</button>

    <button id="greenButton">Green</button>

    <button id="yellowButton">Yellow</button>

    <script src="script.js"></script>

    </body>

    </html>

    CSS CODE-

    html {

    height: 100%;

    width: 100%;

    }
    JS CODE-

    document.getElementById("redButton").addEventListener("click", function() {

    changeColor("red");

    });

    document.getElementById("greenButton").addEventListener("click", function() {

    changeColor("green");

    });

    document.getElementById("yellowButton").addEventListener("click", function() {

    changeColor("yellow");

    });

    function changeColor(color) {

    var buttons = document.getElementsByTagName("button");

    for (var i = 0; i < buttons.length; i++) {

    buttons[i].style.backgroundColor = color;

    You might also like