Using repl.it to Code

You need a place to create your programs. There are many online sites where you can do this, but you can also code on your computer without going online. There are IDEs you can download, like Microsoft Visual Studio or JetBrains WebStorm, but some of these cost money. It's a worthy investment if you're going to code a lot.

To run your JavaScript, you do need a browser, like Google Chrome, Apple Safari, Mozilla Firefox, or Microsoft Edge, but you don't need to be connected to the internet to test it.

Repl.it

Sidenote: An IDE is an Integrated Development Environment, which is a fancy way of saying, "this is where I write my code." Some IDEs help you correct mistakes when you're coding. They can be extremely helpful, whether you're new to coding or if you're a professional.

When coding at home on larger projects, I use JetBrains WebStorm. There is a licensing fee to use it, but I like the features it has.

For smaller projects, or if I need to be able to work on them away from home, I prefer the site http://repl.it. It has different programming language options and it’s a great place to write and test your code. It is free to use as of this writing.

http://repl.it saves your work automatically and you can access it anywhere you have an internet connection. This means you can write code one place and go somewhere else to continue. You can also share links to your code so others can try it. It's a great site.

Using repl.it

Go to http://repl.it

You need to log in to the site when you get there. If you have a Google or Facebook account, you can log in with those, or you can create a new username for yourself.

Once you are logged in, find the option to create a new repl.

Choosing a language

You need to choose a language. We're coding in JavaScript, but you have two ways to select this.

Option 1

You can choose JavaScript for your language. If you only want to focus only on JavaScript right now, then this option is a great place to start.

Option 2

You can choose a web project: HTML, CSS, JavaScript. This gives you access to HTML, which sets up webpages, and CSS, which styles those pages.

You have to pay attention to where you're coding. You get three files with the web project option. Make sure you're always in the index.js file while coding in JavaScript.

Until you're ready for it, don't touch the index.html or index.css files. The index.css file is blank at first, but theindex.html already has some code in it.

If you accidentally delete the code inside the index.html file, your JavaScript won't run. You can add this line to index.html to make it work again.

<!DOCTYPE html><script src="index.js"></script>

We will be displaying information either in popups or in the console window. To get there, select the console tab on the right.

Running a repl

To test your code, you need to run it. In http://repl.it, you can press Ctrl+Enter on your keyboard or click the run button ▶ near the top of the screen.

When you do some of the exercises on this site, you will be typing directly into the console window. You may need to run the repl before the site lets you use the console window. This is true even if you have no code inside.

Console output

When you type code into a console window (whether in http://repl.it or in a browser) you often get a result of undefined. You can ignore it. It means that whatever you typed in did not send back a value. The alert() function shows a popup on the screen when you press enter, but doesn't send any information back. But if you do some math, the console will show the answer.

Can't use repl.it?

If you want to create your own files and run them in the browser, there is some setup you need to do. Check out Setting Up Files for details.