Code Review - JavaScript Interactive Web Page

In this video I review a viewer submitted JavaScript project. We take a look at how to break apart functions to make code more readable, and how to use variable/function naming to make code easier to understand. Lastly, we will look at a side by side comparison of the before and after to get a better idea of how the changes improve the code quality.

IMPORTANT:

Twitter:

GitHub:

CodePen:

#CodeReview #JavaScript #CodeRefactor

[WebDevSimplified]

If you want me to review your code leave a link below or tweet me @DevSimplified. I can't wait to see what you are building!

[AnnieTaylorChen]

Wow I LOVE this video. I always feel I kinda lack the data structure knowledge and I feel learning this will help me better with solving problems and making the code cleaner(easier to solve future problems).


Notes:
1. Always try to analyze what functions does what
2. Break things to small piece, one function = one task to accomplish
3. Use descriptive and meaningful variable names instead of comments to make things clear
4. Using 2+3 technique makes it easy to test and change
5. Pull const outside, put them in the top, easy to change later if id or class changes on html
6. Don't use things like "onclick" in the html (I'm glad that I never even learnt this way since I started in 2019), putting those into JS to get more organized and easier to track


Question:
why do you use CAPITAL LETTERS in some of the names? Shouldn't we always use camelCase?

[danielk]

The best way to learn is to learn from other people's mistakes. Great video!

[RogerThat]

This was really informative. I really learned a lot. Thanks for doing these. You have a real talent for teaching. :)

[abhijeetsoni]

Very nice video Kyle. Have seen code review video first time on a JS channel. It was pretty insightful. 😊

[stretchx]

Really useful video! (as are your other ones).

i'm still learning web development but have experience using Java & Python so its really useful to see good practices on how to structure the Html & JavaScript

[Glinkis]

When refactoring like this, I would recommend leaning on the editor tools as much as possible. For example, F2 to rename, and extract function. This automatically ensures the update is fully safe, as the editor knows what it needs to update.

[yahyasalimi]

Very useful. Your contents are top tier 😍

[kalidasmahawarkar]

This helped me a lot to understand, how to structure the js while writing and do's and don't, can you pls upload more of these videos for html and css also, thanks for videos !

[coolcha]

This is such a good video. Thanks for posting this. I have a request, how would you change this code to make it object oriented/using a design pattern? If you could make video on that it would be awesome.

[amlife]

You sound like “Jerry rigs everything” lol

[svenvancrombrugge]

Is it just me, or does it not make any sense to send the price to the server instead of the desired product and amount?

[asdzxcz]

Nice explaining, but I don't understand what's the point of keeping all functions flat. Wouldn't be better to keep few main functions in global scope and all smaller functions, related to those functions nested inside ?? Like in this example, original "updateTotal" was transformed into many smaller functions, why not to keep them inside "update" function, as they are all make different things to perfrom update ?