본문 바로가기
반응형

챌린지/JavaScript 30일 챌린지30

[JavaScript 30일 챌린지] : 9일차 // Regular console.log('hello'); // Interpolated console.log('Hello I am a %s string!', '💩') // Styled console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow:10px 10px 0 blue') // warning! console.warn('OH Nooo'); // Error :| console.error('shit!'); // Info console.info('Crocodiles eat 3~4 people per year'); // Testing const p = document.querySelector('p'); console.a.. 2022. 2. 5.
[JavaScript 30일 챌린지] : 8일차 8일차에서는 그림판을 만들었는데 붓의 크기가 지정한 값 만큼 커졌다. 작아지고 색상도 자동으로 변경이 쭉 되도록 만들었다. canvas 요소는 웹 페이지에서 무언가 그릴 때 사용된다. getContext() 메서드를 호출해서 랜더링 컨텍스트와 그리기 함수들을 사용할 수 있다. 아래 canvas 튜토리얼을 통해 기능을 확인할 수 있다. 캔버스 튜토리얼 - Web API | MDN 2022. 2. 4.
[JavaScript 30일 챌린지] : 7일차 constpeople= [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; constcomments= [ { 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 Nice Nice!', id: 542328 } ]; constpeople와 constcomments에 대한 코드를 제공한.. 2022. 2. 3.
[JavaScript 30일 챌린지] : 6일차 constendpoint= ''; constcities= []; fetch(endpoint) .then(blob => blob.json()) .then(data =>cities.push(...data)); function findMatches(wordToMatch, cities) { return cities.filter(place => { const regex = newRegExp(wordToMatch, 'gi'); return place.city.match(regex) || place.state.match(regex) }); } function numberWithCommas(x) { return x.toString().replace(/\\B(>=(\\d{3})+(?!\\d))/g, ','); } fun.. 2022. 2. 2.
[JavaScript 30일 챌린지] : 5일차 .panel > *:first-child { transform: translateY(-100%); } .panel.open-active > *:first-child { transform: translateY(0); } .panel > *:last-child { transform: translateY(100%); } .panel.open-active > *:last-child { transform: translateY(0); } const panels = document.querySelectorAll('.panel'); function toggleOpen() { console.log('Hello'); this.classList.toggle('open'); } function toggleActive(e) {.. 2022. 2. 1.
[JavaScript 30일 챌린지] : 4일차 // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen = inventors.filter(inventors => (inventors.year >= 1500 && inventors.year `${inventors.first} ${inventors.last}`); con.. 2022. 1. 31.
[JavaScript 30일 챌린지] : 3일차 :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } .hl { color: var(--base); } CSS에 이런 코드를 주고 JavaScript에 이렇게 코드를 적어줬다. 불러온 그림의 크기를 조절할 수 있고 블러를 설정할 수 있는데 아직 베이스 컬러를 해결하지 못 했다. 완료 코드를 작동시켜도 베이스 컬러 조절이 안 되는데 방법은 따로 찾아봐야 할 것 같다. 2022. 1. 30.
[JavaScript 30일 챌린지] : 2일차 .hand { width: 50%; height: 6px; background: black; position: absolute; top: 50%; transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); CSS에 transform-origin: 100%부터 넣어줬다. 화면에서 시계가 움직이도록 설정해 주는 프로젝트였다. 각각 초, 분, 시간을 구하고 값을 넣어주어 동작시켰다. 2022. 1. 29.
[JavaScript 30일 챌린지] : 1일차 function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if(!audio) return; audio.currentTime = 0; audio.play(); key.classList.toggle('playing'); //key.classList.add('playing'); //key.classList.remove('playing'); }; function removeTransition(e) { if(e.propertyName !== 'transform') return; .. 2022. 1. 28.
반응형

티스토리툴바