명언과 작가가 담긴 객체를 배열안에 5개를 담았다. 이 명언을 브라우저가 새로고침 할때마다 랜덤 하게 작가와 함께 보여주려고 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<form id="login-form" class="hidden">
<input
required
maxlength="10"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h2 id="clock">00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<div id="quotes">
<span></span><br/>
<span></span>
</div>
<script src="JS/greetings.js"></script>
<script src="JS/clock.js"></script>
<script src="JS/Quotes.js"></script>
</body>
</html>const Quotes = [ // 명언 객체
{
quotes: "아니 뗀 굴뚝에 연기나랴?",
author: "한국 속담"
},
{
quotes: "노력은 배신하지 않는다.",
author: "유명한 명언"
},
{
quotes: "열번 찍어 안넘어 가는 나무 없다.",
author: "한국 속담"
},
{
quotes: "가는말이 고와야 오는말이 곱다",
author: "한국 속담"
},
{
quotes: "1% 재능과 99%의 노력",
author: "작자 미상"
},
]- 먼저 HTML에서 명언과 작가 텍스트를 랜덤으로 출력할 span 태그를 가져온다.
const showQuote = document.querySelector("#quotes span:first-child");
const showAuthor = document.querySelector("#quotes span:last-child");- Math 모듈의 randam()과 round()를 사용하여 0~4까지 랜덤한 숫자를 만들수 있다.
showQuotes.innerText = Quotes[Math.round(Math.random() * 4)].quotes- round()는 소수점을 반올림 한다.
- ceil은 소수점을 상단으로 끌어올린다.
- floor는 소수점을 하단으로 끌어내린다.
Math.ceil(1.1) // 2
Math.floor(1.9) // 1문제는 명언을 추가했을때 random함수에 곱해줘야 하는 숫자가 하드코딩 되어있어 유지보수가 어렵다는 점. 때문에 배열의 숫자를 할당하는 것으로 문제를 해결한다.
const todaysQuote = Quotes[Math.round(Math.random() * Quotes.length)];- 먼저 todaysQuote 변수에 위와같이 반올림한 0~1의 랜덤한 숫자에 배열의 길이를 담아준 후
showQuote.innerText = todaysQuote.quote;
showAuthor.innerText = todaysQuote.author;- innerText를 이용해 객체의 명언과 작가를 넣어주면
결과:
랜덤하게 명언과 작가를 출력할 수 있다!
프론트엔드 개발자 지망생