🗓 진행일: 3월 17일...의 연장선인 18일 오전 12시 48분
📎 6.0 ~ 6.1

6.0 Quotes

명언이 적힌 quotes.js를 만들기

그 안에는 배열로 quotes라는 변수가 있음

그리고 우리는 index.html에 랜덤으로 이 명언들 중 하나를 보여줄 거임

index.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 id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?" />
        <button>Log In</button>
    </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/quotes.js"></script>
</body>
</html>

quotes.js

const quotes = [
    {
        quote: "The greatest glory in living lies not in never falling, but in rising every time we fall",
        author: "Nelson Mandela",
    },
    {
        quote: "Never let the fear of striking out keep you from playing the game.",
        author: "Babe Ruth",
    },
    {
        quote: "Life is either a daring adventure or nothing at all.",
        author: "Helen Keller",
    },
    {
        quote: "Being happy never goes out of style",
        author: "Lilly Pulitzer",
    },
    {
        quote: "All you need in this life is ignorance and confidence; then success is sure",
        author: "Mark Twain",
    },
    {
        quote: "Life is a mountain. Your goal is to find your path, not to reach the top.",
        author: "Maxime Lagacé",
    },
    {
        quote: "Despite the forecast, live like it's spring",
        author: "Lilly Pulitzer",
    },
    {
        quote: "The way to get started is to quit talking and begin doing",
        author: "Walt Disney",
    },
    {
        quote: "It is better to fail in originality than to succeed in imitation",
        author: "Herman Melville",
    },
    {
        quote: "Opportunities don't happen. You create them",
        author: "Chris Grosser",
    },
]
// object 형태가 배열로 들어있음

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

// Math.round() : 반올림
// Math.ceil() : 올림
// Math.floor() : 버림
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

6.1 Background

백그라운드 사진 넣기

니콜라스... 혼자서 멋진 고화질 사진을 가져온 듯

해줘야 하는 것: img 폴더 만들어서 이미지들 몇 개 넣어두기, background.js 파일 만들어서 index.html에 추가하기

background.js

const images = [
    "1.jpg",
    "2.jpg",
    "3.jpg"
]
// 이 이름들은 이미지 폴더 내에 있는 파일들과 이름이 같아야 한다

const chosenImage = images[Math.floor(Math.random() * images.length)];

// 자바스크립트에서 html 요소를 생성해서 걜 다뤄본대
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage); // body에 html 추가

6.2 Recap

appendChild는 가장 뒤에 오게 하는 거고,

prepend는 가장 앞에 오게 하는 거래

Author And Source

이 문제에 관하여(바닐라 JS 챌린지 Day 10), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seulpace/바닐라-JS-챌린지-Day-10

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

바닐라 JS 챌린지 Day 10

6.0 Quotes

6.1 Background

6.2 Recap

Author And Source

좋은 웹페이지 즐겨찾기