월 16,280원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결자바스크립트 : 기초부터 실전까지 올인원
반복문 문제3 369게임
1부터 50까지 369결과 프린트인데왜 숫자 2인데 박수 짝치죠?
- 미해결자바스크립트 : 기초부터 실전까지 올인원
투두리스트 과제 힌트 좀 주세요 ㅠ
투두리스트 마지막에서 과제로 내주신'끝남' 에서 Delete 버튼을 눌렀을 경우 삭제가 안되는거 어디를 봐야하는건지 모르겠어요 ㅠㅠ
- 미해결자바스크립트 : 기초부터 실전까지 올인원
강의가 재생이 안됩니다.
해당 강의(자바스크립트에서 API를 불러보자) 재생 버튼 누르면 동작하지 않고 그 전 강의에서 다음강의 수강하러가기로 이동해도 건너띄어지는데 확인좀부탁드립니다
- 미해결자바스크립트 : 기초부터 실전까지 올인원
강의 정리된 자료
혹시 강의 정리된 자료 없을까요? ㅠ
- 미해결자바스크립트 : 기초부터 실전까지 올인원
타임즈뉴스 401에러
잘 되고 있다가 카테고리별 검색에 필요한 URL 입력 하면서부터 에러가 났어요. const getNewsByTopic = (event) => { console.log("클릭됨", event.target.textContent); let topic=event.target.textContent.toLowerCase() let url=new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&page_size=10&topic=${topic}`); console.log(url) }선생님 왜 에러가 난건가요?
- 미해결자바스크립트 : 기초부터 실전까지 올인원
to do list
선생님 수업 너무 재미있어서 열심히 듣고 있습니다.선생님 to do list를 모두 따라하고 슬라이드 메뉴도 따러서 했는데요, 질문이 있습니다.값을 입력하고 플러스 버튼을 클릭하면 All 이라는 탭에 메뉴바가 보이게 하고싶은데 어떻게 해야하는지 아무리 고민을 해봐도 답을 찾지 못해서 질문드립니다.
- 미해결자바스크립트 : 기초부터 실전까지 올인원
EventListener 질문입니다.
버튼 클릭하면 콘솔 창에 3이 나오도록 해보았는데요, 아래와 같이 입력해봤는데, 콘솔 창에 3이 안 나옵니다..오류가 EventLstener 라고 뜨는데요;;. 제가 뭘 잘못 입력했는지 잘 모르겠어요;;. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> const a = 3; const Btn1 = document.getElementById("click-button"); Btn1.addEventListener("click", activation); function activation(){ console.log(a); } </script> </head> <body> <button id="click-button">누름</button> </body> </html>
- 미해결자바스크립트 : 기초부터 실전까지 올인원
developer tool 아이콘 클릭했는데 콘솔창이 안떠요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요developer tool 클릭했는데 안떠요 아무 반응이 없는데 왜 그런걸가요 ㅠㅠ
- 미해결자바스크립트 : 기초부터 실전까지 올인원
git 허브나 netlify 용량
git 허브나 netlify를 통해 쉽고 유용하게 도메인얻는 방법 너무 잘 들었습니다. 궁금한 부분은 git hub에 올리는 용량은 제한이 없나요?git hub에 올리는 용량과 netlify의 용량은 상관이 없는지 궁금합니다. 좋은 강의에 항상 감사드립니다.
- 미해결자바스크립트 : 기초부터 실전까지 올인원
깃허브 오류
깃헙 강의 도중 push과정에서 오류가 생긴것같은데 혼자 구글링으로 해결하다보니 또 다른 부분에서 오류가 생겨나서 점점 엉키는 것 같아 여쭤봅니다 ㅠㅠ
- 해결됨자바스크립트 : 기초부터 실전까지 올인원
Math 함수를 사용해봤는데. ... 은 무슨 의미일까요??
안녕하세요.5번 문제를 풀면서 검색을 하다가...연산자(??)를 이용하면 배열의 가장 작은 수를 알 수 있다고 하더라고요.이렇게해도 무방할까요??function findSmallestElement(arr){ if(arr.length != 0) { return Math.min(...arr); } else if(arr.length == 0) { return 0; } } console.log(findSmallestElement([12,50, 1, 4]))
- 미해결자바스크립트 : 기초부터 실전까지 올인원
로컬스토리지 저장하는 방법 알려주세요 ㅠㅠ
로컬스토리지에 투두리스트 내역들을 저장하고 싶은데 콘솔/로컬스토리지에는 저장이 되는데 화면에는 새로고침해도 그냥 다 사라저버리네요 ㅠㅠ 로그인은 새로고침해도 이름이 남아있는데.. 혹시라도 코드한번보시고 도와주세요 ㅠㅠ let loginForm = document.querySelector('#login-form'); let loginBtn = document.querySelector('#login-btn'); let loginInput = document.querySelector('#login-input'); let greeting = document.querySelector('#greeting'); let taskArea = document.querySelector('.task-area'); let inputArea = document.querySelector('.input-area'); let inputText = document.querySelector('.input-area__text'); let addBtn = document.querySelector('.input-area__btn'); let arrary = []; let titleList = document.querySelector('.title-box'); let discription = document.querySelector('.discription'); const body = document.querySelector('body'); const images = [ '훈이.jpg', '유리.jpg', '철수.jpeg', '흰둥이.jpeg', '부리부리3.png', ]; let randomIndex = Math.floor(Math.random() * images.length); let container = document.querySelector('.container'); //로그인 const HIDDEN_CLASSNAME = 'hidden'; const USERNAME_KEY = 'username'; function loginHandle(event) { event.preventDefault(); loginForm.classList.add(HIDDEN_CLASSNAME); const userName = loginInput.value; localStorage.setItem(USERNAME_KEY, userName); greeting.innerHTML = `<span style="color:blue">${userName}</span> 님이 로그인함`; greeting.classList.remove(HIDDEN_CLASSNAME); reMoveClassList(); backImg(); } //리무브 클래스 function reMoveClassList() { taskArea.classList.remove(HIDDEN_CLASSNAME); inputArea.classList.remove(HIDDEN_CLASSNAME); } const savedUserName = localStorage.getItem(USERNAME_KEY); loginForm.addEventListener('submit', loginHandle); if (savedUserName === null) { loginForm.classList.remove(HIDDEN_CLASSNAME); backImg(); } else { reMoveClassList(); greeting.classList.remove(HIDDEN_CLASSNAME); greeting.innerHTML = `<span style="color:blue">${savedUserName}</span> 님이 로그인함`; backImg(); } //로컬스토리지 let toDos = []; const TODOS_KEY = 'todos'; function saveToDos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } const savedToDos = localStorage.getItem(TODOS_KEY); console.log(savedToDos); if (savedToDos !== null) { const parsedToDos = JSON.parse(savedToDos); toDos = parsedToDos; parsedToDos.forEach(render); } //인풋 function enterBtn(event) { event.preventDefault(); let obType = { id: Math.floor(Math.random() * 1000), isComplete: false, inputValue: inputText.value, }; inputText.value = ''; arrary.push(obType); render(); toDos.push(obType.inputValue); console.log(toDos); saveToDos(); } addBtn.addEventListener('click', enterBtn); //랜더 function render() { divHTML = ''; discription.innerHTML = `<sapn style="color:lightgreen">전체할일 :${ arrary.length } <sapn style="color:red">완료할일 :${checkCount()}</span>`; for (let i = 0; i < arrary.length; i++) { if (arrary[i].isComplete == true) { divHTML = divHTML + ` <div class="title-list"> <div class="title-list__title"> <h4 class="textDone">${arrary[i].inputValue}</h4> </div> <div class="title-list__btn"> <button class="title-list__btn1" onclick="checkBtn('${arrary[i].id}')"> <i class="fa-solid fa-face-tired"></i> </button> <button class="title-list__btn2" onclick ="deleteBtn('${arrary[i].id}')"> <i class="fa-solid fa-trash-can hello"></i> </button> </div> </div>`; } else { divHTML = divHTML + ` <div class="title-list"> <div class="title-list__title"> <h4>${arrary[i].inputValue}</h4> </div> <div class="title-list__btn"> <button class="title-list__btn1" onclick="checkBtn('${arrary[i].id}')"> <i class="fa-solid fa-check-to-slot"></i> </button> <button class="title-list__btn2" onclick ="deleteBtn('${arrary[i].id}')"> <i class="fa-solid fa-trash-can"></i> </button> </div> </div>`; } } titleList.innerHTML = divHTML; } //전체할일 카운트 function checkCount() { let count = 0; for (let i = 0; i < arrary.length; i++) { if (arrary[i].isComplete == true) { count++; } } return count; } //삭제버튼 function deleteBtn(b) { for (let i = 0; i < arrary.length; i++) { if (arrary[i].id == b) { arrary.splice([i], 1); break; } } render(); } //체크버튼 function checkBtn(a) { for (let i = 0; i < arrary.length; i++) { if (arrary[i].id == a) { arrary[i].isComplete = !arrary[i].isComplete; break; } } render(); } //시계 let getClock = () => { let date = new Date(); //new라서 객체임 현재 시간을 가저옴 const clock = document.querySelector('#clock'); let hour = String(date.getHours()).padStart(2, '0'); let mimute = String(date.getMinutes()).padStart(2, '0'); let second = String(date.getSeconds()).padStart(2, '0'); clock.innerHTML = `<span style="color:red">${hour}시 ${mimute}분 ${second}초</span>`; }; //타이머 함수를 통해서 1초마다 시간을 받아오게 작성 setInterval(getClock, 1000); getClock(); //배경 이미지 function backImg() { container.style.backgroundImage = `url(./image/${images[randomIndex]})`; container.style.backgroundSize = '160px'; container.style.backgroundRepeat = 'repeat'; } backImg();
- 미해결자바스크립트 : 기초부터 실전까지 올인원
타임즈 render 부분 질문
안녕하세요! 타임즈 뉴스 만들기 부분에서 render 함수 짜고 있는데 자꾸 map 관련 오류가 뜹니다... 콘솔에 아래와 같이 찍혀요... 데이터만 불러오면 자꾸 같은 오류가 나서 렌더링이 잘 안되는데 어떻게 해결할 수 있나요? main.js:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')let news = [] const getLastNews = async () => { let url = new URL('https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=10' ); let header = new Headers({"x-api-key" : "TXFw8gmdafTvdz_B53fry7i7yuJesOf5fWWhu5EZdyQ", }); let response = await fetch(url,{ headers:header }); let data = await response.json(); news = data.articles render() }; const render = () => { let newsHTML = ""; newsHTML = news.map((news) => { return `<div class="row news"> <div class="col-lg-4"> <img class="news-image" src="${news.media}"/> </div> <div class="col-lg-8"> <h2>${news.title}</h2> <p> 내용 </p> <div> 출처 </div> </div> </div>`; }).join(''); document.querySelector('#news-board').innerHTML = newsHTML; } getLastNews()
- 미해결자바스크립트 : 기초부터 실전까지 올인원
인프런 블로그 작성
인프런 블로그에 학습일기로 해당 강의 속 문제와 문제풀이 내용을 공개로 올려도 되나용??
- 미해결자바스크립트 : 기초부터 실전까지 올인원
전날엔 되던것이 담날엔 안되네요 ㅜㅜ
섹션6에 뉴스타임즈 만들기 강의에서요,하루에 다 하지 못해서 그 담날 다시 해보려고 하니 api 를 제대로 못불러옵니다.전날은 분명 articles 까지 불러오는 부분까지 확인을 했는데요,시간이 지나면 괜찮아질까 싶었는데 계속 안되어서 혹시 어떤 문제가 있는걸까요? 에러메시지:Failed to load resource: the server responded with a status of 401 ()
- 미해결자바스크립트 : 기초부터 실전까지 올인원
뉴욕타임즈 뉴스를 그려보자 reder편 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요코딩을 하다가 막히는 부분이 있어 질문드립니다.여기까지는 괜찮은데, 저 return ' ' 이 사이에 html코드를 끌고 오면 인식을 못하더군요 해결할 수 있는 방법이 있을까요? index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <section class="container"> <section> <div class="head-line"> <svg viewBox="0 0 184 25" fill="#000"> <path d="M13.8 2.9c0-2-1.9-2.5-3.4-2.5v.3c.9 0 1.6.3 1.6 1 0 .4-.3 1-1.2 1-.7 0-2.2-.4-3.3-.8C6.2 1.4 5 1 4 1 2 1 .6 2.5.6 4.2c0 1.5 1.1 2 1.5 2.2l.1-.2c-.2-.2-.5-.4-.5-1 0-.4.4-1.1 1.4-1.1.9 0 2.1.4 3.7.9 1.4.4 2.9.7 3.7.8v3.1L9 10.2v.1l1.5 1.3v4.3c-.8.5-1.7.6-2.5.6-1.5 0-2.8-.4-3.9-1.6l4.1-2V6l-5 2.2C3.6 6.9 4.7 6 5.8 5.4l-.1-.3c-3 .8-5.7 3.6-5.7 7 0 4 3.3 7 7 7 4 0 6.6-3.2 6.6-6.5h-.2c-.6 1.3-1.5 2.5-2.6 3.1v-4.1l1.6-1.3v-.1l-1.6-1.3V5.8c1.5 0 3-1 3-2.9zm-8.7 11l-1.2.6c-.7-.9-1.1-2.1-1.1-3.8 0-.7 0-1.5.2-2.1l2.1-.9v6.2zm10.6 2.3l-1.3 1 .2.2.6-.5 2.2 2 3-2-.1-.2-.8.5-1-1V9.4l.8-.6 1.7 1.4v6.1c0 3.8-.8 4.4-2.5 5v.3c2.8.1 5.4-.8 5.4-5.7V9.3l.9-.7-.2-.2-.8.6-2.5-2.1L18.5 9V.8h-.2l-3.5 2.4v.2c.4.2 1 .4 1 1.5l-.1 11.3zM34 15.1L31.5 17 29 15v-1.2l4.7-3.2v-.1l-2.4-3.6-5.2 2.8v6.6l-1 .8.2.2.9-.7 3.4 2.5 4.5-3.6-.1-.4zm-5-1.7V8.5l.2-.1 2.2 3.5-2.4 1.5zM53.1 2c0-.3-.1-.6-.2-.9h-.2c-.3.8-.7 1.2-1.7 1.2-.9 0-1.5-.5-1.9-.9l-2.9 3.3.2.2 1-.9c.6.5 1.1.9 2.5 1v8.3L44 3.2c-.5-.8-1.2-1.9-2.6-1.9-1.6 0-3 1.4-2.8 3.6h.3c.1-.6.4-1.3 1.1-1.3.5 0 1 .5 1.3 1v3.3c-1.8 0-3 .8-3 2.3 0 .8.4 2 1.6 2.3v-.2c-.2-.2-.3-.4-.3-.7 0-.5.4-.9 1.1-.9h.5v4.2c-2.1 0-3.8 1.2-3.8 3.2 0 1.9 1.6 2.8 3.4 2.7v-.2c-1.1-.1-1.6-.6-1.6-1.3 0-.9.6-1.3 1.4-1.3.8 0 1.5.5 2 1.1l2.9-3.2-.2-.2-.7.8c-1.1-1-1.7-1.3-3-1.5V5l8 14h.6V5c1.5-.1 2.9-1.3 2.9-3zm7.3 13.1L57.9 17l-2.5-2v-1.2l4.7-3.2v-.1l-2.4-3.6-5.2 2.8v6.6l-1 .8.2.2.9-.7 3.4 2.5 4.5-3.6-.1-.4zm-5-1.7V8.5l.2-.1 2.2 3.5-2.4 1.5zM76.7 8l-.7.5-1.9-1.6-2.2 2 .9.9v7.5l-2.4-1.5V9.6l.8-.5-2.3-2.2-2.2 2 .9.9V17l-.3.2-2.1-1.5v-6c0-1.4-.7-1.8-1.5-2.3-.7-.5-1.1-.8-1.1-1.5 0-.6.6-.9.9-1.1v-.2c-.8 0-2.9.8-2.9 2.7 0 1 .5 1.4 1 1.9s1 .9 1 1.8v5.8l-1.1.8.2.2 1-.8 2.3 2 2.5-1.7 2.8 1.7 5.3-3.1V9.2l1.3-1-.2-.2zm18.6-5.5l-1 .9-2.2-2-3.3 2.4V1.6h-.3l.1 16.2c-.3 0-1.2-.2-1.9-.4l-.2-13.5c0-1-.7-2.4-2.5-2.4s-3 1.4-3 2.8h.3c.1-.6.4-1.1 1-1.1s1.1.4 1.1 1.7v3.9c-1.8.1-2.9 1.1-2.9 2.4 0 .8.4 2 1.6 2V13c-.4-.2-.5-.5-.5-.7 0-.6.5-.8 1.3-.8h.4v6.2c-1.5.5-2.1 1.6-2.1 2.8 0 1.7 1.3 2.9 3.3 2.9 1.4 0 2.6-.2 3.8-.5 1-.2 2.3-.5 2.9-.5.8 0 1.1.4 1.1.9 0 .7-.3 1-.7 1.1v.2c1.6-.3 2.6-1.3 2.6-2.8s-1.5-2.4-3.1-2.4c-.8 0-2.5.3-3.7.5-1.4.3-2.8.5-3.2.5-.7 0-1.5-.3-1.5-1.3 0-.8.7-1.5 2.4-1.5.9 0 2 .1 3.1.4 1.2.3 2.3.6 3.3.6 1.5 0 2.8-.5 2.8-2.6V3.7l1.2-1-.2-.2zm-4.1 6.1c-.3.3-.7.6-1.2.6s-1-.3-1.2-.6V4.2l1-.7 1.4 1.3v3.8zm0 3c-.2-.2-.7-.5-1.2-.5s-1 .3-1.2.5V9c.2.2.7.5 1.2.5s1-.3 1.2-.5v2.6zm0 4.7c0 .8-.5 1.6-1.6 1.6h-.8V12c.2-.2.7-.5 1.2-.5s.9.3 1.2.5v4.3zm13.7-7.1l-3.2-2.3-4.9 2.8v6.5l-1 .8.1.2.8-.6 3.2 2.4 5-3V9.2zm-5.4 6.3V8.3l2.5 1.8v7.1l-2.5-1.7zm14.9-8.4h-.2c-.3.2-.6.4-.9.4-.4 0-.9-.2-1.1-.5h-.2l-1.7 1.9-1.7-1.9-3 2 .1.2.8-.5 1 1.1v6.3l-1.3 1 .2.2.6-.5 2.4 2 3.1-2.1-.1-.2-.9.5-1.2-1V9c.5.5 1.1 1 1.8 1 1.4.1 2.2-1.3 2.3-2.9zm12 9.6L123 19l-4.6-7 3.3-5.1h.2c.4.4 1 .8 1.7.8s1.2-.4 1.5-.8h.2c-.1 2-1.5 3.2-2.5 3.2s-1.5-.5-2.1-.8l-.3.5 5 7.4 1-.6v.1zm-11-.5l-1.3 1 .2.2.6-.5 2.2 2 3-2-.2-.2-.8.5-1-1V.8h-.1l-3.6 2.4v.2c.4.2 1 .3 1 1.5v11.3zM143 2.9c0-2-1.9-2.5-3.4-2.5v.3c.9 0 1.6.3 1.6 1 0 .4-.3 1-1.2 1-.7 0-2.2-.4-3.3-.8-1.3-.4-2.5-.8-3.5-.8-2 0-3.4 1.5-3.4 3.2 0 1.5 1.1 2 1.5 2.2l.1-.2c-.3-.2-.6-.4-.6-1 0-.4.4-1.1 1.4-1.1.9 0 2.1.4 3.7.9 1.4.4 2.9.7 3.7.8V9l-1.5 1.3v.1l1.5 1.3V16c-.8.5-1.7.6-2.5.6-1.5 0-2.8-.4-3.9-1.6l4.1-2V6l-5 2.2c.5-1.3 1.6-2.2 2.6-2.9l-.1-.2c-3 .8-5.7 3.5-5.7 6.9 0 4 3.3 7 7 7 4 0 6.6-3.2 6.6-6.5h-.2c-.6 1.3-1.5 2.5-2.6 3.1v-4.1l1.6-1.3v-.1L140 8.8v-3c1.5 0 3-1 3-2.9zm-8.7 11l-1.2.6c-.7-.9-1.1-2.1-1.1-3.8 0-.7.1-1.5.3-2.1l2.1-.9-.1 6.2zm12.2-12h-.1l-2 1.7v.1l1.7 1.9h.2l2-1.7v-.1l-1.8-1.9zm3 14.8l-.8.5-1-1V9.3l1-.7-.2-.2-.7.6-1.8-2.1-2.9 2 .2.3.7-.5.9 1.1v6.5l-1.3 1 .1.2.7-.5 2.2 2 3-2-.1-.3zm16.7-.1l-.7.5-1.1-1V9.3l1-.8-.2-.2-.8.7-2.3-2.1-3 2.1-2.3-2.1L154 9l-1.8-2.1-2.9 2 .1.3.7-.5 1 1.1v6.5l-.8.8 2.3 1.9 2.2-2-.9-.9V9.3l.9-.6 1.5 1.4v6l-.8.8 2.3 1.9 2.2-2-.9-.9V9.3l.8-.5 1.6 1.4v6l-.7.7 2.3 2.1 3.1-2.1v-.3zm8.7-1.5l-2.5 1.9-2.5-2v-1.2l4.7-3.2v-.1l-2.4-3.6-5.2 2.8v6.8l3.5 2.5 4.5-3.6-.1-.3zm-5-1.7V8.5l.2-.1 2.2 3.5-2.4 1.5zm14.1-.9l-1.9-1.5c1.3-1.1 1.8-2.6 1.8-3.6v-.6h-.2c-.2.5-.6 1-1.4 1-.8 0-1.3-.4-1.8-1L176 9.3v3.6l1.7 1.3c-1.7 1.5-2 2.5-2 3.3 0 1 .5 1.7 1.3 2l.1-.2c-.2-.2-.4-.3-.4-.8 0-.3.4-.8 1.2-.8 1 0 1.6.7 1.9 1l4.3-2.6v-3.6h-.1zm-1.1-3c-.7 1.2-2.2 2.4-3.1 3l-1.1-.9V8.1c.4 1 1.5 1.8 2.6 1.8.7 0 1.1-.1 1.6-.4zm-1.7 8c-.5-1.1-1.7-1.9-2.9-1.9-.3 0-1.1 0-1.9.5.5-.8 1.8-2.2 3.5-3.2l1.2 1 .1 3.6z"> </path> </svg> </div> <div class="menus"> <button>Sport</button> <button>Tech</button> <button>World</button> <button>Finance</button> <button>Politics</button> <button>Buisness</button> <button>Economics</button> <button>Beauty</button> <button>Travel</button> <button>Music</button> <button>Food</button> <button>Science</button> <button>Gaming</button> <button>Energy</button> </div> </section> <section id="news-board"> <div class="row news"> <div class="col-lg-4"> <img class="news-img-size" src="https://1.bp.blogspot.com/-zh5RklspYeY/Xo_G8IzTY1I/AAAAAAAALlM/kS-TcPxl3QMwrE6rCTIMTUxwBk8CxLqJgCLcBGAsYHQ/s1600/%25EB%25A6%25B4%25EB%25A6%25AC%25EC%2595%2588%2B%25E3%2583%25AA%25E3%2583%25AA%25E3%2582%25A2%25E3%2583%25B3%2BBunnie.png" /> </div> <div class="col-lg-8"> <h2> 모여봐요 동물의 숲 릴리안은 귀엽다! </h2> <p> 아기토끼 </p> <div> news * 2022/12/01 </div> </div> </div> </section> </section> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <script src="main.js"></script> </body> </html> main.jslet news = []; const getLatestNews = async () => { let url = new URL('https://api.newscatcherapi.com/v2/latest_headlines?countries=US&topic=business&page_size=10'); let header = new Headers({ 'x-api-key': '1tDoWKJgyfjXBP2f2EnyYMdT_cStUgPJ0D5jOGYyUlM'}); let response = await fetch(url, { headers: header }); let data = await response.json(); news = data.articles; console.log(news); render(); }; const render =() => { let newsHTML = ""; newsHTML = news.map((news)=>{ return '<div class="row news"> <div class="col-lg-4"> <img class="news-img-size" src="https://1.bp.blogspot.com/-zh5RklspYeY/Xo_G8IzTY1I/AAAAAAAALlM/kS-TcPxl3QMwrE6rCTIMTUxwBk8CxLqJgCLcBGAsYHQ/s1600/%25EB%25A6%25B4%25EB%25A6%25AC%25EC%2595%2588%2B%25E3%2583%25AA%25E3%2583%25AA%25E3%2582%25A2%25E3%2583%25B3%2BBunnie.png" /> </div> <div class="col-lg-8"> <h2> 모여봐요 동물의 숲 릴리안은 귀엽다! </h2> <p> 아기토끼 </p> <div> news * 2022/12/01 </div> </div> </div>'; }).join(''); console.log(newsHTML); document.getElementById("news-board").innerHTML=newsHTML; }; getLatestNews();
- 미해결자바스크립트 : 기초부터 실전까지 올인원
TO DO LIST
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 무슨 실수를 했는지 한번 확인해주실수 있을까요??ㅜㅜlet taskInput = document.getElementById('task-input'); let addButton = document.getElementById('add-button'); let tabs = document.querySelectorAll('.task-tabs div'); let taskList = []; let mode = 'all'; let filterList = []; addButton.addEventListener('click', addTask); for (let i = 1; i < tabs.length; i++) { tabs[i].addEventListener('click', function (event) { filter(event); }); } function addTask() { let task = { id: randomIdGenerate(), taskContent: taskInput.value, isComplete: false, }; taskList.push(task); render(); } function render() { let list = []; if (mode == 'all') { list = taskList; } else if (mode == 'ongoing' || mode == 'done') { list = filterList; } } let resultHTML = ''; let list = []; for (let i = 0; i < list.length; i++) { if (list[i].isComplete == true) { resultHTML += `<div class="task" id="${list[i].id}"> <div class ="task-done">${list[i].taskContent}</div> <div> <button onclick="toggleComplete('${list[i].id}')">Check</button> <button onclick="deleteTask('${list[i].id}')">Delete</button> </div> </div>`; } else { resultHTML += `<div class="task" id="${list[i].id}"> <div>${list[i].taskContent}</div> <div> <button onclick="toggleComplete('${list[i].id}')">Check</button> <button onclick="deleteTask('${list[i].id}')">Delete</button> </div> </div>`; } } document.getElementById('task-board').innerHTML = resultHTML; function toggleComplete(id) { for (let i = 0; i < taskList.length; i++) { if (taskList[i].id == id) { taskList[i].isComplete = !taskList[i].isComplete; break; } } render(); console.log(taskList); } function filter(event) { mode = event.target.id; let filterList = []; if (mode == 'all') { render(); } else if (mode == 'ongoing') { for (let i = 0; i < taskList.length; i++) { if (taskList[i].isComplete == false) { filterList.push(taskList[i]); } } render(); } else if (mode == 'done') { for (let i = 0; i < taskList.length; i++) { if (taskList[i].isComplete == true) { filterList.push(taskList[i]); } } render(); } } console.log(filterList); function randomIdGenerate() { return (performance.now().toString(36) + Math.random().toString(36)).replace( /\./g, '' ); } function deleteTask(id) { for (let i = 0; i < taskList.length; i++) { if (taskList[i].id == id) { taskList.splice(i, 1); break; } } render(); }
- 미해결자바스크립트 : 기초부터 실전까지 올인원
TO DO LIST
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.Todolist 강의에 나온대로 자바스크립트 한번 올려주시면 안될까요??? 데모로 되어있는건 좀 달라서 맞춰보기가 힘들어서요,... 제가 뭐가 틀렸는지 도저히 잡을수가 없네요.
- 미해결자바스크립트 : 기초부터 실전까지 올인원
es6 7번 문제에 관하여 질문사항 있습니다.
//! 7. 두 어레이들중 최소값을 찾는 함수를 완성하시오 function getMinimum(){ let a= [45,23,78] let b = [54,11,9] return Math.min(...a,...b)} console.log(getMinimum()); //!질문사항 //Math.min() 이라는 내장함수안에서 array형식으로 된 변수를 입력하려먼 ...a, ...b이런식으로 //형식을 지켜줘야 배열로 인식하는 것인가요?
- 미해결자바스크립트 : 기초부터 실전까지 올인원
node.js 로 웹서버 구축할때 힘들었는데 넷리파이로 이렇게 쉽게 웹서버가 만들어지다니.. 감동입니다. 항상 서버도 살아있고 깃헙이랑 동기화되는게 장점인것같아요
node.js 로 웹서버 구축할때 힘들었는데 넷리파이로 이렇게 쉽게 웹서버가 만들어지다니.. 감동입니다. 항상 서버도 살아있고 깃헙이랑 동기화되는게 장점인것같아요