NEW! Squads After School for ages 7-17.

Our summer season has come to a close, but tech learning and fun don't have to end here. Register today for fall online courses!

NEW! Squads After School for ages 7-17.

Our summer season has come to a close, but tech learning and fun don't have to end here. Register today for fall online courses!

What can you do with JavaScript? 7 easy beginner project ideas.

iD Tech in action

You might already know that JavaScript can create games, websites and web apps, and even mobile apps, right?

More specifically than that, we are talking browser-based games, interactive sites, and apps like Netflix and Uber. 

But for beginners looking to get coding with JavaScript, and kids specifically, what does that all mean? It’s great to look to these hugely successful examples to get an idea of all that JavaScript can do, but to kids interested and moving forward, it might also help to look at smaller, more specific cases. 

What you can do with JavaScript

1. Alerts and speech bubbles: HTML and JavaScript are two of the most commonly used programming languages, both of which you can use to create web-based games. One specific JavaScript action is the alert, which creates a pop-up on the screen with a message inside of it; it's like a speech bubble from the page!

2. User interaction with buttons: Allowing a user to make in-game decisions can enhance their experience when playing or using a program. For instance, buttons will sit on a web page, waiting to be clicked, and when clicked, will execute a new visual, etc.  

The alert above is one way for a user to interact with web-based code. And here, the button also utilizes a user's input to display different content. This can take advantage of user interaction to make users feel more involved in the program created.

So, by combining HTML and JavaScript, an HTML button can be created, and then a JavaScript function runs when the user clicks the button.

3. Mouse clicks and physics: A tearable cloth program like the example below uses objects and mouse clicks to determine whether a mouse is moving the material. It uses a combination of physics and advanced JavaScript commands to create the simulation of the mouse “grabbing” and “ripping” the cloth as the user clicks and drags. 

4. Projectile shooters: How about the classic top-down shooter game, where characters move around and shoot projectiles at enemies? The goal is to avoid the enemies and defeat as many as possible to add to the score! 

While JavaScript can be written from scratch, JavaScript libraries help simplify code, and are databases of pre-written functions and code that can be referenced and used to streamline coding.

In this case, p5.js is one of the most well-known JavaScript libraries with tons of built-in code to use.

5. Random numbers like Yahtzee!: Games use random numbers all the time, right? For instance, worlds in Minecraft are randomly generated when games are started, and in Tetris, random numbers determine the order of new pieces appearing on the board. 

Said simply, in games, random numbers add challenges and originality. Other games, like Yahtzee! rely on random number generation to form the core challenge. A for loop can be used to simulate the rolling of dice and randomly generate new numbers each time. 

6. Arrays and a “magic 8 ball”: The Magic 8 Ball is a mystical sphere that answers any "Yes or No" question you ask. With JavaScript and HTML, beginners can learn to create a Magic 8 Ball on the web! With the press of a button on a web page, the Magic 8 Ball will shake, and using an array to hold eight different string responses to a "Yes or No" question, answers will display. 

7. Machine learning for image recognition and voice controls: Machine learning is one of the fastest growing areas in tech, and it's all about training computers to recognize things like images or sounds!

Again, JavaScript libraries have already trained the computer to recognize certain images or sounds, so beginners would only need to reference certain commands for it to fully work! In this case, the additional library for machine learning is called ml5.

Cool, right?

So, JavaScript can do a lot, and more importantly, beginners can do a lot with JavaScript (there is a reason it’s often considered to be the most popular programming language.)

Kids interested in learning more, and learning from live instructors and alongside other students can check out an online JavaScript course in the form of a Virtual Tech Camp.

A photo of Ryan

Ryan manages blog content at iD Tech, starting with the company in 2008. He earned his MBA from Santa Clara University after obtaining his Bachelor’s degree from Arizona State. Connect on LinkedIn!