본문 바로가기

분류 전체보기

 (207)
Expense Tracker (1) div 중간 선 일단 지금은 여기까지 만들었다 ㅋㅋㅋ 몇가지 내용들을 정리해야할 것 같아서 포스트를 써봄봄봄.. 저기 income과 expense total 상자 정중앙에 라인을 어떻게 넣었냐 하면.. 우선 HTML Income +$0.00 Expense -$0.00 바깥에 in-ex-total로 둘러싸고 income-container 하나와 expense-container 하나가 있다 (지금 생각해보니 굳이 둘의 class를 다르게 할 필요는 없었던 것 같다.......................................) 무튼 in-ex-total 속 이 두 div가 정확히 반반씩 너비를 차지하고 중간에 border 선을 넣어서 구획을 주고 싶다 ! .in-ex-total { background: #fff; w..
Meal Finder (2) - Show Single Meal Page 이 포스트는 udemy.com 20 Web Projects With Vanilla JavaScript 강의를 보고 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 만드려는 것: 원하는 음식을 클릭했을 때 화면에 원하는 음식 사진과 함께 요리법, 재료들이 나오게. API를 통해 음식을 받아올 때, 음식마다 id가 있었다. 이 음식 id를 m..
Meal Finder (1) Search & Display Meals from API 이 포스트는 udemy.com 20 Web Projects With Vanilla JavaScript 강의를 보고 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 사용한 API https://www.themealdb.com/api.php TheMealDB.com www.themealdb.com submit.addEventListener('..
Meal Finder (1) Search & Display Meals from API 이 포스트는 udemy.com 20 Web Projects With Vanilla JavaScript 강의를 보고 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 사용한 API https://www.themealdb.com/api.php TheMealDB.com www.themealdb.com submit.addEventListener('..
Hangman (7) - play Again 이 포스트는 Udemy에 올라온 Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다! https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com playAgainBtn.addEventListener("click", () => { // Empty arrays correctLetters.splic..
Hangman (6) - Show Notification & Update Wrong Letters 이 포스트는 Udemy에 올라온 Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다! https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com // Show notification function showNotification() { notification.classList.add("show..
String.prototype.split() const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(' '); console.log(words); console.log(words[3]); const chars = str.split(''); console.log(chars); console.log(chars[8]); const strCopy = str.split(); console.log(strCopy); .split(' '); const words = str.split(' '); console.log(words); console.log(words[3]); 띄워쓰기를 기준으로 string을 나눠서 Array에 저장 출력 결과 > Array ["The", "..
Hangman (5) - displayWord() 이 포스트는 Udemy에 올라온 Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다! https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 이번 프로젝트에서 나를 괴로움과 멘붕에 빠트린 함수....................... 우선 게임을 처음 시작했을 때는 기본적으로 functio..

티스토리툴바