[JavaScript] Quote, Background 만들기

✔️ 원하는 바

• 새로고침마다 랜덤으로 뜨는 quote 받아오기
• 새로고침마다 랜덤으로 뜨는 background 받아오기

---

▪️ Quote

• Math 내장함수 사용해서 random한 번호 부여해주기

▪️ Background

1. 파일명 리스트로 저장하기
2. createElement()로 Js에서 새로운 태그 생성해주기 ⇨ 파일명이 random이라 html의 img 태그로 지정이 불가능하다. 따라서 Js에서 이미지를 생성한다.
3. appendChild()로 html에 노드 추가하기

// Quote
const quotes = [
    {quote: 'All that glitters is not gold.', who: 'William Shakespeare'},
    {quote: 'Genius is one percent inspiration and ninety-nine percent perspiration.', who: 'Thomas Edison'},
    {quote: 'Go ahead, make my day.', who: 'Harry Callahan'},
    {quote: 'Knowledge is power.', who: 'Sir Francis Bacon'},
    {quote: 'Life is like riding a bicycle. To keep your balance, you must keep moving.', who: 'Albert Einstein'},
    {quote: 'Make it count.', who: 'Jack Dawson, \'Titanic\''},
    {quote: 'Carpe diem. Seize the day, boys. Make your lives extraordinary.', who: 'John Keating, \'Dead Poets\' Society\''},
    {quote: 'I don’t regret the things I’ve done, but those I did not do.', who: 'Lucas, \'Empire Records\''},
    {quote: 'In the Chinese language, the word "crisis" is composed of two characters, one representing danger and the other, opportunity.', who: 'John F. Kennedy'},
    {quote: '역시 내가 너무 귀여운 탓인가', who: 'Undefined'},
    {quote: 'You mustn’t be afraid to dream a little bigger, darling.', who: 'Eames, \'Inception\''},
    {quote: '가는 말이 고우면 얕본다', who: '박명수'},
    {quote: 'You are never too old to set another goal or to dream a new dream.', who: 'C.S. Lewis'},
    {quote: 'Do not follow where the path may lead. Go instead where there is no path and leave a trail.', who: 'Ralph Waldo Emerson'},
    {quote: 'Dream as if you\'ll live forever, live as if you\'ll die today.', who: 'James Dean'},
    {quote: 'There are some people who live in a dream world, and there are some who face reality; and then there are those who turn one into the other.', who: 'Douglas H. Everett'},
    {quote: 'It is our choices, Harry, that show what we truly are, far more than our abilities', who: 'Albus Dumbledore,\'Chamber of Secrets\''},
    {quote: 'Always', who: 'Severus Snape, \'Deathly Hallows\''},
    {quote: 'Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great.', who: 'Mark Twain'},
    {quote: 'You don’t have to see the whole staircase, just take the first step.', who: 'Martin Luther King, Jr.'},
    {quote: 'Yesterday is but today\'s memory, tomorrow is today\'s dream.', who: 'Kahlil Gibran'},
    {quote: 'I have had dreams, and I’ve had nightmares. I overcame the nightmares because of my dreams.', who: 'Jonas Salk'},
    {quote: 'If someone hates you for no reason. Give that jerk a reason', who: 'the Joker'},
    {quote: 'Never let the fear of striking out keep you from playing the game.', who: 'Babe Ruth'},
    {quote: 'Always stay gracious, best revenge is your paper.', who: '"Formation" by Beyonce'},
    {quote: 'Remind yourself. Nobody built like you, you design yourself.', who: '"A Dream" by Jay-Z'},
    {quote: '꿈은 도망가지 않는다. 도망가는 것은 언제나 나 자신이다', who: '노하라 히로시(野原ひろし)'},
    {quote: 'They can because they think they can.', who: 'Vergilius'},
    {quote: '계획은 무슨! 계획대로 되지 않는 게 인생이라는 거야. 똑똑히 기억해 둬!', who: '노하라 히로시(野原ひろし)'},
    {quote: 'Beware; for I am fearless, and therefore powerful.', who: 'Mary Shelley, Frankenstein'},
]
const quote = document.querySelector('span#quote')
const who = document.querySelector('span#who')
const selectQuote = quotes[Math.floor(Math.random()*30)]

quote.innerText = selectQuote['quote']
who.innerText = selectQuote['who']

// Background
const img = ['img/Amalfi Coast .jpeg','img/Astotin Lake.jpeg',
'img/Bibury, The Cotswolds.jpeg',
'img/Borobudur.jpeg',
'img/Central Park.jpeg',
'img/Cinque Terre.jpeg',
'img/Eiffel Tower.jpeg',
'img/Grand Canyon.jpeg',
'img/Iceland.jpeg',
'img/Lake Como.jpeg',
'img/Land\'s End, Cornwall.jpeg',
'img/Lofoten, Norway.jpeg',
'img/Machu Picchu.jpeg',
'img/Mount Fuji.jpeg',
'img/Niagara Falls.jpeg',
'img/Norway.jpeg',
'img/Oxford, Oxfordshire.jpeg',
'img/Petra.jpeg',
'img/Pompeii.jpeg',
'img/Prague Castle.jpeg',
'img/Pyramids of Giza.jpeg',
'img/St. Michael\'s Mount, Cornwall.jpeg',
'img/Statue of Liberty.jpeg',
'img/Stonehenge.jpeg',
'img/Sydney Opera House.jpeg',
'img/The Acropolis.jpeg',
'img/The Colosseum.jpeg',
'img/The Leaning Tower of Pisa.jpeg',
'img/The Louvre.jpeg',
'img/The Roman Forum.jpeg',
'img/The Taj Mahal.jpeg',
'img/Tuscany.jpeg',
'img/Venice.jpeg',
'img/Windermere, Lake District.jpeg',
'img/York, North Yorkshire.jpeg',
'img/Zermatt, Switzerland.jpeg']
const chosenImg = img[Math.floor(Math.random()*img.length)]
const bgImgElement = document.createElement('img')
bgImgElement.src = `${chosenImg}`

document.body.appendChild(bgImgElement)

 

✔️ 배운점

• 특정 파일 내의 모든 파일명을 저장하고 싶은 경우 Cmd+a로 전체선택 후 복사 - 텍스트편집기에 paste - 포맷에 일반 텍스트 만들기로 변환하면 특정 파일 내의 모든 파일명이 간단하게 텍스트로 모두 나온다
• createElement() : Js에서 img, a 등의 다양한 태그들을 생성한다 https://developer.mozilla.org/ko/docs/Web/API/Document/createElement
• appendChild() : 특정 부모노드의 마지막 자식 노드로 붙인다 https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

Node.appendChild() - Web API | MDN

• insertBefore() : 참조된 노드 앞에 부모노드의 자식 노드로 붙인다 -> appendChild()와 다르게 특정 위치에 삽입 가능  https://developer.mozilla.org/ko/docs/Web/API/Node/insertBefore