JS Mini projects - Quote Generator

Seuling·2022년 6월 14일
1

FE

목록 보기
10/42

💡 알게된 것

1.heropatterns



배경이미지 Url을 svg패턴으로 가져올 수 있다! 색상, 투명도 변경가능!
유용하게 쓰일 것 같다!

2.Fetching Data (API)

// get Quotes from API
async function getQuotes() {
  loading();
  const apiUrl = "https://type.fit/api/quotes";
  try {
    const response = await fetch(apiUrl);
    apiQuotes = await response.json();
    newQuote();
  } catch (error) {
    //   catch error here
  }
}

//on Load
getQuotes();

3.트위터 내보내기

https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent

web Internet URL 링크 복사!

// Twwet Quote
function tweetQuote() {
  const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent} `;
  window.open(twitterUrl, "_blank");
}

// Event Listeners
twitterBtn.addEventListener("click", tweetQuote);

4. Loader

https://www.w3schools.com/howto/howto_css_loader.asp

// Show Loading
function loading() {
  loader.hidden = false;
  quoteContainer.hidden = true;
}

// Hide Loading
function complete() {
  quoteContainer.hidden = false;
  loader.hidden = true;
}

🤔 오늘의 궁금점한 부분!

box-shadow

.box {
  margin: 100px;
  width: 300px;
  height: 300px;
  box-shadow: 10px -20px 30px 40px #999;
}

/* 10px : 수평방향의 그림자 오프셋 길이, 양수값 -> 오른쪽, 음수값 -> 왼쪽에 그림자 생김 */
/* 20px : 수직 그림자 오프셋 길이, 양수값 -> 박스아래, 음수값 -> 박스 위에 그림자 생김  */
/* 30px : 그림자의 blur radius를 나타냄, 음수값 지정 X , 값이 클수록 그림자 끝이 흐려지고, 값이 0이면 선명한 그림자 */
/* 40px : 그림자 확산 거리, 양수값 -> 그림자의 전방위로 확대, 음수값 -> 그림자의 크기가 줄어든다.  */

fetch async await

https://www.youtube.com/watch?v=aoQSOZfz3vQ

-> 따로 정리하기

textContent vs innerText vs innerHTML


출처 : https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

  <body>
    <div id="foo">
      Hello <span style="text-transform: uppercase">world!</span>
    </div>
    <div id="bar">
      Hello <span style="text-transform: uppercase">world!</span>
    </div>
    <script>
      const foo = document.getElementById("foo");
      const bar = document.getElementById("bar");

      console.log(foo.textContent); 
      console.log(foo.innerText);
    </script>
  </body>

textContent 와 innerText 로 각각 id만 다르고 내용은 같은 foo와 bar의 텍스트를 가져오면 textContent는 css 는 고려되지않고 텍스트만 가져온다.
innerText 는 css가 반영된 결과가 나오게 되고, 그 과정에서 리플로우가 발생하게 된다.
textContent로 단순히 텍스트를 가져올 때는 리플로우가 발생하지 않는다.

innerHtml : QuerySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML 코드를 JavaScript 코드에서 변경 할 수 있다.

   <p id="name">seulgi</p>
    <script>
      document.getElementById("name").innerHTML = "sseul";
    </script>
profile
프론트엔드 개발자 항상 뭘 하고있는 슬링

0개의 댓글