-
JavaScript (3)웹개발/JavaScript 2020. 12. 29. 01:00
* Making a JS Clock
· setInterval(fn, millisecond)
함수 fn을 millisecond 마다 실행
- index(1).html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index(1).css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<script src="clock.js"></script>
</body>
</html>
- index(1).css
body{
background-color:#ecf0f1;
}
.btn{
cursor:pointer;
}
h1{
color:#34495e;
transition: color 0.5s ease-in-out;
}
.clicked{
color:#7f8c8d;
}
- clock.js
const clockContainer=document.querySelector(".js-clock"),
clockTitle=clockContainer.querySelector("h1");
function getTime(){
const date=new Date();
const minutes=date.getMinutes();
const hours=date.getHours();
const seconds=date.getSeconds();
clockTitle.innerText=`${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
function init(){
getTime();
setInterval(getTime, 1000);
}
init();
* Saving the User Name
- .index(1).html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index(1).css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?"/>
</form>
<h4 class="js-greetings greetings"></h4>
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>
- .index(1).css
body{
background-color:#ecf0f1;
}
.btn{
cursor:pointer;
}
body{
color:#34495e;
}
.clicked{
color:#7f8c8d;
}
.form,
.greetings{
display: none;
}
.showing{
display: block;
}
- clock.js
const clockContainer=document.querySelector(".js-clock"),
clockTitle=clockContainer.querySelector("h1");
function getTime(){
const date=new Date();
const minutes=date.getMinutes();
const hours=date.getHours();
const seconds=date.getSeconds();
clockTitle.innerText=`${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
function init(){
getTime();
setInterval(getTime, 1000);
}
init();
- greeting.js
const form=document.querySelector(".js-form"),
input=form.querySelector("input"),
greeting=document.querySelector(".js-greetings");
const USER_LS="currentUser",
SHOWING_CN="showing";
function saveName(text){
localStorage.setItem(USER_LS,text);
}
function paintGreeting(text){
form.classList.remove(SHOWING_CN);
greeting.classList.add(SHOWING_CN);
greeting.innerText=`Hello ${text}`;
}
function handleSubmit(event){
event.preventDefault();
const currentValue=input.value;
paintGreeting(currentValue);
saveName(currentValue);
}
function askForName(){
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit);
}
function loadName(){
const currentUser=localStorage.getItem(USER_LS);
if(currentUser===null){
//she is not
askForName();
}
else{
//she is
paintGreeting(currentUser);
}
}
function init(){
loadName();
}
init();
* Making a To Do List
자바스크립트는 local storage에 있는 모든 데이터를 string으로 저장하려고 함
-> object가 string이 되도록 만들어야 함 (JSON.stringify() 사용)
· JSON(JavaScript Obhect Notation)
: 데이터를 전달할 때, 자바스크립트가 그걸 다룰 수 있도록 object로 바꿔주는 기능
· .forEach: array에 담겨있는 것들 각각에 한 번씩 함수를 실행시켜 주는 것
· .filter(fn): filter는 array의 모든 아이템을 통해 함수를 실행하고
그리고 true인 아이템들만 가지고 새로운 array를 만듦
- todo.js
const toDoForm=document.querySelector(".js-toDoForm"),
toDoInput=toDoForm.querySelector("input"),
toDoList=document.querySelector(".js-toDoList");
const TODOS_LS='toDos';
let toDos=[];
function deleteToDo(event){
const btn=event.target;
const li=btn.parentNode;
toDoList.removeChild(li);
const cleanToDos=toDos.filter(function(toDo){
return toDo.id !== parseInt(li.id);
});
toDos=cleanToDos;
saveToDos();
}
function saveToDos(){
localStorage.setItem(TODOS_LS,JSON.stringify(toDos));
}
function paintToDo(text){
const li=document.createElement("li");
const delBtn=document.createElement("button");
delBtn.innerText="❌";
delBtn.addEventListener("click",deleteToDo);
const span=document.createElement("span");
const newId=toDos.length+1;
span.innerText=text;
li.appendChild(delBtn);
li.appendChild(span);
li.id=newId;
toDoList.appendChild(li);
const toDoObj={
text: text,
id: newId
};
toDos.push(toDoObj);
saveToDos();
}
function handleSubmit(event){
event.preventDefault();
const currentValue=toDoInput.value;
paintToDo(currentValue);
toDoInput.value="";
}
function loadToDos(){
const loadedToDos=localStorage.getItem(TODOS_LS);
if(loadedToDos!==null){
const parsedToDos=JSON.parse(loadedToDos);
parsedToDos.forEach(function(toDo){
paintToDo(toDo.text);
})
}
}
function init(){
loadToDos();
toDoForm.addEventListener("submit",handleSubmit);
}
init();
'웹개발 > JavaScript' 카테고리의 다른 글
ReactJS (1) (0) 2020.12.31 JavaScript로 To Do List 만들기 (0) 2020.12.30 JavaScript (4) (0) 2020.12.30 JavaScript (2) (0) 2020.12.28 JavaScript (1) (0) 2020.12.28