투두리스트 마무리, 미니프로젝트 background changer, carousel

투두리스트 다시 만들기

강의를 보면서 전체적으로 한 번 따라서 만들어 본 후에 이번에는 강의의 도움없이 만들어 보았다.

다 알 것 같은 기분이 들어도 막상 혼자서 만들어 보니 시작부터 헤매게 되었다.

그래도 코드나 함수간의 전체적인 흐름이 기억에 남아 있어서 몇 번 코드를 보긴 했지만 코드 작성을 마무리 할 수 있었다.

배열에 여러 객체를 저장한 후 각 인덱스의 객체의 프로퍼티를 사용하는 부분이 아직 익숙치 않는데, 아직 어렵지만 효율적인 데이터 저장 방법인 것 같다.

click, submit같은 이벤트나 position 데이터를 어떻게 사용하는지에 대해서도 더 알게된 것 같다.  

 

 

Mini Web Project

1. Background Changer

 

Click me 버튼 클릭시 배경색과 출력된 Hex값이 랜덤하게 동일한 값으로 변하는 프로그램 만들기

1. html에서 배경이미지를 담는 div 태그 만들고 그 안에 텍스트와 버튼을 담는 div 태그 만들기

    <div class="bg">
        <div class="main">
            <div class="hexcolor">HEX COLOR :#3474FF</div>
            <input type="button" value="CLICK ME">
        </div>
    </div>

 

2. 요구한 UI처럼 보이게 CSS 구성하기

body {
    margin: 0;
}
.bg {
    background-color: #3474FF;
    width: auto;
    height: 538px;
}
.main {
    position: relative;
    top: 189.5px;
    text-align: center;
    
}
.hexcolor {
    font-size: 80px;
    font-weight:normal;
    opacity: 0.8;
}
input {
    font-size: 20px;
    color: white;
    background-color: #6C757D;
    border: none;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px #595d61;
}

 

3. 랜덤한 헥스코드를 생성해서 그 값을 텍스트로 출력하고 배경색에도 적용하기

hex +=hex[makeRandomNumber()]; 으로 문자열에 더하는 식으로 헥스코드를 구했다.

const bg = document.querySelector('.bg');
const hexcolor = bg.querySelector('.hexcolor');
const input = bg.querySelector('input');

function makeRandomNumber() {
    const randomIndex = Math.floor(Math.random()*16);
    return randomIndex;
}

function createHexcode() {
    let hexcode = '';
    const hex= [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];

    for (let i = 0;i<6;i++) {
        hexcode +=hex[makeRandomNumber()];
    }
    console.log(hexcode);
    paintHexCode(hexcode);
}

function paintHexCode(hexcode) {
    hexcolor.innerText = `HEX COLOR : #${hexcode}`;
    bg.style.backgroundColor = `#${hexcode}`;
}

function init() {
    input.addEventListener('click',createHexcode);
}

init();

 

2. Carousel

화살표나 밑에 점을 클릭하면 사진을 바꿔주는 코드 작성하기

 

1. html에서 화살표 버튼 두 개와 가운데 사진으로 첫번째 div를 구성하고 그 밑에 5개 점으로 두번째 div를 구성한다.

<div class="container">
        <button type="button" class="left-arrow">
          <img src="images/previous.png" alt="btnImage">
        </button>
        <div class="images" >
          <img src="images/image-1.png" alt="Image">
        </div>
        <button type="button" class="right-arrow">
          <img src="images/next.png" alt="btnImage">
        </button>
      </div>
      <div class="dotcontainer">
        <button type="button" id="dot1" class="dot">·</button>
        <button type="button" id="dot2" class="dot">·</button>
        <button type="button" id="dot3" class="dot">·</button>
        <button type="button" id="dot4" class="dot">·</button>
        <button type="button" id="dot5" class="dot">·</button>
      </div>
</div>

 

2. CSS에서 display:flex를 기반으로 각 div를 정렬한다.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.left-arrow {
  background-color: transparent;
  border:none;
}

button:active {
  outline: none;
  border: none;
  }

button:focus {outline:0;}

.left-arrow > img {
  width: 50px;
}

.right-arrow > img {
  width: 50px;
}

.right-arrow {
  background-color: transparent;
  border:none;
}

.dotcontainer {
  display: flex;
  justify-content: center;

}
.dot {
  border: none;
  background-color: transparent;
  padding-left: 20px;
  font-size: 100px;
  opacity: 0.5;
}

 

3. 화살표 왼쪽 클릭, 오른쪽 클릭, 아래 점 클릭에 해당하는 함수를 각각 만들고 가장 왼쪽사진에서 왼쪽 화살표를 클릭했을 경우 맨 오른쪽점으로 가는 동작을, 반대도 마찬가지로 수행하게 코드를 짠다. 화면에 표시되는 각 사진에 해당하는 점은 나머지 점과 비교했을 때 더 진해야 한다. 

const container = document.querySelector('.container');
const leftArrow = container.querySelector('.left-arrow');
const rightArrow = container.querySelector('.right-arrow');

const images = document.querySelector('.images');
const imgs = images.querySelector('img');

const dotContainer = document.querySelector('.dotcontainer');

let IMAGE_NUMBER = 1;
let predott = 1;
let currentdott;

function downchangeDot(imagenum) {
    if (IMAGE_NUMBER === 5) {
        predott = 1;
        const predot = dotContainer.querySelector('#dot1');
        const currentdot = dotContainer.querySelector('#dot5');
        predot.style.opacity = 0.5;
        currentdot.style.opacity = 1;
    } else {
        predott = imagenum+1;
        const predot = dotContainer.querySelector(`#dot${imagenum+1}`);
        const currentdot = dotContainer.querySelector(`#dot${imagenum}`);
        predot.style.opacity = 0.5;
        currentdot.style.opacity = 1;
    }
}

function upchangeDot(imagenum) {
    if (IMAGE_NUMBER === 1) {
        predott = 5;
        const predot = dotContainer.querySelector('#dot5');
        const currentdot = dotContainer.querySelector('#dot1');
        predot.style.opacity = 0.5;
        currentdot.style.opacity = 1;
    } else {
        predott = imagenum-1;
        const predot = dotContainer.querySelector(`#dot${imagenum-1}`);
        const currentdot = dotContainer.querySelector(`#dot${imagenum}`);
        predot.style.opacity = 0.5;
        currentdot.style.opacity = 1;
    }
}

function clickedDot(event) {
    const clickeddot = dotContainer.querySelector(`#${event.toElement.id}`);
    currentdott = event.toElement.id[3];
    IMAGE_NUMBER = event.toElement.id[3];
    console.log(IMAGE_NUMBER);
    displayImage();
    dotchange(currentdott);
}

function dotchange(currentdot) {
    const preDot = dotContainer.querySelector(`#dot${predott}`);
    const currentDot = dotContainer.querySelector(`#dot${currentdot}`);
    console.log(preDot);
    preDot.style.opacity = 0.5;
    currentDot.style.opacity = 1;
    predott = currentdott;
}

function displayImage() {
    imgs.src=`images/image-${IMAGE_NUMBER}.png`;
}

function previousImage() {
    if (IMAGE_NUMBER === 1) {
        IMAGE_NUMBER = 5;
        imgs.src=`images/image-${IMAGE_NUMBER}.png`;
        downchangeDot(IMAGE_NUMBER);
    } else {
        IMAGE_NUMBER--;
        imgs.src=`images/image-${IMAGE_NUMBER}.png`;
        downchangeDot(IMAGE_NUMBER);
    }
}

function nextImage() {
    if (IMAGE_NUMBER === 5) {
        IMAGE_NUMBER = 1;
        imgs.src=`images/image-${IMAGE_NUMBER}.png`;
        upchangeDot(IMAGE_NUMBER);
    } else {
        IMAGE_NUMBER++;
        imgs.src=`images/image-${IMAGE_NUMBER}.png`;
        upchangeDot(IMAGE_NUMBER);
    }
}

function init() {
    leftArrow.addEventListener('click',previousImage);
    rightArrow.addEventListener('click',nextImage);
    dotContainer.addEventListener('click',clickedDot);
}

init();

처음에는 화살표가 동작하게 코드를 작성

그 다음에는 표시되는 사진의 점을 진하게 만드는 함수를 작성

마지막으로 점을 클릭했을 때 해당 사진이 표시되게 하는 함수를 작성

이렇게 3가지 순서로 코드를 작성했다.

각각의 함수가 동작하게 하는건 어느정도 했지만 3가지를 합치는 과정에서 오류가 많이 생겨서 여러번 코드를 고치게 되었다. 예를 들면 점을 클릭하면서 사진을 보다가 화살표로 넘겨가면서 보는 경우라든지, 그 과정에서 이전 사진의 점의 색이 바뀌지 않는 경우와 같은 오류가 있었다.

남아있는 오류로는 점 클릭으로 양 끝점에 도달했을 경우에 화살표 클릭으로 그 반대편으로 이동할 시 이미지가 뜨지 않는게 있는데 해결하지 못했다. 더 내공을 쌓아서 다시 와야겠다.