Step 4. Interacting with WebPages(5)

2021. 12. 27. 20:26

대참사다. 2시간 정도만에 만들긴 했지만 중복이 엄청나다. 동작이 잘되고 나름 응용을 섞었기 때문에 보람차긴 하지만 for문을 이용했으면 상당히 압축되었을건데 아쉽다. 코딩 실력이 아직 거기까진 부족한 것 같다. 아무래도 JavaScript 기본서 책 1권이 필요하다는 생각이 들었다.

Carousel, 캐러셀

Carousel은 회전목마 혹은 수하물 컨베이어 벨트를 뜻하는 단어이다. 둘의 공통점은 반복해서 돌아간다는 점이다. 웹에서 Carousel은 이미지 등의 컨텐츠를 노출시키기 위한 UI로 활용된다.

1. 요구 사항

위 UI를 봤을 때 우리는 직감하는 것이 몇 가지 있다. 왼쪽, 오른쪽 버튼을 누르면 흰색 네모 칸의 컨텐츠가 바뀔 것이고, 아래의 점들을 누르면 해당 점에 일치하는 컨텐츠로 흰색 네모 칸이 바뀔 거라는 것이다.

2. 나의 풀이

이번 퀴즈는 Boilerplate Code가 제공되어 해당 코드를 재활용했다.

* Boilerplate Code란 여러 곳에서 재활용 될 수 있는, 반복적으로 비슷한 형태를 띄는 코드를 뜻한다. 1890년대 광고나 컬럼에 반복적으로 사용되는 텍스트를 찍어내기 위해 강철판에 텍스트를 새겨 인쇄를 했었는데, 이것이 어원이 되었다.

- HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Carousel Project</title>
  </head>

  <body>
    <section>
      <div class="image-box">
        <img id="logo" src="images/vanilla_coding_logo.png" />
      </div>
      <h1>Carousel</h1>
      <h1 class="nowNumber">Number : 1</h1>

      <!-- Carousel Start -->
      <div class="contents">
        <button id="left"></button>
        <img class="image1" id="vanilla" src="images/image-1.png" />
        <button id="right"></button>
      </div>

      <div class="dots">
        <button id="dot1"></button>
        <button id="dot2"></button>
        <button id="dot3"></button>
        <button id="dot4"></button>
        <button id="dot5"></button>
      </div>
      <!-- Carousel End -->
    </section>

    <script src="index.js"></script>
  </body>
</html>

CSS, JavaScript는 모두 파일 형태로 불러오는 방식이 사용되었다. 그리고 nowNumber를 추가하여 현재 컨텐츠가 몇 번째 컨텐츠인지 알 수 있게 하였고 left와 rigth 버튼, 점 버튼들을 추가했다.

- CSS

body {
  background-image: url("./images/bg.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 36px;
  margin: 0;
}

.image-box {
  text-align: center;
}

#logo {
  width: 800px;
}

.contents {
  display: flex;
  justify-content: center;
}

#left {
  border-radius: 100px;
  border: none;
  background-image: url("./images/left.png");
  background-position: center;
  background-size: cover;
  background-color: yellow;
  width: 50px;
  height: 50px;
  margin: auto;
}

#right {
  border-radius: 100px;
  border: none;
  background-image: url("./images/right.png");
  background-position: center;
  background-size: cover;
  background-color: yellow;
  width: 50px;
  height: 50px;
  margin: auto;
}

#vanilla {
  border-radius: 3px;
  border: 2px solid gray;
  background-position: center;
  background-size: cover;
  width: 400px;
  height: 400px;
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

#dot1,
#dot2,
#dot3,
#dot4,
#dot5 {
  margin-right: 20px;
  border: 1px solid black;
  border-radius: 100px;
  width: 10px;
  height: 15px;
  background-color: yellow;
}

- JavaScript

var dot1 = document.querySelector("#dot1");
var dot2 = document.querySelector("#dot2");
var dot3 = document.querySelector("#dot3");
var dot4 = document.querySelector("#dot4");
var dot5 = document.querySelector("#dot5");

var img = document.querySelector("#vanilla");
var nowNumber = document.querySelector(".nowNumber");

dot1.addEventListener("click", function changeImage1() {
  img.setAttribute("src", "images/image-1.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image1");
  nowNumber.textContent = "Number : 1";
});

dot2.addEventListener("click", function changeImage2() {
  img.setAttribute("src", "images/image-2.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image2");
  nowNumber.textContent = "Number : 2";
});

dot3.addEventListener("click", function changeImage3() {
  img.setAttribute("src", "images/image-3.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image3");
  nowNumber.textContent = "Number : 3";
});

dot4.addEventListener("click", function changeImage4() {
  img.setAttribute("src", "images/image-4.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image4");
  nowNumber.textContent = "Number : 4";
});

dot5.addEventListener("click", function changeImage5() {
  img.setAttribute("src", "images/image-5.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image5");
  nowNumber.textContent = "Number : 5";
});

var left = document.querySelector("#left");
var right = document.querySelector("#right");

left.addEventListener("click", function changeImageLeft() {
  if (img.className === "image1") {
    img.setAttribute("src", "images/image-5.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image5");
    nowNumber.textContent = "Number : 5";
  } else if (img.className === "image2") {
    img.setAttribute("src", "images/image-1.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image1");
    nowNumber.textContent = "Number : 1";
  } else if (img.className === "image3") {
    img.setAttribute("src", "images/image-2.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image2");
    nowNumber.textContent = "Number : 2";
  } else if (img.className === "image4") {
    img.setAttribute("src", "images/image-3.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image3");
    nowNumber.textContent = "Number : 3";
  } else if (img.className === "image5") {
    img.setAttribute("src", "images/image-4.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image4");
    nowNumber.textContent = "Number : 4";
  }
});

right.addEventListener("click", function changeImageRight() {
  if (img.className === "image1") {
    img.setAttribute("src", "images/image-2.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image2");
    nowNumber.textContent = "Number : 2";
  } else if (img.className === "image2") {
    img.setAttribute("src", "images/image-3.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image3");
    nowNumber.textContent = "Number : 3";
  } else if (img.className === "image3") {
    img.setAttribute("src", "images/image-4.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image4");
    nowNumber.textContent = "Number : 4";
  } else if (img.className === "image4") {
    img.setAttribute("src", "images/image-5.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image5");
    nowNumber.textContent = "Number : 5";
  } else if (img.className === "image5") {
    img.setAttribute("src", "images/image-1.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image1");
    nowNumber.textContent = "Number : 1";
  }
});

먼저 점들을 클릭할 때 해당 class의 name들을 모두 지워버리고(remove) 점 순서에 따라 일치하는 이미지를 추가하고 class를 부여했다.(add)

화살표를 누를 때는 현 화면이 1번째 였다면 왼쪽 클릭 시 5번째로, 2번째 였다면 1번째로 이동하게 하는 매커니즘을 구상했다. 이 때에도 점을 클릭했을 때와 마찬가지로 기존 class의 name들을 모두 지워버리고(remove) 이동했을 때 일치해야 하는 이미지를 추가하고 class를 부여했다.(add) 오른쪽과 똑같이 동작되도록 했다.

추가로 현 이미지가 몇 번째 이미지인지 boiler plate에는 없어서 nowNumber.textContent를 추가해 몇 번째 이미지인지 인지할 수 있게 했다.

그렇다. 이보다 비효율적일 수는 없다. for문을 활용하지 못하는 적절한 예시이다. 코드가 짧아서 다행이지만 길어지고 부하가 많아질수록 비효율성을 두드러지게 나타날 것이다.

정상적으로 동작된다는 것에 만족하지만, 중복은 프로그래밍에서 상당한 비효율성을 불러온다. 책을 사든 구글링을 하든 문법을 좀 배워서 타개해봐야겠다.

'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글

Step 6. Number Baseball (0)	2022.01.05
Step 5. JavaScript in Depth - Koans (0)	2022.01.05
Step 4. Interacting with Webpages(4) (0)	2021.12.21
Step 4. Interacting with Webpages(3) (0)	2021.12.16
Step 4. Interacting with Webpages(2) (0)	2021.12.16

Aloha!

Step 4. Interacting with WebPages(5)

'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글

+ Recent posts

티스토리툴바