Complete-Web-Development-BootCamp/practice.htm at master · SakshamAgg1709/Complete-Web-Development-BootCamp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Practice </title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

        }

        h1 {
            font-family: 'Courier New', Courier, monospace;
            background-color: blueviolet;
            border: 2px solid burlywood;

        }

        #para {
            background-color: cadetblue;
            border: 2px solid red;
            border-radius: 20px;
            font-size: 45px;
            }

            #dim{
                display: inline;
                background-color: chartreuse;
                }
    </style>
</head>

<body>
    <div id="dim"><span id="time"></span></div>
    <div class="container">
        <h1>YO YO</h1>
        <p id="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum quisquam a labore iusto! Nisi
            itaque, sint labore odio expedita vitae totam ducimus hic vero autem nihil ipsa alias eum voluptas, atque
            fugit, quidem eaque inventore perferendis voluptates? Rem, aliquam autem voluptatibus eveniet quas nihil
            voluptatem, hic sunt laudantium, maxime blanditiis.</p>
    </div>

    <button id="btn" onclick="togglehide()" mouseover="run()">Show/hide </button>


    <script>
            let para =document.getElementById('para');
      para.addEventListener('mouseover' , function run() {
          console.log('mouse inside para')
      })

      para.addEventListener('mouseout' , function run() {
          console.log('mouse now went outside');
      })


        function  togglehide() {
            let   btn =document.getElementById('btn') ;
               let para =document.getElementById('para');

               if (para.style.display != 'none') {
                para.style.display='none';
               } else {
                para.style.display='block';
               }
        }


        function uptime() {
            time.innerHTML= new Date();
        }

        setInterval(uptime, 1000);
    </script>
</body>

</html>