Please enable JavaScript to use CodeHS

JavaScript Tutorial

How to use the CodeHS JS Library on your Website

This tutorial shows you how you can use the CodeHS Graphics JavaScript library outside of CodeHS on any website.

By Zach Galant

Co-Founder of CodeHS

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
Plain text

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>
HTML


index.html

    <html>
        <head>
            <title>Your Program Title</title>
            <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>
            <style>
                canvas {
                    border: 1px solid black;
                    display: inline-block;
                    vertical-align: top;
                }
                pre {
                    border: 1px solid black;
                    display: inline-block;
                    width: 400px;
                    height: 500px;
                    background-color: #F5F5F5;
                }
            </style>
    </head>
    <body>
        <h1>Your Program Title</h1>
        <canvas
        width="400"
        height="500"
        class="codehs-editor-canvas"></canvas>
        <pre id="console"></pre>

        <script>
            window.onload = function() {
                // Your code goes here
                if (typeof start === 'function') {
                    start();
                }
            };
        </script>
    </body>
</html>
HTML

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.