TIL 14일차 (페이지네이션, 비밀번호조건 추가)

결과물 미리보기

오늘은 페이지네이션과 비밀번호조건을 추가해주었다.

페이지네이션을 통해 해당하는 정보를 가져와야했다.

HTML

    <nav aria-label="Page navigation example" class ="pagemove">

      <ul class="pagination justify-content-center">

        <li class="page-item"><a class="page-link" id = "page1" href="#">1</a></li>

        <li class="page-item"><a class="page-link" id = "page2" href="#">2</a></li>

        <li class="page-item"><a class="page-link" id = "page3" href="#">3</a></li>

        <li class="page-item"><a class="page-link" id = "page4" href="#">4</a></li>

        <li class="page-item"><a class="page-link" id = "page5" href="#">5</a></li>

      </ul>

    </nav>

다음과 같은 코드를 짜면 페이지 아래에 해당하는 페이지이동리스트가 나온다.

  //하단 페이지를 클릭시 해당하는 페이지의 정보로 이동

  page1.addEventListener('click', async () => {

    //모든 pageselect를 찾아 해당하는 pageselect클래스를 지워줌

    let activepage = document.querySelector('.page-link.pageselect');

    if(activepage)

      {

        activepage.classList.remove("pageselect");

      }

    //case에 따라 리스트를 다르게 불러옴

    page1.classList.add("pageselect");

    switch (nowpagedata) {

      case 0:

        await fetchPopularMovies(1);

        break;

      case 1:

        await fetchUpcomingMoives(1);

        break;

      case 2:

        await fetchTopRatedMovies(1);

        break;

      default:

        break;

    }

  });

클릭시 매커니즘이다. 페이지의 카테고리가 인기영화, 역대영화, 개봉예정영화 3개로 나눠졌기때문에 case를 3개로 짜서 페이지별로 이동을 하게끔 제작하였다.

그리고 위의 부분에 해당하는 

    //모든 pageselect를 찾아 해당하는 pageselect클래스를 지워줌

    let activepage = document.querySelector('.page-link.pageselect');

    if(activepage)

      {

        activepage.classList.remove("pageselect");

      }

부분에서 페이지클릭 해당페이지가 클릭되었다고 배경색을 바뀌게 해주었다.

클릭된 부분이였던 부분은 찾아서 클래스를 지워주었다.

 

그리고 비밀번호를 조건에 맞아야만 게시글을 등록할 수 있게 적용하였다.

let passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{4,8}$/;

          if(!passwordRegex.test(password))

            {

              alert('비밀번호는 영어와 숫자를 포함해 4~8글자로 작성해주세요');

              return false;

            }

조건은 영어와 숫자가 포함되어야하고, 4~8글자 사이에 조건이 맞아야만 비밀번호가 등록되게 적용하였다.

오늘은 막상 이렇게 정리하니 많이 안짠것같긴해서 아쉽다.

내일은 발표날이기도하고 메인화면 부분만 정리를 하고 마무리해야겠다..