클론 코딩1

???·2022년 11월 9일
클론코딩
0

클론코딩

목록 보기
1/2

클론 코딩 목표


화면을 구성하고 숫자 버튼을 누른다음 SUBMIT 버튼을 눌러서 제출하면

어떤 숫자를 눌렀는지 출력하는 화면을 구성하는게 목표입니다.

(자세한 css 값을 모르고 이미지만 보고 따라만들기 때문에 구체적인 수치는 다를 수 있습니다.

어려웠던점 js

css 마우스올렸을때 크기 변환

HTML 화면 구성

html 화면은 다음과 같이 구성했습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="clone.css" />
  </head>
  <body>
    <div class="ask-card">
      <div class="card-img"></div>
      <h1 class="card-title">How did we do?</h1>
      <p class="card-desc">
        Please let us know how we did with your support request. All feedback is
        appreciated to help us improve our offering!
      </p>
      <div class="card-button">
        <button class="btn-1">1</button>
        <button class="btn-2">2</button>
        <button class="btn-3">3</button>
        <button class="btn-4">4</button>
        <button class="btn-5">5</button>
      </div>
      <div class="submit-button">
        <button type="button" class="sub-button">SUBMIT</button>
      </div>
    </div>

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

CSS 화면 구성

* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Overpass', sans-serif;
  /* padding: 50px; */
}
body {
  background-color: hsl(216, 12%, 8%);
}
.ask-card {
  width: 350px;
  height: 360px;
  background-color: hsl(213, 19%, 18%, 0.4);
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 29px;
}
.card-img {
  width: 35px;
  height: 35px;
  background-color: hsl(213, 19%, 18%, 1);
  background-image: url(./images/icon-star.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  left: 25px;
}
.card-title {
  color: hsl(0, 0%, 100%);
  margin-top: 90px;
  font-weight: 700;
  font-size: 20px;
  /* margin-left: 20px; */
  margin-bottom: 10px;
}
.card-desc {
  color: hsl(216, 12%, 54%);
  font-size: 15px;
  /* margin-left: 20px; */
  text-align: left;
  word-break: keep-all;
  margin-bottom: 20px;
}

.card-button {
  text-align: center;
  margin-bottom: 30px;
}
.btn-1,
.btn-2,
.btn-3,
.btn-4,
.btn-5,
.btn-6 {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  color: hsl(216, 12%, 54%);
  background-color: hsl(213, 19%, 18%, 0.7);
  border: none;
}
.btn-1:hover,
.btn-2:hover,
.btn-3:hover,
.btn-4:hover,
.btn-5:hover,
.btn-6:hover {
  transform: scale(1.17);
}
.btn-1,
.btn-2,
.btn-3,
.btn-4,
.btn-5 {
  margin-right: 20px;
}
.submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sub-button {
  width: 270px;
  height: 40px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  color: white;
  background-color: hsl(25, 97%, 53%);
}
.sub-button:hover {
  transform: scale(1.17);
}

CSS 파트에서 어려웠던 점

버튼 태그에 마우스를 올렸을때

다음과 같이 태그의 크기가 커지게 하는 부분을 구성하는게 어려웠습니다.

숫자 버튼을 HTML으로 구성할때

다음과 같이 여러 클래스에 같은 속성을 줄 수 있도록 하듯이 :hover 효과도


같은 방식으로 할 수 있을줄 알았는데 css 속성이 적용되지 않아서

찾아보니 방식이 잘못되서 수정을 했습니다.

자바스크립트 코드 구현

처음 script 태그를 어디에 위치해야 할지 몰라서


css link 바로 밑에 script 태그를 만들었더니

이런식으로 에러가 발생했습니다.

그래서 찾아보니 HTML이 모두 로드 되기 전에 자바스크립트 영역에서 HTML을 참조하기 때문에 addEventListenr에서 HTML 태그를 참조할 수가 없어서 null을 참조하게 됐고 에러가 발생하는 것입니다.

해결방법으로


body 태그가 끝난 다음에 script 태그를 놓거나


body 태그 끝 바로 위에 script 태그를 위치하게 하면 오류가 나지 않습니다.

const btn1 = document.querySelector('.btn-1');
const btn2 = document.querySelector('.btn-2');
const btn3 = document.querySelector('.btn-3');
const btn4 = document.querySelector('.btn-4');
const btn5 = document.querySelector('.btn-5');

const card = document.querySelector('.ask-card');

html 태그들의 선택자를 선택한 후 


let message = document.createElement('div');
message.style.width = '260px';
message.style.height = '39px';
message.style.marginTop = '-188px';
message.style.borderRadius = '999px';
message.style.textAlign = 'center';
message.style.marginLeft = '17px';
message.style.paddingTop = '12px';
message.style.color = 'hsl(25, 97%, 53%)';
message.style.fontWeight = 700;
message.style.backgroundColor = 'hsl(213, 19%, 18%)';
message.style.display = 'none';
card.appendChild(message);

화면 전환할때 보일 태그를 미리 만들어 놓고 display를 none으로 설정한 다음 숨겨놓습니다.



const send = function () {
  const btn = document.querySelector('.sub-button');
  btn.addEventListener('click', () => {
    message.style.display = 'block';

    let card_img = document.querySelector('.card-img');
    card_img.style.width = '140px';
    card_img.style.height = '130px';
    card_img.style.borderRadius = '0px';
    card_img.style.backgroundImage = 'url(./images/illustration-thank-you.svg)';
    card_img.style.backgroundSize = 'contain';
    card_img.style.backgroundPosition = 'center center';
    card_img.style.textAlign = 'center';
    card_img.style.backgroundColor = 'hsl(213, 19%, 18%, 0)';
    card_img.style.borderRadius = 'none';
    card_img.style.border = 'none';
    card_img.style.marginLeft = '75px';
    card_img.style.marginBottom = '100px';

    let card_title = document.querySelector('.card-title');
    card_title.textContent = 'Thank you';
    card_title.width = '50px';
    card_title.height = '40px';
    card_title.style.fontSize = '20px';
    card_title.style.textAlign = 'center';
    card_title.style.color = 'white';
    card_title.style.marginBottom = '20px';
    card_title.style.marginTop = '220px';

    let card_desc = document.querySelector('.card-desc');
    card_desc.innerHTML =
      'We appreciate you taking the time to give a <br> rating. if you ever need more support, don`t <br> hesitate to get in touch! ';
    card_desc.style.color = 'hsl(217, 12%, 63%)';
    card_desc.style.textAlign = 'center';
    card_desc.style.fontSize = '15px';

    let card_but = document.querySelector('.card-button');
    card_but.remove();

    let sbmBtn = document.querySelector('.submit-button');
    sbmBtn.remove();
  });
};

SUBMIT 버튼을 눌렀을때 화면이 전환되도록 함수를 구성했습니다.


btn1.addEventListener('click', () => {
  message.textContent = `You Selected 1 of 5`;
  send();
});
btn2.addEventListener('click', () => {
  message.textContent = `You Selected 2 of 5`;
  send();
});
btn3.addEventListener('click', () => {
  message.textContent = `You Selected 3 of 5`;
  send();
});
btn4.addEventListener('click', () => {
  message.textContent = `You Selected 4 of 5`;
  send();
});
btn5.addEventListener('click', () => {
  message.textContent = `You Selected 4 of 5`;
  send();
});

번호 버튼이 눌린다음에 SUBMIT 버튼이 눌리도록 하기 위해서

버튼 클릭 이벤트 안에 함수 호출하도록 코드를 구성했습니다.

전체 JS 코드 구성

const btn1 = document.querySelector('.btn-1');
const btn2 = document.querySelector('.btn-2');
const btn3 = document.querySelector('.btn-3');
const btn4 = document.querySelector('.btn-4');
const btn5 = document.querySelector('.btn-5');

const card = document.querySelector('.ask-card');

//  선택자로 번호 버튼과 카드 본문을 선택자로 선택

let message = document.createElement('div');
message.style.width = '260px';
message.style.height = '39px';
message.style.marginTop = '-188px';
message.style.borderRadius = '999px';
message.style.textAlign = 'center';
message.style.marginLeft = '17px';
message.style.paddingTop = '12px';
message.style.color = 'hsl(25, 97%, 53%)';
message.style.fontWeight = 700;
message.style.backgroundColor = 'hsl(213, 19%, 18%)';
message.style.display = 'none';
card.appendChild(message);

//  화면전환시 생성될 태그를 만들어놓고 displya='none'으로 가려놓음

btn1.addEventListener('click', () => {
  message.textContent = `You Selected 1 of 5`;
  send();
});
btn2.addEventListener('click', () => {
  message.textContent = `You Selected 2 of 5`;
  send();
});
btn3.addEventListener('click', () => {
  message.textContent = `You Selected 3 of 5`;
  send();
});
btn4.addEventListener('click', () => {
  message.textContent = `You Selected 4 of 5`;
  send();
});
btn5.addEventListener('click', () => {
  message.textContent = `You Selected 4 of 5`;
  send();
});

//  각각의 버튼을 클릭했을때 숨긴 태그에 메세지를 입력 후 
//  버튼 클릭을 먼저해야 SUBMIT 버튼이 클릭 가능하도록
//  send 함수를 이벤트 리스너 안에 넣음

const send = function () {
  const btn = document.querySelector('.sub-button');
  btn.addEventListener('click', () => {
    message.style.display = 'block';

    let card_img = document.querySelector('.card-img');
    card_img.style.width = '140px';
    card_img.style.height = '130px';
    card_img.style.borderRadius = '0px';
    card_img.style.backgroundImage = 'url(./images/illustration-thank-you.svg)';
    card_img.style.backgroundSize = 'contain';
    card_img.style.backgroundPosition = 'center center';
    card_img.style.textAlign = 'center';
    card_img.style.backgroundColor = 'hsl(213, 19%, 18%, 0)';
    card_img.style.borderRadius = 'none';
    card_img.style.border = 'none';
    card_img.style.marginLeft = '75px';
    card_img.style.marginBottom = '100px';

    let card_title = document.querySelector('.card-title');
    card_title.textContent = 'Thank you';
    card_title.width = '50px';
    card_title.height = '40px';
    card_title.style.fontSize = '20px';
    card_title.style.textAlign = 'center';
    card_title.style.color = 'white';
    card_title.style.marginBottom = '20px';
    card_title.style.marginTop = '220px';

    let card_desc = document.querySelector('.card-desc');
    card_desc.innerHTML =
      'We appreciate you taking the time to give a <br> rating. if you ever need more support, don`t <br> hesitate to get in touch! ';
    card_desc.style.color = 'hsl(217, 12%, 63%)';
    card_desc.style.textAlign = 'center';
    card_desc.style.fontSize = '15px';

    let card_but = document.querySelector('.card-button');
    card_but.remove();

    let sbmBtn = document.querySelector('.submit-button');
    sbmBtn.remove();
  });
};

//  SUBMIT 버튼을 클릭했을때 화면구성이 바뀌도록 구성
profile
???
???
다음 포스트

instagram 메인화면 클론코딩

0개의 댓글