Js Challenge14 - #1 구글 사이트 만들기

✅ Goal

• 오직 자바스크립트만을 통해 구글 사이트를 만들어 본다.
• 엘리먼트를 생성하고 붙이고 자유롭게 사용해본다.
• 태그 속성값을 조작해본다.
• 반복문을 활용하여 구글 택스트 컬러를 넣어본다.

---

✅ Keyword

querySelector
createElement
appendChild
setAttribute

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
https://developer.mozilla.org/ko/docs/Web/API/Document/createElement
https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

이 4가지 키워드를 바탕으로 구글 사이트를 만들어 보았다. 위에 있는 키워드는 구글 검색만하면 찾아 볼 수 있는 내용이다. 위에 3가지 키워드는 돔 조작시 사용하는 기본적인 키워드여서 아무문제 없이 썻지만 setAttribute는 자세히 써본 경험이 없어 이번 플젝을 통해 확실히 알게 되었다. 정말 간단하다. 예제를 보자

// 사용법 (매개변수는 string)
setAttribute(name:string, value:string)

// ex
// 만약 버튼을 비활성화하는 코드를 작성하고싶다!
const button = document.querySelector("button");

button.setAttribute("disabled", "");

이친구는 지정된 요소에 속성값을 설정할때 사용한다. 매개변수는 무조건 string형식이다. 그래서 setAttribute를 활용하여 form태그와 input태그에 속성값을 부여하여 검색 기능을 구현하였다.

// form
form.setAttribute("action", "https://www.google.co.kr/search");
form.setAttribute("method", "GET");

// input
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("placeholder", "Google 검색 또는 URL 입력");

사소한 팁이지만 form태그는 기본적으로 http요청을 할 수 있으며 action은 해당 요청이 어디로 가는지 제어 할 수 있습니다.

---

🟥 조금은 고민했던 부분

그냥 마크업해서 css로 nth-child로 하면 금방 하지만 내 프로젝트 취지에 적합하지 않아 자바스크립트를 활용해보았다. 처음에 로직을 작성했을 때는 아래와 같다.

color를 따로 변수를 지정하고 span태그가 돌때마다 color값이 1씩 증가되도록 구현하였다.

const colors = ["#4285f4","#ea4335","#fbbc05","#4285f4","#34a853","#ea4335"];
const texts = ["G", "o", "o", "g", "l", "e"];
let color = 0;
for (let text of texts) {
  const span = document.createElement("span");
  span.innerText = `${text}`;
  span.style.color = colors[color];
  h1.appendChild(span);
  color++;
}

하지만 뭔가 for ...of 대신 for ...in을 사용해서 index값을 가져와서 구현하면 굳이 변수를 따로 지정할 필요도 없을 것 같아서 아래와 같이 수정하였다.

const colors = ["#4285f4","#ea4335","#fbbc05","#4285f4","#34a853","#ea4335"];
const texts = ["G", "o", "o", "g", "l", "e"];
for (let idx in texts) {
  const span = document.createElement("span");
  span.innerText = `${texts[idx]}`;
  span.style.color = colors[idx];
  h1.appendChild(span);
}

확실히 이렇게 바꾸니 불필요한 코드를 줄여서 더 괜찮은 것 같다! 헤헤

---

✅ 기능 시연 및 코드

자바스크립트는 정말 짱짱맨이다. 얼마나 놀라운가... 30줄 이내로 구글 사이트를 만들어 버렸다!

// index.js
const container = document.querySelector("#container");
const h1 = document.createElement("h1");
const form = document.createElement("form");
const input = document.createElement("input");

const colors = ["#4285f4","#ea4335","#fbbc05","#4285f4","#34a853","#ea4335"];
const texts = ["G", "o", "o", "g", "l", "e"];

for (let idx in texts) {
  const span = document.createElement("span");
  span.innerText = `${texts[idx]}`;
  span.style.color = colors[idx];
  h1.appendChild(span);
}

form.setAttribute("action", "https://www.google.co.kr/search");
form.setAttribute("method", "GET");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("placeholder", "Google 검색 또는 URL 입력");

container.appendChild(h1);
container.appendChild(form);
form.appendChild(input);

https://github.com/fake-dp/Js-Challenge14-Mini-Project/tree/main/GoogleForm
배포링크

---