까막눈코딩

1. 배경 간단한 계산기 앱을 만들어 보고자 한다. 2. 기능 - 화면에 연산 과정을 표시하고, 결과 미리보기를 표시한다. - 각 버튼을 누르거나 키보드를 누르면 이에 맞게 화면에 표시되고 동시에 연산을 수행한다. - 화면의 크기에 따라 반응형으로 제작한다.

Experience/[Javascript] Calculator 2021. 4. 20. 20:33

1. 배경 지난번에 보완하기로 했던 내용들 중 일부를 보완했다. 2. 변수의 범위 제한 - 사용자가 입력할 수 있는 year, month, date의 범위를 실제 달력과 일치하게 제한해야 할 필요가 있다. 이 경우, 범위를 벗어나는 경우, 확인 버튼을 누르지 않아도 경고 메시지가 출력되도록 하고 싶다. - 변수의 범위를 제한할 때는 if문을 이용해 제한하는 수밖에 없다고 한다. 그러므로 애초부터 input type에 text가 아닌 date를 줘서 날짜를 받아오는 편이 좋아 보인다. 다만, 처음 구상했던 내용과는 다르기 때문에 조금 더 생각해 볼 필요가 있다. 3. 메시지 출력창 단일화 - 사용자가 값을 입력하는 만큼 결과 메시지가 출력되는 문제를 해결해야 한다. - 위 문제점은 innerHTML을 사용..

Experience/[Javascript] Age Calculator 2021. 4. 20. 16:31

1. 배경 마우스를 누른 상태로 움직이면 이를 따라 색칠이 되는 캔버스를 구현하고자 한다. 마우스가 이동됨에 따라 크기와 색깔이 변한다. 2. HTML, CSS 3. Javascript 먼저 querySelector를 이용해 HTML의 canvas 태그를 선택하고, canvas 변수에 할당한다. 또, 여기에 getContext 매소드를 사용해 드로잉 컨텍스트를 반환한다. 매개변수를 2d로 하여 2차원 렌더링 컨텍스트를 반환하고, 이를 변수 ctx에 할당한다. 여기부터는 초기 설정과 같다. 캔버스의 넓이를 window.innerWidth, window.innerHeight 를 통해 윈도우의 크기에 맞게 설정한다. strokeStyle로 도형의 윤곽선 색을 설정하고, linecap으로 선의 모양을 둥글게, ..

Experience/[Javascript] JS 30 2021. 4. 20. 00:42

1. Array APIs 배열 API에 관한 연습 문제들이다. // ## Array Cardio Day 2 const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nic..

Experience/[Javascript] JS 30 2021. 4. 18. 11:20

1. 배경 이전에 만든 Age calculator를 몇 번 실행시켜본 결과, 다음과 같은 문제점이 발생했다. - 현재 날짜 기준으로 생일이 지난 경우, yyyy-year 값을 리턴해야 하는데 여전히 yyyy-year-1 값을 리턴했다. - 나이의 한도를 0~150세로 잡고 싶다. - innerHTML은 보안상의 이유로 쓰지 않는 것이 좋다고 한다. 2. Refactoring: parseInt(string, n) const today = new Date(); const dd = String(today.getDate()).padStart(2, '0'); const mm = String(today.getMonth() + 1).padStart(2, '0'); const yyyy = today.getFullYea..

Experience/[Javascript] Age Calculator 2021. 4. 18. 01:16

1. 배경 검색어 자동완성 기능을 만들고자 한다. 미국의 주나 도시들 중, 입력하는 내용을 포함하는 주나 도시를 표시하도록 하고, 해당 글자에 색깔을 칠하며, 도시의 인구 수를 오른쪽에 입력할 것이다. 2. HTML Filter for a city or a state 3. CSS html { box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; } input { width: 100%; padding: 20px; } .search-form { max-width: 400px; marg..

Experience/[Javascript] JS 30 2021. 4. 17. 16:05

1. 배경 복수의 사진을 띄우고, 사진을 클릭하면 사진이 확대되면서 위아래에 숨겨진 단어가 드러나도록 하였다. 2. HTML Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion html은 위와 같이 단순하다. 다섯 개의 그림을 담을 부모 div가 하나 있고, 각각 그림 및 단어를 담을 자식 div가 있다. 3. CSS html { box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after {..

Experience/[Javascript] JS 30 2021. 4. 16. 13:28

1. Array APIs 배열의 API들을 연습하기 위한 문제들이다. 1) Filter the list of inventors for those who were born in the 1500's - 1500년대에 태어난 inventors들을 걸러내기 위해 filter API를 사용했다. filter는 배열의 모든 요소들 중, 괄호 안의 조건을 통과하는 요소만을 모은 배열을 반환한다. inventor의 출생년도(year)가 1500과 1600 사이에 있으면 된다. console.table로 조금 더 보기 쉽게 나타냈다. 2) Give us an array of the inventors first and last names - inventors의 성과 이름을 각각 모으기 위해, map API를 이용했다. m..

Experience/[Javascript] JS 30 2021. 4. 15. 19:57