Web Development: May 2022

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>

Wednesday, 4 May 2022

JAVASCRIPT + CSS + HTML #35 | Array in JAVASCRIPT | How to Make ARRAY 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 car = ["gtr","m5","911 carrera","challenger" , "charger" ];
        console.log(car);
        car.push("camaro");
        car = car.sort();

        // NEW ARRAY
        let lang =new Array('java','javascript', 'python','golang','html','css','react','angular','vue','flask')
        console.log(lang)
        lang = lang.sort();

        let num = new Array(99,66,77,33,11,55,88);
        console.log(num);
        num = num.sort();

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

JAVASCRIPT + CSS + HTML #34 | OBJECTS in JAVASCRIPT | How to Make OBJECTS 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 code ={
        language : "javascript",
        level: "easy",
        usage: "web",
        script : "yes",
        'give rating': "ten", 

    }
    console.log(code)

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

JAVASCRIPT + CSS + HTML #33 | IF ELSE LOOP in JAVASCRIPT | How to Make Loop 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>If Else Loop</title>
    <script>
        let a = 66;
        if (a<=6){
            console.log('True');
        }
        else if (a==66) {
            console.log("2nd Condition");
        } 
        
        
        else{
                console.log("False");
            }

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

Tuesday, 3 May 2022

JAVASCRIPT + CSS + HTML #32 | Scope of Variable in JAVASCRIPT | Let , Const , Var | 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 = "this is new method"
    console.log(a)


    
    const b = 66;
    console.log(a+b)

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

Monday, 2 May 2022

JAVASCRIPT + CSS + HTML #31 | Function of Strings in JAVASCRIPT | 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>

        // string double inverted comma  
        var string1 = "My name is 'sahitya'."
        console.log(string1)
        // strings
        var car1 = 'This Ferrari is very fast. It has very high power which is'
        var power = 800;
        var final = `${car1} ${power}HP`;

        console.log(final);


        // Index of String
        var index=car1.indexOf('very');
        console.log(index)

        // last Index of 
        
        var index1 = car1.lastIndexOf('very')
        console.log(index1);


        // Slicing of a String
        var slice = car1.slice(0,4);
        console.log(slice)


        // string length
        var substr = car1.substr(13,2);
        console.log(substr)
        
    </script>
</head>
<body>
</body>
</html>

JAVASCRIPT + CSS + HTML #30 | OPERATORS & OPERANDS in JAVASCRIPT | HTML ,CSS & Javascript| 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>
        console.log('DATATYPES')

        // DATATYPE
        var a=66;
        var b=26;
        
        console.log(a);

// 1.UNANARY OPERATOR
console.log(-a)
// 66 is your operator

// 2. BINARY OPERATOR
console.log(a+b);

// 3. ARTHMETIC OPERATOR

console.log('This is addition of both a & b= '+(a+b))

    </script>
</head>
<body>
    <h1>Datatypes , Operators , Operands</h1>
</body>
</html>

JAVASCRIPT + CSS + HTML #29 | How to Print in JAVASCRIPT | HTML ,CSS & Javascript| 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>
        console.log("This is my 1st Video on JS");


        console.log('My name is Sahitya Gupta');
    </script>
</head>
<body>
    <h1>javascript</h1>
</body>
</html>

Sunday, 1 May 2022

HTML + CSS #28 | Adding Media Queries in Food Website | The End | HTML & CSS | 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>Navigation Bar</title>
</head>
<style>
    .navbar {
        display: flex;
        position: relative;
    }

    .navbar::before {
        width: 1%;
        content: "";
        background-color: black;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        margin: -12px -8px;
    }

    .navbar ul {
        display: flex;
        align-items: center;
    }

    .navbar ul li {
        list-style: none;
    }

    .navbar ul li a {
        text-decoration: none;
        padding: 5px 50px;
        margin: 2px 3px;
        font-size: 26px;
        font-weight: bold;
        font-family: sans-serif;
        color: orangered;

    }

    .navbar ul li a:hover {
        font-size: 36px;
        background-color: azure;
        color: red;
        border-radius: 50%;
    }

    .logo {

        margin: 10px 10px;
    }

    .logo img {
        border-radius: 66%;
    }

    #mid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 2px 2px;
        height: 756px;

    }

    #mid::before {
        content: "";
        background: url(Images/food15.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        opacity: 0.66;

    }

    .heading {
        font-size: 66px;
        font-family: sans-serif;
        font-weight: bold;
        font-style: italic;
    }
 
    .btn {
        font-size: 26px;
        font-family: sans-serif;
        font-weight: bold;
        border-radius: 26px;
        background-color: chocolate;
    }

    #mid p {
        font-size: 26px
    }

    .btn:hover {
        background-color: black;
        color: azure;
        font-family: sans-serif;
        font-weight: bolder;
        font-size: 36px;
    }

    #services {
        display: flex;
        align-items: center;
    }


    
    

    .box {
        border: 6px solid rgb(143, 142, 142);
        margin: 2px 6px;
        padding: 5px 56px;
        border-radius: 16%;
    }

    .box img {
        border-radius: 26%;
        height: 226px;
        
       
    
      

    }
    .category{
      display: block;
      width: 100%;
      margin: 0px auto;
      

    }
    .item{
      padding: 1px 1px;
       
    }

 

    .item img{
        padding: 26px 1px;
        border-radius: 16%;
        display: block;
      width: 66%;
      margin: auto;

       
    }
  #headfood{
      text-align: center;
  }
  #item1{
  background-color: chocolate;
  }
  #item2{
      background-color: brown;

  }
  #item3{
      background-color: crimson;

  }
  #item4{
      background-color: tomato;

  }
  #item5{
      background-color: purple;
  }
  .foot{
      background-color: black;
      color: azure;
      text-align: center;
      padding: 0% 1px;
      font-weight: bold;
      font-size: 26px;
  }
  .foot:hover{
      font-size: 36px;
      color: red;

  }
  /* MEDIA QUERIES */
  @media (min-width:280px){
      #services{
          flex-direction: column;
          padding: 0px 300px;
         
   
     
      }
      #mid{
          padding: 0pc 300px;
          flex-direction: column;
      
      }
      .category{
          padding: 0px 66px;
      }
      .foot{
      padding: 0px 166px;
      margin: 0px 66px;
      }
      .navbar{
          flex-direction: column;
      }
  }

  
</style>

<body>
    <nav class="navbar">
        <div class="logo">
            <img src="Images/flogo3.png" alt="">
        </div>
        <ul>
            <li class="list"><a href="#">Home</a></li>
            <li class="list"><a href="#">About Us</a></li>
            <li class="list"><a href="#">My Orders</a></li>
            <li class="list"><a href="#">Why Us?</a></li>
        </ul>
    </nav>
    <section id="mid">
        <h1 class="heading">Welcome to My Food Arena</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla repudiandae earum dolore molestiae voluptas
            magnam iste ducimus eos? Harum, eveniet officiis officia sunt quos repellendus repellat.</p>
        <button class="btn">ORDER HERE</button>
    </section>

    <h1 class="heading" id="head">OUR SERVICES</h1>
    <section id="services">
        <div class="box" id="box1">
            <h1 class="heading">Food Delivery</h1>
            <img src="Images/food16.jpg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati labore esse harum aspernatur modi ipsa a, iste tempore recusandae minus, assumenda, necessitatibus cupiditate adipisci maxime optio.</p>
        </div>
        <div class="box" id="box2">
            <h1 class="heading">Come here & PickUp</h1>
            <img src="Images/food18.jpg" alt="">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis odio fugiat illum fuga consequatur, nostrum molestiae ducimus dolor beatae asperiores cumque officia veniam deserunt modi esse.</p>
        </div>
        <div class="box" id="box3">
            <h1 class="heading">Come here & Eat</h1>
            <img src="Images/food17.jpg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam laboriosam perspiciatis voluptas. Repudiandae alias suscipit tempore qui modi soluta error commodi voluptate veniam delectus! Explicabo, mollitia!</p>
        </div>

        </div>
    </section>




    <h1 class="heading" id="headfood">Food Category</h1>
    <section class="category">
        <div class="item" id="item1">
           <h1 class="heading">1. Indian Food</h1>
           <img src="Images/food2.jpg" alt=""> 
           <img src="Images/food21.jpg" alt="">
           <img src="Images/food22.jpg" alt="">
        </div>
        <div class="item" id="item2">
            <h1 class="heading">2. Italian Food</h1> 
            <img src="Images/food19.jpg" alt="">
            <img src="Images/food20.jpg" alt="">
            <img src="Images/food9.jpg" alt="">
        </div>
        <div class="item" id="item3">
            <h1 class="heading">3. Chinese Food</h1> 
            <img src="Images/food23.jpg" alt="">
            <img src="Images/food8.jpg" alt="">
            <img src="Images/food24.jpg" alt="">
        </div>
        <div class="item" id="item4">
            <h1 class="heading">4. American Food</h1> 
            <img src="Images/food26.jpg" alt="">
            <img src="Images/food27.jpg" alt="">
            <img src="Images/food1.jpg" alt="">
        </div>
        <div class="item" id="item5">
            <h1 class="heading">5. Diet Food</h1> 
            <img src="Images/food25.jpg" alt="">
            <img src="Images/food29.jpg" alt="">
            <img src="Images/food3.jpg" alt="">
        </div>
    </section>

    <footer class="foot">
        COPYRIGHT &copy; ALL RIGHTS ARE RESERVED
    </footer>




    

    

</body>

</html>