바닐라JS 프로젝트
1.[바닐라자바스크립트] form validator - html
거의 대부분 프로젝트를 리액트로 하다보니 자바스크립트의 기본 구현 과정을 알아야할 것 같아서 바닐라 자바스크립트 미니 프로젝트를 시작하게 되었다! 클린코딩이지만, 바닐라 자바스크립트 코드를 하나씩 배워가고 있는 것 같다.<html> : HTML이 작용하는 범위를
2.[바닐라자바스크립트] form validator - css
index.html에서 사용한 class, id를 style.css에서 사용하는 방법과 css에 어떤 요소가 있었는지 기억하기 위해서 정리해보자!!@import를 통해서 적용하고 싶은 글씨체를 적용할 수 있다!CSS 규칙을 적용할 요소를 정의\* : 전체 선택자. :
3.[바닐라자바스크립트] form validator - javascript
동적인 행위를 추가하기 위해 script.js 추가!!querySelector : 노드의 하위 트리에서 첫 번째로 일치하는 element 노드를 반환querySelectorAll : 노드의 하위 트리 안에서 일치하는 모든 element를 포함한 nodelist 반환ge
4.[바닐라자바스크립트] custom video player - html
동영상 재생을 위한 뼈대 구현을 위한 index.html작성!!<link> : 외부 리소스 연결 요소스타일 시트를 연결할 때 제일 많이 사용!이번 코드에서도 FontAwesome 아이콘 라이브러리의 스타일시트를 웹페이지에 추가하는 코드로 사용됨 => 해당 버전의
5.[바닐라자바스크립트] custom video player - css
비디오 재생 화면창의 디자인을 위해 CSS 추가!지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분터치스크린 등 같이 실행 중인
6.[바닐라자바스크립트] exchange rate calculator - html, css
환율 API를 활용해서 알고싶은 통화의 환율을 보여주는 사이트 제작다양한 나라의 통화를 담다보니 select코드가 길어졌다. 이제 class와 id 작성을 위한 단축 코드가 익숙해졌다!:root에서는 전역으로 사용할 색깔을 정의해서 사용했다.currency-select
7.[바닐라자바스크립트] exchange rate calculator - javascript
이번 프로젝트에서는 외부 api를 가져와서 환율을 계산하는 방법을 사용했다.기존 강의에서는 fetch를 사용하는 방법을 알려주었다. axios라이브러리는 사용해봤는데 fetch는 처음 사용해보아서 fetch와 axios도 정리해보고자 한다.fetch는 웹 브라우저와 N
8.[바닐라자바스크립트] DOM Array Methods - html, css
버튼을 통해 데이터들을 조작할 수 있는 미니 프로젝트를 구현해보기!ADD USERDOUBLE MONEYSHOW ONLY MILLIONAIRESSORT BY RICHESTCALCULATE WEALTH데이터는 API를 통해 끌어오기!이번 프로젝트 공부하면서 HTML, CS
9.[바닐라자바스크립트] DOM Array Methods - javascript
https://randomuser.me/api를 통해 랜덤 유저의 정보를 가져오는 코드async await를 이용해서 구현newUser객체를 생성해서 data배열에 추가하기생성된 newUser객체를 data배열에 추가하는 메서드새로운 객체가 생성되거나, 정렬하
10.[바닐라자바스크립트] Menu slider modal - html
이번 프로젝트에서는 웹페이지에서 흔히 볼 수 있는 메뉴 모달창을 만드는 실습을 진행해보고자 한다!lorem해당 코드를 통해서 무작위로 원하는만큼 문자열을 뽑아낼 수 있다!