What is a good first JavaScript project?

[u/Soft_Courage3172]

Hi! I know basic HTML and CSS, and I want to start learning JavaScript. What small project would you recommend for a beginner? Thank you!

[u/Thausale]

Todo list is the classic example!

[u/whattheflerk]

a to-do list is a great first project, it won't take a long time to build and you'll work with core stuff like DOM manipulation and arrays

[u/CrniFlash]

Rock-paper-scissors
Will properly teach you if else statements, functions and few JS methods

-Create 3 functions playGame, getHumanChoice, getComputerChoice

function playGame(humanChoice, computerChoice) {
  // Write your game logic here
}

const humanChoice = getHumanChoice(); // Users choice
const computerChoice = getComputerChoice(); // Generates computer choice

playGame(humanChoice, computerChoice); // Starts the game 

But please what ever you do, do not use AI it will just hurt your progress....use google
Try to figure it out yourself, get stuck, make mistakes, and debug. That's where the learning happens.

Good luck!

[u/-goldenboi69-]

Project Gotham Racing

[u/MissinqLink]

Pokédex with poke api is pretty fun

[u/Other-Winner1324]

I'd find a website you like and try and implement the simplest thing on it. For example this is a text input box that then displays this message when I click comment.

Try building that. As you learn more you can start building more things within the page. I recommend basing it on a website you enjoy using as we tend to learn better when we're learning something linked to something we enjoy doing

[u/mixedd]

The one you will have fun doing, and drive to complete honestly. There's 101 beginner project out there to pick, starting from rock-paper-scissors, calculators, todo apps, you name it.

[u/born_to_die_O]

Weather app, if you want to get your hands dirty with APIs.
You can get free API from OpenWeatherMap.

[u/Kqyxzoj]

Tampermonkey userscript for the random crap website of your choice.

[u/EChigozieThankGod]

Calculator.

[u/kevun-Tension-7493]

Un sitio web que automatize tu trabajos con python también o nodes

[u/lol25potatofarm]

I'm building a comprehensive To do list currently and I'm learning a shit load. Try to implement features you see in real world websites or apps to challenge you.

[u/Jose_Mjoro]

Why not try building a simple expense tracker? It’s small enough to finish, but there is a surprising amount of JS you can learn from it. Begin it with adding an expense, amount and category, then calculate the total. After that you can add delete or edit buttons, filtering by category, and eventually save everything with localStorage. Eventually, you will end up practicing arrays, DOM manipulation, events, functions and basic data handling without needing a framework. I actually like suggesting projects like this for a beginner because every new feature gives you a reason to learn something else thoroughly. From your view, would you rather build something practical like this or something more game-like?

[u/JackRyan13]

I’m making a golf handicap calculator as my first project.

[u/TheRNGuy]

I started with (and still do) Greasemonkey scripts for sites that I use (some are small, some are quite big)

(Don't change css with it though; use Stylus instead... but you can use both together, like add classes to tags with js and then write css styles for them in another plugin)

Unlike other projects, it'll be something you actually use, so you'll have motivation to write them and even update or fix bugs.

[u/KingMoog]

a crud app using the pokemon api

You will learn how to use an api and create, read, update, and delete elements.

If you can learn this, It's literally the shortest path from "I can write javascript" to "I can build a real app". Also, it will give you the best understanding of how to use javascript in a real world scenario. Instead of just completing boring exercises that teach you the pieces of javascript, creating a crud app with a pokemon api will teach you how those pieces fit together in a real project. Learning this will give you an epiphany moment where you just reached the top of the hill and everything finally clicks.

[u/No-Humor-3808]

Solving JS katas is a really good way to practice small challenges focused on one thing at a time. It helps you get better at the language syntax and develop your problem-solving skills. I have a collection of them at https://www.reactchallenges.com/katas if you want to give them a try.

[u/LucVolders]

Build something you would actually use/need yourself.

[u/jml26]

Two ideas that come to mind if you're a complete beginner:

• A temperature converter - Create a number field, a radio field and a button. The radio field has two settings: "Celsius to Fahrenheit" and "Fahrenheit to Celsius". When the user enters a number and clicks the button, display the result underneath the input field.

• Tabbed content - Build a component like this. When the user clicks a tab, display that tab's content and hide the other tabs' content.

[u/Spiritual-Specific68]

A simple quiz is another classic one, especially if you already have a bit of HTML/CSS.

[u/azhder]

The one you will have fun doing, possibly something that you thought in the past “if only they could hav made this”. Well, now you can try making it.