메모장 정리
Math.round() : 반올림
Math.ceil() : 올림 - 1.0 만 1이 될 수 있음
Math.floor() : 내림
Math.random() : 0에서 1사이의 랜덤 숫자 반환
Array.length : 배열의 길이 반환
<!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>Mumentum 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>
quotes.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"); //span: 뒤에 띄어쓰기 불가
const author = document.querySelector("#quote span:last-child");
const todatsQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todatsQuote.quote;
author.innerText = todatsQuote.author;
배경 이미지가 0.jpeg 1.jpeg 2.jpeg 등으로 바껴야 하므로 html에서 바로작성할 수는 없다.
→ js에서 이미지를 만들고 이걸 html에 추가
appendChild() : body에 html을 추가함
background.js
0.jpeg 1.jpeg 2.jpeg는 img폴더 생성 후 집어넣음
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}`; //== <img src = "img/0.jpeg"/> in html
document.body.appendChild(bgImage);
'웹 프론트엔드 > 바닐라 JavaSctipt' 카테고리의 다른 글
| 바닐라 JS로 그림 앱 만들기 #2.0 Painting Lines (1) | 2024.01.23 |
|---|---|
| 바닐라 JS로 그림 앱 만들기 #1 THE CANVAS API (2) | 2024.01.17 |
| 바닐라 JS로 크롬 앱 만들기 #5 CLOCK (1) | 2024.01.15 |
| 바닐라 JS로 크롬 앱 만들기 #4 LOGIN (3) | 2024.01.13 |
| 바닐라 JS로 크롬 앱 만들기 #3 JAVASCRIPT ON THE BROWSER (0) | 2024.01.12 |
