Code review please

First off, spoiler alert! If you haven’t worked through the Basic Algorithm Scripting portion of the JS & Data Structures Cert there are answers here that you may want to avoid.

Hi, I’ve finished the Basic Algorithm Scripting portion of the JS course and there are answers there that I want to keep and possibly review in the future. So I took my HTML and CSS and my basic JS knowledge and created an interactive page. (It gets boring looking at the console and then having to edit all the time)

I’m asking for a code review on the JS portion of the interactive page please. Is my thought process okay? Do I have a good flow? I think there will be things that I’ll clean up in the future as my knowledge grows but I’d like someone ‘in the know’ to do a code review and give me some feedback on anything that should be within my understanding at this point in time.
I ran it through a validator and it told me I was missing a semicolon on the last line but I’m not sure where. Everything is working as expected.
I’m in the process of figuring out how to move ‘onsubmit’ out of HTML and into JS. I tried the same as I did with ‘onchange’ but things weren’t working so I’m currently still in research mode for it.

Thank you for your time.

Here’s the link to my codepen

Do you have a link to your project?

facepalm I added the link to my original post…thanks.

And my bad, I meant to have this thread in the Javascript forum.

I took a brief look at your code and see many places where you could make your code more DRY (Do Not Repeat Yourself). For example, in the function dropdownChoice, you have a swtich statement with several instances of getElementById.innerHTML. I would suggest creating a separate object which would contain the various values (descTitle, descText, descTest, and textbox) you will use to populate the innerHTML or placeholder values. The property names in the object would be the same descTitle, descText, descTest, and textbox. Then, instead of using a switch statement, you could do a object lookup (pseudo-code follows):

document.getElementById("descTitle").innerHTML = scriptsObj[script].descTitle;
document.getElementById("descText").innerHTML = scriptsObj[script].descText;
document.getElementById("descTests").innerHTML = scriptsObj[script].descTitle;
document.getElementById("textbox").placeholder = scriptsObj[script].textbox;
if (scriptsObj[script].number) {
  document.getElementById("number").style.visibility = "visible";
  document.getElementById("number").placeholder = scriptsObj[script].number;
}

Note: scriptsObj would have property names like cToF, and revString whose values would be objects themselves.

Some variation of what I have suggested above could be applied to your userInput function also, but I will let you figure that one out on your own.

1 Like

I really like your project! Fonts, colors, spacing and content is amazing. Keep at it :smile:

Thank you @RandellDawson, that’s what I was looking for. You’ve given me something to study, read up on and learn. Much appreciated.

Thanks @erickkg, I really appreciate that.