JS 9일차

# Contact

- formData 클래스를 객체화하여 absolute를 통해 값에 접근한다.

- alert 대신에 try~catch, throw를 사용하여 에러를 유도해 알림창을 띄운다

<div id="container">
    <form action="">
        <input type="text" placeholder="성함" name="name" id="name">
        <input type="text" placeholder="이메일" name="email" id="email">
        <textarea name="message" id="message" cols="30" rows="10" placeholder="메시지"></textarea>
        <button>보내기</button>
    </form>
</div>

<script>
	let form = document.querySelector('form');
        
    	form.addEventListener('submit', (e) => {
        try {
            e.preventDefault();

            let formData = new FormData(e.target);
            if(!formData.get('name')){
                throw '이름을 입력하세요';
            }
            if(!formData.get('email')) {
                throw '이메일을 입력하세요';
            }
            if(!formData.get('message')) {
                throw '메시지를 입력하세요 '
            }

            document.getElementById('container').innerHTML = '<h1>빠른 시일 내에 연락드리겠습니다.</h1>'

        } catch (err) {
            alert(err)
        }
	})
</script>

---

# Gallery

- container 부분의 사진들을 클릭했을 시 main의 src가 해당 사진의 src로 교체된다.

    <img id="main" src="C:\Users\user\Documents\frontendReview\img\고앵1.jpg" alt="">

    <div class="container">
        <img onclick="f(this)" src="C:\Users\user\Documents\frontendReview\img\고앵1.jpg" alt="">
        <img onclick="f(this)" src="C:\Users\user\Documents\frontendReview\img\고앵2.jpg" alt="">
        <img onclick="f(this)" src="C:\Users\user\Documents\frontendReview\img\고앵3.jpg" alt="">
    </div>

    <script>
        function f(el) {
            let main = document.getElementById('main');
            main.src = el.src;
        }
    </script>

---

# Carousel

- container의 display를 inline-flex로 하여 item들을 가로로 나열한다.

- wrap에 overflow를 hidden으로 지정하여 첫번째 item 외에 보이지 않게 한다

- item의 shrink를 0으로 하여 축소되지 못하게 하고  wrap에 relative, button과 indicator를 absolute하여 wrap안에 위치시킨다

- 오른쪽 button에는 1을, 왼쪽 버튼에는 -1을 적용하여 index를 카운팅할 수 있도록 만든다

- {index *  200}px로 translateX를 적용하여 버튼을 누를 때마다 아이템이 가로로 이동하면서 넘어가는 것처럼 보이게 만든다.

  이 때 translate에 붙이는 작은따옴표는 키보드 숫자 1 왼쪽에 위치한 ``로 적어주어야만 한다.

- 각 버튼은 index의 끝에서 조작하지 못하도록 display를 none으로 설정한다.

- index를 통해 item과 indicator가 클릭으로 변환되도록 만든다.

    <style>
        * {box-sizing: border-box;}
        .wrap {
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            box-shadow: 0 0 50px #888;
        }
        #container {
            width: 200px;
            height: 200px;
            display: inline-flex;
            transition: 0.2s;
        }
        .item {
            width: inherit;
            height: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }
        .nav button {
            position: absolute;
            height: 100%;
            border: none;
            background-color: transparent;
        }
        .nav #prev {
            top: 0;
            left: 0;
        }
        .nav #next {
            top: 0;
            right: 0;
        }
        .indicator {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
        }
        .hidden {
            display: none;
        }
        .active {
            color: #00f;;
        }
    </style>

    <div class="wrap">
        <div id="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
        <div class="nav">
            <button id="prev" class="hidden" onclick="f(-1)">&#10094;</button>
            <button id="next" onclick="f(1)">&#10095;</button>
        </div>
        <div class="indicator">
            <span class="dot active">*</span>
            <span class="dot">*</span>
            <span class="dot">*</span>
        </div>
    </div>

    <script>
        let index = 0;      // 함수내에서 선언되면 안됨
        let container = document.getElementById('container');
        let prev = document.getElementById('prev');
        let next = document.getElementById('next');
        let dots = document.querySelectorAll('.dot');

        function f(data) {
            index += data;

            console.log(index);

            // # 이미지 이동
            container.style.transform = `translateX(-${index * 200}px)`;

            // # 이전버튼
            if(index === 0) {
                prev.classList.add('hidden');
            } else {
                prev.classList.remove('hidden');
            }
            // # 다음버튼
            if(index === 2) {
                next.classList.add('hidden');
            } else {
                next.classList.remove('hidden')
            }

            // # indicator
            for(let dot of dots) {
                dot.classList.remove('active');
            }
            // 해당 index의 dot만 active 추가
            dots[index].classList.add('active')
        }
    </script>