작성 규칙

1. 🟠 작성 상태
   ✅ 작성한 날짜를 기록함으로써 리마인드
   ✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
   ✅ 작성 상태를 기술함으로써 수정된 이력 버전과 완성여부를 확인
2. 🖋 기능 설명
   ✅ 레퍼런스 링크
   ✅ 사용된 기술에 대해 스스로 설명
3. 🔨 프로젝트 적용
   ✅ 기획내용 작성, 작성한 계기를 기술
   ✅ 프로젝트에 사용한 코드를 한 줄씩 리뷰하는 것으로 코드 전체 이해 증명
   ✅ 코드를 설계한 내용과 왜 이렇게 작성했는지
   ✅ 완성 코드를 코드펜으로 보여주기

🟠 작성 상태

---

🟠 작성 날짜 : 0422, 2022

🟠 적용 프로젝트 : Team Oldboy - Team Intro Web

🟠 작성 상태 : 수정됨 (0423, 2022)

🖋 기능 설명

---

🖋 레퍼런스 링크

🖋 기능에 대해 설명

▶ $(document).ready(function(){})

• $(document).ready(function(){}) 은 클라이언트를 시동하면서 바로 시작하게 해주는 기능으로 다른 처리를 해 줄 필요 없이 바로 기능을 사용할 수 있다.
• 클라이언트를 시동할 때마다 기능이 필요하기 때문에 함수를 $(document).ready(function(){})에 넣어준다.

▶ Date(), getHours()

• Date()는 현재 날짜 및 시각을 받아오는 함수로 지금 시각을 받아오는데 사용한다
• getHours()는 Date() 에서 시각만을 가져오는 함수로 현재 오후 1시라면 13을 가져온다.
• Date(), getHours() 속성을 활용하여 클라이언트가 시동될 때마다, 시각 값을 가져오고 시간이 지날수록 변화되는 속성을 추가하는데 사용할 것이다.

▶ removeClass(), addClass()

• removeClass() 는 선택한 클래스의 클래스 속성을 지우는 속성이다.
• addClass() 는 선택한 클래스의 클래스 속성을 추가하는 속성이다.

🔨 프로젝트 적용

---

🔨 프로젝트 기획, 작성 계기

• 팀을 소개하는 미니프로젝트를 진행하는 도중, 게임 테마와 비슷해보이게 하기 위해서 시간이 지나면 체력이 방전되는 아이디어를 팀원과 논의했었다.

• 처음에는 Progress Bar를 활용했지만, 조금 더 직관적인 그래픽 디자인을 사용하기로 추가로 논의했다.

• 그래서 HP, MP 게임 이미지를 준비해 시간마다 체력이 떨어지는 효과를 내기 위한 코드를 작성했다.

🔨 코드 리뷰

👁‍🗨 ver.1.0

$(document).ready(function () {
    now_status() })
function now_status() {
    let today = new Date();
    let hours = today.getHours();
    if (hours <= 9) {
        $('.hp_bar').removeClass('hp_0').addClass('hp_4')
        $('.mp_bar').removeClass('mp_0').addClass('mp_4')
    } else if (hours >= 10 && hours < 11) {
        $('.hp_bar').removeClass('hp_0').addClass('hp_4')
        $('.mp_bar').removeClass('mp_4').addClass('mp_3')
    } else if (hours >= 11 && hours < 12) {
        $('.hp_bar').removeClass('hp_0').addClass('hp_4')
        $('.mp_bar').removeClass('mp_4').addClass('mp_2')
    } else if (hours >= 12 && hours < 14) {
        $('.hp_bar').removeClass('hp_0').addClass('hp_4')
        $('.mp_bar').removeClass('mp_4').addClass('mp_1')
    } else if (hours >= 14 && hours < 15) {
        $('.hp_bar').removeClass('hp_0').addClass('hp_4')
        $('.mp_bar').removeClass('mp_4').addClass('mp_0')
    } else if (hours >= 15 && hours < 16) {
        $('.hp_bar').removeClass('hp_4').addClass('hp_3')
        $('.mp_bar').removeClass('mp_4').addClass('mp_0')
    } else if (hours >= 16 && hours < 17) {
        $('.hp_bar').removeClass('hp_4').addClass('hp_2')
        $('.mp_bar').removeClass('mp_4').addClass('mp_0')
    } else if (hours >= 17 && hours < 18) {
        $('.hp_bar').removeClass('hp_4').addClass('hp_1')
        $('.mp_bar').removeClass('mp_4').addClass('mp_0')
    } else if (hours >= 19 && hours < 20) {
        $('.hp_bar').removeClass('hp_4').addClass('hp_0')
        $('.mp_bar').removeClass('mp_4').addClass('mp_0')
    } else {
        $('.hp_bar').removeClass('hp_4').addClass('hp_0')
        $('.mp_bar').removeClass('mp_4').addClass('mp_0')
    }
}

1. 페이지 로딩 시 함수 호출
2. 호출할 함수 지정
3. 함수 선언
4. 오늘 날짜 값 변수 초기화
5. 오늘 날짜의 시각 값 변수 초기화
6. 조건문: 시각이 9시 이전이라면
7. 처리: hp가 0칸인 이미지 클래스를 삭제하고 4칸인 이미지 클래스를 추가
8. 처리: mp가 0칸인 이미지 클래스를 삭제하고 4칸인 이미지 클래스를 추가
9. 조건문: 시각이 10시라면
10. 처리: hp가 0칸인 이미지 클래스를 삭제하고 4칸인 이미지 클래스를 추가
11. 처리: mp가 4칸인 이미지 클래스를 삭제하고 3칸인 이미지 클래스를 추가
    12-35. 시각 값만 다르고 한 칸씩 줄어들게 이미지 처리

🔨 완성 코드(CodePen)

완성 코드

완성된 모습

링크

- 오전 10시가 되어 MP가 한 칸이 닳아 있는 형태