[MBTI 테스트(8)] 진행상태바 구현하기 (colorzilla에서 다양한 색깔 가져오기)

진행상태바

전체 문항 중 얼마나 진행되었는지 체크해주는 상자 만들어주기.

 

    <section id="qna">
      <div class="status">
        <div class="statusBar">
          
        </div>
      </div>

qBox 위에 새로운 div class를 생성해주고

status 내부에 statusBar를 넣어준다.

 

.status{
  height: 20px;
  width: 80%;
  background-color: white;
  border-radius: 20px;
}

.statusBar{
  height:100%;
}

qna.css 파일에 추가해준다.

 

공간 자체를 생성하지않아도

div 태그의  css를 변경하는 것만으로도 가능하다.

 

 

statusBar 빨간색으로 표시해주기

const endPoint = 12;

start.js 파일 상단에 전체 문항 수 표기해주기

 

  status.style.width = (100/endPoint) * (qIdx+1) +'%';

goNext 함수에  추가해주기.

 

이렇게 문항을 지날 때마다 퍼센트가 채워진다.

 

 

그라데이션 컬러 넣어주기

https://www.colorzilla.com/

ColorZilla - Eyedropper, Color Picker, Gradient Generator and more

 

generator로 들어가면

아래와 같은 화면이 뜬다.

 

직접 설정할수도 있고

만들어진 그대로를 복사해도된다.

 

css 파일에서

statusBar의 background 컬러부분을 삭제하고

위에서 복사한 내용을 붙여넣어준다.

예쁜 색으로 바뀌었다!!