다음은 배경화면 다운로드에 활용했던 사이트이다.
WallpaperBetter - 1080P, 2K, 4K, 5K HD 배경 화면 무료 다운로드
www.wallpaperbetter.com
● Math.random()
0부터 1사이의 랜덤 숫자를 제공하는 JS 기본 함수.
ex). 0에서 10사이의 랜덤 숫자를 받고 싶으면 다음과 같이 작성하면 된다.
Math.random()*10;
● Math.round(), Math.ceil(), Math.floor()
Math.round(): 반올림 함수
Math.ceil(): 천장 함수(올림 함수). 수를 천장까지 올린다.
Math.floor(): 바닥 함수(내림 함수). 수를 바닥까지 내린다.
ex). 위의 random()까지의 함수는 소수점을 갖는데, 정수를 받고 싶은 거였으면 세가지 함수 중 하나를 사용하면 된다.
Math.floor(Math.random()*10)
하지만 우리가 원하는 quotes 배열을 랜덤 출력하는 데, 위 경우로 코드 작성 시 원하는 array의 길이를 다 세어야한다는 번거로움이 있다.따라서 다음과 같이 작성한다.
quotes[Math.floor(Math.random()*quotes.length)]#6 QUOTES AND BACKGROUND까지 최종 완성된 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="Log In"/>
</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/greeting.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>
</html>->index.html
const quotes = [
{
quote: 'I never dreamed about success, I worked for it',
author: 'Estee Lauder'
},
{
quote: 'Do not try to be original, just try to be good.',
author: 'Paul Rand'
},
{
quote: 'Do not be afraid to give up the good to go for the great',
author: 'John D. Rockefeller'
},
{
quote: 'If you cannot fly then run. If you cannot run, then walk. And if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.',
author: 'Martin Luther King Jr.'
},
{
quote: 'Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.',
author: 'Thomas Edison'
},
{
quote: 'The fastest way to change yourself is to hang out with people who are already the way you want to be',
author: 'REid Hoffman'
},
{
quote: 'Money is like gasoline during a road trip. You do not want to run out of gas on your trip, but you are not doing a tour of gas stations',
author: 'Tim O Reilly'
},
{
quote: 'Some people dream of success, while other people get up every morning and make it happen',
author: 'Wayne Huizenga'
},
{
quote: 'The only thing worse than starting something and falling.. is not starting something',
author: 'SEth Godin'
},
{
quote: 'If you really want to do something, you will find a way. If you do not, you will find an excuse.',
author: 'Jim Rohn'
},
];
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;->quotes.js
const images=["0.jpg","1.jpg","2.jpg"];
const chosenImage=images[Math.floor(Math.random()*images.length)];
const bgImage=document.createElement("img");
bgImage.src=`img/${chosenImage}`;
//이미지를 HTML의 body안에 넣음
document.body.appendChild(bgImage);->background.js
