[My-Chrome] javascript를 이용한 mychrome만들기

1. 목표

HTML, CSS, Javascript를 이용하여 MyChrome을 만들고 싶었다.

넣을 기능은 4가지이다.

 

• 날짜 표시
• 시간표시
• 나만의 배경
• todolist

 

 

2. 결과

4가지의 충족 사항을 모두 만족한 웹페이지이다.

 

 

3. 코드

github.com/RyuJungSik/my-chrome

RyuJungSik/my-chrome

 

 

4-1. 깨달은 점(시간표시)

1.

 const date=new Date();
 const minutes=date.getMinutes();

이렇게 Date객체를 만들 수 있고. 그것을 통해서 시간, 초, 분등을 나타낼 수 있다.

 

2.

clockTitle.innerText=`${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
 

 

innerText를 통해서 HTML 외의 다른 텍스트를 삽입할 수 있다.

 

3.

setInterval(getTime, 1000);

 

  setInterval을 통해서 getTime의 함수를 시간마다 실행 가능하게 한다.

 

 

 

4-2. 깨달은 점(사용자 입력, 인사 표시)

1.

const currentUser=localStorage.getItem(USER_LS);

localStorage를 통해 웹에서 입력값을 로컬에 저장이 가능하고. 이것을 set, get 할 수 있다.

 

2.

function askFormName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit", handleSubmit)
}

classList를 통해서 해당 태그에 class를 넣거나 없앨 수 있고

그 행동을 통해서 해당 태그가 보이거나 안 보이게 조종 가능하다.

 

addEventListener(a, b) 메서드는 굉장히 중요한데 a라는 행동을 취한 게 인지되면 b라는 함수를 실행한다는 내용이다.

a에는 click, submit, onclick 등이 있다.

 

3.

function handleSubmit(event){
    event.preventDefault();
    const currentValue=input.value;
    paintGreeting(currentValue);
    saveName(currentValue);
}

event.preventDefault(); event발생 시 새로고침 되는 걸 막아준다.

const currentValue=input.value; 입력된 값을 currentValue에 저장한다.

 

 

4-3. 깨달은 점(ToDo리스트)

1.

const parsedToDos=JSON.parse(loadedToDos);

JSON이 살짝 어려운 부분인데 JSON은 자바스크립트의 객체 표기법을 제한하여 텍스트 기반의 테이터 표준이다.

대표적으로 JSON.stringify(), JSON.parse()이 있는데

JSON.stringify(), 은 JSON형태로 문자열을 반환하고

JSON.parse()은 문자열을 자바스크립트 객체로 변환한다.

 

2.

 parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        })
    }

forEach는 주어진 함수를 배열 요소 각각에 대해 실행한다.

 

3.

  const li=document.createElement("li");
    const delBtn=document.createElement("button");
    const span=document.createElement("span");
    const newId=toDos.length+1;

흥미로운 부분인데 HTML을 이용하지 않고 createElement를 통해 유동적으로 tag를 만들 수 있다.

 

4.

li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId;
    toDoList.appendChild(li);

이 부분이 흥미롭다. 만든 엘리먼트의 button, li을 appendChild을 통해 ul태그에 넣어준다.

 

 

5.

const cleanToDos=toDos.filter(function(toDo){
        return toDo.id !==parseInt(li.id);
    });

filter는 조건에 맞는 값만 출력하고 그 조건은 id값이 일치하는 것이다.