language/javascript
[JavaScript30] 7. Array Cardio Practice (2) | .some(), .every(), .find() and [...SPREADS]
📃 요구사항 주어진 data들을 가지고, 조건에 맞는 결괏값을 console 창에 띄운다. 💻 소스코드 먼저, 주어진 data는 다음과 같다. 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 }..
→2022.02.05
language/javascript
[JavaScript30] 6. AJAX Type Ahead with fetch() | fetch(), Spread Operator, RegExp
📃 요구사항 input창에 문자를 입력하면, 일치하는 city나 state의 값을 하단에 출력한다. ✨ 결과화면 💻 소스코드 🙄 내가 작성한 코드 며칠간 이것저것 찾아보면서 헤맸는데, json 데이터를 가져와서 city, state, population 데이터를 뽑아내고 if문으로 조건을 주는 것까지 작성했다. 그런데 내가 쓴 코드는 한 li안에 추출된 모든 object가 들어가는(;;;) 문제가 있었다. 결론은 전반적으로 완벽하게 완성하지 못했다. 그래서 강의를 보고 따라 쳐보면서 완성시켜본 다음, 개인적으로 다시 한 번 풀어보기로 했다. 🤗 개선된 강의 코드 HTML Filter for a city or a state JS const endpoint = "https://gist.githubuserco..
→2021.12.20
language/javascript
[JavaScript30] 5. Flexbox + JavaScript Image Gallery
📃 요구사항 panel들을 담고있는 div는 화면을 꽉 채우고, 처음에는 각각의 panel들이 화면을 차지하는 비율이 동일하다. 각 panel들을 클릭하면 클릭된 요소가 차지하는 비율, 폰트 등이 변화하고 위아래 텍스트가 나타난다. 클릭된 panel을 다시 한 번 클릭하면 적용되었던 효과들이 초기화 된다. 위의 동작들을 계속해서 반복한다. ✨ 결과화면 💻 소스코드 📌 주어진 HTML Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 🙄 내가 작성한 코드 CSS html { box-sizing: border-box; background: #ffc600; font-family: "helvetica neue..
→2021.12.10
language/javascript
[JavaScript30] 4. Array Cardio Practice (1)
📃 요구사항 주어진 data들을 가지고, 조건에 맞는 결괏값을 console 창에 띄운다. 💻 소스코드 먼저, 주어진 data는 다음과 같다. // Some data we can work with const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, { first: 'Johan..
→2021.12.09
language/javascript
[JavaScript30] 3. CSS Variables | CSS 변수, setProperty()
📃 요구사항 spacing, blur, base color에 대한 input을 마우스로 조절하면, 해당하는 값으로 CSS 요소가 업데이트 된다. css variable을 사용한다. 위의 이벤트는 마우스가 움직임에 따라 실시간으로 반영되어야 한다. ✨ 결과화면 💻 소스코드 🙄 내가 작성한 코드 HTML, CSS Update CSS Variables with JS ... css variable의 사용을 위해 :root에 각각 base variable을 선언해 주었고, 필요한 요소에 해당 css variable을 사용하여 값을 대입해 주었다. JS "use strict"; // root에 선언된 css variable을 제어하기 위해 선언 let root = document.querySelector(":roo..
→2021.12.06
language/javascript
[JavaScript30] 2. Clock | setInterval(), transform, transition
📃 요구사항 현재 시간에 맞게 시계를 동작시킨다. 이 때, 바늘의 한 쪽 끝은 가운데에 고정되어 시계 방향으로 움직여야 한다. ✨ 결과화면 💻 소스코드 📖 TIL setInterval() setInterval()은 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행하는 함수이다. setInterval(() => { console.log('Hello'); }, 3000); 위와 같이 작성하면, 3초에 한 번씩 Hello가 콘솔에 찍히게 된다. 참고로 지정하는 함수는 꼭 익명일 필요는 없고, 함수에 이름을 부여하거나 다른 곳에서 함수를 정의하고 참조(reference)를 전달할 수도 있다. 또, 필요한 매개변수를 전달할 수도 있다. function print(string) { console.log(`Hel..
→2021.12.04
language/javascript
[JavaScript30] 1. Drum Kit | data-*, audio, transitionend
📃 요구사항 키보드를 눌렀을 때, 눌린 키에서 해당 오디오 소리가 재생되게 한다. 눌린 키 요소에 playing 클래스를 추가하여 특정 css를 적용한다. 모든 이벤트가 끝나면, playing 클래스를 제거하여 초기 상태로 복구한다. ✨ 결과화면 💻 소스코드 document.addEventListener("keydown", playSound); // 키 눌렸을 때 const keys = document.querySelectorAll(".key"); // 이벤트 끝났을 때 keys.forEach((key) => key.addEventListener("transitionend", removePressed)); // Key가 눌렸을 때 동작하는 함수 function playSound(e) { const aud..
→2021.12.04
language/javascript
자바스크립트 기초 4. 클래스 | 클래스 예제와 콜백 함수 최종 정리
class Counter { constructor() { // object가 만들어지는 순간 할 일 this.counter = 0; } increase() { // 클래스 내 함수 선언은 function 키워드 필요 x this.counter++; console.log(this.counter); } } const coolCounter = new Counter(); coolCounter.increase(); // 1 coolCounter.increase(); // 2 coolCounter.increase(); // 3 coolCounter.increase(); // 4 coolCounter.increase(); // 5 class Counter { constructor() { // object가 만들어지는..
→2021.12.02

• 이전
• 1
• 2
• 3
• 4
• 다음