이번에 스파르타 플릭스에 JQuery를 적용하여 새로운 기능을 추가할 것이다.
1. 포스팅박스 숨기기
진행하기전에 꼭 head title 태그 아래에 추가하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
main div 태그에서 영화기록하기 버튼에 onclick 추가하기
<button onclick="openclose()" type="button" class="btn btn-outline-light">영화 기록하기</button>
mypostingbox div 태그에 id="postingbox" 추가하기
<div class="mypostingbox" id="postingbox">
scipt 태그 생성 및 onclick="openclose()" 에 대한 메서드 생성
토글 달아주기
<script>
function openclose(){
$('#postingbox').toggle();
}
</script>
클릭 전(왼쪽)후(오른쪽) 사진
2. 카드만들기
mypostingbox 클래스 id="postingbox" 추가
각 input 태그에 id 추가
id="image"
id="title"
id="star"
id="comment"
옵션 value값 ⭐ 로 개수에 따라 바꿔주기
마지막으로 기록하기 버튼 onclick="makeCard()" 만들기
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<option selected>별점선택</option>
<option value="⭐">⭐</option>
<option value="⭐⭐">⭐⭐</option>
<option value="⭐⭐⭐">⭐⭐⭐</option>
<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="comment" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<button onclick="makeCard()" type="button" class="btn btn-danger">기록하기</button>
</div>
onclick="makeCard()" 에 대한 메서드 만들기
위에서 추가한 id의 데이터를 받을 변수 생성
let image = $('#image').val();
let title = $('#title').val();
let star = $('#star').val();
let comment = $('#comment').val();
여기서 꼭 #붙여야 한다. 이것때문에 30분동안 데이터가 안들어와서 찾느라고 고생많이 했다. 꼭 습관화!
let temp_html = ` ` 생성
mycards 클래스 태그 아래에 있는 div 태그에 id 넣어주기
<div calss="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
아래의 내용을 복사해서
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
let temp_html = ` ` 에 추가해주고 각 위치에 맞게 변수를 수정해주면 완성
function makeCard() {
let image = $('#image').val();
let title = $('#title').val();
let star = $('#star').val();
let comment = $('#comment').val();
//console.log(image, title, comment);
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
알맞게 정보를 넣어주고 기록하기!
완성!
두개의 프로젝트에 JQurey를 적용하여 웹페이지의 움직이는 기능들을 추가해보았다. 에러로 문제를 해결하면서 JQuery를 사용하는것이 자연스러워 졌다. 역시 코딩의 시작은 에러다!
