JS 8일차

# Side Bar

- nav를 화면 왼쪽에 안보이게 translate 해두었다가 메뉴버튼을 클릭했을 때 왼쪽에서 나오게 한다

- nav가 나왔을 때 나머지 여백은 overlay로 덮이고, 닫기버튼이 없는 대신 overlay를 클릭하면 nav가 닫히도록 한다.

<style>
.-left-60 {
        left: -15rem;
    }
.hidden {
        display: none;
    }
</style>

<header>
    <button>&#9776;</button>
</header>
<div class="container">
    <nav class="-left-60">
        <h1>Logo</h1>
        <ul>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
        </ul>
    </nav>
    <div id="overlay" class="hidden"></div>
</div>
<main>
    <h1>Side Bar</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</main>

<script>
    let button = document.querySelector('button');
    let nav = document.querySelector('nav');
    let overlay = document.getElementById('overlay')
    button.addEventListener('click', (e) => {
        nav.classList.remove('-left-60');
        overlay.classList.remove('hidden');
    })
    overlay.addEventListener('click', (e) => {
        nav.classList.add('-left-60');
        overlay.classList.add('hidden');
    })

</script>

---

# Modal

- 다른 컨텐츠들 위에 창을 띄우는 것

- modal 창 상단의 닫기버튼이나 창을 제외한 부분을 클릭하면 닫히도록 한다

<style>
.hidden {
        display: none;
    }
</style>

<button>Open Modal</button>

<div id="modal" class="hidden">
    <div class="container">
        <span>&times;</span>
        <h1>Modal Content</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    </div>
</div>

<script>
    let button = document.querySelector('button');
    let modal = document.getElementById('modal');
    let span = document.querySelector('span');      // 닫기버튼

	// 메뉴버튼을 클릭
    button.addEventListener('click', (e) => {
        modal.classList.remove('hidden');
    })
	
    // modal창을 제외한 부분 클릭
    modal.addEventListener('click', (e) => {
        if(e.target === modal) {
            e.target.classList.add('hidden')
        }
    })
    
    // 닫기버튼 클릭
    span.addEventListener('click', (e) => {
        modal.classList.add('hidden');
    })

</script>

---

# form 예제: 유효성검사

- 앞선 예제들과 달리 버튼을 클릭하는 이벤트가 아니라 form을 submit하는 이벤트로 실행된다.

- Event.preventDefault(): 엘리먼트의 기본기능을 실행하지 않는다.

  ex) 폼을 제출하지 않음.

  AJAX 요청과 함께 사용된다

<div id="container">
    <form action="">
        <input type="text" placeholder="bunny@example.com" required>
        <button>구독하기</button>
    </form>
</div>

<script>
    let container = document.getElementById('container');
    let form = document.querySelector('form');

    form.addEventListener('submit', (e) => {
       e.preventDefault();
       // 보통은 preventDefault 다음에 AJAX를 요청한다
       container.innerHTML = '<h1>구독해주셔서 감사합니다</h1>'
    })
</script>