토스트 메시지 숨기기

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

챌린지

쉬움

3초 후 토스트 메시지 숨기기.

토스트 메시지가 영원히 남아 있는 것을 원하지 않으므로, 짧은 지연 시간 후에 숨겨보겠습니다:

setTimeout()을 사용하여 3초의 지연 시간을 만듭니다.
타임아웃 함수 내부에서 toast 요소에 "hidden" 클래스를 추가합니다.
또한 toast 요소에서 "show" 클래스를 제거하여 부드럽게 사라지도록 합니다.

직접 해보기

<!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>

  <!-- Toast -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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