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 →

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 →