코드네임 :
VanillaJS - Quotes and Background 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Momentum</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="login-form" class="hidden">
<!-- form 의 기본 동작은 submit -->
<input
required
maxlength="15"
type="text"
placeholder="What is your name>"
/>
<!-- <button>Log in</button> -->
<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/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quote.js"></script>
<script src="js/background.js"></script>
</body>
</html>
[quote.js]
const quotes = [
{
quote: "The only limit to our realization of tomorrow is our doubts of today.",
author: "Franklin D. Roosevelt"
},
{
quote: "Success is not final, failure is not fatal: It is the courage to continue that counts.",
author: "Winston Churchill"
},
{
quote: "Do what you can, with what you have, where you are.",
author: "Theodore Roosevelt"
},
{
quote: "In the middle of every difficulty lies opportunity.",
author: "Albert Einstein"
},
{
quote: "Happiness depends upon ourselves.",
author: "Aristotle"
},
{
quote: "Act as if what you do makes a difference. It does.",
author: "William James"
},
{
quote: "The best way to predict the future is to create it.",
author: "Peter Drucker"
},
{
quote: "It is not in the stars to hold our destiny but in ourselves.",
author: "William Shakespeare"
},
{
quote: "Quality is not an act, it is a habit.",
author: "Aristotle"
},
{
quote: "The purpose of our lives is to be happy.",
author: "Dalai Lama"
}
];
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)];
// Math.random() : 0 이상 1 미만의 랜덤한 실수 생성
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
[background.js]
const images = ["0.jpeg", "1.jpeg","2.jpeg"];
const chosenImage = images[Math.floor(Math.random()*images.length)];
const bgImage = document.createElement("img"); //img 태그 생성
bgImage.src=`img/${chosenImage}`; // 이미지 경로 설정
document.body.appendChild(bgImage); //body에 html추가
'🖥️Frontend > VanillaJS' 카테고리의 다른 글
| VanillaJS - Weather (0) | 2025.03.10 |
|---|---|
| VanillaJS - ToDo List (0) | 2025.03.09 |
| VanillaJS - Clock (0) | 2025.03.09 |
| VanillaJS - login 기능 (0) | 2025.03.07 |
| JS (0) | 2025.03.03 |
'🖥️Frontend/VanillaJS' Related Articles
more
