完整的复习 : Udemy JS 섹션3

우링야오·2021년 5월 21일
0

完整的复习

목록 보기
1/1
post-thumbnail

    🎓 Progress-steps 프로젝트 🎓

     🔴 HTML 코드 🔴

<!--전체 감싸는 박스-->
<div class="container">
  <!--프로그레스 담은 박스-->
  <div class="progress-container">
    <!--프로그레스 바-->
    <div class="progress" id="progress"></div> 

    <!--프로그레스 써클-->
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
  </div>
  
  <!--다음,이전 버튼-->
  <button class="btn" id="prev" disabled>Prev</button>
  <button class="btn" id="next">Next</button>
</div>

     🔵 CSS 구현 🔵

  ✨ 가장 중요한 스크립트 작성! ✨

  1. progress, circles, prev, next 변수 선언
  2. 현재 구현되고있는 active index 0으로 초기화
  3. prev,next버튼 click 이벤트 생성
  4. prev, next 버튼 클릭 시 circle클래스 0-3 범위 안에 없으면?
  5. prev, next 버튼 클릭 시 실행되는 함수 update
  6. update 함수에 담을 내용
    • forEach문을 사용하여 circles 배열

forEach 배열 반복문

변수.forEach(element, index, array () => {
});

0개의 댓글