How to use the CodeHS JS Library on your Website

Embed Your Code On an HTML Page

You can run any of your CodeHS JavaScript programs inside the CodeHS Sandbox OR embedded inside of an HTML page.

This tutorial walks you through how you can take a JavaScript Graphics program and embed it inside your webpage.

Step 1: Create an HTML program

The first thing you need to do is make an HTML Program. You can do this either in the CodeHS Sandbox or locally on your computer by making a file named

index.html

Step 2: Paste the Boilerplate Code into index.html

Below is the boilerplate code that creates the basics of a skeleton for your website. You can see that it includes two script tags. The first is for jQuery which is a very popular JavaScript library and the second is the CodeHS JavaScript library itself.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://static.codehs.com/gulp/80550f5fc4071985bfef352d04f005ca3de931d3/chs-js-lib/chs.js"></script>

We're going to take this Balloons program and embed it inside a webpage with a title that says "Balloons" above it.

First, this is showing the Balloons program in a JavaScript Graphics IDE so you can see what it looks like.

Step 3: Copy your JavaScript Program into your HTML File

Now, you just need to copy the code for your JavaScript program into index.html where it says // Your code goes here

Here's a sample full HTML program with the Balloons JavaScript program inside of it.