[자바스크립트,CSS] 진행상태창 statusbar 만들기 , 그라데이션 효과(colorzilla)

진행상태창 만들기

1. HTML) qna section 안에 div.status로 status 클래스 만들고, 그 안에

div.statusbar로 statusbar 클래스를 만들다

        <section id="qna">
            <div class="status mx-auto mt-5">
                <div class="statusbar"> 
                </div>
            </div>

 

2. Javascript) const endPoint를 정의해준다

나는 질문이 12개였음. 

// statusbar 위한 엔드포인트 정의
const endPoint =12;

3. 이어서 goNext 함수 안에 var status를 .statusbar를 가져오는 것으로 정의하고

status의 스타일 너비는 (100/ endPoint) * (qIdx+1) 씩 하고 퍼센테이지로 한다

    function goNext(qIdx){
    // html파일에서 qna 안 qbox가져와라
    var q= document.querySelector('.qbox');
    q.innerHTML = qnaList[qIdx].q;
    // 원래는 q.innerHTML =qnalist[0].q; 였는데 0~11번째 질문을
    // 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서, for 함수 사용 
    for(let i in qnaList[qIdx].a){
        // answerlist를 하나씩 입력하지 않고 파라미터로
        addAnswer(qnaList[qIdx].a[i].answer,qIdx);
    }
    
    // status에 따라서 바로 나타내려고
    var status = document.querySelector('.statusbar');
    status.style.width=(100/endPoint)*(qIdx+1) + '%';

 

4. CSS) status와 statusbar에 대해서 꾸며준다.이 때, statusbar는 그라데이션으로 한다. 

그 방법은 아래에 있다. 

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

.statusbar{
    height:100%;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,cec7ec+48,cec7ec+48,d8d0ef+68,c1bfea+100 */
    background: linear-gradient(to bottom,  #ebe9f9 0%,#cec7ec 48%,#cec7ec 48%,#d8d0ef 68%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

 

---

진행상태 창 그라데이션 효과 이용하기

1. colorzilla에 접속한다

https://www.colorzilla.com/

ColorZilla - Eyedropper, Color Picker, Gradient Generator and more

2. 오른쪽 generator를 클릭한다. 

 

 

3. 하고 싶은 그라데이션을 고르고 코드를 복사해서 css에 옮긴다. 

 

진행상태창 예시