사전캠프 15일차

JQuery

스파르타 플릭스에서 했던 것 복습

<div class= "mypostingbox">

영화 기록하기 태그에 이미 hey 함수가 포함되어 있다.영화 기록하기 버튼을 누르면 포스팅박스가 나왔다가 사라졌다가 해야한다.

영화 기록하기 버튼에 이미 hey라는 함수가 매칭이 되어 있는데 킹덤 제목에 id를 넣어놔서 킹덤에는 지워준다.
그리고 hey는 이름이 불분명해서 openclose로 바꿔준다.
포스팅박스에 id값을 주기

<div class="mypostingbox" id= "postingbox"

script 함수에 hey라고 적은 곳에 openclose로 바꿔준다.

<script>
        function openclose() {
            $('#postingbox').toggle();
        }
    </script>  

중간에 실수

<div class="mypostingbox" id="postingbox"></div>
이렇게 했다가 포스팅 박스가 완전 길게 나와서 당황했다...
맨 뒤에 </div> 이거 지우니까 원래대로 돌아가서 다행이다.

스타플리스 카드 붙이기

순서
주소와 제목 추천인 이유

기록하기 버튼

<button onclick="makeCard()" type="button" class="btn btn-danger">기록하기</button>
함수  만들어 주기

function makeCard() {
            alert('확인');
}// 창이 뜨면 제대로 된거 ..
그리고 영화 이미지 주소, 제목, 에 있는 id 값 이름만 바꿔주기
별점은 나중에 

input에 추천이유 id 값 comment로 바꾸기

이미지 주소,타이틀,제목 값

 function makeCard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let comment = $('#comment').val();
        }
원래는 alert했는데 
 console.log()로 하기

그리고 박스안에 글을 적은 다음 기록하기 누른 다음
페이지 검사해서 console 로 되어 있는 거 확인
별점 어떻게 가지고 오는지

별점은

<select class="form-select" id="inputGroupSelect01">/// 이거 지우고 star로 바꾸기
                <option selected>별점선택</option>
         <option value="1">⭐</option>
         <option value="2">⭐⭐</option>
         <option value="3">⭐⭐⭐</option>
         <option value="4">⭐⭐⭐⭐</option>
         <option value="5">⭐⭐⭐⭐⭐</option>
            </select>

앞에서 함수 주던대로 일단 해보기
그리고 별점을 선택한 다음 기록하기 누르기
그러면 console에 4가 나옴

<option value="5">⭐⭐⭐⭐⭐</option>
            </select> // 에서 5 대신 
<option value="<option value="5">⭐⭐⭐⭐⭐</option>
            </select>">⭐⭐⭐⭐⭐</option>
            </select>
이렇게 하면 console에  ⭐⭐⭐⭐⭐  가 나온다

숫자 대신에 별을 넣어주면 직관적으로 해결이 된다.

다른 방법 도 있다.
2가 되면 별을 두번 반복해라 라는 것도 있는 데
쉬운 방법으로 해결함

이제 카드 만들어서 붙이면 끝

let temp_html =``;

벡틱 사이에 카드 html
col이 카드 한장을 가리킴
col 복사해서 벡틱 뒤에 붙여넣기
( 줄이 안 맞으면 엔터하기 )
영화 제목이랑 별 ,영화 코멘트 대신 위에 makeCard에서 만들었던 거 넣어주기

function makeCard() {
            let image = $('#image').val();
            let title = $('#title').val();
            let comment = $('#comment').val();
            let star = $('#star').val();

            let temp_html =`
            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"  // 이미지 주소 빼고 ${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>`;

temp_html은
div class ="my cards" 밑에 div 다음 id="card"
를 넣어준다.
그리고

 $('#card').append(temp_html);
 }