popup-msg/script.js at master · ajeetraj11/popup-msg · 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
86
87
88
89
90
91
92
93
94
95
96

// ......................................Dark mood.....................................


const b= document.querySelector('body')
const dark=document.querySelector('#Dark')
const main =document.querySelector('.main')
const bttn=document.querySelector('.show-botton')

dark.addEventListener("click",function(){

    this.classList.toggle('bi-moon')
     if(this.classList.toggle('bi-brightness-high-fill')){
        b.style.backgroundColor="white";
        b.style.color="black"
        b.style.transition='2s'
        main.style.background="rgba(0,0,0,0.2)"
        main.style.boxShadow="8px 8px 40px black"

     }
     else{
        b.style.backgroundColor="black";
        b.style.color="white"
        b.style.transition='2s'
        main.style.background="rgba(255, 255, 255, 0.2)"
        main.style.boxShadow="6px 6px 30px #bab9b9"
     }
})


const showbtn= document.querySelector('.show-botton')
const horizontal= document.querySelector('#horizontal')
const vertical= document.querySelector('#vertical')
const toasttype= document.querySelector('#toast-type')
const toastmsg= document.querySelector('.text-msg')
const maintoast = document.querySelector('.main-toast')
const durationtime =document.querySelector('#range')


showbtn.addEventListener("click",function(){

    // ....................................content....................................................

    if(horizontal.value==='right'){
        maintoast.classList.add('right');
     }
     else{
         maintoast.classList.remove('right');
     }
     if(vertical.value==='bottom'){
         maintoast.classList.add('bottom');
      }
      else{
          maintoast.classList.remove('bottom');
      }

 //..................................NEW-Toast.................................

    const newtoast= document.createElement('div');
    newtoast.classList.add('toast');
    newtoast.classList.add(toasttype.value);
    newtoast.innerText= ` ${toastmsg.value} `;

    maintoast.append(newtoast);

// ..................................Close-Icon....................................................

    const closeIcon= document.createElement('span');
    closeIcon.innerText='✕';

    newtoast.append(closeIcon);

    function removetoast() {
        if(maintoast.classList.contains('right')){
          newtoast.classList.add('goRight');
        }
        else{
            newtoast.classList.add('goLeft');
        }
        setTimeout(() => {
         newtoast.remove();
        }, 200);
    }

    closeIcon.addEventListener("click",function () {
     removetoast() ;
    })

    setTimeout(() => {
     removetoast() ;
    }, parseInt(durationtime.value)*1000);


})