Learn JSFIDDLE with Real Code Examples
Updated Nov 26, 2025
Code Sample Descriptions
1
Hello World in JSFiddle
<!DOCTYPE html>
<html>
<head>
<title>Hello JSFiddle</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px }
h1 { color: #4CAF50 }
</style>
</head>
<body>
<h1 id="output"></h1>
<script>
document.getElementById("output").textContent = "Hello World"
</script>
</body>
</html>
A basic JSFiddle snippet that displays 'Hello World' in an HTML page with JavaScript.
2
JSFiddle Button Click Alert
<!DOCTYPE html>
<html>
<head>
<title>Button Alert</title>
</head>
<body>
<button id="btn">Click Me</button>
<script>
document.getElementById("btn").onclick = () => alert("Hello World")
</script>
</body>
</html>
A JSFiddle snippet showing an alert when a button is clicked.
3
JSFiddle Input and Display
<!DOCTYPE html>
<html>
<head>
<title>Input Display</title>
</head>
<body>
<input id="input" placeholder="Type something">
<p id="display"></p>
<script>
document.getElementById("input").oninput = e => {
document.getElementById("display").textContent = e.target.value
}
</script>
</body>
</html>
A JSFiddle snippet that takes user input and displays it below.
4
JSFiddle Change Color on Click
<!DOCTYPE html>
<html>
<head>
<title>Color Change</title>
</head>
<body>
<button id="colorBtn">Change Color</button>
<script>
document.getElementById("colorBtn").onclick = () => {
document.body.style.backgroundColor = "#FFD700"
}
</script>
</body>
</html>
A JSFiddle snippet that changes the background color when a button is clicked.
5
JSFiddle Simple Counter
<!DOCTYPE html>
<html>
<head>
<title>Counter</title>
</head>
<body>
<p>Count: <span id="count">0</span></p>
<button id="inc">Increment</button>
<script>
let count = 0
document.getElementById("inc").onclick = () => {
count++
document.getElementById("count").textContent = count
}
</script>
</body>
</html>
A JSFiddle snippet implementing a simple counter incremented by a button.
6
JSFiddle Hide and Show Text
<!DOCTYPE html>
<html>
<head>
<title>Toggle Text</title>
</head>
<body>
<p id="text">Hello World</p>
<button id="toggleBtn">Toggle</button>
<script>
document.getElementById("toggleBtn").onclick = () => {
const t = document.getElementById("text")
t.style.display = t.style.display === "none" ? "block" : "none"
}
</script>
</body>
</html>
A JSFiddle snippet that toggles the visibility of text on button click.
7
JSFiddle Clock Example
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
</head>
<body>
<p id="clock"></p>
<script>
setInterval(() => {
document.getElementById("clock").textContent = new Date().toLocaleTimeString()
}, 1000)
</script>
</body>
</html>
A JSFiddle snippet showing a live updating clock.
8
JSFiddle Background Color Cycle
<!DOCTYPE html>
<html>
<head>
<title>Color Cycle</title>
</head>
<body>
<script>
const colors = ["red", "green", "blue"]
let i = 0
setInterval(() => {
document.body.style.backgroundColor = colors[i]
i = (i+1)%colors.length
}, 1000)
</script>
</body>
</html>
A JSFiddle snippet cycling background colors every second.
9
JSFiddle Moving Box
<!DOCTYPE html>
<html>
<head>
<title>Moving Box</title>
<style>
#box { width:50px; height:50px; background:red; position:absolute; top:50px; left:0 }
</style>
</head>
<body>
<div id="box"></div>
<script>
let pos = 0
setInterval(() => {
pos += 5
document.getElementById("box").style.left = pos + "px"
if(pos > window.innerWidth) pos = 0
}, 100)
</script>
</body>
</html>
A JSFiddle snippet that moves a box horizontally across the page.