FSR060523 :- Post Practice Files :- Js Session 10

Post Practice File Js Session 10 and Post your JavaScript related doubts here! Topics will be visible to your Teaching Assistants and Peers. Your doubts will be solved within 24 hours!

2 Likes
Session 10 HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Session 11</title>
    <style>
        /* #demo3 {
            padding : 20px;
            border: 2px solid black;
        } */

        /* .demo4 {
            padding : 20px;
            border: 2px solid black;
            height: 40px;
            width: 40px;
        } */
        .abc {
            background-color: palevioletred;
            color: blue;
        }
    </style>
</head>
<body>
    <!-- <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p> -->

    <!-- <p id="demo1"> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dignissimos in amet cupiditate, harum officiis laborum, accusamus aspernatur, error repudiandae pariatur voluptatem corporis perferendis aut asperiores provident corrupti qui maxime.
    </p> -->
    <!-- <p id="demo1"> 
        <b><i>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dignissimos in amet cupiditate, harum officiis laborum, accusamus aspernatur, error repudiandae pariatur voluptatem corporis perferendis aut asperiores provident corrupti qui maxime.
    </b></i>
    </p> -->

    <!-- <p id="demo2">
        old para
    </p> -->

    <!-- <p id="demo3">
        old para
    </p> -->
    <!-- <button onclick="alert('Hello')">Replace</button> -->
    <!-- <button onclick="func1();">Replace</button>
    <button onclick="func2();">Change</button> -->

    <!-- <div class="demo4">
        <img src="post1.jpg">
    </div>
    <button onclick="func3();">Change Image</button> -->
    <!-- <div class="demo5">
    </div>
    <button onclick="func4();">Add Image</button> -->
    <!-- <a href="https://www.lipsum.com" class="abc">Link</a>
    <h1 class="abc">Heading</h1>
    <p class="abc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque consequuntur eum ipsa in provident veritatis cum voluptas dignissimos officiis quibusdam architecto alias vitae, qui quo nam pariatur laudantium natus similique?</p>
    <button onclick="func5();">Change Elements</button>  -->

    <button onclick="fun4();">Call elements by class name</button>
    <br><br><br><br>


    <div class="old_box"></div>
    <div class="old_box"></div>
    <div class="old_box"></div>

    <button onclick="fun5()">Replace Css</button>


    <b class="xyz">bold 1</b>
    <b  class="xyz">bold 2</b>
    <b  class="xyz">bold 3</b>

 <button onclick="fun6();">replace class (call elements by tag name)</button>


    <script src="session11.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>
Session 10 JS
//--> Document Object Model (DOM)
//--> Print in alert box.

//--> Will Print the tags along with the text. 
// console.log(document.getElementById('demo1'));
// var para_text = document.getElementById('demo1').innerHTML;
// console.log(para_text);
// alert(para_text);

//--> Will print Inner Elements with text.
// var para_text = document.getElementById('demo1').innerHTML;
// console.log(para_text);

//--> Will only print Inner Text.
// var para_text = document.getElementById('demo1').innerText;
// console.log(para_text);

//--> replace the text with the new text.
// document.getElementById('demo2').innerHTML = "This is a new text. How are you?";

//--> replace the text with the new text with button click.
// function func1() {
//     document.getElementById('demo3').innerHTML = "This is a new text. How are you?";
// }

// function func2() {
//     document.getElementById('demo3').innerHTML = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dignissimos in amet cupiditate, harum officiis laborum, accusamus aspernatur, error repudiandae pariatur voluptatem corporis perferendis aut asperiores provident corrupti qui maxime.";
// }

// --> From the div replcae image on button click
// function func3(){
//     document.getElementById('demo4').innerHTML = "<img src= 'post3.jpg'>";
// }

// --> Add  image on button click.
// function func3(){
//     document.getElementById('demo4').innerHTML += "<img src= 'post3.jpg'>";
// }

// --> Change the elements on button click.
// function func5(){
    // console.log(document.getElementsByClassName('abc'));
    // var x=document.getElementsByClassName('abc');

    //--> Method 1
    // x[0].style.color='red';
    // x[0].style.backgroundColor='yellow';

    // x[1].style.color='red';
    // x[1].style.backgroundColor='yellow';

    // x[2].style.color='red';
    // x[2].style.backgroundColor='yellow';

    //--> Method 2
    // for(var j=0;j<x.length;j++){
    //     console.log(j,x[j]);
    //     x[j].style.color='red';
    //     x[j].style.backgroundColor='yellow';
    // }

// }

function fun5(){
    /*Method 1*/

    // var y = document.getElementsByClassName('old_box');
    // console.log(y)
    // y[0].style.backgroundImage = "url(img1.jpg)";
    // y[0].style.borderRadius = "50%";
    // y[0].style.height = "300px";
    // y[0].style.width = "300px";
    // y[0].style.backgroundSize = "cover";
    // y[0].style.backgroundPosition = "center";



    // y[1].style.backgroundImage = "url(img1.jpg)";
    // y[1].style.borderRadius = "50%";
    // y[1].style.height = "300px";
    // y[1].style.width = "300px";
    // y[1].style.backgroundSize = "cover";
    // y[1].style.backgroundPosition = "center";

/*method 2*/

    var z = document.getElementsByTagName('div');
    for(var i =0;i<z.length;i++){
        z[i].className = "new_box"
    }


}


// console.log(document.getElementsByTagName('b'));

function fun6(){
    var k = document.getElementsByTagName('b');
    for(var m =0;m<k.length;m++){
        k[m].className = "mno"
    }
}

// fun6();
2 Likes
2 Likes

https://drive.google.com/drive/folders/1nO0SG6OrfrcmtafvVdPpSv1SLdAeMJxX?usp=sharing

2 Likes

https://drive.google.com/drive/folders/1p0Y8XR8Pj8q4v22ftQrZFkKS49KLsUmC?usp=sharing

2 Likes

https://codepen.io/sunil-behera/pen/qBQrmBp

2 Likes
DOCUMENT OBJECT MODEL #demo3{ padding: 20px; border: 3px solid red; }
    #demo4{
        border: 3px solid red;


    }
</style>
<!-- <p id="demo2">
    old para
</p> -->

<!-- <p id="demo3">
    old para
</p>
<button onclick="fun();">replace</button> -->

<!-- <div id="demo4">
    <img src="../../HTML/4.png">
</div>
<button onclick="fun2();">onclick</button> -->


<div id="demo5"></div>
<button onclick="fun3();">add images</button>





<script type="text/javascript" src="session10.js"></script>

//print the para from html in alert box

// console.log(document.getElementById(“demo1”));

// var para_text = document.getElementById(“demo1”).innerHTML
// console.log(para_text);

//replace old par with new para

// document.getElementById(“demo2”).innerHTML = “new para by a javascript”

// replace old para with new para with button click

// function fun(){
// document.getElementById(‘demo3’).innerHTML = “are u ok??”;
// }

//replace image on button click

// function fun2(){
// document.getElementById(‘demo4’).innerHTML = ‘
// }

// function fun2(){
// document.getElementById(‘demo4’).innerHTML = “

hey akash hw r u


// }

function fun3(){
document.getElementById(‘demo5’).innerHTML +=“”;
}

2 Likes

https://drive.google.com/drive/folders/1v15F1GUZeliAPFZPY8KcEtDn9QSjZJeL?usp=sharing

2 Likes

https://codepen.io/Akshitha-Annaram/full/jOQBGGr

2 Likes