[JS Project 100] 4. Pass The Message

BbickBbick_Develop·2022년 6월 30일

JavaScript toy project

JS Project 100

목록 보기

4/8

문제 주소

Description

Hosted Project

Github Source Files

Project Description/Summary:

This project challenges you to select the input element's value from the DOM. When you click on the “Submit” button you'll see the message inputted in the box in the “Last Message Delivered” Section. For me this project was fairly easy. New things learned or refreshed: Just like in previous projects, I followed John's starting technique of wrapping my entire solution inside of an IIFE. Other than that, it was nice to revisit the SetTimeout function to see the different ways it can be used.

Time to code:

This took about 10 minutes to code.

Biggest take away(s):

None this project.

Your Turn!

What to accomplish:

Download the source code from the github repository above.
Delete the contents of the app.js file.
Implement the JavaScript code in your own app.js file.
Add a link to your finished project below!

What you should see:

After you enter text into the input box, upon pressing the “Enter” key, your message should show up in the “Last Message Delivered” Section.
After the “Enter” key is pressed, the text box value should return to an empty text box.
If no input is submitted, an alert should show (using the ‘show' class in the CSS file) in the “Last Message Delivered” section and then disappear after 2 second.

<!-- <head>는 생략. -->
 
<body>

 <div class="container">
  <div class="row max-height align-items-center">
   <div class="col-10 mx-auto col-md-8 message-container text-center p-3">
    <h4 class="text-capitalize">메세지를 전달해 봅시다.</h4>
    <form id="message-form">
     <input type="text" name="" id="message" class="w-100 my-3 p-2">
     <input type="submit" id="submitBtn" class="btn btn-lg">
    </form>
    <h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">여기에 메세지를 입력하세요.</h5>
    <h4 class="text-capitalize my-3">마지막으로 받은 메세지</h4>
    <h4 class="message-content text-uppercase">아직 받은 메세지가 없습니다.</h4>

   </div>
  </div>
 </div>

 <script>

    // 메세지 폼을 가져옴(id에서)
   
    const form = document.querySelector('#message-form')
   
    // Text 전달하는 함수 생성
   
    function printText(event){
   
   	  // form의 기본 기능이 새로고침이므로 기본 기능을 꺼줌
   
      event.preventDefault();
   
      // message와 feedback, messageContent를 선언
      const message = document.querySelector('#message')
      const feedback = document.querySelector('.feedback')
      const messageContent = document.querySelector('.message-content')
   
      // message의 값이 없다면 feedback에 저장되어 있는 경고 문구를 보여줌.
   
      if (message.value === ''){
   
          feedback.classList.add('show')
   
          // 그리고 몇 초 후에 사라지게 함.
   
          setTimeout(function(){
          feedback.classList.remove('show')
          }, 2000)
   
      } else {
   
          // 메세지 값이 있다면 받은 메세지를 표시하고, 메세지 입력 창을 비워줌.
   
          messageContent.textContent = message.value
          message.value = ''
      }  
    }
    // addEventListener 생성
    form.addEventListener('submit', printText);
 </script>
</body>