까막눈코딩

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

1. 배경 항목을 추가할 수 있는 To do 리스트를 만들고, 입력받은 데이터를 로컬 스토리지에 저장하여 창을 새로고친 후에도 항목과 체크 상태가 유지되도록 설정하려고 한다. 2. HTML LOCAL TAPAS Loading Tapas... form 태그는, 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획이다. 3. CSS html { box-sizing: border-box; background: url("oh-la-la.jpeg") center no-repeat; background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; font-..

Experience/[Javascript] JS 30 2021. 4. 26. 19:43

GitHub의 원격 저장소와 연동하여 백업할 수 있다. 'git remote add origin GitHubURL' 명령을 통해, 해당 깃헙과 현재 컴퓨터를 연동할 수 있다. origin은 저장소의 별명과 같은 것인데 관습적으로 origin을 쓴다. 'git remote' 명령을 통해 연동된 원격 저장소의 별명을 확인할 수 있으며, 'git remove -v' 연결된 저장소의 주소까지 함께 확인할 수 있다. 원격 저장소와 연동한 뒤, 'git push'를 통해 현재 컴퓨터(a)의 자료를 원격 저장소로 백업할 수 있다. 처음 푸쉬하는 경우에는 'git push --set-upstream origin master'라는 메시지가 나오는데, 이는 기본 설정에 관한 것으로, 이후로는 git push를 입력할 때,..

Knowledge/Git 2021. 4. 25. 23:44

본격적으로 계산기의 기능들을 만들어 보려고 한다. 계산기의 가장 기본적인 기능 두 가지는, 숫자를 화면에 표시하는 기능과 계산을 수행하는 기능이다. 먼저 숫자를 process 화면에 숫자를 표시하는 기능을 만들었다. 1. HTML process result preview input 버튼에 기능별로 클래스를 추가해야 될지도 모르겠다. 2. CSS :root{ --background-color: #576574; --background-width-size: 320px; --background-height-size: 120px; --key-color: #1dd1a1; --contents-width-size: 50px; --contents-height-size: 50px; --margin-padding-size:..

Experience/[Javascript] Calculator 2021. 4. 25. 18:03