[JavaScript]/[Nomad Coders]

#6 QUOTES AND BACKGROUND

cr.kl_ 2024. 8. 2. 12:08

QUOTES

1. 명언들을 객체의 배열로 정리 하자

 

2. HTML에서 필요한 테그들을 만들어 주고

 

3. JS에서 타겟 가능하도록 정의해 준다.

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

 

4. 그리고 명언 객체를 불러오려면 console.log(quotes[0]); 처럼 객체의 수를 알아야한다.

    매번 새릴 순 없지! 추가 같은 것도 해버리면..?

    => 내장함수 Math. 사용!

         Math.random() : 0부터 1사이의 랜덤한 숫자 제공 / 하지만 소숫점 자리제공...

         Math.random() * 10 : 0부터 10사이의 랜덤한 숫자 제공 / 객체가 10개라 *10!, 하지만 여전한 소숫점

              Math.round(1.1) => 1 / 소수점을 없애고 반올림도 시켜준다. = 소수점 반올

              Math.ceil(1.1) => 2 / 숫자를 천장(ceil)까지 높여 준다. = 소수점을 올림

              Math.foolr(1.9) => 1 / 숫자를 floor까지 낮춰 준다. = 소수점을 버림

         그럼 계산하기 편하도록 floor를 사용해 보도록 하자

         => Math.floor(Math.random() * 10); / 0 - 10 의 숫자 랜덤 완성!

    그럼, 객체에 배열을 추가 한다면,,,? 10이후로의 배열은 선택되지 않고,

    계속 배열 수를 새릴 순 없으니 .length를 사용하자!

     => Math.floor(Math.fandom() * quotes.length);

       출력 확인 : console.log( Math.floor(Math.fandom() * quotes.length));

 

5. 잘 나오는 것을 확인했다면 변수를 할당해 코드를 줄여주자

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
 
6. 위에서 정의한 span태그에 명언, 작가에 맞춰 할당해준다.
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
 
7. 완성

8. 댓글을 보니 random api도 있나 보더라 나중에 사용해 보자

강의 잘 듣고있습니다!
https://api.quotable.io/random
api를 이용해서 fetch 함수로 명언을 가져오는것도 좋을 것 같군요!

BACKGROUND

 

1. 앞에서 한 명언과 같이 배열을 랜덤하게 불러 오면 된다.

    그러므로 배열을 만들어 주자

const images = ['땅콩.jpg', 'about.jpg', 'skills.jpg', 'work.jpg'];

const chosenImage = images[Math.floor(Math.random() * images.length)];
 
// console.log(chosenImage);
// 랜덤하게 나오는지 확인
     배열의 길이(갯수)에 맞춰 부러오도록 함수도 만들어 주고 확인도 하였다.
 
2. 이번엔 HTML에서 태그를 추가해 타겟팅 하는 것이 아닌 JS에서 만들어 보도록 하자
    (나는 innerHTML생각했는데 다른 방법도 있네)
const bgImge = document.createElement('img');

bgImge.src = `img/${chosenImage}`;

// console.log(bgImge);
// <img src=""> 잘 만들어 지는지 확인
 
3. 하지만 아직 태그가 만들어지기만 했지 HTML의 <body>안에 들어가 있는게 아니므로 추가시켜 주자
 
document.body.appendChild(bgImge);
 
appendChlid는 앞의 부모요소의 가장 아래 자식요소(last-child)로 추가 시켜 준다.
    

'[JavaScript] > [Nomad Coders]' 카테고리의 다른 글

#5 CLOCK  (0) 2024.08.02
#4 LOGIN  (0) 2024.08.01
JavaScript On The Browser  (0) 2024.07.31
Welcom To JavaScript  (0) 2024.07.25

'[JavaScript]/[Nomad Coders]'의 다른글

  • 현재글#6 QUOTES AND BACKGROUND

관련글

티스토리툴바