[TIL] Movie Seat Booking project

강의 출처 : Udemy 20projects js - Brad Traversy

Movie Seat Booking Project

HTML Part

Option

option tag? select, optgroup, datalist 요소의 항목을 정의한다.

<label>Pick a movie: </label>
<select id ="name">
	<option value ="10">Avengers Endgame ($10) </option>
    <option value ="12">Joker ($12) </option>
    <option value ="8">Tody Story ($8) </option>
</select>

CSS part

appearnce

appearnce? 요소 자체 구성 요소 숨기는 기능 수행 가능 ex) select 화살표 제거

select{
	-moz-appearance : none; /*fire fox*/
    	-webkit-appearnce : none; /*safari and Chrome*/
        appearance : none; /*화살표 없애기 공통*/
        }

perspective

perspective? determines the distance between the z=0 plane and the user in order to give a 3D-positioned delement some perspective

.container{
	perpective : 1000px};

not()

class가 없는 element에 효과를 주고 싶을 때

.seat:not(.occupied):hover{
	cursor : pointer;
    	transform : scale(1.1);}

list-style-type

list의 style type을 지정한다.

JS part

숫자화 하기

parseInt, Number 말고도 숫자 모양을 가진 string을 숫자화 하고 싶다면, 앞에 +를 붙혀주면 된다.

const movieSelect = document.querySelector('select#movie');
let ticketPrice = +movieSelect.value;

contains()

contains? 해당 class가 있는지 확인한다. 불리언 값을 리턴.

if(event.target.classList.contains('seat') && 
!event.target.classList.contains('occupied')){
	event.target.classList.toggle('selected');}

change event

해당 요소에 변화가 일어났을 때 발생시키는 이벤트.

selectedIndex

HTMLSelectedElemet.selectedIndex?
selected option element를 리턴한다.

let selectElem = document.getElementById('select')
let pElem = document.getElementById('p')

// When a new <option> is selected
selectElem.addEventListener('change', function() {
  let index = selectElem.selectedIndex;
  // Add that data to the <p>
  pElem.innerHTML = 'selectedIndex: ' + index;
})

[...arr]

[...arr]? 해당 배열(arr)을 복사한다.

Local Storage

local Storage의 큰 로직
1. 아이템들을 저장한다. (여러개인 경우 JSON.stringfy를 이용하여 배열의 형태로 저장)
2. getItem을 이용하여 아이템들을 가져온다.
3. 아이템이 여러개라면 forEach를 이용하여 해당하는 아이템 하나하나 원하는 효과를 넣어준다. (forEach는 item 뿐만아니라 index 등도 가져올 수 있다는 점 기억할 것!)