math module
: Math module은 javaScript에서 기본 제공
- Math.random() : 0부터 1사이에 랜덤한 숫자를 줌 -> 0.132435435
- Math.round() : 반올림 1.1 -> 1
- Math.ceil() : 올림 1.1 -> 2
- Math.floor() : 내림 1.1 -> 1
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>Momentum</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>
<h2 id="clock">00:00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/app_login.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>
</html>- div : 블록타입
- span : 인라인타입
-> 요소는 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 속성값을 공유하는 데 유용하게 사용
quotes.js
-> 명언 랜덤 출력하기
const quotes = [
{
quote: "프로그램은 말이야, 일단 고민해서 짜고 마지막에 빌어!
움직여! 움직여! 움직이라면 움직이라고~!",
author: "unknown",
},
{
quote: "Life has no limitations, except the ones you make.",
author: "Les Brown",
},
{
quote: "Life is a lively process of becoming.",
author: "Gen. Douglas MacArthur",
},
{
quote:
"Life is what happens while you are busy making other plans.",
author: "John Lennon",
},
{
quote: "All great changes are preceded by chaos.",
author: "Deepak Chopra",
},
{
quote: "Change alone is eternal, perpetual, immortal",
author: "Arthur Shopenhauer",
},
{
quote: "By changing nothing, nothing changes.",
author: "Tony Robbins",
},
{
quote: "Change is inevitable. Growth is optional.",
author: "John C. Maxwell",
},
{
quote: "Change your thinking, change your life.",
author: "Ernest Holmes",
},
{
quote: "Failure is not fatal, but failure to change might be.",
author: "John Wooden",
},
{
quote: "Nothing is forever except change.",
author: "Buddha",
},
];
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;background.js
-> 이미지 랜덤 출력하기
const images = ["1.jpg", "2.jpg", "3.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
// 자바스크립트로 html 태그 만들기
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
// html body에 이미지 넣어주기
document.body.appendChild(bgImage); // body 안 제일 마지막에 들어감
//document.body.prepend(bgImage); // body 안 제일 앞에 들어감
// => bgImage = <img src="img/1~3.jpg">
