본문 바로가기

분류 전체보기

 (207)
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 ..
Knowledge Timeline (4) Responsive Media Query @media(max-width: 900px) { #timeline ul li div { width: 250px; } #timeline ul li:nth-child(even) div { left: -284px; } } @media(max-width: 600px) { #timeline ul li { margin-left: 20px; } #timeline ul li div { width: calc(100vw - 90px); } #timeline ul li:nth-child(even) div { left: 40px; } #timeline ul li:nth-child(even) div:before { left: -15px; border-width: 8px 16px 8px 0; border-color: transp..

티스토리툴바