출처 : section Hangman | SVG, section Meal finder | Fetch & Meal DB API ) 20 mini projects - Brad Traversy

CSS part

SVG (Scalable Vector Graphics)

확장 가능한 벡터 그래픽. 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)이다. SVG를 활용해 도형이나 선 등을 그리거나 색을 채울 수 있다.

ex) 행맨 그리기

html)

<div class ="figure-container">
 <!-- Rod -->
      <svg height="250" width="200" class="figure-container">
        <line x1="60" y1="20" x2="140" y2="20" />
        <line x1="140" y1="20" x2="140" y2="50" />
        <line x1="60" y1="20" x2="60" y2="230" />
        <line x1="20" y1="230" x2="100" y2="230" />

        <!-- Head -->
        <circle cx="140" cy="70" r="20" class="figure-part" />
        <!-- Body -->
        <line x1="140" y1="90" x2="140" y2="150" class="figure-part" />
        <!-- Arms -->
        <line x1="140" y1="120" x2="120" y2="100" class="figure-part" />
        <line x1="140" y1="120" x2="160" y2="100" class="figure-part" />
        <!-- Legs -->
        <line x1="140" y1="150" x2="120" y2="180" class="figure-part" />
        <line x1="140" y1="150" x2="160" y2="180" class="figure-part" />
      </svg>
 </div>

css)

.figure-container {
  fill: transparent;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linecap: round;
}

JS part

split과 join과 map을 이용한 string dom manipulation

로직 )

• 문자열 안의 각각의 문자를 선택하기 위해 split('')을 사용하여 배열과 같은 형태로 문자들을 분리 시킨다.
• map을 이용하여 각각의 문자들에 원하는 dom manipulation을 해준다.
• 다시 문자열로 바꾸어주기 위해 꼭 join('')을 붙혀줄 것!

const words = ["application", "programming", "interface", "wizard"];

let selectedWord = words[Math.floor(Math.random() * words.length)];

function displayWord() {
  wordEl.innerHTML = selectedWord
    .split("")
    .map(
      (letter) =>
        `<span class= "letter">${letter}</span>`
    )
    .join("");
    
    const innerWord = wordEl.innerText.replace(/\n/g, "");

  if (innerWord === selectedWord) {
    finalMessage.innerText = "Congratulations! You won! 🙂";
    popup.style.display = "flex";
  }

}

참고)
\n : 줄바꿈을 의미(new line character)
replace(/\n/g,’’) => 모든 줄바꿈있는 단어들 한줄로 대체한다.

join과 map을 이용한 array dom manipulation

로직 ) 특정 element의 innerHTML의 배열들을 나열하거나 배열 내의 특정 value를 dom manipulation 하고 싶은 경우
1. map을 이용하여 각각의 배열의 item을 이용한 innerHTML 작성한다.
2. join('')을 통해 문자열로 변환한다.
ex) data.meals라는 배열을 이용한 dom manipulation

 mealsEl.innerHTML = data.meals
            .map(
              (meal) => `
          <div class="meal">
            <img src="${meal.strMealThumb}" alt="${meal.strMeal}">
            <div class="meal-info" data-mealID="${meal.idMeal}">
              <h3>${meal.strMeal}</h3>
            </div>
          </div>
          `
            )
            .join("");

또다른 ex) ingredients라는 배열을 이용한 dom manipulation

  single_mealEl.innerHTML =  `
<h2>Ingredients</h2>
    <ul>
      ${ingredients.map((ing) => `<li>${ing}</li>`).join("")}
    </ul> `