Hey when you’re first learning to program, one thing that’s tough is trying to figure out what projects you can do. What’s within your skill level, what would be fun to have around and use yourself if you need it. And not only is it hard, it’s also tough to choose, since you have so many things you can try. So many ways that you can go, that it’s sometimes easier to just give up.
Well I’m trying to help you out. This is 10 beginner friendly projects that you can complete in a few coding sessions, and also that you can use yourself, so you get that great feeling of accomplishment that drives you to go on, even in the face of great complexity.
I’m trying to order these out roughly in order of easiest and most fun, to larger more complicated projects. These really aren’t that big, and could be good candidates for people doing their #100daysofcode challenges.
- Word Count calculator
- Celsius to Fahrenheit
- Password Generator
- Dice simulator
- Number guessing
- Hex to RGB converter
- HTML Calculator
- Budget App
- Blackjack
- Minesweeper
Word Count Calculator
Figure out how many words are in a paragraph. You’ll want a textarea and a button.
<textarea rows="4" cols="50">
</textarea>
<button onclick=”count()” >Count words!</button>
<script>
Function count(){
}
</script>
You’ll know you’re done when you can get to the right number of words. If you print out how many words on the page, in the console with console.log(number_of_words), or in some other way this is a great place to start. It’s the easiest project, but if you get stuck, it’s also one that’ll have lots and lots of help online for it. Just google, “how to count words in string, with javascript.”
Celsius to Fahrenheit
This one is a little more complicated, it’ll require a little bit of math from you.
It has a similar set up.
One input, and one button. Only this time the input is of type “number”. Great fun, this is one of those that I think most programmers get to early in their studies.
To convert temperatures in degrees Celsius to Fahrenheit, multiply by 1.8 (or 9/5) and add 32.
Something like:
Let answer = (number_entered * 1.8) + 32;Password Generator
Hey is it tough to find passwords, of course it is. Why not let the computer do that for you!?
For this one, you really only need a button, or it could be a command line utility for node.
Then you could go to your nodejs file like this.
Node password.js
// Expected return: 3jD39#j%2sOr just put it in the browser, that’s a great place for it anyway.
In the code you’ll need to find a way to get the candidates for being included in a password, and randomly select them, and add them to a new string that you display to the user through console.log, or print on the screen.
It’s not very hard, but if you’re just getting started it can certainly feel overwhelming.
Good luck, this is one of the early projects I did when I was learning JavaScript for the first time.
Dice Simulator
Set up three buttons. One for 3 sided dice, one for a 6 sided dice. And one for a 20 sided dice.If you can get those buttons to the point where they randomly display a number that’s valid for each one of those “dice rolls” then you’re done. In fact this is the kind of project that is almost useful for yourself to honestly use.
There are apps in the app store right now that make money and get traffic that simulate dice rolls for people who play games that require dice. Fantastic exercise.
For a bit of fun, if you can make the amount of sides variable, and if you can make it so that the user gets to choose how many dice as well, you’ve really taken it to a new level for this starter project.
Number guessing
Alright so here’s the number guessing game. You generate a number between 1 and 10.
Then the user guesses a number with a text input and a button. If they guess the number, you print out a statement like. “You did it”. If they didn’t get it right, you generate a new number and the fun begins again. This is technically a game, and not just a useful calculation. So hopefully you can have fun making it, and have fun playing it for a few tries.
Hex to RGB converter
So one thing that is a real pain is when you have an rgb() or a hex value like this #FF7300, and you need the other one. I find this happens to me more when I’m trying to add an alpha or a transparent layer to a color in CSS, and it’s in Hex format. The issue is, it’s easy when it’s in rgb() already. Just add one more value to it. Converting this.
background-color: rgb(25, 30, 41); // Opacity is 100%to this
background-color: rgb(25m, 30, 41, .5) // Half transparentSo I’ll often search really quick for a tool that converts Hex to RGB.
HTML Calculator
A handheld calculator is a technical marvel, the circuits are build so that they will do the adding and subtracting, multiplication, division, and everything you need.
But you know what, writing a virtual calculator is easier, but still a very challenging task. This one can really stretch a new programmer. But thankfully, the difficulty, even though spiking up from the projects before it, is still within a manageable range.
The easiest way to go about this would be to create button tags for each actual button on the face of a calculator. All numbers 0 through 9, and the operators. Then find out how you’re going to hook them up to functions, and how you’ll coordinate your code at a higher and more complex level.
This is a fantastic exercise, what’s nice, is if you ever need a calculator, you could use the one you wrote yourself.
Budget App
Accept budget items that can be positive or negative. Then display on the bottom, the leftover money. Something like.
| Paycheck 1st | $600 |
| Phone | -$35 |
| TV | -$20 |
| Rent | -$450 |
| Paycheck 15th | $600 |
| TOTAL | $695 |
Blackjack
Build a game of Blackjack. Here’s an excellent example http://blackjack.cosmicapp.co
Taken from this gihtub users profile. https://github.com/tonyspiro/blackjack
Blackjack is a tricky coding problem, it’ll take a while for a new user. So probably not a good candidate for a 100 day challenge, but it is the kind of thing that’ll force you to get your variables organized. And there’s some UI in there to worry about.
Minesweeper
I learned a lot making Minesweeper as a new programmer. This is one of those breakthrough projects I made for myself, where I needed to really stretch to get it working in the end. But I’ve got to tell you, it’s nice to play a simple game like this, if you’ve made it yourself.
And that’s it. Just a few programming projects to help you get started if you’re starting out.