상세 컨텐츠

본문 제목

[TIL] 2024.01.11

[TIL]

by 재호링 2024. 1. 11. 23:27

본문

오늘 한 일

  • git 팀 회의 협업
  • git stash
  • git branch -d 와 -D의 차이
  • git checkout
  • 팀 프로젝트

팀 프로젝트

dev에 수정된 파일을 

내 브랜치에 pull해서 받아왔다.

 

내가 맡은 기능은 리뷰작성기능

리뷰를 작성 할 수 있는 

reviewSection을 작성해

input을 받아올 수 있게

<div>로 묶어주고

<label>과 <input> <button> 태그를 생성해

카드를 담을 수 있는 section을 제작했다.


      <section id="reviewSection">
        <h2>영화 리뷰 작성</h2>
        <div class="reviewForm">
          <label for="authorName">작성자</label>
          <input type="text" id="authorName" />
 
          <label for="reviewText">리뷰 내용</label>
          <textarea id="reviewText" rows="4"></textarea>
 
          <label for="confirmPassword">확인 비밀번호</label>
          <input type="password" id="confirmPassword" />
 
          <button class="submitReviewBtn" onclick="submitReview()">리뷰 작성</button>
        </div>
      </section>
 

 

이제 이 내용에 인풋을 받아온 내용을

script에서 버튼이 누르면 localStorage에 저장되면서

리뷰가 작성된 카드가 나와야된다.

const submitReview = () => {
  const authorName = document.getElementById("authorName").value;
  const reviewText = document.getElementById("reviewText").value;
  const confirmPassword = document.getElementById("confirmPassword").value;

// input을 전부 입력해야 실행됨. 하나라도 비었을 경우 경고창 표시
  if(authorName && reviewText && confirmPassword) {
    const reviewCard = {
      author: authorName,
      text: reviewText,
      password: confirmPassword,
    };

  } else {
    alert('');
  }  
};

 

먼저 id끼리 매핑을 시켜줬다.

이번에는 input 에서 입력받은 값을 script로

가져와야하기때문에 getElementById로 id요소를 매칭시키고 .value를 사용해줬다.

 

근데 예외처리를 해줘야겠다는 생각이 들어 if문으로

조건을 걸어줬다. 만약에 인풋에 값이 안들어온다면 

알럿에 오류표시를 떠주는 코드까지 작성했다.

'[TIL]' 카테고리의 다른 글

[TIL] 2024.01.15 팀 과제 리뷰 삭제  (1) 2024.01.16
[TIL] 2024.01.12 팀 과제  (0) 2024.01.12
[TIL] 2024.01.10  (0) 2024.01.10
[TIL] 2024.01.09  (0) 2024.01.09
[TIL] 2024.01.05 영화 API 기반 개인 프로젝트  (2) 2024.01.05

관련글 더보기