Batch060523 Batch Today's Session Practice Files

Hi, Guys please put your today’s session notes and doubts here !!

1 Like


Maam, Yesterday’s class recording is only showing 4min. Please look into the matter.

1 Like

yes session recording is only 4 mint …

1 Like


Hi , please see and check this properly from the right third one for session recording will work , that is of full live session recording available .

Hi, and please guys put your practice notes here i want to check everyone’s notes here only!!

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Session 12</title>
    <link rel="stylesheet" type="text/css" href="session12.css">
</head>
<body>
<!-- <div id="box1">
                <p class="odd">para 1</p>
                <p>para 2</p>
                <p class="odd">para 3</p>
                <p>para 4</p>
                <p class="odd">para 5</p>
                <p>para 6</p>
            </div>
            <button onclick="fun2();">Click Me</button>
 -->
 
            <!-- <ul class="ul_css">
                <li>abc</li>
                <b><li>pqr</li></b>
                <li>xyz</li>
            </ul>


            <button onclick="fun3();">Click me</button>

            <p id="demo3">
                hello how are you ?
            </p> 


    <ul id="list1">
        <li>abc</li>
        <li>pqr</li>
       
    </ul>

    <button onclick="fun4();">Add LI element</button>
    <br><br>
    <div class="box2" id="demo4"></div>
    <button onclick="fun5();">Add-image-with-create-element</button>-->

    <!-- <input id="data1">
    <input id="data2">
    <input id="data3">

    <button onclick="fun6()">Find_Greater_val</button>

    <p id="input_ans">final value is :-</p> -->

    <script src="session12.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>
CSS Part
#box1{
    border: 3px solid navy;
}
.ul_css{
    background-color: pink;
}
body{
    height: 3000px;
}
.box2{
    height: 300px;
    width: 400px;
    border: 3px solid red;
}
.img_style{
    height: 100px;
    width: 200px;
}
JS Part
addition of 2 nums with input tag


function fun1(){
    var num1 = Number(document.getElementById("demo1").value);
    var num2 = Number(document.getElementById('demo2').value);
    console.log(num1,num2);
    var final_ans = num1+num2;
    document.getElementById('para1').innerHTML += final_ans

}


function fun2(){
    var z = document.querySelectorAll('#box1 .odd')
    // console.log(z)
    for(var i =0;i<z.length;i++){
        z[i].style.color = "green"
        z[i].style.backgroundColor = "yellow"
    }
}




function fun3(){
    // var y = document.querySelectorAll('.ul_css > b');
    var y = document.querySelectorAll('.ul_css > li');
    // console.log(y)
    for(var j =0;j<y.length;j++){
        y[j].style.color = "darkred"
    }
}


console.log(document.querySelector('#demo3'))


function fun4(){
    var tag = document.createElement('li');
    // console.log(tag);
    var text = document.createTextNode("xyz");
    // console.log(text)
    tag.appendChild(text)
    // console.log(tag)
    document.getElementById('list1').appendChild(tag);
}


function fun5(){
    var img_tag = document.createElement('img');
    // console.log(img_tag)
    img_tag.src = "img1.jpg"
    img_tag.className = "img_style"
    console.log(img_tag)
    document.querySelector('#demo4').appendChild(img_tag)
}

-->FUnctions with return type


function add(x,y){
    var ans = x+y;
    document.write(ans);

}
add(2,4);

function add(x,y){
    var ans = x+y;
    return ans
}

var result = add(3,5)
document.write(result);

function max_num(a,b,c){
    if(a>b && a>c){
        document.write("a is greater")
    }
    else if(b>a && b>c){
        document.write("b is greater")
    }
    else if(c>a && c>b){
        document.write("c is greater")
    }
}

max_num(20,30,40);

var temp;
function max_val(a,b,c){
    if(a>b && a>c){
        temp = a; 
    }
    else if(b>a && b>c){
        temp = b
    }
    else if(c>a && c>b){
        temp = c
    }
    return temp 
}


function find_max_val_prompt(){
    var num1 = Number(prompt("Enter num1"));
    var num2 = Number(prompt("Enter num2"));
    var num3 = Number(prompt("Enter num3"));
    var final_ans = max_val(num1,num2,num3);
    document.write("the greater num is :- ",final_ans)

}

find_max_val_prompt();


function fun6(){
    var input1 = Number(document.getElementById('data1').value);
    var input2 = Number(document.getElementById('data2').value);
    var input3 = Number(document.getElementById('data3').value);
    var final_ans = max_val(input1,input2,input3);
    document.getElementById('input_ans').innerHTML+=final_ans
}
1 Like

Okay Maam Got it . Thank You

1 Like
session 11 #box1{ border: 3px solid navy; }
    <!-- <br><br>
    <input placeholder="enter a num1" id="demo1">
    <span>+</span>
    <input placeholder="enter a num2" id="demo2">
    <span>=</span>
    <p id="para1" style="border: 3px solid navy; padding: 20px; display: inline;">The ans is:- </p>
    <button onclick="fun1();">submit</button> -->

    <!-- <div id="box1">
        <p>para1</p>
        <p>para2</p>
        <p class="odd">para3</p>
        <p>para4</p>
        <p class="odd">para5</p>
        <p>para6</p>
        <p class="odd">para7</p>
    </div>
    <button onclick="fun2();">Click me</button> -->

    <!-- <ul class="ul_css">
        <li>abc</li>
       <b><li>pqr</li></b>
       <li>xyz</li>
    </ul>
    <button onclick="fun3();">click me</button> -->

    <ul id="list_1">
        <li>abc</li>
        <li>pqr</li>
    </ul>
    <button onclick="fun4();">add li elements</button>
<script type="text/javascript" src="session11.js"></script>

// function fun1(){
// document.getElementById(‘demo1’).innerHTML = “
// }
// addition of 2 numbers with input

// function fun1(){
// var num1 = Number(document.getElementById(‘demo1’).value);
// var num2 = Number(document.getElementById(‘demo2’).value);
// var final_ans = num1+num2;
// document.getElementById(‘para1’).innerHTML += final_ans;
// }

// function fun2(){
// var z = document.querySelectorAll(‘#box1 .odd’)
// console.log(z);
// for(var i = 0;i<z.length;i++){
// z[i].style.color = “green”;
// }
// }

// function fun3(){
// var y = document.querySelectorAll(‘.ul_css > li’)
// for(var j = 0;j<y.length;j++){
// y[j].style.color = “darkred”;
// }
// }

function fun4(){
var tag4 = document.createElement(‘li’);
var text = document.createTextNode(‘xyz’);
tag.apendChild(text)
document.getElementById(‘list_1’).apendChild(tag4);

1 Like

JavaScript Module Session-11 Practice Notes.
https://codepen.io/Akshitha-Annaram/pen/WNYpqEE

1 Like
1 Like