Learn Jsbin - 10 Code Examples & CST Typing Practice Test

JSBin is an online code editor focused on web development that allows users to write and test HTML, CSS, and JavaScript in real-time. It is designed for rapid prototyping and debugging of web code directly in the browser.

View all 10 Jsbin code examples →

Hello World in JS Bin JS Bin Button Click Example JS Bin Input Echo Example JS Bin Color Changer JS Bin Clock Example JS Bin Random Number Generator JS Bin Hide and Show JS Bin List Adder JS Bin Simple Calculator JS Bin Toggle Dark Mode

Learn JSBIN with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Hello World in JS Bin

<!DOCTYPE html>
<html>
<head>
    <title>Hello JS Bin</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #2196F3; }
    </style>
</head>
<body>
    <h1 id="output"></h1>

    <script>
        document.getElementById("output").textContent = "Hello World";
    </script>
</body>
</html>

A basic JS Bin example that shows 'Hello World' using HTML and JavaScript.

Let’s Try →

JS Bin Button Click Example

<!DOCTYPE html>
<html>
<head>
    <title>Button Click</title>
</head>
<body>
    <h1 id="output">Click the button</h1>
    <button id="btn">Click Me</button>

    <script>
        document.getElementById('btn').onclick = function() {
        document.getElementById('output').textContent = 'Button Clicked!';
        };
    </script>
</body>
</html>

A JS Bin example with a button that updates text when clicked.

Let’s Try →

JS Bin Input Echo Example

<!DOCTYPE html>
<html>
<head>
    <title>Input Echo</title>
</head>
<body>
    <input type="text" id="input" placeholder="Type here">
    <p id="output"></p>

    <script>
        document.getElementById('input').oninput = function() {
        document.getElementById('output').textContent = this.value;
        };
    </script>
</body>
</html>

A JS Bin example that echoes user input in real time.

Let’s Try →

JS Bin Color Changer

<!DOCTYPE html>
<html>
<head>
    <title>Color Changer</title>
</head>
<body>
    <button id="btn">Change Color</button>

    <script>
        document.getElementById('btn').onclick = function() {
        document.body.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
        };
    </script>
</body>
</html>

Changes the background color when a button is clicked.

Let’s Try →

JS Bin Clock Example

<!DOCTYPE html>
<html>
<head>
    <title>Clock</title>
</head>
<body>
    <h1 id="clock"></h1>

    <script>
        setInterval(function() {
        let now = new Date();
        document.getElementById('clock').textContent = now.toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html>

Displays a live updating clock.

Let’s Try →

JS Bin Random Number Generator

<!DOCTYPE html>
<html>
<head>
    <title>Random Number</title>
</head>
<body>
    <button id="btn">Generate</button>
    <p id="output"></p>

    <script>
        document.getElementById('btn').onclick = function() {
        document.getElementById('output').textContent = Math.floor(Math.random()*100)+1;
        };
    </script>
</body>
</html>

Generates a random number between 1 and 100 when button is clicked.

Let’s Try →

JS Bin Hide and Show

<!DOCTYPE html>
<html>
<head>
    <title>Hide/Show</title>
</head>
<body>
    <p id="para">Hello! Toggle my visibility.</p>
    <button id="btn">Toggle</button>

    <script>
        document.getElementById('btn').onclick = function() {
        let p = document.getElementById('para');
        p.style.display = (p.style.display==='none') ? 'block' : 'none';
        };
    </script>
</body>
</html>

Shows or hides a paragraph when a button is clicked.

Let’s Try →

JS Bin List Adder

<!DOCTYPE html>
<html>
<head>
    <title>List Adder</title>
</head>
<body>
    <input id="input" placeholder="Item">
    <button id="btn">Add</button>
    <ul id="list"></ul>

    <script>
        document.getElementById('btn').onclick = function() {
        let val = document.getElementById('input').value;
        if(val) {
        let li = document.createElement('li');
        li.textContent = val;
        document.getElementById('list').appendChild(li);
        document.getElementById('input').value='';
        }
        };
    </script>
</body>
</html>

Adds items to a list dynamically via an input field and button.

Let’s Try →

JS Bin Simple Calculator

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
</head>
<body>
    <input id="a" type="number" placeholder="Num1">
    <input id="b" type="number" placeholder="Num2">
    <button id="btn">Add</button>
    <p id="output"></p>

    <script>
        document.getElementById('btn').onclick = function() {
        let a = parseFloat(document.getElementById('a').value);
        let b = parseFloat(document.getElementById('b').value);
        document.getElementById('output').textContent = 'Sum: '+(a+b);
        };
    </script>
</body>
</html>

A simple calculator adding two numbers entered by the user.

Let’s Try →

JS Bin Toggle Dark Mode

<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode</title>
</head>
<body>
    <button id="btn">Toggle Dark Mode</button>

    <script>
        document.getElementById('btn').onclick = function() {
        document.body.classList.toggle('dark');
        };

        document.head.insertAdjacentHTML('beforeend','<style>.dark { background:#222; color:#fff; }</style>');
    </script>
</body>
</html>

Toggles dark/light mode for the page using a button.

Let’s Try →

Frequently Asked Questions about Jsbin

What is Jsbin?

What are the primary use cases for Jsbin?

Rapid prototyping of HTML, CSS, and JavaScript. Testing small code snippets and debugging. Sharing live examples of web code. Learning front-end development interactively. Collaborating on small web projects via shared links

What are the strengths of Jsbin?

Instant feedback for front-end code. No installation required. Simple and lightweight for rapid prototyping. Supports sharing and collaboration easily. Focus on learning and testing web code

What are the limitations of Jsbin?

Limited to front-end technologies (HTML, CSS, JS). Not suitable for server-side or full-stack projects. Dependent on internet connection. No built-in package management or database support. Advanced debugging tools are minimal

How can I practice Jsbin typing speed?

CodeSpeedTest offers 10+ real Jsbin code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Hello World in JS Bin

<!DOCTYPE html>
<html>
<head>
    <title>Hello JS Bin</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #2196F3; }
    </style>
</head>
<body>
    <h1 id="output"></h1>

    <script>
        document.getElementById("output").textContent = "Hello World";
    </script>
</body>
</html>

A basic JS Bin example that shows 'Hello World' using HTML and JavaScript.

Let’s Try →

JS Bin Button Click Example

<!DOCTYPE html>
<html>
<head>
    <title>Button Click</title>
</head>
<body>
    <h1 id="output">Click the button</h1>
    <button id="btn">Click Me</button>

    <script>
        document.getElementById('btn').onclick = function() {
        document.getElementById('output').textContent = 'Button Clicked!';
        };
    </script>
</body>
</html>

A JS Bin example with a button that updates text when clicked.

Let’s Try →

JS Bin Input Echo Example

<!DOCTYPE html>
<html>
<head>
    <title>Input Echo</title>
</head>
<body>
    <input type="text" id="input" placeholder="Type here">
    <p id="output"></p>

    <script>
        document.getElementById('input').oninput = function() {
        document.getElementById('output').textContent = this.value;
        };
    </script>
</body>
</html>

A JS Bin example that echoes user input in real time.

Let’s Try →

JS Bin Color Changer

<!DOCTYPE html>
<html>
<head>
    <title>Color Changer</title>
</head>
<body>
    <button id="btn">Change Color</button>

    <script>
        document.getElementById('btn').onclick = function() {
        document.body.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
        };
    </script>
</body>
</html>

Changes the background color when a button is clicked.

Let’s Try →

JS Bin Clock Example

<!DOCTYPE html>
<html>
<head>
    <title>Clock</title>
</head>
<body>
    <h1 id="clock"></h1>

    <script>
        setInterval(function() {
        let now = new Date();
        document.getElementById('clock').textContent = now.toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html>

Displays a live updating clock.

Let’s Try →

JS Bin Random Number Generator

<!DOCTYPE html>
<html>
<head>
    <title>Random Number</title>
</head>
<body>
    <button id="btn">Generate</button>
    <p id="output"></p>

    <script>
        document.getElementById('btn').onclick = function() {
        document.getElementById('output').textContent = Math.floor(Math.random()*100)+1;
        };
    </script>
</body>
</html>

Generates a random number between 1 and 100 when button is clicked.

Let’s Try →

JS Bin Hide and Show

<!DOCTYPE html>
<html>
<head>
    <title>Hide/Show</title>
</head>
<body>
    <p id="para">Hello! Toggle my visibility.</p>
    <button id="btn">Toggle</button>

    <script>
        document.getElementById('btn').onclick = function() {
        let p = document.getElementById('para');
        p.style.display = (p.style.display==='none') ? 'block' : 'none';
        };
    </script>
</body>
</html>

Shows or hides a paragraph when a button is clicked.

Let’s Try →

JS Bin List Adder

<!DOCTYPE html>
<html>
<head>
    <title>List Adder</title>
</head>
<body>
    <input id="input" placeholder="Item">
    <button id="btn">Add</button>
    <ul id="list"></ul>

    <script>
        document.getElementById('btn').onclick = function() {
        let val = document.getElementById('input').value;
        if(val) {
        let li = document.createElement('li');
        li.textContent = val;
        document.getElementById('list').appendChild(li);
        document.getElementById('input').value='';
        }
        };
    </script>
</body>
</html>

Adds items to a list dynamically via an input field and button.

Let’s Try →

JS Bin Simple Calculator

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
</head>
<body>
    <input id="a" type="number" placeholder="Num1">
    <input id="b" type="number" placeholder="Num2">
    <button id="btn">Add</button>
    <p id="output"></p>

    <script>
        document.getElementById('btn').onclick = function() {
        let a = parseFloat(document.getElementById('a').value);
        let b = parseFloat(document.getElementById('b').value);
        document.getElementById('output').textContent = 'Sum: '+(a+b);
        };
    </script>
</body>
</html>

A simple calculator adding two numbers entered by the user.

Let’s Try →

JS Bin Toggle Dark Mode

<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode</title>
</head>
<body>
    <button id="btn">Toggle Dark Mode</button>

    <script>
        document.getElementById('btn').onclick = function() {
        document.body.classList.toggle('dark');
        };

        document.head.insertAdjacentHTML('beforeend','<style>.dark { background:#222; color:#fff; }</style>');
    </script>
</body>
</html>

Toggles dark/light mode for the page using a button.

Let’s Try →

Frequently Asked Questions about Jsbin

What is Jsbin?

What are the primary use cases for Jsbin?

What are the strengths of Jsbin?

Instant feedback for front-end code. No installation required. Simple and lightweight for rapid prototyping. Supports sharing and collaboration easily. Focus on learning and testing web code

What are the limitations of Jsbin?

How can I practice Jsbin typing speed?

CodeSpeedTest offers 10+ real Jsbin code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.