분류 전체보기 (35) 썸네일형 리스트형 200520(수)_TIL 오늘 한 일 클론코딩 크롬앱 만들기 REVIEW to-do list 생성 및 localStorage 저장 to-do list 목록을 모두 초기화할 수 있는 reset 버튼 생성 (*localStorage 삭제) : 응용 USER의 이름이 LS에 없는 경우, toDoForm 클래스 삭제 (*classList.add / classList.remove) 체크박스 체크 여부에 따른 이벤트 적용 (onclick, addEventLister) 기존에 배운 것을 바탕으로 여러가지 응용하여 새로운 것을 작업해보고 성공했을 때의 즐거움이 큰 하루였다 ㅎㅎ 200518(월)_TIL 오늘 한 일 클론코딩 크롬앱 만들기 REVIEW : 기능을 작은 단위로 나누어서 스스로 구현해보는 작업 현재 위치를 기준으로 날씨 가져오기 navigator API : geolocation.getCurrentPosition () openweathermap 이용 fetch API 개념 이해 Synchronous vs. Asynchronous fetch API 요청과 응답 , fetch(); .then( ); response 객체의 개념 및 이해 , status 200, 400, 404 json ( ); 200515(금)_TIL 오늘 한 일 클론코딩 크롬앱 만들기 REVIEW : 기능을 작은 단위로 나누어서 스스로 구현해보는 작업 현재 시간 가져오기 : new Date 현재 날짜 가져오기 현재 위치 가져오기 : navigator API 활용 localStorage 개념 복습 , API 개념 이해, sevaralnterval() 개념 복습, JSON.stringify() 현재 시간 가져오기를 강의때 배운 내용을 응용하여 AM, PM 으로 구분하여 표현, 24시간 기준이 아닌 12시간 기준으로 시간 표현 구현함 코드를 하나씩 쪼개서 이해하려고 하니깐 간단한 기능이여도 시간이 정말 많이 소요되었다. 강의때는 받아적는 코딩이였는데, 지금은 왜 그렇게 썼는지 100% 이해하면서 복습하고있다. 응용해서 기능을 구현할때는 단순한 문법오류로 .. [JavaScript]현재 위치 가져오기 navigator API : geolocation.getCurrentPosition() navigator wep API 를 활용하여 현재 위치를 가져온다, * API 란? API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 프로그램들이 서로 상호작용하는 것을 도와주는 매개체라고 볼 수 있다. const weather = document.querySelector(".js-weather"); function saveCoords(coordsObj) { localStorage.setItem(COORDS, JSON.stringify(coordsObj)); //localstorage의 key, value 값은 모두 st.. [JavaScript] 현재 시간 및 날짜 가져오기 : new Date(); 크롬 to-do list 앱 만들기 복습 :new Date () 이용하여 현재 시간 및 날짜 가져오기 HTML 현재 시간 AM 12:00:00 2020년 5월 14일 목요일 현재 시간 가져오기 : new Date ( ) 활용 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"), amPm = clockContainer.querySelector("h2"); function getTime() { const time = new Date(); let hours = time.getHours(); // 변수가 변하기때문에, const로 선언하면 error 발생 const min.. 200513(수)_TIL 오늘 한 일 클론코딩 크롬앱 만들기 - 마무리 작업 클론코딩 크롬앱 만들기 - CSS 마무리 작업 form에서 submit 이벤트 발생 시 에러 디버깅 간단한 CSS 작업이지만 강의를 보고 따라하는게 아니고 혼자 스스로 구글링해서 적용해가면서 작업하다보니, 시간이 꽤 많이 소요되었다... 그리고 한 2시간? 가까이 씨름하던 에러의 이유는 단순한.. '변수명 오타'였음을 깨달았을 때의 기분을 잊지못할 것 같다 하하하하..... console.log 활용을 잘해야겠다는 교훈을 얻고 오늘을 마무리한다. 내일부터는 스스로 작은 단위로 기능을 쪼개서 구현해보는 작은 프로젝트를 진행한 후, A to Z부터 혼자 100% 코딩해보는 시간을 가지면서 크롬앱 리뷰를 진행할 것 이다! 크롬앱만들기 완성된 소스 -> htt.. 200512(화)_TIL 오늘 한 일 클론코딩 크롬앱 만들기 - USER의 현재 위치 AIP활용하여 가져오기 좌표값 (위도, 경도)를 이용해서 localStorage 저장 navigator.geolocation.getCurrentPosition 클론코딩 크롬앱 만들기 - 위치에 따른 현재 날씨 API활용하여 가져오기 openweathermap활용 JS 활용하여 특정 URL 호출하기 - fetch, then main CSS 작업 div 박스 중앙정렬 : flex 활용 배경이미지 어두운 효과 주기 : filter.brightness(50%) input CSS 효과 : focus outline 비활성화, 배경 및 컬러 변경, placehorder 텍스트 수정 등 200511(월)_TIL 오늘 한 일 클론코딩 크롬앱 만들기 - TO-Do-List 삭제하기 HTML 상에서 삭제하기 / localStorage에서 완전히 삭제하기 event.target / filter 함수 : 배열의 모든 아이템에 함수를 실행하고 true인 값만 반환하여 새배열을 만든다. parseint : string을 number로 변환 클론코딩 크롬앱 만들기 - image background 삽입 Math.random : 랜덤으로 수 배정 Math.floor : 소수점 이하 버림 ex)2.989898 -> 2 Math.ceil :소점 이하 내림 ex)2.989898 ->3 이전 1 2 3 4 5 다음
