📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. To do Set up input에 to do를 입력하고 버튼 또는 엔터를 눌렀을 때 해당 to do 데이터를 변수에 보관하고, 사용자가 input에 입력한 값은 지워 화면에서 보이지 않도록 설정한다. // HTML Log In 00:00:00 // JavaScript const toDoForm = document.querySelector('#todo-form'); const toDoInput = toDoForm.querySelector('#todo-form input'); const toDoList = document.querySelector('#todo-list'); function ha..
온라인 학습 플랫폼인 프리 코드 캠프(free code camp)에서는 초보자를 위한 40가지의 자바스크립트 프로젝트를 안내하고 있다. 항해99 온보딩주차 팀원분들이 자바스크립트 연습을 위해 해당 프로젝트를 만들어보는 스터디를 제안해 주셔서 기쁘게 참여했다. 오늘의 구현 프로젝트는 Color Flipper! 기능 분석 해당 프로젝트는 다음과 같은 기능을 가지고 있다. CLICK ME 버튼은 클릭할 수 있다. 버튼 클릭 시 랜덤한 색상값을 가져와 HTML의 배경에 해당 색상값을 적용시킨다. 랜덤한 색상값은 헥스 코드(HEX CODE)를 이용해 표현한다. 헥스 코드란 특정한 색을 표현하기 위한 색상 표현법으로, HEX라는 이름처럼 색상을 6자리의 16진수로 표현한다. 16진수는 0, 1, 2, 3, 4, 5..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Clock Interval interval이란, '매번' 일어나야 하는 무언가를 말한다. (ex. 매 2초) 서버를 주기적으로 확인한다거나, 매 시간마다 주식시장 API를 확인한다거나 해야 할 때 주로 사용한다. 이러한 기능을 제공하는 것이 setInterval()이다. ✨ setInterval(code | func[, delay]) - 첫번째 매개변수: 내가 실행하고자 하는 code 또는 function (단, code는 보안 상의 이유로 사용을 권장하지 않음) - 두번째 매개변수: 호출되는 code 또는 function의 간격을 몇 ms로 할 것인지 설정 Timeout timeout은 '..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Input Values 이름을 입력받을 input과 버튼을 만든 후, 버튼 클릭을 감지해서 input의 입력값을 console.log에 찍어본다. // HTML Log In // JavaScript /* const loginForm = document.querySelector('#login-form'); const loginInput = loginForm.querySelector('input'); const loginButton = loginForm.querySelector('button'); */ // * 위의 코드를 더 짧게 바꿔보기 // 이와 같이 document 또는 하나의 eleme..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. HTML in JavaScript 1. document.getElementById() document JavaScript가 HTML과의 상호작용을 가능하게 한다. 브라우저에서 그냥 사용이 가능하다. (콘솔 창에서 document를 바로 출력해 볼 수 있음) document.getElementById() document의 함수 중 하나이다. HTML에서 id를 통해 element를 찾아낸다. 예시 // string을 전달받는 함수이므로 괄호 안에 ''를 쓴다. document.getElementById('title'); // Olivia! // log보다 더 자세히 출력되는 console.di..
문제 약수의 개수가 세 개 이상인 수를 합성수라고 합니다. 자연수 n이 매개변수로 주어질 때 n이하의 합성수의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 100 입출력 예 n result 10 5 15 8 입출력 예 #1 10 이하 합성수는 4, 6, 8, 9, 10 로 5개입니다. 따라서 5를 return합니다. 입출력 예 #2 15 이하 합성수는 4, 6, 8, 9, 10, 12, 14, 15 로 8개입니다. 따라서 8을 return합니다. 내가 작성한 답안 function solution(n) { // 1부터 n까지의 수를 배열에 담는다. let arr = []; for(let i = 1; i i+1) for(let i = 2; i el%i != 0 || ..
문제 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해 주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 입출력 예 numbers result [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] 입출력 예 #1 2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.) 3 = 2 + 1 입니다. 4 = 1 + 3 입니다. 5 = 1 + 4 = 2 + 3 입니다. 6 = 2 + 4 입니다. 7 = 3 + 4 입니다. 따라서 [2,..
문제 어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return 하도록 solution 함수를 완성해 주세요. 제한사항 1 ≤ n ≤ 1,000,000 입출력 예 n result 144 1 976 2 입출력 예 #1 144는 12의 제곱이므로 제곱수입니다. 따라서 1을 return 합니다. 입출력 예 #2 976은 제곱수가 아닙니다. 따라서 2를 return 합니다. 내가 작성한 답안 function solution(n) { let arr = []; for(let i = 1; i
문제 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 제한사항 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 입출력 예 strings n result ["sun", "bed",..
문제 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑..
