Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript: Challenge Introducing 'Four in a Row' Planning the Classes

Posted by Faith Y
Faith Y
7,818 Points

How do I run and view the result of my code on my computer?

How do I run the code and view the result on the browser, so I can keep track of what I am doing right or wrong?

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Do you have a local web server like apache or nginx?

What is your OS and what are you using for a text editor/IDE?

FYI - here's a couple of handy code buddies

  1. JSFiddle
  2. CodePen

:tropical_drink: :palm_tree:

Faith Y
Faith Y
7,818 Points

Hi Dave, my OS is MAC and my text editor Visual Code. I will like to quickly setup an environment to complete the OOJS challenge. The environment should enable me use a command on the terminal to launch my web browser automatically and display my webpage.

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Hi Faith,

The options the others indicated will work, and I use CodePen daily.

I would check out Alena's MAMP Course - don't let the php throw you, it is still an easy and very effective way to have your own localhost (aka self host Apache server - MAMP = MAC, Apache, MySQL and PHP). It's only 7 minutes and free.

I'm not up on all the vs codes features but as one of the new up and coming full featured IDEs it provides various JS features and tools natively and/or by extension/plugin. So, probably worth doing some searches or asking other VS Code users their recommendations.

Then if and when you dig deeper into JS, maybe you just use Node

Please remember that these options are not mutually exclusive, try them all and use them all as the situation dictates.

Enjoy :tropical_drink: :palm_tree:

5 Answers

Emmanuel C
Emmanuel C
10,636 Points
Emmanuel C
Emmanuel C
10,636 Points

Hey Faith,

To test random Js stuff I created a folder to hold 2-3 files. One is a basic html file I called index.html with the following code

<!DOCTYPE html>
<html>
<head> 
  <!--link rel="stylesheet" href="main.css"--> 
<body>
    <h1>Testing </h1>
</body>
<script src="script.js"></script>
</html>

The second file is the js file called script.js, and thats where I put anything I want to test. notice how at the bottom of the html it calls the script.js file. In order to view and run it just double click and open the index.html, which should open in your browser.

This way you can test any html, js, and even css you want and use the browser devTools to see any errors or console output. Notice the commented out css link to test css also.

Hope this helps, and good luck.

Faith Y
Faith Y
7,818 Points

Thanks Emmanuel!

Cecilia Constantine
Cecilia Constantine
8,332 Points
Cecilia Constantine
Cecilia Constantine
8,332 Points

To anyone else using Visual Studio Code, there's an extension called Live Server by Ritwick Dey. It allows you to view your project in a new tab via a quick development Live Server with live browser reload by opening an HTML file and clicking the Go Live icon on the toolbar.

cloud712
cloud712
7,616 Points

thank you for sharing this!!

Frans Joakim Titulaer
Frans Joakim Titulaer
5,001 Points

Thanks!

Jazz Jones
Jazz Jones
8,535 Points
Jazz Jones
Jazz Jones
8,535 Points

You can add an html page with an external js file (or just add the js in script tags in the html file) and check out the Chrome Dev Tools debugger.

Faith Y
Faith Y
7,818 Points

Thanks Jazz

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Hi Faith, this is basically my workflow here: for each video you can download the Project Files. Open a browser (I use FF or Chrome) and drop in index.html. You can edit index.html and app.js in a text editor like Notepad++. In the browser hit F12 for developer tools. Click Console when you want to experiment from there.

As I watch the videos and hear important stuff then I put down notes in the .js file like: // for in loops - only for Objects. I found that using the console and going slow and doing each activity, not skipping any, was the way to understanding. Hope this helps! :+1:

Faith Y
Faith Y
7,818 Points

Thanks Mark, I'll try that.

Faith Y
Faith Y
7,818 Points
Faith Y
Faith Y
7,818 Points

I also wanted to be able to lunch my app from the terminal so, similar to what Dave suggested, I installed node and then used npm to install "http-server" - a package which serves web pages. I find this an easier way to test my web apps locally.

[P.S I learnt about the "http-server" package after viewing the npm course on this platform. ]