Stand-Alone Sandbox

We’ll use a simple HTML/CSS setup for our sandbox. The whole purpose of this web page is to act as a place where we can see the effect of our code (without relying on logging information to the Developer Tool’s Console).

When our page loads, it will look like this. BTW, I’m basing it on PicoCSS for the base styles and light/dark themes along with Tailwind CSS for custom styles.

Notice that we have a big “box” area with the text “Nothing has been written here yet”. We’ll be using this as the target for our JavaScript output.

Sandbox Starter Code/Assets

Use the tabs above to get the code and other assets for the Sandbox Starter Kit. Arrange them in this file/folder structure.

Directorycss
- styles.css
Directoryimg
- sandbox-color.png
Directoryjs
- main.js
index.html

Copy this code and save as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Sandbox</title>
    <link rel="shortcut icon" href="./img/sandbox-color.webp" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/main.js" defer></script>
</head>
<body class="container h-screen max-h-screen flex flex-col">
    <h1>A Sandbox to Explore JavaScript</h1>
    <p>The box below is where the output will be placed.</p>
    <output id="sandbox" class="flex-grow w-full overflow-auto block border border-gray-500 custom-inset font-mono px-1 my-2"><em>Nothing has been written here yet</em></output>
    <footer class="mt-auto">
        <a href="https://www.flaticon.com/free-icons/sandbox" title="sandbox icons">Sandbox favicon created by Freepik - Flaticon</a>
    </footer>
</body>
</html>

Copy this code and save as css/styles.css.

.custom-outset {
    border-style: inset;
}

Copy this code and save as js/main.js.

console.log('main.js has been loaded');
const sandbox = document.querySelector('output#sandbox');

// TODO: Use the space below for playing with JavaScript.

Right-click this image and choose “Save Image As…”, making sure to name it sandbox-color.webp. We’re using it as a favicon - the icon that appears in the browser’s tab beside the title of the page.