Javascript

//두번째 이미지 선택
document.querySelector("#sample1 .btn1").addEventListener("click", function(){
    document.querySelector("#sample1 .view2").classList.add("selected");
});
document.querySelector("#sample1 .btn2").addEventListener("click", function(){
    document.querySelector("#sample1 .view2").classList.remove("selected");
});

//모든 이미지 선택 forEach 
document.querySelector("#sample1 .btn3").addEventListener("click", function(){
    document.querySelectorAll("#sample1 .view > div").forEach(function(el){
        el.classList.add("selected");
    });
});    
document.querySelector("#sample1 .btn4").addEventListener("click", function(){
    document.querySelectorAll("#sample1 .view > div").forEach(function(el){
        el.classList.remove("selected");
    });
});    

//리셋
document.querySelector("#sample2 .btn0").addEventListener("click", function(){
    document.querySelectorAll("#sample2 .view > div").forEach(function(el){
        el.classList.remove("selected");
    });
});

//이 버튼을 클릭(selected)하면 두번째 이미지가 선택 또는 해제됩니다.
document.querySelector("#sample2 .btn1").addEventListener("click", function(){
    document.querySelector("#sample2 .view2").classList.toggle("selected");
});

//이 버튼을 클릭(selected)하면 모든 이미지가 선택 또는 해제됩니다.
document.querySelector("#sample2 .btn2").addEventListener("click", function(){
    document.querySelectorAll("#sample2 .view > div").forEach(function(el){
        el.classList.toggle("selected");
    });
});
//숙제
//각각의 이미지를 클릭하면 이미지를 선택 또는 해제
document.querySelectorAll("#sample2 .view > div").forEach(function(el){
    el.addEventListener("click", function(){
        el.classList.toggle("selected");
    });
});

document.querySelector("#sample3 .btn0").addEventListener("click", function(){
    document.querySelector("#sample3 .view2").classList.add("selected");
    document.querySelector("#sample3 .view4").classList.add("selected");
    document.querySelector("#sample3 .view6").classList.add("selected");
    document.querySelector("#sample3 .view2").classList.remove("blue");
    document.querySelector("#sample3 .view4").classList.remove("blue");
    document.querySelector("#sample3 .view6").classList.remove("blue");
});

//이 버튼을 클릭하면 선택된 클래스(selected)를 찾은 후 클래스를 삭제합니다.
document.querySelector("#sample3 .btn1").addEventListener("click", function(){
    document.querySelectorAll("#sample3 .view > div").forEach(function(el){
        if(el.classList.contains("selected")){
            el.classList.remove("selected");
        }
    });
});

//이 버튼을 클릭하면 선택된 클래스(selected)를 찾은후 파란색으로 변경합니다.
document.querySelector("#sample3 .btn2").addEventListener("click", function(){
    document.querySelectorAll("#sample3 .view > div").forEach(function(el){
        if(el.classList.contains("selected")){
            el.classList.toggle("blue");
        }
    });
});