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

1. 폰트사이즈 변경하기

document.getElementById('hello').style.fontSize = '16px

---

2. 알림창 열기/닫기

let alertBox = document.getElementsByClassName('alert-box');
let openBtn = document.getElementsByClassName('open');
let closeBtn = document.getElementsByClassName('close');

openBtn[0].addEventListener("click", function() {
    alertBox[0].style.display = "block";
})
closeBtn[0].addEventListener("click", function() {
    alertBox[0].style.display = "none";
})

깨달은 점 : getElementsByClassName으로 가져온 요소는 배열이므로 [0]을 추가해줘야 인식된다.

---

3. 알림창 열기/닫기 및 알림창 텍스트 변경하기

let alertBox = document.getElementById('alert');
function alertBtn(styleDisplay, innerText) {
    alertBox.getElementsByTagName('p')[0].innerHTML = innerText;
    alertBox.style.display = styleDisplay;
}

깨달은 점 : innerHTML은 안에 있는 태그 전체를 포함해 변환해버린다. getElementsByTagName으로 특정해서 바꿔주었다.

---

4. 네비게이션 바 햄버거 버튼 구현하기

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
    document.getElementsByClassName('list-group')[0].classList.toggle('show');
})

깨달은 점 : element.className += ''는 클래스명에 문자열을 입력하는 것이므로 클릭할 때마다 반복해서 추가되며 문자 옆에 스페이스를 입력해야 한다. element.classList.add('')는 계속 클릭하더라도 클래스가 한 번만 나타난다. element.classList.toggle('')는 클릭시 토글된다.

---

5. 모달팝업 구현하기

document.querySelector('#modal-btn').addEventListener('click',modalToggle);
document.querySelector('#close').addEventListener('click', modalToggle);

function modalToggle() {
    document.querySelectorAll('.black-bg')[0].classList.toggle('show');
}

---

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