How are you meant structure a coding project?

I am unclear if there is a way that we are meant to structure a coding project. For example, if i start a simple project, i am inclined to declare variables at the top and start writing functions after. however, i get the impression (though i could be wrong) that if you are to be more professional you are meant to use classes and manage state in an orderly way. It is unclear to me though where I am meant to declare the variables, functions and classes. Or whether if any of that is important and I should try to just get the functionality to work as intended. I want to have readable code . Any help appreciated, apologies that the question is not very specific

This would be much easier to discuss if you had a sample project you are trying to make. Do you have some code or plans we can go over?

I can write some code and respond to the post

Cool. It can be pretty hard to talk about how to design a project in the abstract.

Problem design starts before the first line of code is written, so we can start with a problem description and some thoughts on how you’d solve that problem if you prefer.

here is a codepen https://codepen.io/Egglearn/pen/eYBJaNq
it does what it it is meant to do but should I of made classes ?.It could be a false impression but I get the impression that professionals think about state when they start coding anything and then we are meant to use classes to manage the state ?

It depends. You have a lot of options. These days it’s most common for people to build web applications using frameworks such as Angular, Vue, and React*. Which framework you choose will influence what your project structure looks like. You can, of course, always write your own framework in plain JavaScript. In any case, your structure is likely going be something along the lines of a Model-View-Container pattern. This involves breaking your application into logical units. For each logical unit we separate the code for how it looks, how it behaves, and what data it contains.

if i use a framework like react I will be forced to use classes and state but if I am writing in vanilla javascript, do I still need to try and do this to try and manage state. I get the impression you are saying , if it is clear code, then no it is not necessary

It is sometimes hard to see how to organize your code with simple projects because there really isn’t much to organize and it would be overkill to use an advanced framework. What I would suggest is that you start thinking about how you would expand your project. What if you have 100 questions? Are you going to manually type them into the HTML or would there be a better way to generate them? What if you only wanted to show a random subset of those questions at a time and they could be in any order? How are you going pick just a few of them and display them for the user? If you start thinking about questions like this it will force you to consider how to organize your code so you can do this as effectively as possible.

makes sense, thats helpful

I don’t think that’s what @ArielLeslie meant.

The fact that you have variableOne, variableTwo, and so forth is an indication that your code is not very extensible or flexible. You have a lot of code duplication, which means you have more opportunities for bugs.

There is no ‘supposed to’ when it comes to structuring code, but there are some best practices. Getting code to run is always job #1, but those best practices help you with jobs 2-4, which are making your code readable, making your code maintainable, and making your code extensible.