Closed nunyvega closed 7 months ago
HI! Thanks for this new project! It seems challenging, but I'm looking forward to applying what I've learned and keep learning too. kind regards.
Hello, I completed steps 1 and 2 creating the HTML and JS file. In the HTML I created the structure, the three required inputs, a button to add the expenses, and a UL to display all the expenses.
The JS file is linked to the HTML, and I wrote the steps to start with my code.
Cheers!
Looks good! Good approach dividing the logic into smaller steps with pseudocode 💪
We may revisit the approach of the input films to use a form, but this is once your project is working, so you learn about forms. Feel free to also use onclick instead of event listeners and then we iterate on your approach.
Hi! Step 3 is done using the '.value' method instead 'event listener' It's already committed and pushed. Thanks
I completed steps four and five, now we can see the values of the inputs displayed on a list. Also, above the list is the total amount of expenses.
The total expenses is not working on the live site. Maybe you forgot to push?
Recap of today's talk:
step 0: add a class to each li element that you create programmatically.
step 1: create a select in the HTML with 3 options, each with a value attribute containing the class.
step 2: create an event listener that listens for changes in the select element.
step 3: create a function that does a querySelectorAll and selects the category
step 4: add style.display = "none" to all li elements with the class in the same function
Hi! After a small pause to revisit some concepts of datatypes among others, I came back to this project while doing a DOM course. I completed step six using a 'for each' loop. Now you can visit the expenses tracker on my website.
Thanks!
Nice! once you're done with testing, we'll move to a new project to get some more experience with CSS 🎨
Hello! Thank you for this project, it was very entertaining and challenging at the same time. Filtering by category in step 6, was definitely the most difficult. But there were different levels of challenge in every step for sure. To have a better understanding of this project, I did a course in parallel about DOM https://www.udacity.com/course/javascript-and-the-dom--ud117#. Also, Alvaro gave me 'data-type' exercises. Check it out here! https://github.com/nunyvega/js-tests
If you want to take a look at the Expense tracker I leave a link below. https://bytebitechef.github.io/Exp-Tracker.html
Thanks!
Your next project is live! Here are the steps to continue learning, we'll not tackle CSS and revisit styling as a whole:
Objective
Hello Max! Ready to dive into another exciting project? This time, let's create an Expense Tracker that allows users to input expenses, categorize them, and keep track of the total expenditure.
An important note here is that you'll need to learn new concepts, like events and event listeners. You'll also need to investigate approaches to add functionality that you have not worked on yet, like filtering content on user request.
Preview
This is how your project should look once you're done:
https://github.com/ByteBiteChef/ByteBiteChef.github.io/assets/16329583/8efbc652-1921-4f75-9841-b5046beb763e
I centered all the text by adding:
We'll improve the styling of your first three projects once we're done with this one.
Task Breakdown
Step 1: Setup HTML Structure 🏗
Step 2: Link a JavaScript File 🖇
Step 3: Capturing Expense Data 📥
Step 4: Displaying Expenses 📋
Step 5: Calculating Total Expenditure 🧮
Step 6: Category Filtering 🔍
Step 7: Testing and Debugging 🐞
Notes 📝
Learning and googling is part of this project, focus on searching for specific solutions instead of project-wide explanations.
Max, your progress so far has been incredible, excited to see your Expense Tracker come to life! Best of luck, and happy coding! 🚀