learnJavaScript/notification.html at main · mikebars1995/learnJavaScript · 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
<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="notification.css">
</head>

<body>

    <h2>Уведомление находится справа</h2>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod
        voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime
        necessitatibus beatae labore soluta voluptatum
        magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit
        impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt
        aut iure ipsum officiis soluta
        temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo
        sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.
    </p>

    <script>
        function showNotification({ top = 0, right = 0, className, html }) {
            let div = document.createElement('div')
            div.className = "notification"
            if (className) {
                div.classList.add(className)
            }
            div.style.top = top + 'px'
            div.style.right = right + 'px'
            div.innerHTML = html
            document.body.append(div)
            setTimeout(() => div.remove(), 1500)

        }

        // test it
        let i = 1;
        setInterval(() => {
            showNotification({
                top: 10,
                right: 10,
                html: 'Hello ' + i++,
                className: "welcome"
            });
        }, 2000);
    </script>


</body>

</html>