Frontend/JavaScript
바닐라 JS로 크롬 앱 만들기 (#6 QUOTES AND BACKGROUND)
:_:
2022. 4. 22. 10:02
Quotes
quotes.js 를 만들고 quotes 배열에 명언을 넣어서 랜덤으로 출력
index.html
<!DOCTYPE html>
<html lang="ko">
<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 App</title>
</head>
<body>
<form id="login-form" class="hidden">
<input type="text" placeholder="what is your name?"/>
<button>Lon 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/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
</body>
</html>
quotes.js
const quotes = [
{
quote: "The greatest glory in living lies not in never falling, but in rising every time we fall",
author: "Nelson Mandela",
},
{
quote: "Never let the fear of striking out keep you from playing the game.",
author: "Babe Ruth",
},
{
quote: "Life is either a daring adventure or nothing at all.",
author: "Helen Keller",
}
... 총 10개 추가
]
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
console.log(quotes[0]); // 첫번째 명언 가져옴
// round() : 반올림
// ceil() : 1.0 만 1이 될 수 있고 1.01만 되도 2가 출력
// floor() : 버림, 1.9 가 1로 출력
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
이미지 랜덤으로 넣기
img 폴더를 만들어서 무료 이미지 3개 넣어줌
const images = ["1.jpg","2.jpg","3.jpg"];
// 랜덤한 숫자에 images 길이만큼 곱해서 floor
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
// body에 html 추가
document.body.appendChild(bgImage);
' 노마드 코드 - 바닐라 JS로 크롬 앱 만들기' 공부하면서 정리한 내용입니다.
728x90