까막눈코딩

1. 개요 웹캠을 만들고, 스크린 샷 기능, 화면상에 효과를 주는 기능을 만든다. 2. HTML Take Photo 3. CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { font-size: 10px; background: #ffc600; } .photobooth { background: white; max-width: 150rem; margin: 2rem auto; border-radius: 2px; } /*clearfix*/ .photobooth:after { content: ''; display: block; clear: both; } .photo { width: 100%; float: l..

Experience/[Javascript] JS 30 2021. 5. 3. 17:08

1. 배경 동영상으로 이루어진 리스트에서 총 재생 시간을 구하려고 한다. 2. HTML Video 1 Video 2 Video 3 Video 4 Video 5 Video 6 Video 7 Video 8 Video 9 Video 10 Video 11 Video 12 Video 13 Video 14 Video 15 Video 16 Video 17 Video 18 Video 19 Video 20 Video 21 Video 22 Video 23 Video 24 Video 25 Video 26 Video 27 Video 28 Video 29 Video 30 Video 31 Video 32 Video 33 Video 34 Video 35 Video 36 Video 37 Video 38 Video 39 Video 4..

Experience/[Javascript] JS 30 2021. 5. 1. 23:49

1. 배경 리스트를 알파벳 순으로 정렬하되, 관사 a, an, the는 무시한다. 2. HTML 3. CSS body { margin: 0; font-family: sans-serif; background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000"); background-size: cover; display: flex; align-items: center; min-height: 100vh; } #bands { list-style: inside square; font-size: 20px; background: white; width: 500px; margin: auto; padding: 0; box-shadow: 0 0 0 20px rgba(0, ..

Experience/[Javascript] JS 30 2021. 4. 30. 22:38

1. 완성 만들다 보니 꽤 많이 뜯어고치게 되었다. 마지막에 키 입력을 인식하도록 하는데, 이벤트 리스너만 추가하면 될 줄 알았더니 생각보다 문제가 많이 발생했다. 2. Refactoring const inputs = document.querySelectorAll('.keyButtons'); let numStorage = []; let givenKeys = []; let result = 0; let index = 0; inputs.forEach(input => input.addEventListener('click', getValue)); inputs.forEach(input => input.addEventListener('click', displayProcess)); window.addEventListe..

Experience/[Javascript] Calculator 2021. 4. 30. 16:53

조금씩 계산기다운 기능을 추가하는 중이다. 1. Cancelation if (calculator == "C") { numStorage = []; givenKeys = [0]; } 우선 취소 기능을 추가했다. 위 조건문을 saveOrCalc에 입력하여 C 버튼을 누르면 숫자를 저장한 배열과 숫자를 수집하는 배열을 모두 비웠다. const inputs = document.querySelectorAll('.keyButtons'); let givenKeys = []; function getValue () { if (isNaN(this.value)) { saveOrCalc(this.value); } else { givenKeys.push(this.value); givenKeys.splice(-8, givenKey..

Experience/[Javascript] Calculator 2021. 4. 28. 16:59

1. 배경 마우스의 움직임을 따라 문자에 그림자 효과를 추가한다. 2. HTML 🔥WOAH! 3. CSS html { color: black; font-family: sans-serif; } body { margin: 0; } .hero { min-height: 100vh; display: flex; justify-content: center; align-items: center; color: black; } h1 { text-shadow: 10px 10px 0 rgba(0,0,0,1); font-size: 100px; } 4. Javascript const hero = document.querySelector('.hero'); const text = hero.querySelector('h1'); con..

Experience/[Javascript] JS 30 2021. 4. 28. 14:21

계산 기능을 만들면서 Display Process도 약간 수정했다. 1. Calculate const inputs = document.querySelectorAll('.keyButtons'); let givenKeys = []; function getValue () { if (isNaN(this.value)) { saveOrCalc(this.value); } else { givenKeys.push(this.value); givenKeys.splice(-8, givenKeys.length - 7); } } let numStorage = []; function saveOrCalc(calculator) { numStorage.push( { value: parseFloat(givenKeys.join('')), ..

Experience/[Javascript] Calculator 2021. 4. 27. 23:21

1. 배경 한 번 들었던 강의들을 복습하기 위해, 포스팅한 내용을 한 번 읽고, 혼자서 코드를 작성해본 뒤, 정답과 비교해 보았다. 처음 공부했을 때 눈에 들어오지 않았던 사실이나, 코드를 작성할 때 잘 되지 않았던 부분 등을 기록한다. 2. Drum Kit - window, 즉 전역객체에 대한 이벤트 리스너를 설정하고, keydown 이벤트가 발생하면 그 중 정해진 keyCode에 해당하는 이벤트에만 반응하도록 해야 한다. - 속성 선택자 [] - currentTime은 플레이백 시간을 의미하므로, 0으로 설정하면 소리가 재생되는 중에 한 번 더 재생하면, 즉시 두 번째 재생이 시작된다. if (e.propertyName !== 'transform') return; - 이벤트가 전달될 때, 원하는 이벤..

Experience/[Javascript] JS 30 2021. 4. 27. 22:56