Level 1 : 6~12 (숙제 및 깨달은 점)

6. form과 input 값이 비었을 때 얼럿 띄우고 submit막기

document.querySelector('form').addEventListener('submit', function(e){
    if (document.querySelector('input[type=text]').value == '') {
        alert(`아이디를 입력하세요.`);
        e.preventDefault();
    } else {
        document.querySelector('input[type=text]').submit;
    };

    if (document.querySelector('input[type=password]').value == '') {
        alert(`비밀번호를 입력하세요.`);
        e.preventDefault();
    } else {
        document.querySelector('input[type=password]').submit;
    };
})

깨달은 점 : button type을 submit으로 두면 클릭했을 시 form action="link"로 전송이 된다. preventDefault를 사용하면 브라우저가 해당 이벤트의 기본 동작을 실행하지 않도록 지정할 수 있다 (여기서는 submit하지 않도록 지정)

7. input 값이 변할 때마다 콘솔 찍기

document.querySelector('#email').addEventListener('input', function(){
    console.log(`값이 변했다`)
})

깨달은 점 : addEventListener 파라미터를 input으로 두면 해당 input 값이 바뀔 때마다 실행된다. change로 두면 해당 값이 바뀌고 포커스를 잃을 때 실행된다.

8. 3의 배수일 때 박수 치기

document.querySelector('#getnumber').addEventListener('input', function(){
    if((document.querySelector('#getnumber').value % 3) == 0) {
        console.log(`박수!`);
    } else {
        console.log(`통과`);
    }
})

9. 3의 배수일 때 박수 한번 / 9의 배수일 때 두번 치기

document.querySelector('#getnumber').addEventListener('input', function(){
    if((document.querySelector('#getnumber').value % 9) == 0) {
        console.log(`박수 X 2!`);
    } else if((document.querySelector('#getnumber').value % 3) == 0) {
        console.log(`박수!`);
    } else {
        console.log(`통과`);
    }
})

10. 점수가 둘 중 하나라도 40점 미만일 시 불합격, 두 점수의 합이 120 이상일 시 합격 띄우기

function passOrfail(a, b){
    if(a < 40 || b < 40) {
        console.log(`불같은 합격`);
    } else if((a + b) >= 120) {
        console.log(`합격`);
    } else {
        console.log(`불같은 합격`);
    }
}

11. 클릭할 때마다 다크모드 버튼 텍스트 변경하기

let btnMode = document.querySelector('.bg-dark');
btnMode.addEventListener('click', function(){
    if (btnMode.innerHTML == 'Dark 🔄') {
        btnMode.innerHTML = 'Light 🔄';
    } else {
        btnMode.innerHTML = 'Dark 🔄';
    }
})

12. 클릭할 때마다 다크모드 버튼 텍스트 변경하기

let btnMode = document.querySelector('.bg-dark');
let btnCount = 1;
btnMode.addEventListener('click', function(){
    if (btnCount % 2 == 0) {
        btnMode.innerHTML = 'Dark 🔄';
    } else {
        btnMode.innerHTML = 'light 🔄';
    }
    btnCount += 1;
})

깨달은 점 : 홀/짝 검사는 % 2 했을 시 나머지값으로 검사한다. a += 1;을 하면 a에 1을 더한다. (a++;, a = a+1; 도 같은 동작을 한다.)

---

출처 : 코딩애플 https://codingapple.com/