Note

노마드코더 바닐라 JS 챌린지 11일차 본문

#학습/AI&IT

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

참잘했을까요? 2021. 9. 2. 23:32
반응형
onst quotes = [
    {
      quote: "The way to get started is to quit talking and begin doing.",
      author: "Walt Disney",
    },
    {
      quote: "Life is what happens when you're busy making other plans.",
      author: "John Lennon",
    },
    {
      quote:
        "The world is a book and those who do not travel read only one page.",
      author: "Saint Augustine",
    },
    {
      quote: "Life is either a daring adventure or nothing at all.",
      author: "Helen Keller",
    },
    {
      quote: "To Travel is to Live",
      author: "Hans Christian Andersen",
    },
    {
      quote: "Only a life lived for others is a life worthwhile.",
      author: "Albert Einstein",
    },
    {
      quote: "You only live once, but if you do it right, once is enough.",
      author: "Mae West",
    },
    {
      quote: "Never go on trips with anyone you do ntot love.",
      author: "Hemmingway",
    },
    {
      quote: "We wander for distraction, but we travel for fulfilment.",
      author: "Hilaire Belloc",
    },
    {
      quote: "Travel expands the mind and fills the gap.",
      author: "Sheda Savage",
    },
  ];
  
  const quote = document.querySelector("#quote span:first-child");
  const author = document.querySelector("#quote span:last-child");
  //html에서 span위치 설정(위에 아래에 쓸거임)
  const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
 //랜덤하게 위의 문장 데려옴.

  quote.innerText = todaysQuote.quote;
  author.innerText = todaysQuote.author;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentum App</title>
  </head>
  <body>
    <form class="hidden" id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 class="hidden" id="greeting"></h1>
    <div id="quote">
      <span></span>
      <span></span>
    </div>
    <script src="greetings.js"></script>
    <script src="clock.js"></script>
    <script src="quotes.js"></script>
  </body>
</html>

 

사진 집어 넣기. 처음에 image로 넣었는데 작동이 안되었다가 img로 바꾸었더니 되었다. 왜 되는지는 모른다. 의문을 가지지 않기로 했다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentum App</title>
  </head>
  <body>
    
    <h2 id="clock">00:00:00</h2>
    <div id="quote">
      <span></span>
      <span></span>
    </div>

    <script src="clock.js"></script>
    <script src="quotes.js"></script>
    <script src="background.js"></script>

  </body>
</html>
const images = ["1.jpeg","2.jpeg","3.jpeg"];

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



// js를 이용해서 html으로 가져다 주기
const bgImage = document.createElement("img");

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

document.body.appendChild(bgImage);

https://codesandbox.io/s/a09blueprint-duy1y?file=/src/index.js 

 

a09Blueprint - CodeSandbox

a09Blueprint by serranoarevalo

codesandbox.io

(의문) 왜 다시 값을 받아오지 못하는걸까?

const btn = document.querySelector('input');


const colors = [
    
    "#" + Math.round(Math.random() * 0xffffff).toString(16) 
    

];

const colors2 = [

    "#" + Math.round(Math.random() * 0xffffff).toString(16) 


];


function colorChange() {
    const c1 = colors[Math.floor(Math.random()* colors.length)];
    const c2 = colors2[Math.floor(Math.random()* colors2.length)];

document.body.style.background = `linear-gradient(to right,${c1},${c2})`;


}


console.log(colors);
console.log(colors2);


btn.addEventListener("click", colorChange);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentum App</title>
  </head>
  <body>
    <input id=hello type="button" value="give me color">
    <script src="background.js">

    </script>

  </body>

  </body>
</html>
input{
    width: 100px; 
    position: absolute;
    top: 30%;
    left: 37%;
    text-align: center;
  }

  .horizontal-gradient {
    background: linear-gradient(to right, "colors", "colors2");
  }
반응형

'#학습 > AI&IT' 카테고리의 다른 글

웹 개발 참고 사이트  (0) 2021.09.06
노마드 코더 바닐라 JS 챌린지 졸업 작품  (0) 2021.09.06
2021년 크리스마스 디데이  (0) 2021.09.02
노마드코더 바닐라 JS 챌린지 10일차  (0) 2021.09.02
노마드코더 바닐라 JS 챌린지 9일차  (0) 2021.08.31
'#학습/AI&IT' Related Articles more
Comments