Coding Story

스크롤링 window.addEventListener("scroll", () => { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; if (Math.round(scrollHeight - scrollTop) { loading.classList.remove("show"); setTimeout(() => { page++; showPosts(); }, 300); }, 1000); } setTimeout: 일정시간 후에 함수를 실행한다. 로딩 화면을 띄우고 난 후 setTimeout 함수로 1초 후에 로딩 화면을 지우고, 또다른 setTimeout함수를 실행해 0.3초 후에 다른 포스트들을 띄운다. Post 보여주기 async..

Typing game with Vanilla Javascript 실행화면 기능 랜덤한 단어 제시 선택한 레벨 로컬 스토리지에 저장, 새로고침해도 유지 게임 시작버튼 누르면 게임 시작 => 시간 1초씩 줄어듬 타이핑한 값이 입력 값과 같을 경우 => 점수 1증가, 레벨에 따른 시간 증가, 새로운 단어 제시, 입력창 비움 최고 기록 갱신할 경우 로컬스토리지에 저장 const wordSpan = document.querySelector(".word"); const typing = document.getElementById("typing"); const scoreSpan = document.querySelector(".scoreSpan"); const timeSpan = document.querySelector..

미니 가계부앱 with vanilla javascript 바닐라 자바스크립트로 첫번째로 선택한 프로젝트는 가계부앱! 노마드코더 투두리스트 강의때 배웠던 내용들을 응용하였고 나머지는 구글링 해가며 코딩하였다. 실행 화면 (흔한 대학생의 가계부..) 기능 수입/지출, 종류, 금액, 내용 입력하면 전체 내역란에 리스트가 등록 => classList를 사용해 +버튼을 누르면 입력창이 나타남. 밑에서 위로 올라오는 css 애니메이션 사용 => 수입/지출은 라디오 버튼, 종류는 select 태그, 금액과 내용은 input태그로 각각 type은 number, text로 지정 => 지출 체크 시 금액은 입력 값이 양수든 음수든 모두 음수로 받음 => 가격이 양수인지 음수인지에 따라 빨간색, 초록색으로 색상 다르게 출력..