토스트 메시지 표시하기

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 11번째.

챌린지

쉬움

제출 시 성공 메시지를 표시하는 폼을 만드세요. 제출이 성공했다는 토스트 메시지가 나타나고 3초 후에 사라져야 합니다.

JavaScript에서 완료해야 할 단계:

이벤트 리스너 추가:
- form 요소를 가져와 변수에 저장합니다.
- toast 요소를 가져와 변수에 저장합니다.
- 폼에 "submit" 이벤트 리스너를 추가합니다.
이벤트 리스너 내부:
- event.preventDefault()를 사용하여 페이지가 새로고침되는 것을 방지합니다.
- "show" 클래스를 추가하여 토스트를 표시합니다.
- 토스트에서 "hidden" 클래스를 제거합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Form with Toast</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <button type="submit">Submit</button>
    </form>
  </div>

  <!-- 토스트 -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

  <script src="script.js"></script>
</body>
</html>