하루를살자

JS Clone Project [Clock] - 1 본문

JS

JS Clone Project [Clock] - 1

Kai1996 2021. 12. 4. 23:14

시작하기 앞서, 두 개의 폴더, CSS, JS, 가 생성되었고, css 폴더 안에 style.css, js 안에, app.js -> greeting.js , clock.js 라는 파일을 만듦. 

 

- index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="css/style.css">
    
    <title>Clone Momentum App</title>
</head>

<body>
    <form id ="login-form" class = "hidden">

        
        <input required maxlength="15" type ="text" placeholder=" What is your name?"/>
        <button> Log In </button>
        
    </form>
        <h1 id = "greeting" class = "hidden"> </h1> 
    <a id = "naver" href="https://naver.com"> 네이버 </a>
    <h2 id ="clock"></h2>

    <script src = "js/greeting.js"></script>
    <script src = "js/clock.js"></script>

</body>

</html>

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. <h2> with id = "clock".

 

- clock.js

const clock = document.querySelector("#clock");

function getTime () {
    //Call for Date object
    const date = new Date();
    clock.innerHTML = `${date.getHours()} : ${date.getMinutes()} : ${date.getSeconds()}`;

}
//As soon as the web is loaded, it calls for getTime ();
getTime ();
//setInterval --> Repeat calling sayHi() after 5 seconds since it's loaded 
setInterval(getTime, 1000);

//setTimeout --> It gives 5s timeout once the page is loaded and runs the function once
//setTimeout(sayHi, 5000);

1. Created an event handler "getTime" 

2. Created "date" object by new Date() inside of "getTime" function;

3. Calls getTime() function as soon as the web page is loaded. 

4. Calls for setInterval(FUNCTION, TIME(ms) )

--> Repats calling input argument function for every interval of TIME(ms). 

 

These enable the web page to display time in form of hours: minutes: seconds.

However, the time currently has a minor problem when it's less than 10 seconds, as it only displays one digit of the time. ex) 01s --> 1s. 

 

'JS' 카테고리의 다른 글

JS Clone Project [Quotes]  (0) 2021.12.05
JS Clone Project [Clock] - 2, PadStart  (0) 2021.12.05
JS Clone Project [Login] - 3, Saving User Input  (0) 2021.12.04
JS Clone Project [Login] - 2, Getting User Input  (0) 2021.12.04
JS Clone Project [Login] - 1  (0) 2021.12.03
'JS' Related Articles more
Comments