Skip to content
OverviewSolutions
7
Comments
3

Chris

@chriscodes17Vancouver, BC, Canada270 points

Passionate self-taught developer with expertise in React, Redux, Express, MongoDB, and SQL. Continually pushing boundaries in the tech world while honing my coding skills. When not immersed in code, you can find me exploring nature's wonders through hiking, camping, and bouldering.

I’m currently learning...

Fullstack development through the Fullstack Open curriculum from the Helsinki university. What is covered in this course is how to create fullstack web applications using React as the frontend with node JS, Express, MongoDB, SQL as the backend with JWT for authentication.

Latest solutions

View more solutions

Latest comments

  • Chris•270
    @chriscodes17

    Well done on getting the design right! The application look great.

    I found an issue with the job filtering, if you press any of the job filters multiple times they will show up multiple times on the 'filter selection' at the top. A way to fix this is to check if that job filter already exists at the top such as using Array.find() method and if it does exist then when a filter that already exists is clicked then you can either stop the function from fully running or however you have it setup.

    I hope that helps! Thanks

    Marked as helpful
  • Chris•270
    @chriscodes17

    Well done on the design and getting it matching! The app functions well and the user experience is also good.

    Looking at your index.js code, there is a lot of repeating code for when you are fetching. What I recommend to do in this situation is to create a function for fetching and creating a function for rendering the advice data. These functions will handle all your fetching and adding the necessary data to the DOM. It can look something like this:

    const fetchAdvice = () => {
fetch('https://api.adviceslip.com/advice')
.then((response) => {
return response.json();
})
.then((data) => {
return render(data);
})
.catch(function (error) {
console.log('Error fetching advice:', error);
});
};

const render = (data) => {
document.getElementById('advice-content').innerHTML = data.slip.advice;
document.getElementById('advice-number').innerHTML = data.slip.id;
};

document.getElementById("advice-button").addEventListener("click", fetchAdvice)

fetchAdvice() //called on initial page render

    As you can see with both the functions, there is more organization of code and it makes the code reusable with using those functions. This is just a tip on how to make your code more reusable and it will come in handy when you are dealing with large amounts of data or specific functionalities that an app requires.

    Good job overall!

    Marked as helpful
  • Chris•270
    @chriscodes17

    Project looks awesome! Good job on the design and app functionality.

    I have one comment on how the app handles it's data. I noticed whenever I add, delete, or change the filter options, the app loads and sends a request to the server. On the network tab I can see that for filtering the todo's it is making GET requests to the server and fetching the tasks every time.

    I think a more efficient approach would be add state to the app, when a users adds, completes or deletes a todo you can update the state on the app and send data to the server at the same time, this will eliminate the need for the 'loading' every time a user does one of those actions. Also, when a user filters the todo's you can just filter through the app's state and eliminate the need for fetching from the server.

    These small fixes can increase the users experience and make the app quicker. I hope you find this information helpful and keep up the good work!

    Happy coding! :)

    Marked as helpful