# javascript30
[JavaScript30] Day1: JavaScript Drum Kit
주어진 html 코드는 대략 이런 구조다.css 코드는 .key의 transition 속성, .playing의 transform 속성을 유의해서 보자.강의 들으면서 이 부분을 구현한 것.위의 코드를 추가해서 지정된 키 외의 다른 키는 무시되도록 했다. return문을
[JavaScript30] Day0: 30 days vanilla JS coding challenge
현업에 계시는 분들의 조언을 들어보면 공통적으로 '구현 연습'의 중요성을 강조하신다. 이론을 배우는 것도 결국은 만들고자 하는 것을 실제로 구현하기 위함이니까. 그런데 참 구현이라는 게 어렵다. 과제가 주어지면 일단 막막하다. 배우긴 배웠는데.. 이걸 어떻게 쓰지?예제
30. 두더지 잡기 🔨
두더지 잡기 게임을 만들어 보자.강의랑 비슷한 구성으로 만들었다. 강의 자료에는 흙 모양 배경이 hole 요소의 after로 들어가 있었는데 나는 hole 아래에 dirt와 mole을 따로 배치하고 absolute로 위치를 지정해 줬다.버튼을 누르면 게임이 시작되고,
29. 카운트다운 타이머 ⏱
원래 28일차를 할 차례지만 이전에 비디오 플레이어를 만들며 구현했던 내용이라 건너뛰었다.카운트다운과 예상 종료 시간을 표시해 주는 타이머를 만들어 보자.강의와 동일하게 시간 프리셋 버튼과 남은 시간, 예상 종료 시각을 표시하는 부분으로 나누었다.타이머를 시작하면 우선
27. 밀어서 스크롤 🖱
드래그로 화면을 밀어서 스크롤하는 기능을 만들어 보자.사진을 모아볼 수 있는 갤러리 느낌의 페이지로 만들어 보았고 사진은 picsum.photos에서 랜덤으로 받아왔다.드래그를 감지해야 하기 때문에 마우스를 클릭하는 순간 드래그 중이라는 것을 저장해놓고 클릭한 위치를
26. 드롭다운 박스 🗃
드롭다운 메뉴의 배경에 애니메이션을 추가해 보자.헤더, 내비게이션 바, 메인 이미지 및 텍스트로 구성된 페이지를 만들었다.22일차 과제에서 비슷한 작업을 한 적 있기 때문에 그 때 사용했던 방식을 이용했다.메뉴에 마우스를 올리면 해당 메뉴의 드롭다운 박스 정보를 받아온
25. 이벤트 전파 📢
강의에서 소개하는 이벤트 전파에 관련된 사항을 정리해 보자.본론으로 들어가기 전에 우선 함수에서 this를 처리하는 방식을 간단히 살펴보려고 한다.페이지는 총 3개의 div가 중첩된 구조이며(body > .one > .two > .three) 마우스 버튼을 누를 때는
24. 스티키 내비게이션 📌
스크롤 위치에 따라 화면 위쪽에 고정되는 내비게이션 바를 만들고 고정된 상태에서만 특정 버튼이 나타나도록 만들어 보자.강의에서 HTML과 CSS 파일을 제공해서 남은 JS 파일만 직접 완성해서 기능을 만들어 보았다.헤더가 50vh로 설정되어 있어 스크롤이 화면의 50%
22. 링크 하이라이트 🖍
링크에 마우스를 올리면 하이라이트가 따라오도록 만들어 보자.강의에서 준 자료를 활용했고, 강의에서는 하이라이트를 span으로 생성했지만 나는 HTML에 div로 만들어 두었다.이번에도 코드가 단 17줄이다. a 태그를 모두 찾고 마우스가 들어왔을 때 호버 이벤트를 발생
18. 시간 덧셈 🕗
동영상의 길이를 모두 더해서 출력해 보자.위와 같은 식으로 구성된 HTML에서 시간을 추출해서 더하면 된다.우선 li를 모두 추출한 다음 배열로 만들어서 data-time을 담은 배열을 만들었다. querySelectorAll은 선택자에 해당하는 요소를 모두 담은 No
17. 밴드 정렬 🎸
관사(A, An, The)를 제외하고 알파벳순으로 정렬해 보자.(오늘 과제가 짧기도 했고 내일은 공휴일이니 쉬고 싶어서 내일 과제를 미리 해버렸다 😉)알파벳순/역순, 관사를 포함할지 여부를 선택할 수 있도록 버튼을 만들고 아래에 리스트 형식으로 밴드 이름을 나열하였다
16. 그림자 쇼 💡
마우스가 움직이는 것에 맞추어 그림자가 움직이도록 해 보자.Simple enough, innit?JS 단 17줄!마우스가 움직이면 글씨로부터 떨어진 거리를 계산해서 그림자를 움직인다. 그림자는 서로 다른 색으로 4개가 있으며 90도씩 떨어지게 해 정사각형 모양으로 움직
15. 타파스 메뉴판 🍽
원하는 메뉴를 추가하여 선택할 수 있고 로컬스토리지를 이용하여 선택 사항을 저장하는 메뉴판을 만들어 보자.이번 과제는 두 가지 방식으로 구현해 봤다. 먼저 강의를 보지 않고 내가 생각하는 방식대로 한 번 만들어 보고, 그 다음 강의에서 요구하는 이벤트 위임(Event
14. 참조 vs 복사 🎭
깊은 복사와 얕은 복사를 비교하여 알아보자.문자열, 수, 불리언 자료형은 원시 타입이라고 하여 값을 바로 저장한다. 복사할 때도 값을 복사하여 새로운 변수에 할당하는 것이기 때문에 서로 다른 변수가 된다.예를 들어 문자열 하나를 생성하고 이를 복사하여 다른 변수에 저장
13. 슬라이드 인 🎿
스크롤이 되어 화면에 들어올 때 슬라이드 인 되는 이미지를 만들어 보자.오늘 과제는 뭔가 심상치 않다. 핵심만 생각한다면, HTML에 img 요소 몇 개 넣어놓고 숨긴 상태에서 화면 밖으로 translate 했다가 스크롤 이벤트 발생했을 때 화면 안으로 되돌리면 된다.
12. 코나미 코드 🎮
코나미 코드와 같이 연속한 키 입력을 감지해 보자.페이지 상단에 지금까지 누른 버튼을 순서대로 보여주고, 하단에 가장 최근에 누른 버튼을 보여줄 것이다. 버튼을 누르는 것에 따라 동적으로 생성할 것이기 때문에 HTML 요소는 거의 없다.키 이름은 문자열 형식인데 자주
11. 비디오 플레이어 🎞
비디오 플레이어의 컨트롤러 기능을 직접 구현해 보자.재생/정지: ▶/|| 버튼 및 화면 클릭으로 재생 및 일시정지 할 수 있다.스크러빙: 시간 막대를 클릭하여 원하는 위치로 이동하거나 드래그하여 장면을 연속적으로 살펴볼 수 있다.음량: 음소거 버튼으로 음소거를 적용하고
10. 쉬프트 클릭 👆
목표 쉬프트 클릭을 통해 목록에서 여러 개를 선택할 수 있게 해보자. 레이아웃 베끼기 😅 강의에 준비된 예시 텍스트를 이용하기 위해 HTML은 자료를 그대로 사용했다. 스크립트와 스타일은 직접 작업했다. 가끔 제목과 파비콘을 정하는 데 너무 많은 시간을 쓰는 거
9. 개발자 도구 ⛏
개발자 도구의 다양한 활용법을 배워보자.특정 노드에서 중단점을 설정할 수 있다. 보기와 같이 속성 수정에 중단점을 설정하게 되면 해당 노드의 속성이 바뀔 때 디버거에서 중단점이 표시된다.디버깅을 위해 자주 사용하는 console.log() 외에도 다양한 메소드가 존재한
