하루를살자

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..

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..

- 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..

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..

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..

시작하기 앞서, 두 개의 폴더, 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..

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) --> 저장된 값 불러옴 ..

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 ..