Web Development

Wednesday, 11 May 2022

JAVASCRIPT + CSS + HTML #42 | Event & Event Listener |How to Target using JS | Web Development

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function hide() {
            let a = document.getElementById('btn');
            let b = document.getElementById('para');
            if(para.style.display != 'none'){
                para.style.display = 'none';
            }
            else{
                para.style.display = 'block';
            }

        }
    </script>
</head>
<style>
    #btn{
        height: 66px;
        width: 166px;
        border: 4px solid black;
        font-size: 26px;
        font-family: sans-serif;
        font-weight: bold;
    }
</style>
<body>
    <h1>Event & Event Listening</h1>
    <p id="para">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium omnis magnam praesentium exercitationem alias, sapiente optio reiciendis! Suscipit quas dolor est, voluptatum officiis eius commodi quod minima illum quia quisquam, et delectus sapiente harum cum! Architecto sunt magnam a praesentium inventore repudiandae pariatur rem. Mollitia minus tempore debitis iusto officiis dolores velit odit deserunt officia similique quia, veritatis, atque fuga adipisci nobis. Numquam pariatur dolores incidunt.</p>
    <button id="btn" onclick="hide()">Show or Hide</button>
    
</body>
</html>

Tuesday, 10 May 2022

JAVASCRIPT + CSS + HTML #41 | Navigate DOM JAVASCRIPT |How to Target using JS | Web Development

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // ID NAvigation through JS
        let a = document.getElementById('nav');
        console.log(a);

         // Class Navigation through JS
        let b = document.getElementsByClassName('box');
        console.log(b)

        // query selector

    let c = document.querySelectorAll('nav');
    console.log("this is my query selector=",c);
    </script>
</head>
<body>
    <div id="div1" class="box">
        <ul id="nav">
            <li>line1</li>
            <li>line2</li>
            <li>line3</li>
            <li>line4</li>
        </ul>
    </div>
    <div class="box">
        Reusing classs
    </div>
   
</body>
</html>

Monday, 9 May 2022

JAVASCRIPT + CSS + HTML #40 | Pop-Up Box JAVASCRIPT |How to Make Pop-Up Box JS | Web Development

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // alert
        // alert("Are you 18+?")

        // let a = prompt("What is your name");
        // console.log(a);

        // confirm
        // let b = confirm("Are you 18 +?")
        // console.log(b);

    </script>
</head>
<body>
    
</body>
</html>

Saturday, 7 May 2022

JAVASCRIPT + CSS + HTML #39 | While Loop JAVASCRIPT |How to Make Do While Loop JS | Web Development

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // while loop
        // let a= 66;
        // while (a<69) {
        //     console.log(`${a} is smaller`);
        //     a++;
            
        // }


        // do while loop
        let a = 26;
        do {
            console.log(`${a} `);
            a++;
            
        } while (a<55);
    </script>
</head>
<body>
    
</body>
</html>

Friday, 6 May 2022

JAVASCRIPT + CSS + HTML #38 | For Loop JAVASCRIPT |How to Make For Loop JS | Web Development

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // For Loop
        // for(let i=0;i<3;i++){
        //     console.log(i);
        // }


        // For loop using Array

        // let cars = ['GTR', 'BMWM5', 'HELL CAT', 'KALI DENALI']

        // for (let i = 0; i < cars.length; i++) {
        //     console.log( cars[i]);
            
        // }


        let sahitya ={
            name : 'vasu',
            age : 22 ,
            salary : 110+'K',
            location : 'Amsterdam'
        }

        for(key in sahitya){
            console.log(`My ${key} is ${sahitya[key]}`);
        }
</script>

Thursday, 5 May 2022

JAVASCRIPT + CSS + HTML #36 | Switch Case in JAVASCRIPT |How to Make Case in JS | Web Development

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        const day =3 ;
        switch (day) {
            case 1:
                console.log("Monday");
                break;
            case 2:
                console.log("Tuesdaay");
                break;
            case 3:
                console.log("Wednesday");
                break;
            default:
                console.log("Not Monday , Wednesday , Tuesday")
                break;
        }
        
    </script>
</head>

<body>

</body>

</html>

JAVASCRIPT + CSS + HTML #37 | Function in JAVASCRIPT | How to Make Functions in JS | Web Development

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let a = "BMW M5";
        let b = "Lambo Aventador";
        let c = "AMG GT4 63"
        let d = "GTR";

        // function
        function greet(a){
            console.log(a+" is fast")
        }

        greet(a);
        greet(d);
        greet(c);

    </script>
</head>
<body>
    
</body>
</html>