코드스테이츠 프론트엔드 부트캠프 Day 18 - Coz' Mini Hackathon (2) 버튼 토글

이번에는 입력하는 form이 버튼 클릭을 통해 나왔다 들어갔다하도록 만들 것이다.

 

빨간 사각형 부분

 

우선 HTML과 CSS를 이용해 버튼을 하나 만들어준다.

 

<div class="header">

      <h1>My Agora States</h1>
      <button class="forFun"></button>
      <img src="jerry.png" alt="" id="jerry">

    </div>
    <div class="questionBtn"> 	<!-- 버튼 추가 -->
      <button id="toggle-form">Click this button to ask a question!</button>
    </div>

    <section class="form__container hidden">
      <form action="" method="get" class="form__get">
        <div class="form__input--wrapper">
          <div class="form__input--name">
            <label for="name" class="input-label">name </label>
            <input type="text" name="name" id="name" class="input-class" required>
          </div>
          <div class="form__input--title">
            <label for="name" class="input-label">title </label>
            <input type="text" name="name" id="title" class="input-class" required>
          </div>
          <div class="form__textbox">
            <label for="story" class="story-label">Your question </label>
            <textarea id="story" name="story" required></textarea>
          </div>
        </div>
        <div class="form__submit">
          <input id="submitBtn" type="button" value="submit">
        </div>
      </form>

    </section>

 

기본적으로 form__container 는 숨겨져있는 상태여야 하기 때문에 hidden 이라는 클래스를 추가해줬고,

CSS에서 hidden 클래스를 가진 요소에는 안 보이는 상태를 부여했다.

 

 

그리고 JavaScript를 활용해 저 버튼이 클릭될 때마다 hidden 이라는 클래스가 생겼다 사라졌다 할 수 있도록 만들어줬다.

 

// formContainer 나왔다 사라졌다 하는 코드 시작
const formContainer = document.querySelector('.form__container');
const toggleFormButton = document.querySelector('#toggle-form');

toggleFormButton.addEventListener('click', () => {
  formContainer.classList.toggle('hidden');
});
// formContainer 나왔다 사라졌다 하는 코드 끝

 

 

그냥 나왔다 들어갔다 하니까 좀 심심해서 애니메이션을 추가하고, form__container에 약간의 디자인을 했다.

 

 

h1 디자인 추가했다.