1만 시간의 법칙 만들기 ( + 회전하는 로딩 이미지 기능 추가)

jhyun_k·2022년 10월 24일
9
post-thumbnail

멋사에서 html css를 배울 때 초창기에 했었던 '1만시간의 법칙' 페이지 만들기..! js를 배우기 전 까지는 마크업 상태로 놔뒀지만 js를 배운 이후 js 기능도 넣어보았다..!

기존 페이지
내가 만든 페이지

페이지 소개

개요


1만시간의 법칙대로 한 분야의 전문가가 되기 위해서 하루에 n시간 공부하면 며칠만에 1만시간을 달성할 수 있을지 계산해주는 사이트

움짤

기능소개

  • 메인페이지
    메인 페이지에서 INPUT 창에 원하는 분야와 하루 공부 시간을 입력하고 '나는 며칠 동안 훈련을 해야 1만 시간이 될까' 버튼을 클릭하면 1만 시간 달성 시간을 알 수 있다
    • 시간 입력 칸에는 type을 number로 설정하여 숫자 외 형식이 오지 못하도록 함
    • 둘 중 한 칸이라도 비어있으면 '값을 입력해주세요' 라는 alert 창 나오게 함
  • 버트 누른 뒤 화면
    • 일수는 소수점이 나오지 않고 반올림 되도록 설정
    • '훈련하러가기 GO GO' 버튼을 누르면 모달창이 뜨도록 함
  • 진짜 훈련하러가기 버튼 누르면 모달창 닫힘

script 코드

너무 부끄럽지만 나중과의 비교를 위해 올려본다.......

아쉬운점

  • 간단한 기능에 비해 너무 지저분하게 짠 것 같다.. 미친 선언
    const를 이렇게 많이 안 하고 querySelectorAll 로 불러오려고 했는데 왜인지 선택이 되지 않았다.. 왜죠..
  • modal 창 열고 닫기도 어차피 똑같이 생긴 버튼이라 하나의 코드로 끝내고 싶었는데 똑같은 코드를 두개나 반복해서 비효율적이게 되었다
  • 변수 이름을 지을 때 조금 더 내용을 생각해서 짓는 연습을 해야겠다

수정할것

  • 모달 반응형 크기 조정
  • 폰트 사이즈 조정
  • 원래 사이트에 비해서 내 사이트가 너무..큼직큼직하다.. 아이패드를 더블모니터 삼아서 마크업을 했다보니 전체적으로 커진듯...

그래도

  • JS 하나도 못만졌었는데 뭐라도 하려고 끄적거리고 원하는 대로 동작하니 너무 뿌듯하다..
  • 향후 조금 더 공부하고 벤딩머신 JS 구현도 도전해봐야겠다

+) 로딩 이미지 구현

원래 페이지를 보니 버튼을 누르면 시계 그림이 돌아가며 로딩하는 듯한 효과가 있었다. 그래서 그것을 구현해보기로 했다..!

일단 결과물부터

우선 돌아가는 시계 코드만 보면 이렇다

.loading_img{
    width: 150px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: spin infinite 3s linear;
    transition: all;
    margin-top: 50px;
    display: none;
}
@keyframes spin {
    from{
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}

평소에는 display:none 상태이다가 버튼을 누르면 display:block 상태가 되고, 다시 1.5초 뒤에 안보이는 로직이다
이것을 구현하기 위해 classList 속성과 setTimeout() 함수를 이용하였다

위 사진에 기존 코드가 있었지만 버튼을 누르는 이벤트에 새로운 기능이 들어가느라 조금 바뀌었다

const loadImg = document.querySelector('.loading_img')

yellowBtn.addEventListener('click',()=>{
    result.style.display='none'
    loadImg.classList.add('show');

    setTimeout(() => {
        loadImg.classList.remove('show')
    }, 1500);

    setTimeout(() => {
        let time = inp_time.value   
        console.log(time)
        bigTxt1.textContent = inp_text.value;
        bigTxt2.textContent = Math.round(10000/time)
    
        if(inp_text.value==''|| time==''){
            alert('값을 입력해주세요')
        }else{
        result.style.display='block'
        }
    }, 1500);

})

우선 setTimeout 함수를 이용하여 class를 붙이고 떼는 것 까지는 쉽게 해낼 수 있었다. 그냥 함수 안에 코드를 넣으면 되는 일이니^^

하지만 문제가 생겼다. 처음 인풋값을 넣고 버튼을 누를 때 까지는 문제없이 작동하는데 그 상태로 다른 값을 넣고 다시 버튼을 누르면 result 부분은 그대로 있고 시계만 돌아가는것...

이 문제를 해결하려고 고민하다가 result 창이 나타나는 원리가 result.style.display 속성을 이용했음을 깨달았다. 그래서 결론적으로 버튼 click 이벤트가 발생하면 다시 display:none 되게 하고 함수를 처음부터 시작하도록 만들었다..!

만들어놨던 코드에 새로운 기능을 추가하는 경험이 처음이라 신기했다. 원래는 코드를 짤 때 부터 그 기능이 들어갈 자리를 고려했다면 이번에는 최대한 있는 코드를 활용하여 어떻게 하면 효율적으로 기능을 추가할 수 있을지를 고민해 본 느낌..!
그리고 무언가 원하는 대로 기능이 구현되지 않을 때 고민하고 해결한 경험이 생겨서 블로그에 빨리 기록하고 싶었다..후다닥 달려옴 ㅎㅎ
다음에는 코드를 더 깔끔하게 짜고 싶다..!

7개의 댓글

comment-user-thumbnail
2022년 10월 25일

우와 너무 재밌어보여요!! 저도 하고싶네요👀

1개의 답글
comment-user-thumbnail
2022년 10월 25일

저도 1만 시간의 법칙 만들었는데, 짧은 코드임에도 생각하고 구현하는 데에 꽤 시간이 걸렸던거 같아요!
역시 이론으로 배울 때와 다르게 직접 해보니 쉽지 않네요 😂...

1개의 답글
comment-user-thumbnail
2022년 10월 27일

와 지현아 너무멋있다 !!! 나도 너 코드 보면서 수정좀 해야겠어,,,

1개의 답글
comment-user-thumbnail
2022년 11월 3일

보라색 디자인도 예뻐요. 잘보고 갑니다.

답글 달기