1 Quotes
10개 명언과 작가를 준비하고 이를 랜덤으로 띄어주는 기능을 구현
숫자 0-9까지 랜덤으로 정해주는 기능
Math.random() 함수를 통해 랜덤 수 얻어내기
해야할 거 두 가지
1. 정수를 0-9까지 뽑아내도록 만들기
2. 뒤에 소수점 날리기
1번에 대한 답으로 10을 곱하면 됨
2번에 대한 답으로 Math.floor() 함수를 쓰면 됨. (floor(내림) 말고, ceil(올림), round(반올림)이 있음)
HTML(queots.js 추가해주고, div추가)
<!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 App</title>
</head>
<body>
<form class="hidden" id="login-form">
<input
required
maxlength ="15"
type="text"
placeholder="What is your name?" />
<button>Log In</button>
</form>
<h2 id="clock">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>JS
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;2 Background
마찬가지로 이미지를 랜덤으로 화면에 띄어주는 기능
HTML과 연동이 되어야해서 js에서 새로운 기능을 사용해야 함.
createElement라는 기능임. HTML에 element를 만드는 것임.
이는 이전에 쓰던 HTML에 있던 걸 가져오는 queorySelctor랑은 다름.
그라고 만든 element를 HTML body에 집어넣어주면 됨.
HTML 코드에는 변함이 없지만, JS에서 HTML을 조작 중.
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 App</title>
</head>
<body>
<form class="hidden" id="login-form">
<input
required
maxlength ="15"
type="text"
placeholder="What is your name?" />
<button>Log In</button>
</form>
<h2 id="clock">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>
<script src="js/background.js"></script>
</body>
</html>JS
const images =["0.jpeg","1.jpeg","2.jpeg"];
const chosenImage = images[Math.floor(Math.random()*images.length)];
const bgImage = document.createElement("img");
bgImage.src =`img/${chosenImage}`;
console.log(bgImage);
document.body.appendChild(bgImage);
배움이 즐거운 개발자