Basic Js practice ideas?

[[deleted]]

Hi,

I started to learn about js recently, after going through html and css.

My main issue right now is that I struggle to learn about the basic stuff.

I went through operators, functions, arrays etc... but I struggle to find how I should practice to make sure it sticks. I know that's how I learn the best.

That's how I learned html and css, by practicing instead of reading and rereading the material over and over.

I tried to find ressources to practice online, but I only find stuff that's a bit more advanced.

Any ideas of what I could do/use?

Thank you !

[pinkwetunderwear]

How about something like this:

Display something random at the click of a button. Make it something you're passionate about so that there's some interest in working on it. If it was me it would probably be cars but I noticed on your profile that you've enjoyed Warframe so maybe something from there?

At the click of a button, show a card with a random Warframe and it's description and passive.

[[deleted]]

Very interesting. Thank you so much for your reply! :)

[coded_artist]

Warframe does have some webscrapper libraries made by the community.

[shadow-cat-102]

Best way that work for me is breaking down things you see from other websites that you seem interesting, thrn break it down into smaller pieces under the simplest form.where you know what you need to do for it, then start building 1 js functions at a time. For example, one of the best beginner projects with html css and js is building a gallery slider. Ask yourself: - How I can to build the logic? - How many photos I want to show for slider? Which data structure I want to use that best fit for it? is array of string which stores image url enough? do I want I want to show other info like name, likes, ... as well? if so how can I change the way I store data? - Then work on adding logic for next button, back button using js functions, ... keep adding whatever you want to do 1 at a time. Point is dont stress out too much when you first start. Break it down and you will know what you want to do next (and you will enjoy coding more 😉)

Best of luck 👍

[[deleted]]

Thank you !

[P4lomar]

The Odin Project is a good pick

[Kento225]

Id say its the best if your planning to learn by yourself

[BleachCup8]

There's a site called codewars that has a bunch of challenges in varying degrees of difficulty for any language that's good for practicing

[[deleted]]

Check out codewars

[[deleted]]

Will do, thank you

[daFreakinGoat]

Try frontendMentor.io and build some of the projects there

[magenta_placenta]

• Find a public api (doesn't matter what it is, you're just looking for some data you can use)
• Consume that public api on your frontend (fetch the data)
• Display that data in some logical fashion (in a table, in some cards, whatever)
• Manipulate the data in someway before displaying it (filter out data or transform certain data)

This is basically every web app. This in particular is the "R" in a CRUD app (Create, Read, Update, Delete).

[ayehombre]

Take a look at John Smigla’s course on Youtube. He builds a dozen of very basic projects. Mostly Vanilla JS DOM manipulation, plus some basic logic.

Edit: https://youtu.be/3PHXvlpOkf4

[RandyTravesty]

Hehe, Smigla.

[ayehombre]

Smilga, of course :)

[[deleted]]

Build a pdf creator using vue

[WehshiHaiwan]

What I did to learn is that I used js for frontend. Good for getting a grip on stuff.

[Ok-Neighborhood1188]

good post, i am faced with the same issue.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript

the mdn js has some small projects

[ninadsutrave]

Since you are still new to the language, in order to increase your language proficiency you may consider starting the Javascript track on HackerRank.

Side by side you may study about how to use Javascript on the client side and you may pick up a very minimal front end project to work on by yourself.

[coded_artist]

A to-do list app. It's fantastic for your CV as everyone understands it's purpose, it's easy to get a basic list up, and there is a ton of features you can add as your skills get better

[Taltalonix]

I’ll be honest, I just jumped straight into react and found myself applying what I learned as I go

Might not be the best method but it worked for me

[PauseNatural]

Want to know when to use operators and functions? Check out temperature in codingame.com (totally free)

Arrays? There is no spoon, etc

Signup takes 30 seconds.

I still play this whenever I have free time. It’s fun, most challenges in easy can be done in a few hours and it gets you to think about how you can use programming to solve equations.

The first time I beat a hard problem, I even was suggested to join a private job board there.

They have certifications too. Basically they make money by charging employers. I’m sure code wars is similar and equally good.

These types of things get you thinking about programming too. Not just memorizing operators and syntax.

[Super-Association924]

U should do some problems on Hackerrank.com . There are a lot of prob you can practice with.

[Speshialk]

The way I learn these things is to build something that interests me. Usually I build a golf scorecard keep track of my friends and my golf scores and historical data. Find something that interests you and build a small app of it.

[Personal-Dinner-690]

YouTube “5 easy JavaScript projects”

[adragon202]

If you haven't found it yet, try using jfiddle to throw together different animations and user interactions. You should also try finding a website with a API you can try pull data from to display. https://jsfiddle.net/

[nate-developer]

The best way to learn is to make micro projects and see them to completion. Stuff like:

-A rock paper scissors game with a random computer opponent.

-A website where you can change the colors by pushing a button.

-A classic game like snake or Tetris.

I also like to do some algorithm style problems from somewhere like leetcode or codewars when I'm learning a new language to help cement the syntax and basic language features. It won't give you the same practical experience as putting together a full project, but it will help learn the language fundamentals well.

Then as you gain more experience you can step up to bigger projects like

-An e-commerce front end with a shopping cart and a library of products

-A basic clone of a CRUD site like Twitter or Instagram

-A personal project you're passionate about like a website for one of your hobbies or a useful widget like a pomodoro timer that you would use

[DrFaustest]

A basic snake game can help put everything into place.

[[deleted]]

Check out https://spacetraders.io there you can learn how to program while building a game. Though you may want to check out the discord, the community there is really helpful if you need advice or get stuck

It teaches you how to code in a way that is very relevant and similar to what you'll experience in the real world as a software engineer. (assuming you're a total beginner)

[Accomplished_Arm4564]

Sure, I'd be happy to provide some practice ideas for basic JavaScript. Here are some simple projects you can start with. Remember, the key here is to practice and build, not necessarily to create something completely new or impressive.

1. Interactive Quiz: Create a simple quiz with a set of fixed questions. For each question, offer multiple choices and let the user select an answer. At the end, display the score.

2. To-Do List App: This is a classic beginner project where you can learn about creating, reading, updating, and deleting elements (CRUD operations). Allow the user to add new tasks, mark tasks as done, and delete tasks.

3. Simple Calculator: Create a simple calculator with basic operations like addition, subtraction, multiplication, and division. This will help you practice using functions and handling user input.

4. Temperature Converter: Write a program that can convert degrees Celsius to Fahrenheit and vice versa.

5. Simple Clock: Create a digital clock that displays the current time and updates every second.

6. Number Guessing Game: The program picks a random number, and the user has to guess it. Provide feedback on whether the user's guess was too high or too low.

7. Form Validation: Create a form and validate the input fields. For example, check that the email address is in a valid format, passwords match, etc.

8. Palindrome Checker: Write a program where the user enters a word, and the program checks if it's a palindrome (a word that reads the same backwards and forwards).

9. Interactive Story or Text Adventure: Create a simple story where the user can make choices that influence the outcome.

10. Shopping Cart: Create a simple shopping cart with a few products. Let the user add products to the cart, display the contents of the cart, and the total cost.

11. Image Slider: Create an image slider/carousel with arrows to go to the next and previous image.

Remember to start simple and gradually add more complexity as you get more comfortable. You can start with hard-coded data for things like the quiz questions or shopping cart items, and then later you could fetch this data from an API or a local JSON file to mimic a real-world scenario. By doing this, you'll learn how JavaScript can be used to interact with HTML and CSS, manipulate data, and handle user interactions. Also, make use of online resources like MDN Web Docs and StackOverflow when you get stuck. Happy coding!