크런치 앱

코딩에 대한 나의 여정은 5주 전에 시작되었고 웹 애플리케이션인 첫 번째 최종 프로젝트를 위한 블로그를 작성하면서 여기까지 왔습니다.

Crunch는 사용자가 구매하는 제품 범주와 비용을 기록하여 비용을 추적할 수 있도록 도와줍니다.

수입은 로컬에서 JSON 파일로 만든 다음 github 페이지를 사용하여 배포한 API에서 가져옵니다.

초보자로서 가장 큰 도전은 웹 사이트를 반응형으로 만들고 JavaScript를 사용하여 일부 기능을 실행하는 것이었지만 수천 마일의 여정을 위한 첫 번째 단계로서 저는 제 코드와 제품에 대해 매우 자신 있고 자랑스럽습니다.

입력 형식은 사용자 입력 후 지워지고 사용자가 범주 입력에 숫자를 입력하고 금액 입력에 문자를 입력하면 오류가 발생합니다. if 조건문을 사용하여 이를 달성했습니다.

if(expensesAmount.value < 0 || expensesAmount.value === '' ){
            amountErrorMessage.classList.remove('hide')

if( /^[a-zA-Z]+$/.test(expensesCategory.value) === false || expensesCategory.value === ''){
            categoryErrorMessage.classList.remove('hide')

API의 수입 데이터를 사용하는 것은 JavaScript에서 fetch()를 연습할 수 있는 좋은 기회였습니다. 입력이 정확하면 코드는 총 수입 - 비용인 잔액을 계산하는 함수를 실행합니다. 이것은 아래와 같이 출력에 표시됩니다. .


마지막으로 비용 범주와 금액이 목록에 추가됩니다.



가까운 시일 내에 사용자가 목록에서 항목을 삭제하고 목록을 다운로드할 수 있는 기능을 구현하고 싶습니다.
더 많은 코딩 기술을 습득한 후 다음 프로젝트가 기대됩니다.
다음은 애플리케이션에 대한 링크입니다: https://annastacia-dev.github.io/crunch-expense-tracker-app/