[JS] 달력 날짜 누르면 날짜에 해당하는 저축, 소비, 지출 불러오기

- 이전 게시글

2023.05.26 - [Project Portfolio] - [JS] 달력 만들기

[JS] 달력 만들기

 

 

결과물

날짜를 선택하면 그에 대한 지출, 소비, 저축 내역을 보여주는 기능을 만들었습니다~!

코드를 하나씩 살펴볼까요??!!

 

 

[ javascript ]

핵심 아이디어~ 이전 글에서 있었던 함수 choiceDate()에 함수 Choicelist를 넣어주는 것..!!! 

// 날짜 선택
function choiceDate(nowColumn) {
  if (document.getElementsByClassName("choiceDay")[0]) {                              // 기존에 선택한 날짜가 있으면
    document.getElementsByClassName("choiceDay")[0].classList.remove("choiceDay");  // 해당 날짜의 "choiceDay" class 제거
  }
  nowColumn.classList.add("choiceDay"); // 선택된 날짜에 "choiceDay" class 추가
  Choicelist();
}

 

날짜를 선택하는 함수가 실행될 때마다 선택한 날짜에 대한 정보를 불러오는 함수가 같이 실행되도록 하면 해당 로직이 완성됩니다~ 달력만들기 부분 코드를 잘 이해하셨다면, 큰 어려움없이 이해하실 수 있을겁니다~

마지막으로, window.onload에 해당 함수가 실행되는 부분을 넣어주면 끝!!!

 

[ 전체 코드 중 일부]

// 선택한 날짜에 대한 정보 불러오기
async function Choicelist() {
  const year = document.getElementById("calYear").innerText
  const month = document.getElementById("calMonth").innerText
  const date = document.getElementsByClassName("choiceDay")[0].innerText
  const day = year + '-' + month + '-' + date
  
  // getMinus는 지출액(소비기록)을 불러오는 함수
  const response_minus = await getMinus(day)
  const response_minus_json = await response_minus.json()

  const newbox = document.getElementById('minus-box-choice')
  newbox.setAttribute("style", "margin-top:10px;")

  if (response_minus_json != "") {
    newbox.innerText = "당신의 소비는?"
    response_minus_json.forEach(e => {
      const newdiv = document.createElement("div")
      newdiv.setAttribute("class", "minusinfo")
      const newP1 = document.createElement("span")
      newP1.setAttribute("style", "margin-right:20px;")
      newP1.innerText = "지출내역:  " + e["placename"]
      const newP2 = document.createElement("span")
      newP2.innerText = "지출금액:  " + e["totalminus"] + "원"
      newdiv.appendChild(newP1)
      newdiv.appendChild(newP2)
      newbox.appendChild(newdiv)
    })
  } else {
    newbox.innerText = "당신은 절약의 왕~!! 지출이 없습니다."
  }
  // 총 지출 금액
  let all_minus = 0
  response_minus_json.forEach(e => {
    all_minus = all_minus + e["totalminus"]
  })
  const totalminussum = document.getElementById('total-minus-choice')
  totalminussum.innerText = "총 지출 금액:  " + all_minus + "원"
  
  
 // 저축과 수입부분도 동일하게 작성되어서 생략하도록 하겠습니다~

 

.

.

.

 

..The End..