웨일의 블로그 웨일의 블로그

Array Cardio Day 1 배열의 메서드 몇가지를 사용해보면서 익혀보자. 1. 1500년대 태어난 발명가 리스트를 filter하기 - inventor.year>1500과 inventor.yeara>b? 1:-1) 하면 낮은 숫자부터 앞에 놓인다. 4. 모든 발명가의 나이를 모두 더한 값을 구하기 - reduce 메서드 사용, inventor.passed-inventor.year로 나이를 구한다. acc는 합친 값이 저장되며 0으로 초기화하고 진행한다. 5. 나이 순서대로 작은 순부터 나열하기 - sort 메서드 이용, 3번 방법과 동일하다. 6. 거리명에 'de'가 들어간 거리 나열하기 - includes 메서드 이용 7. 사람의 성을 알파벳 순으로 나열하기 - sort 메서드와 split 메서드..

Playing WITH CSS VARIABLES AND JS 요구사항 1. 사진의 경계, 블러, 경계의 색을 조절할 수 있어야 한다. 2. 경계,블러는 마우스 클릭후 이동하는 중에도 변해야 한다. 1. HTML 구성 - 컨트롤 박스 안에 패딩,블러,색상 조절하는 부분이 있다. - 가로 정렬을 위해 span태그 사용 Update CSS Variables with JS Spacing: Blur: Base color 2. Javascript 구성 - 이벤트리스너로 mousemove,click 이벤트 감지해서 setSpacing 호출, 클릭후 움직이면 변하는 인풋값을 mousemove가 감지한다. - setSpacing 함수는 슬라이드바 클릭으로 변한 인풋값을 불러와서 경계의 색과 크기, 블러, JS의 색을 변..

CSS + JS CLOCK 요구사항 1. 실제 시계처럼 동작하게 만들기 1. HTML 구성 - clock 안에 clock-face가 있고 그 안에 초침,분침,시침이 있다. 2. CSS 구성 - body클래스에서 시계를 중앙으로 위치시키고 clock클래스에서 시계의 모양,그림자를 그린다. - hand 클래스에서 position:absolute로 해서 시침,분침,초침을 겹치게 놓은 후 transform-origin:right으로 해서 사각형의 오른쪽 선을 기준으로 회전하게 한다. body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; heigh..

1. JAVASCRIPT DRUM KIT 요구사항 1. 사용자가 A부터 L을 눌렀을 때 각각의 문자에 할당된 오디오파일을 재생해야 한다. 2. 오디오파일 재생시에 브라우저에서 사용자가 누른 키가 뭔지 UI가 바뀌면서 표시되어야 한다. 1. html에서 div의 어트리뷰트에 각 키마다 data-key를 넣어서 구별이 가능하게 한다. A boom 2. 오디오파일에도 data-key를 넣어서 누른 키에 따라 어떤 오디오파일을 실행하고자 하는지를 파악한다. 3. javascript에서 화면에 키입력이 감지되면 playsound함수를 실행한다. window.addEventListener('keydown',playsound); 4. playsound함수 - event.keyCode를 통해서 어떤 data-key가 ..

koan은 자바스크립트 기본 프로그래밍을 퀴즈 형식의 문제를 풀며 이해하는 방식으로 진행된다. https://github.com/mrdavidlaing/javascript-koans mrdavidlaing/javascript-koans Koans to learn Javascript. Contribute to mrdavidlaing/javascript-koans development by creating an account on GitHub. github.com 1. Thinking About Expects 등호를 배워보자 10=='10': a와 b의 값이 같다. 10===10: a와b는 값에다가 데이터 타입까지 같다. 2. Thinking About Arrays 배열을 배워보자 하나의 배열에는 여러 타입..

1. 캘린더 코드 실행시 오늘의 요일, 날짜가 출력되어야 하고 색상은 빨간색이다. 화살표로 이동시 해당 월의 달력이 출력되어야 하고 표시되는 날은 1일이다. 일을 클릭했을 때 그 일의 요일과 숫자를 출력해야 한다. 1. html 구성 테이블구조를 사용했고 한달에 최대 6주가 있을 수 있기 때문에 tr을 6개 생성하였다. ‹ SUN MON TUE WED THU FRI SAT › 2. CSS 구성 깔끔한 UI를 위해 버튼의 경계와 클릭시 아웃라인을 삭제했고 display:flex로 가로 정렬 및 아이템 중앙 정렬을 했다. th { font-weight:bolder; font-size: 20px; } td { text-align: center; } button { border: none; background:..

투두리스트 다시 만들기 강의를 보면서 전체적으로 한 번 따라서 만들어 본 후에 이번에는 강의의 도움없이 만들어 보았다. 다 알 것 같은 기분이 들어도 막상 혼자서 만들어 보니 시작부터 헤매게 되었다. 그래도 코드나 함수간의 전체적인 흐름이 기억에 남아 있어서 몇 번 코드를 보긴 했지만 코드 작성을 마무리 할 수 있었다. 배열에 여러 객체를 저장한 후 각 인덱스의 객체의 프로퍼티를 사용하는 부분이 아직 익숙치 않는데, 아직 어렵지만 효율적인 데이터 저장 방법인 것 같다. click, submit같은 이벤트나 position 데이터를 어떻게 사용하는지에 대해서도 더 알게된 것 같다. Mini Web Project 1. Background Changer Click me 버튼 클릭시 배경색과 출력된 Hex값이 ..

3.8 Weather api 1 외부 날씨 api를 불러와서 필요한 데이터만을 뽑아서 사용하는 방식을 배우는 단계이다. 일단, 원하는 지역의 온도,지명을 알기 위해서는 위도와 경도가 필요하다. 따라서 위도와 경도를 먼저 알아내야 하는데 이 과정에서는 외부 api가 필요없이 javascript 내에서 가능하다. const COORDS = "coords"; function saveCoords(coordsObj) { localStorage.setItem(COORDS,JSON.stringify(coordsObj)); } function handleGeoSuccess(position) { console.log(position); const latitude = position.coords.latitude; cons..