Javascript/ClassList.js at main · Anilnayak126/Javascript · 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
// ClassList = Element property in javascript used  to interact
//             with an Element's list of classes (css Classes)
//             Allows you to  make reusable classes for  many elements
//             across ur WebTransportDatagramDuplexStream.

// add()
// remove()
// toggle(remove if  present , add if not)
// replace(oldClass, newClass)
// contains()


// Remove--- ADD----------------------------------------
// const mybtn = document.getElementById('mybtn');
// let my_h1 = document.getElementById('Myh1');
// my_h1.classList.add('enable')

// mybtn.classList.add('enable');
// mybtn.classList.remove('enable');


// mybtn.classList.add('hover')

// mybtn.addEventListener('mouseover',event =>{
//     event.target.classList.add('hover');
// });
// mybtn.addEventListener('mouseout',event=>{
//     event.target.classList.remove('hover');
// })


//---------------------------------- Repalce

// mybtn.classList.add('enable');

// mybtn.addEventListener('click',event =>{

//     if(event.target.classList.contains('disable')){
//         event.target.textContent += "❤️"
//     }
//     else{

//         event.target.classList.replace('enable','disable')
//     }
// });
// my_h1.addEventListener('click',event =>{

//     if(event.target.classList.contains('disable')){
//         event.target.textContent += "❤️"
//     }
//     else{

//         event.target.classList.replace('enable','disable')
//     }
// });


// --------------------cHALLENGE---------------------------

const mybtns = document.querySelectorAll('.mybtn');

mybtns.forEach(btn =>{
    btn.classList.add("enable")
});

mybtns.forEach(btn => {
    btn.addEventListener('mouseover',event =>{
        event.target.classList.toggle('hover')
    })
})

mybtns.forEach(btn =>{
    btn.addEventListener('click', event =>{
        if(event.target.classList.contains('disable')){
            event.target.textContent += '😍'
        }
        else{

            event.target.classList.replace('enable','disable')
        }
});
});