오늘은 노마드코더 스터디를 시작한지 벌써 다섯 번째 날입니다. 이제 두 번만 더 들으면 자바스크립트에서 새로운 언어로 넘어갈 수 있답니다. 그럼..화이탱!
#6.0 (Quotes)
const quotes =[
{
quote: "Be yourself; everyone else is already taken.",
author:"Oscar Wilde",
},
{
quote:"I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
author:"Marilyn Monroe",
},
{
quote:"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
author:"Albert Einstein",
},
{
quote:"So many books, so little time.",
author:"Frank Zappa",
},
{
quote:"A room without books is like a body without a soul.",
author:"Marcus Tullius Cicero",
},
{
quote:"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.",
author:"Bernard M. Baruch",
},
{
quote:"You know you're in love when you can't fall asleep because reality is finally better than your dreams.",
author:"Dr. Seuss",
},
{
quote:"You only live once, but if you do it right, once is enough.",
author:"Mae West",
},
{
quote:"Be the change that you wish to see in the world.",
author:"Mahatma Gandhi",
},
{
quote:"In three words I can sum up everything I've learned about life: it goes on.",
author:"Robert Frost",
}
]
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
//we need a fucntion that gives a number between 0 and 9 (to get the item in the array, you need to do -1)
//Math.random gives a random number (float) between 0 and 1, so if we multiply it by 10, it gives a random number between 0 and 10
//Math.round rounds the float to integer
//Math.ceil will round to the top
//Math.floor will round to the bottom
console.log(quotes[Math.floor(Math.random()*10)]);however there can be more than 10 quotes, so we just the following code (get the length of the array)
console.log(quotes[Math.floor(Math.random()*quotes.length)]);html code
<!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</title>
</head>
<body>
<form class="hidden" id="login-form">
</form>
<h1 id="greeting" class="hidden"></h1>
<h2 id="clock">00:00:00</h2>
<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>we put the quote and the author in each 'span'
const quotes =[
]
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;#6.1 (Background)
how to put a random background in the website
javascript code
const images = ["0.jpg","1.jpg","2.jpg"];
const chosenImage = images[Math.floor(Math.random()*images.length)];
const bgImage = document.createElement("img");
//same thing as doing <img src="img/1.jpg"> in html, instead of writing html first, javascript will do that for us
bgImage.src= `img/${chosenImage}`;
//appendChild will add the line to the html
document.body.appendChild(bgImage);html code
<!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</title>
</head>
<body>
<form class="hidden" id="login-form">
</form>
<h1 id="greeting" class="hidden"></h1>
<h2 id="clock">00:00:00</h2>
<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>how to put the image behind the text and change the font - css code
.hidden{
display:none;
}
img {
position:absolute;
width:100%;
height:100%;
left: 0px;
top: 0px;
right:0px;
bottom:0px;
z-index: -1;
opacity:80%;
}
body{
font-family: 'Aclonica';
}
#quote{margin-top:50px;
font-size: 40px;
display: grid;
color:rgb(9, 6, 47);
font-weight: 300;
place-items: center;
text-shadow: 2px 2px 2px rgb(189, 187, 187);
z-index: 2;
text-align:center;
}
#clock{
text-align:center;
}the output
