JAVASCRIPT - MINI-PROJECTS

챌린지 과제중에 계산기 만들기 과제가 있었다. 숫자를 누를때마다 화면에 출력되어야 하고 연산자를 누를때마다 계산되어야 하며 그 결과 값이 바로바로 화면에 출력되어야한다.js로 계산기 만드는 방법은 쉽게 구글링 할 수 있었지만 오로지 내 스스로의 능력으로 만들어보고 싶었

우연히 엘리님의 강의를 듣게되었는데 사소하게 보이지만 정말 중요하다고 생각했던것을 알려주고 계셨고 관심이 있어서 강의를 하나 들었다. 간단한 미니게임을 만드는 과제를 받았다. 색깔을 누를때마다 거기에 해당하는 색깔대로 list가 출력되도록 하는 웹앱이어서 쉽게 만들 수

items을 출력할 함수를 만들어 보자요런식으로 string template를 사용해 만들면 더 보기 깔끔하고 쉽다.여기서 아까 buttons를 section으로 감쌌던 이유가 나온다. 바로 이벤트 위임이라는 것 때문인데, 부모태그에 event를 설정하면 자식태그들도

얼마전 udmey에서 20가지 미니 프로젝트, 50가지 미니 프로젝트 강의를 결제했다. 그것도 매우 싼가격에! 두개 합쳐서 5만원이 안되지만 상당히 유용하고 자주쓰이는 프로젝트들을 만들면서 여러가지 문법, 기술, 아키텍쳐를 배울 수 있어서 매우 꿀인 강의다.여기서 70

회원가입에 필요한 각종 정보를 입력한다음 조건이 미달되면 에러메세지를 띄우고 조건이 통과되면 성공메세지를 띄운다.모든 조건이 통과가 되면 콘솔창에 등록완료 메세지를 띄운다.그리고 컴포넌트 형식으로 코드를 짰다. HTML 까지 다 만들고 기능까지 추가해서 App이라는 컴

movie_seats영화를 클릭하고 좌석을 클릭하면 클릭된 좌석이 표시되고 그와 함께 영화 티켓의 값도 표시된다.그리고 localStorage를 사용하기 때문에 새로고침해도 정보가 그대로 남아있다.main.jsApp.jsmovieContainer.jsresults.js

이번엔 exchange rate를 알아내기 위해서 exchange rate 사이트에서 api를 fetch해와야한다.우선 local에서 slider를 선택하면 api에서 가져온 환율을 가져와서 적용한다.그리고 input에 적힌 숫자를 그 환율과 곱해서 result를 표시

쇼핑할 아이템 이름과 가격을 타이핑 한뒤에 가격을 두배로 만들기도 하고, 합치기도 하고, 필터하기도 한다.언제나 그렇듯 데이터는 App에서 관리하고 하위 컴포넌트로 내려준다. 타이핑 될때 마다 App.state안에 아이템의 이름과 가격이 차곡차곡 저장된다.array a

https://github.com/YeonghunKO/music-player 에서 코드 확인가능.간단한 뮤직플레이어 컴포넌트를 만들어보았다.progress bar를 클릭하여 음악 재생 시점을 조절할 수 있다.음악이 끝나면 자동으로 넘어간다.inherit: 말그

https://jsonplaceholder.typicode.com/ 에서 dummy data를 받아와서 나름대로 만들어본 블로그 페이지.역시나 컴포넌트 방식으로 구현.이름 그대로 무한 스크롤 가능 검색가능(검색할때마다 자동으로 하이라이트 되며 해당 포스트만 출

간단한 기능 3가지를 구현하였다.첫번째는 카드를 누르면 늘어나는 기능,두번째는 검색 버튼을 눌렀을때 비로소 검색창이 나타나는 기능,세번째는 카드 정보 로딩되는 공간을 알려주는 스켈레톤 기능이다.코드는 여기!HTMLh3를 panel div안에 감쌌다. 그리고 panel

Netlify Statushttps://developers.themoviedb.org/4/getting-started/authorization 의 api를 이용해 영화 검색 서비스를 만들어봄.pagination 같은 경우 컴포넌트로 따로 빼서 구현하고 싶었음.