[Day3]시계, 로컬스토리 유저 확인

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Someting</title>
        <link rel="stylesheet" href="index.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="index.js" ></script>
        <script src="greeting.js"></script>
    </body>
</html>

index.css

h1{
    color: #34495e;
}

.form,
.greetings {
    display: none;
}

.showing {
    display: block;
}

clock.js

시계 작성


const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");

function getTime() {
    const date = new Date(); // Date -> object
    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}`;

}
/* 
  `${hours < 10 ? `0${hours}`:hours}:
  ${minutes < 10 ? `0${minutes}` : minutes}:
  ${seconds < 10 ? `0${seconds}` : seconds}`;
  시간을 표시할 때 22:11:1 -> 22:11:01로 표현하기 위해 삼항연산자를 사용했다.
*/

// 실행
function init() {
    getTime();
    setInterval(getTime, 1000); // 현재 브라우저에서 시간이 흐르는 걸 보여준다.
}

init();

setInterval(fn, 시간)

greeting.js

LocalStorage User

const form = document.querySelector(".js-form");
const input = document.querySelector("input");
const greeting = document.querySelector(".js-greetings") 

const USER_LS = "curretUser"; 
const SHOWING_CN = "showing"; 


function paintGreeting(text) {
    form.classList.remove(SHOWING_CN); 
    greeting.classList.add(SHOWING_CN);
    greeting.innerHTML = `Hello ${text}`
}

    function loadName() {
    const currentUser = localStorage.getItem(USER_LS);
    if(currentUser === null) {
        // 현재 유저가 null 이라면 코드 실행
    } else {
        paintGreeting(currentUser); // 저장된 유저가 있다면, paintGreeting을 실행해! 
    }
}

    function init() {
    loadName();
}

init();

querySelector : element 요소를 가져온다.
querySeletorAll : 모든 element를 array로 가져온다.
localStorage :
chrome창 -> 개발자도구 -> Application -> local Storage

References

노마드 코더 : 강의를 듣고 정리한 자료입니다.
🎈2020.12.03
🎈정리 : song, VSCode

Author And Source

이 문제에 관하여([Day3]시계, 로컬스토리 유저 확인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@withcolinsong/Day3시계-로컬스토리-유저-확인

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[Day3]시계, 로컬스토리 유저 확인

index.html

index.css

clock.js

greeting.js

References

Author And Source

좋은 웹페이지 즐겨찾기