09. Expense Tracker
Array Methods와 Local Storage를 사용하여 expense tracker 구현
-숫자를 입력하면 지출이 +숫자를 입력하면 수입이 자동으로 입력이 되고 Total이 자동으로 바뀐다.
또한 History 탭에서 각 항목에 커서를 올려놓으면 옆에 자동으로 X버튼이 나오고 누르면 해당 항목이 삭제 된다.
1. 실행 화면
1) 기본 화면
2) 금액 추가 시
10. Music Player
HTML audio를 이용한 뮤직 플레이어 구현
플레이, 일시정지, 이전노래, 다음 노래로 이동을 구현. 실행을 하면 해당 노래의 제목과 노래 진행 정도가 바로 표시 된다.
1. 실행 화면
1) 기본 화면
2) 노래 재생시
2. 프로젝트를 통해 배운것
1) HTML audio 이벤트
-
audio태그의 이벤트들로 pause()를 하면 일시정지 play()를 하면 다시 재생이 된다.
또한 ended는 media가 끝이나서 멈췄을때를 말하며, 이 때 다음곡으로 재생하게 해주었다.
const audio = document.querySelector('.audio'), function pauseSong(){ musicContainer.classList.remove('play'); playBtn.querySelector('i.fas').classList.add('fa-play'); playBtn.querySelector('i.fas').classList.remove('fa-pause'); audio.pause(); } // Play Song function playSong(){ musicContainer.classList.add('play'); playBtn.querySelector('i.fas').classList.remove('fa-play'); playBtn.querySelector('i.fas').classList.add('fa-pause'); audio.play(); } // Song ends audio.addEventListener('ended', nextSong);
https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio
11. Infinite Scroll Posts
스크롤을 제일 하단으로 내리면 새로운 포스터들이 표시가 된다.
css와 JS 의 setTimeout을 사용하여 로딩 표시 아이콘을 만들었고, setTimeout을 사용하여 .3초 뒤에 새로운 페이지들이 표시 되도록 하였다.
1. 실행 화면
1) 기본 화면
2) 로딩 화면
3) 새로운 포스트들 표시
2. 프로젝트를 통해 배운것
1) indexOf와 forEach를 사용하여 포스터 필터 구현
모든 포스트들을 받아와 forEach 를 사용하여 각각의 poste들 모두를 돌고 input의 value인 term이 있으면 indexOf가 -1 이상으로 나오므로 -1이상인 포스트들은 모든 flex로 표시 -1과 같거나 아래인것은 term이 포함되지 않았다는 것이므로 표시를 하지 않는다.
function filterPosts(e){
const term = e.target.value.toUpperCase();
const posts = document.querySelectorAll('.post');
posts.forEach(post => {
const title = post.querySelector('.post-title').innerText.toUpperCase();
const body = post.querySelector('.post-body').innerText.toUpperCase();
console.log(title.indexOf(term))
if(title.indexOf(term) > -1 || body.indexOf(term) > -1) {
post.style.display = 'flex';
} else {
post.style.display = 'none';
}
})
}2) scroll
- clientWidth, clientHeight 프로퍼티는 테두리 안 영역의 사이즈 정보를 제공
- 테두리 안에는 컨텐츠 너비와 패딩이 포함되는데, 스크롤바 너비는 포함되지 않는다.
-
scrollWidth와 scrollHeight 프로퍼티는 스크롤바에 의해감춰진 영역도 포함한다.
- scrollWidth는 수평 스크롤바가 없기 때문에 안쪽 영역 전체를 나타내는 clientWidth와 동일
- scrollHeight은 스크롤 때문에 가려진 영역을 포함한 컨텐츠 영역 높이 전체
window.addEventListener('scroll', () => {
const {scrollTop, scrollHeight, clientHeight} = document.documentElement;
if(scrollTop + clientHeight >= scrollHeight-5) {
showLoading();
}
})12. Typing Game
제시되는 단어들을 제한시간 내에 많이 맞추는 게임
setInterval 을 사용하여 제한시간을 조정하여 0초가 되면 시간초과 메시지가 나오고 Reload 버튼을 누르면 다시 게임을 플레에 할 수 있다.
제일 위에서 난이도를 설정 할 수 있으며 난이도에 따라 단어를 맞췄을시에 추가되는 시간과 점수가 달라진다.
좌측 하단의 셋팅 버튼을 누르면 상단의 난이도 조절 칸을 없앨 수 있다.
1. 실행 화면
1) 기본 화면
2) 시간 초과시
2. 프로젝트를 통해 배운것
1) setInterval()
delay 마다 함수 혹은 작성한 코드를 반복적으로 실행한다. delay와 ar1... argN은 옵션이다.
-
delay: 실행전 대기 시간으로 기본값은 0이고 단위는 millisecond- FYI) 1000ms = 1s
-
arg,... argN 함수에 전달할 인수들
2) clearInterval()
setInterval 의 함수를 중단시킬 때 사용한다.
Syntax
// func에 전달한 요소 지정 가능
var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);프로젝트 코드
const timeInterval = setInterval(updateTime, 1000);
function updateTime(){
time -=1;
timeEl.innerText=time+'s';
if (time == 0){
clearInterval(timeInterval);
// end game
gameOver();
}
}Source: https://developer.mozilla.org/en-US/docs/Web/API/setInterval
13. Speech Text Reader
Web Speech API를 활용하여 텍스트를 읽어주는 앱.
- CSS grid를 사용하여 반응형으로 구현
- 언어, 목소리와 엑센트 변경 가능
- custom text를 입력하고 버튼을 클릭하면 custom text를 읽어주는 기능 구현
- 메인 화면의 사진 혹은 문장을 클릭하면 해당 문장을 읽어주는 기능 구현
1. 실행 화면
1) 기본 화면
2) 언어 변경 및 커스텀 입력창
2. 프로젝트를 통해 배운것
1) SpeechSynthesis
Web Speech API의 인터페이스로 speech service의 컨트롤러 인터페이스이다.
여러 장치에서 voice를 시작, 중지 등 여러 명령어를 사용 할 수 있다.
SpeechSynthesis.speak()- speech를 실행 ()안에 말을 할 문구가 포함되어야한다.
SpeechSynthesis.getVoices()- 현재 장치에서 가능한 모든 voices들의 obejcts를 리스트로 반환한다.
2) SpeechSynthesisUtterance
speech request를 대표하는 인터페이스로, 컨텐츠의 언어, 높낮이, 소리등의 정보를 포함하고 있어야한다.
SpeechSynthesisUtterance.text- 스피치를 할 문장을 설정
SpeechSynthesisUtterance.voice- 스피치를 할때 사용 될 voice를 설정
프로젝트 코드
// Init speech synth
const message = new SpeechSynthesisUtterance();
// Store voices
let voices =[];
function getVoices(){
voices = speechSynthesis.getVoices();
voices.forEach(voice =>{
const option = document.createElement('option');
option.value = voice.name;
option.innerText=`${voice.name} ${voice.lang}`;
voicesSelect.appendChild(option);
})
}
// Set text
function setTextMessage(text) {
message.text = text;
}
// Speak text
function speakText(){
speechSynthesis.speak(message);
}
// Set voice
function setVoice(e){
message.voice = voices.find(voice => voice.name === e.target.value);
}
// Voice changed
speechSynthesis.addEventListener('voiceschanged', getVoices);Source: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
