How to apply simple JS to my projects?

JavaScript
1

Hi guyyss <3, I am new to this community and this is my first post! I apologize in advance if this post is not appropriate if the case delete, please. I feel a little bit lost, It’s been 3 months since I started to study JavaScript, and although I find it very interesting and challenging I can’t figure out how to apply all these functions on my projects/website.

For example, During my study, I learned how to use WHILE loop/FOR loop COOOL! but how can I apply this knowledge in my portfolio? from now I am just doing exercises like (“Write a function and return the sum of the first element of array etc etc etc”). Then after much research, many people advise starting creating a “very easy” app like ToDo. But once I open my editor I don’t have clue where to start.

I ask if you guys have had the same experience as me? what I would like to find is an exercise like Ok I learned the for loop now I am going to insert it in my site, I learn to create arrays ok now I insert what I have learned in my site so that I can interact with it. For example, how can I use a simple array in my portfolio?

I hope it was clear and I apologize if I made a bit of confusion, but I am asking for your help guys because this is the job I want to do and I’m giving it my all.

2

Hi! I think i am somewhat on the same page, I am also a beginner. Yesterday I wrote this post and there was cool advice given to me. Maybe you’ll find it useful too. As for your question, I’m curios for some answers from more expirienced people, too.
Edit: also, don’t apologize, your post is relevant and completely OK.

1 Like
3

For applying JS to an HTML page you need the DOM API (Document-Object-Model Application-Programming-Interface)

The DOM allows you to select HTML elements (or also create) and manipulate them with methods

4

Hi ilenia, Thank you very much for your answer, I am trying to say if I want to apply my JS that I learned for example (arrays) or (while/for loops) in one of my websites created with HTML how can I do that? I want to just implement for example “arrays” into my website in order to put into practice what I learned. Because I feel like I am learning a bunch of new things doing exercises but when I have to use it for my projects I don’t have an idea of how to implement them, or I don’t understand the power that a for loop can give to my website or I don’t really understand how and when I should use an array.

Sorry if my answer is not very clear but I am confuse and I am trying to understand my way. Thanks a lot for the patience

5

Thanks a lot admit, Just saw your post now! very very interesting I definetely going to follow the advice

6

The amount or complexity of JS you add to your projects will depend on the scope of the projects. Are you working on any projects that involve taking data (information) and performing the same task over and over with the data?

For example, let’s say you are working on your resume and you instead of creating the various sections by hand (i.e. job title, dates of employment, job description, etc…), you could create a JSON file that has an array of this information with each element containing an object with properties representing each job detail (as listed above). You could then have a function that loops through the data in the JSON file and creates the HTML elements needed for the structure of the resume. This separates the data (content) from the structure of the page (HTML/CSS). Instead of having to go into the HTML and make the changes, you can simply update your JSON file. Also, if you wanted to change the layout of how the job details are structured, you can simply change the function which creates the structure instead of having to redo each section manually.

Honestly, you will know when you “need” JS as you will not be able to accomplish a task or create a specific feature without manipulated the DOM in someway automatically.

I have created entire sites where the only thing in the HTML file was something like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

The index.js file contained all the JavaScript to create the HTML structure and load in the content. For simple sites this would probably be overkill but as you will see when you get to the Front End Development Libraries section, you will be creating projects where you will have to use JavaScript to accomplish the tasks required.

1 Like
7

Hi Randell, Thank you a lot for your time your answer was very complete. One of my priorities now will be to complete the Front End Development Libraries section! Many thanks

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.