노마드 바닐라 JS 코드 챌린지 9일차

오늘은 벌써 9일차

강의는 오늘로써 마지막 듣기고 오늘 코드 챌린지도 마지막이다

내일부터 졸업작품을 3일간 만들라는데 크롬앱을 클론코딩 하듯 강의와 같은 내용으로

만드는 것 같았다. 추석에는 작은 졸업작품 프로젝트 하기로 하고...리액트도 얼른 제발...

---

#6.0 Quotes(인용하다)

#명언과 저자2가지 항목의 객체 10개 들어있는 배열을 준비해서 랜덤으로 돌아가는 기능

 

-Math.module : javascript에서 이미 load되서 제공되는 기능 (Math함수로서 사용할 수 있다)

-Math.random() : 0부터 1사이의 난수(랜덤한 숫자)를 제공

-Math.round() : 입력값을 반올림한 수와 가장 가까운 정수 값을 반환한다

-Math.floor() : 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환(내림과 같은 기능)

-Math.floor(Math.random() * Array.length); : 배열의 길이만큼의 랜덤한 숫자를 제공하는 기능

 

const quotes = [
    {
        quote : "삶이 있는 한 희망은 있다",
        author : "키케로"
    },
    {
        quote : "산다는것 그것은 치열한 전투이다",
        author : "로랑로랑"
    },
    {
        quote : "사막이 아름다운 것은 어딘가에 샘이 숨겨져 있기 때문이다",
        author : "생떽쥐베리"
    },
    {
        quote : "언제나 현재에 집중할수 있다면 행복할것이다.",
        author : "파울로 코엘료"
    },
    {
        quote : "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해",
        author : "찰리 채플린"
    },
    {
        quote : " 직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다",
        author : "엘버트 허버드"
    },
    {
        quote : "신은 용기있는자를 결코 버리지 않는다",
        author : "켄러"
    },
    {
        quote : "피할수 없으면 즐겨라",
        author : "로버트 엘리엇"
    },
    {
        quote : "1퍼센트의 가능성, 그것이 나의 길이다.",
        author : "나폴레옹"
    },
    {
        quote : "행복한 삶을 살기위해 필요한 것은 거의 없다.",
        author : "마르쿠스 아우렐리우스 안토니우스"
    },
]

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

#배경 이미지 만들기

-이미지이름.확장자이름까지 넣어서 이미지 배열을 만들어 준다

-위 명원과 같이 배열을 랜덤하게 받는 변수를 만든다

-자바스크립트에서 태그를 createElement()로 만들어 준 후 변수에 담는다

-백틱을 사용해서 string과 변수를 같이 편하게 쓰드록 하여 해당 변수.src = `파일위치 /${랜덤하게 배열의 요소를 담는 변수}`와 같이 사용 한다

-createElement()로 만든 img 태그를 document.body.appehdChild()로 body태그 맨 끝에 넣어주면 배열에 넣어둔 이름의 파일들이 랜덤하게 생성된다

const images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg","5.jpg"];

const chosenImage = images[Math.floor(Math.random()*images.length)];
const BACKGROUND_IMAGE = "bgImage";
//HTML에 JS로 태그 추가해주는 것
const bgImage = document.createElement("img");
bgImage.classList.add(BACKGROUND_IMAGE);
bgImage.src= `img/${chosenImage}`;

document.body.appendChild(bgImage);