profile
say hi to the world
post-thumbnail

[JavaScript 30 Days Challenge] JavaScript References VS Copying

CODE구현 사항: 배열과 객체의 복사 방법 익히기1) 변수에 원시값(단순 데이터)을 할당하는 것은 아래 그림과 같이 값 그 자체를 접근하는 것이며, let num2 = num;과 같은 방식으로 값 할당 후 num2의 값을 다른 원시값으로 바꿔 할당하여도 num이 바뀌

2022년 4월 5일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Slide in on Scroll

CODE구현 사항: 스크롤 시 이미지 자동 slide-in1) "slide-in" 클래스 (본문 내 이미지들)을 querySelectorAll하여 slideImages라는 변수에 할당2) checkSlide() 함수 선언한 뒤 slideImages를 forEach()를

2022년 3월 30일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Key Sequence Detection

CODE구현 사항: 비밀번호 입력 기능 구현1) 입력된 문자열을 저장할 배열과 맞춰야 하는 비밀번호를 각각 변수에 할당 2) keyup 이벤트 발생 시 pressed에 할당된 배열에 누른 키를 저장만약 'a'를 눌렀을 시 pressed = 'a'가 됨3) pressed

2022년 3월 23일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Custom Video Player

Day11-Custom Video Player CODE구현 사항: shift key로 여러 항목을 동시에 체크할 수 있는 체크리스트 구현 1) 각 변수에 컨트롤해야 하는 모든 요소들을 하나하나 할당해 둠

2021년 12월 20일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Hold Shift and Check Checkboxes

CODE구현 사항: shift key로 여러 항목을 동시에 체크할 수 있는 체크리스트 구현1) 변수 checkboxes에 inbox 내의 type이 checkbox인 input을 모두 선택하여 할당2) lastChecked 변수를 함수 바깥에 선언 후 handleChe

2021년 12월 12일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Dev Tools Domination

CODE구현 사항: 다양한 console 사용법 익히기1) 기본적인 사용법2) DOM element를 console에서 볼 수 있는 방법3) console에서 요소를 그룹핑하는 법4) 요소가 몇 개째인지 세는 방법5) console.time부터 console.timeE

2021년 12월 7일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Fun with HTML5 Canvas

CODE구현 사항: html canvas와 다양한 메소드들을 사용하여 그림 그리기1) canvas를 선택하여 변수 canvas에 할당const canvas = document.querySelector("const ctx = canvas.getContext("2d");c

2021년 10월 21일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Array Cardio Day 2

CODE구현 사항: 다양한 Array methods를 사용하며 문제를 해결하기1) Is at least one person 19 or older?: 19살 이상의 사람이 존재하는가?some()은 배열 안 요소들이 주어진 함수를 통과하는지 테스트 -> 현재 년도 - 사람

2021년 10월 18일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Type Ahead

CODE구현 사항: 검색창(input box)에 문자를 입력하면 해당 문자가 들어간 미국의 도시를 나열해서 보여주기1) 빈 배열 cities 선언 -> fetch() 함수 사용하여 endpoint로부터 데이터 fetch 후 복사하여 cities 배열에 push이 때,

2021년 10월 15일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Flex Panel Gallery

CODE기본 구현 사항: 카드를 클릭할 시 카드의 크기가 확대되며 상하단부에서 숨겨져 있던 문구가 나오도록 함1) 세로로 쌓여 있는 .panels div에 display: flex 속성 할당하여 다음과 같이 가로로 배치되도록 함

2021년 10월 9일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] Array Cardio Day 1

기본 구현 사항: 다양한 Array methods를 사용하며 문제를 해결하기 1) Filter the list of inventors for those who were born in the 1500's: inventors 배열을 '1500년 대에 태어난 사람들'을 기

2021년 10월 7일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] CSS Variables

기본 구현 사항: spacing, blur, base color를 사용자의 입력을 받아 변경 1) 페이지 전역으로 적용될 색상, 이미지 프레임의 간격(두께), 이미지의 흐림 정도의 default 값을 전역 변수 선언 후 할당 :root 클래스는 전역 CSS 변수 선

2021년 10월 5일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] JS and CSS Clock

기본 구현 사항: 시계의 시침, 분침, 초침이 현재 시각에 맞춰 움직이도록 구현하기1) 초, 분, 시침을 선택하여(document.q

2021년 10월 2일
·
0개의 댓글
·
post-thumbnail

[JavaScript 30 Days Challenge] JavaScript Drum Kit

프론트엔드 개발자를 꿈꾸는 사람으로서 자바스크립트의 기초를 튼튼히 해야할 필요성을 뼈저리게 느끼고 있는 요즘, 재밌는 챌린지가 있어서 도전해보기로 했다.그런데, 그냥 영상 보고 코드 따라 치는 것으로는 부족할 것 같아 내가 덧붙이고 싶은 기능을 추가로 구현해보기로 마음

2021년 7월 14일
·
0개의 댓글
·