티스토리

하루를살자

검색하기

블로그 홈

하루를살자

live-a-life.tistory.com/m

Kai1996 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

JS Clone Project [Weather] - 1, weather API Key Points - use of open API. - Weather API from https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org.. 공감수 0 댓글수 0 2021. 12. 9.
JS Clone Project [Weather] - 1, getting location Key Points - use of navigator object and getCurrentPosition(). - Parameters of getCurrentPosition(). //if getCurrentPosition is succeed , it calls onGeoOk function with geolocation object information function onGeoOk(pos){ const lat = pos.coords.latitude; const long = pos.coords.longitude; console.log(lat,long); } function onGeoError(){ alert("Can't find you.!"); } //getCurrentPosition requires .. 공감수 0 댓글수 0 2021. 12. 9.
JS Clone Project [to-do list] - 4, Deleting to-Do list Key Points - Logic of deleting selected item on the array - Use of filter() function deleteTodo(event){ //We can identify which li called this event by inspecting event.target object. console.log(event.target); console.dir(event.target.parentElement.innerText); //I designate the selected li element const li = event.target.parentElement; //Remove the list li.remove(); toDos = toDos.filter((item) .. 공감수 0 댓글수 0 2021. 12. 9.
JS Clone Project [to-do list] - 3, Saving to-do list Key Functions 1. LocalStorage can only save the text. 2. pushing item into Array 3. I have tried to set the Storage value in an array form but in text --> used JSON.Stringify 4. Use of JSON.parse --> makes string into JSON format 5. Use of forEach on each item of an array 6. It is now able to show the toDo list after refreshing the page. 6. Deletion on the page --> Not able to delete from the lo.. 공감수 0 댓글수 0 2021. 12. 9.
JS Clone Project [to-do list] - 1,2 The following code will cover generating a to-do list and delete button. - todo.js const todoForm = document.querySelector("#todo-form"); const todoList = document.querySelector("#todo-list"); const todoInput = document.querySelector("#todo-form input"); // const list_key = "userList"; //Will be used later on //3. Delete selected todo list function deleteTodo(event){ //We can identify which li c.. 공감수 0 댓글수 0 2021. 12. 5.
JS Clone Project [Background] - Image.js //Saved Image source names const images = [ "0.jpeg", "1.jpeg", "2.jpeg" ]; //choose random images const chosenImage = images[Math.floor(Math.random() * images.length)]; //create tag const bgimage = document.createElement("img"); //add img src bgimage.src = `img/${chosenImage}`; console.log(bgimage); //append img tag on the body document.body.appendChild(bgimage); - Key Points 1. crea.. 공감수 0 댓글수 0 2021. 12. 5.
JS Clone Project [Quotes] Momentum application 에 사용될 문구들은 아래와 같이 따로 하드 코딩으로 JSON 형식으로 저장하였고, "quote" 와 "author" 라는 Key 값들로 이루워 져있다. - quote.js const quotes = [ { quote: "The way to get started is to quit talking and begin doing.", author: "Walt Disney", }, { quote: "Life is what happens when you're busy making other plans.", author: "John Lennon", }, { quote: "The world is a book and those who do not travel read only one.. 공감수 0 댓글수 0 2021. 12. 5.
JS Clone Project [Clock] - 2, PadStart To fix the problem at the first version of the clock, we have to consider the time String to always have two characters. To make "1" -> "01" PadStart --> it is used to String, to display in a "N digit form" of the user desire. Ex) "1".padStart(2,"0") --> "01" *The first argument is the "2 digit form" that the user desires to represent the "1" string as. *The second argument fills the rest of the.. 공감수 0 댓글수 0 2021. 12. 5.
JS Clone Project [Clock] - 1 시작하기 앞서, 두 개의 폴더, CSS, JS, 가 생성되었고, css 폴더 안에 style.css, js 안에, app.js -> greeting.js , clock.js 라는 파일을 만듦. - index.html Log In 네이버 Things added 1. Notice that the scr for css and js has been changed as there were saved in css and js files respectively. 2. with id = "clock". - clock.js const clock = document.querySelector("#clock"); function getTime () { //Call for Date object const date = new D.. 공감수 0 댓글수 0 2021. 12. 4.
JS Clone Project [Login] - 3, Saving User Input Saving User Input using Local Storage. [Login] - 2 에서 보았던 classList.add 와 classList.remove 는 많이쓰이는 방법이고, 이를 더욱 쉽게 쓰기 위해 Local Storage 라는 API 를 활용해 유저 Input 을 저장해보려 한다. - setItem Local Storage 에 setItem 을 활용하여 정보를 저장할수 있다. Example) *F12 -> 애플리케이션 을 가보면, 저장용량애 Local Storage, Session Storage, indexedDB 등 많은 정보를 볼수있다 localStorage.setItem(Key, value) --> 값을 저장 localStorage.getItem(Key) --> 저장된 값 불러옴 .. 공감수 0 댓글수 0 2021. 12. 4.
JS Clone Project [Login] - 2, Getting User Input Getting User Input 이번 예제 에서는 로그인 form 의 input value 에 유저 가 닉네임을 submit 할시, input 값을 저장 하고 Form 을 사라지게 한 뒤, 유저 input 을 페이지 에 프린트할 예정이다. 중요한 Key 포인트! 1. "hidden" 이라는 클래스 생성 후, CSS 에서 display: invisible 로 설정 해 준다. 2. User 입력값을 프린트해주는 태그를 초기에 hidden 의 클래스 로 지정해 주고, Inner Text 는 비워준다. 3. App.js 에서 "hidden" 클래스 이름을 저장하는 상수 지정. 4. Use of `${}` expression 5. Use of classList object. - Index.html Log In .. 공감수 0 댓글수 0 2021. 12. 4.
JS Clone Project [Login] - 1 - Index.html Log In - app.js const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); console.log(loginInput.outerHTML); console.log(loginButton); function onLoginBtnClick (){ //input form 안에 쓴 글을 보려고 하는 데 무슨 프로퍼티로 보는지 모르겠으면 console.dir 로 찾아보고, console.dir(loginInput); //Value 라는 프로퍼티 가 쓴 값을 저장하고 있다는 걸 알았으니 console.log cons.. 공감수 0 댓글수 0 2021. 12. 3.
JS - Vanilla JS Clone Project [CSS in js] //아래 두개의 선택자는 같은결과를 줌 const title2 = document.querySelector("div .title"); //Event handler function handleTitleEnter(){ const titleColor = title2.style.color; let newColor; if (titleColor === "green"){ newColor = "tomato"; }else{ newColor = "green"; } title2.style.color = newColor; } //Call the event upon the user's behavior title2.addEventListener("mouseenter" , handleTitleEnter); "handleTitleE.. 공감수 0 댓글수 0 2021. 12. 2.
JS - Vanilla JS Clone Project [Event Handlers] 이벤트 핸들러는 예제로 설명할예정이다. //아래 두개의 선택자는 같은결과를 줌 const title = document.getElementById("title"); const title2 = document.querySelector("div .title"); console.log(title.innerText); console.log(title2.innerText); //Event handler function handleTitleEnter(){ console.log("Title was clicked!"); title2.style.color = "Green"; title2.innerText = "KAI KIM"; } function handleTitleLeave(){ console.log("Title wa.. 공감수 0 댓글수 0 2021. 12. 2.
JS - Vanilla JS Clone Project [JS with DOM] Html 의 Elements 들은 JS 로 tag 타입 이나 class, ID 로 접근할수 있다. 가장 기본적인 예로 index.html 에 title 이란 ID 를 h1 tag 로 만들어서 console.dir() 을 아래와 같이 해볼 것 이다. -index.html Grab Me! -app.js const title = document.getElementById("title"); console.dir(title); dir 은 자바스크립트 오브젝트 가 가지고 있는 모든 properties 를 볼수 있게 하는 메소드이고 테그가 가지고 있는 모든 properties 들을 console 에 보여준다. 이 프로퍼티 들 은 테그 를 맨 처음 쓸 때 값을 주어도 무방하고, JS 로 동적인 효과를 줄 때도 사용이 .. 공감수 0 댓글수 0 2021. 12. 2.
JS - Vanilla JS Clone Project [JS Recap] 개발환경 - Editor --> VSCODE - Web browser --> Google Chrome - Language --> JS Java Script 란? 웹 페이지에 생동감(동적 이벤트) 을 불어 넣기 위해 만들어진 프로그래밍 언어로써, 많은 브라우저에 적용 되어 있는 스크립트 이다. 기본 적인 자바 스크립트 문법과 사용법을 익혀 보자. VSCODE 에 app.js index.html style.css 세개의 파일일 생성 한뒤, index.html 에 alert 이벤트를 구현 해보도록하자. 일단 HTML. CSS , JS 의 관계를 나의 방식대로 정의하면, HTML : 뼈대 CSS : 외관 JS : 근육 으로 생각할수 있고, HTML 코드에 붙혀 넣으면된다. HTML 기본 형식은 VSCODE 에서.. 공감수 0 댓글수 0 2021. 12. 1.
JS - Momentum application project requirement Momentum application 요구사항 1. Login 2. Change in Background (Random) 3. Time 4. Cookies & session 5. Local time 6. Random Quote 7. Create user To-Do list 이 모든 요구사항들을 자바 스크립트로 구현할것이고, 각 요구사항마다 게시글을 올릴 예정이다. 공감수 0 댓글수 0 2021. 12. 1.
JS - Vanilla JS Clone Project [Intro] 오늘은 nomad 에서 제공하는 Vanilla JS 클론 프로젝트를 소개 하려한다. 이코스를 통해서 Momentum 어플리케이션을 JS 로 구현 하는 방법을 배우고, 그 자취를 기록에 남기려고 한다. 프로젝트 강의는 아래 링크에서 수강할수 있다. https://nomadcoders.co/javascript-for-beginners/lectures/2867 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 공감수 0 댓글수 0 2021. 12. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.