본문 바로가기

Mini Projects

 (66)
Movie Seat Booking (2) - CSS colors 색깔과 사용할 폰트만 가져왔다. 내일 나머지는 혼자 만들어 보려고! @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { box-sizing: border-box; } body background-color:#242333; color:#fff; font-family:'Lato', sans-serif; .movie-container select background-color:#fff; .seat background-color:#444451; seat.selected #6feaf6; .seat.occupied #fff; .showcase background:rgba(0,0,0,0.1); color:#777; .screen ..
Movie Seat Booking (1) HTML Pick a movie: Avengers: Endgame ($10) Joker ($12) Toy Story 4 ($8) The Lion King ($9) N/A Selected Occupied You have selected 0 seats for a price of $0 body의 첫번째 div에는 movie-container가 들어간다. 영화 선택 섹션인데 label에 Pick a Movie: 를 넣어준다. 그리고 select 태그 > option 태그 (영화 4~5개 정도). option 태그의 value 값에도 영화 가격을 넣어줬다. body의 두번째 div에는 showcase가 들어간다. 각 자리 색깔의 의미 showcase는 ul 각 자리는 li li 속 div와 small 태그 body의 세번..
Form Validator (5) - Logic 정리 const form = document.getElementById("form"); const username = document.getElementById("username"); const email = document.getElementById("email"); const password = document.getElementById("password"); const password2 = document.getElementById("password2"); - form 전체와 username, email, password, password2의 input창을 받아온다. //Event Listeners form.addEventListener("submit", function (e) { e.preventDef..
Form Validatior (4) - Check Length, Email & Password match // Event listeners form.addEventListener('submit', function(e) { e.preventDefault(); checkRequired([username, email, password, password2]); checkLength(username, 3, 15); checkLength(password, 6, 25); }); // Check input length function checkLength(input, min, max) { if (input.value.length < min) { showError( input, `${getFieldName(input)} must be at least ${min} characters` ); } else if (input.va..
Form Validator (3) - Check Required & Refactor make event listener cleaner //Event Listeners form.addEventListener("submit", function (e) { e.preventDefault(); checkRequired([username, email, password, password2]); }); make checkRequired function // Check required fields function checkReuqired(inputArr) { inputArr.forEach(function (input) { if (input.value === "") { showError(input, `${getFieldName(input)} is required`); } else { showSuccess..
Form Validator (2) - Add Simple Validation get Elements const form = document.getElementById("form"); const username = document.getElementById("username"); const email = document.getElementById("email"); const password = document.getElementById("password"); const password2 = document.getElementById("password2"); Add Event Listeners //Event Listeners form.addEventListener("submit", function (e) { e.preventDefault(); if (username.value ===..
Form Validator (1) HTML & Base CSS Register With Us Username Error message Email Error message Password Error message Confirm Password Error message Submit @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); :root { --success-color: #2ecc71; --error-color: #e74c3c; } * { box-sizing: border-box; } body { background-color: #f9fafb; font-family: 'Open Sans', sans-serif; display: flex; align-items: center; ..
Knowledge TimeLine (5) Scroll in Animation const items = document.querySelectorAll('#timeline li'); const isInViewport = el => { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom { if (isInViewport(item)) { item.classList.add('show'); } }); // Events window.addEventListener('load', run); window.addEventListener('resize', run); window.addEventListener('scroll', run); /* Boxes */ #timeline ul ..

티스토리툴바