Explore real-world JavaScript examples tailored for beginners. Learn how to build dynamic web features with hands-on code snippets, including DOM manipulation, form validation, and interactive web apps.
<p id="text">Click the button to change my color!</p>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.getElementById("text").style.color = "blue";
}
</script>
🧠 Used in interactive stories, quizzes, or themed messages.
<p id="resizeText">Resize me!</p>
<button onclick="increaseFont()">Increase Font</button>
<script>
function increaseFont() {
document.getElementById("resizeText").style.fontSize = "2em";
}
</script>
🧠 Helpful in accessibility or reading mode features.
<button onclick="randomBg()">Random Background</button>
<script>
function randomBg() {
const colors = ["#f8b400", "#00b894", "#6c5ce7", "#d63031"];
const color = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = color;
}
</script>
🧠 Used in color pickers, design tools, and fun quizzes.
constUsed to declare variables that won’t be reassigned. It ensures the variable reference stays constant (but not necessarily the content if it’s an object or array).
const colors = ["red", "green", "blue"];
📌 Use const when you don’t plan to reassign the variable.
Math.random()Generates a random decimal number between 0 (inclusive) and 1 (exclusive).
Math.random(); // Example: 0.462
📌 Often used to create randomness in games or styles.
Math.floor()Rounds a decimal number down to the nearest whole number.
Math.floor(4.9); // Returns 4
📌 Used here to select a random index from the colors array.
<input type="text" id="name" onfocus="highlight(this)" onblur="removeHighlight(this)">
<script>
function highlight(element) {
element.style.backgroundColor = "#ffffcc";
}
function removeHighlight(element) {
element.style.backgroundColor = "";
}
</script>
🧠 Used to improve form UX on signup/login pages.
<div id="info" style="display:none;">
This is some hidden information.
</div>
<button onclick="toggleInfo()">Show/Hide Info</button>
<script>
function toggleInfo() {
const div = document.getElementById("info");
div.style.display = div.style.display === "none" ? "block" : "none";
}
</script>
🧠 Great for FAQs, dropdowns, and read-more sections.
<p id="para">Watch me get fancy!</p>
<button onclick="toggleFancy()">Toggle Style</button>
<style>
.fancy {
font-weight: bold;
color: red;
text-transform: uppercase;
}
</style>
<script>
function toggleFancy() {
document.getElementById("para").classList.toggle("fancy");
}
</script>
🧠 Modern and scalable method for styling elements dynamically.
<button id="modeBtn" onclick="switchMode()">Enable Dark Mode</button>
<script>
function switchMode() {
const btn = document.getElementById("modeBtn");
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
btn.textContent = "Disable Dark Mode";
btn.style.backgroundColor = "black";
btn.style.color = "white";
} else {
btn.textContent = "Enable Dark Mode";
btn.style.backgroundColor = "";
btn.style.color = "";
}
}
</script>
<style>
.dark {
background-color: #222;
color: #eee;
}
</style>
🧠 Useful in websites with themes or accessibility options.
Use Case: Toggle visibility of a password input.
<input type="password" id="password">
<button onclick="togglePassword()">Show/Hide</button>
<script>
function togglePassword() {
const pwd = document.getElementById("password");
pwd.type = pwd.type === "password" ? "text" : "password";
}
</script>
🧠 Used in login/signup forms.
Use Case: Show how many characters are typed in a form input.
<textarea id="msg" onkeyup="countChar()"></textarea>
<p>Characters: <span id="count">0</span></p>
<script>
function countChar() {
const text = document.getElementById("msg").value;
document.getElementById("count").textContent = text.length;
}
</script>
🧠 Useful for Twitter/X post limit, feedback forms, etc.
Use Case: Personalize greeting on websites.
<p id="greet"></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 12) {
greeting = "Good Morning!";
} else if (hour < 18) {
greeting = "Good Afternoon!";
} else {
greeting = "Good Evening!";
}
document.getElementById("greet").textContent = greeting;
</script>
🧠 Used on dashboards, landing pages, e-commerce portals.
Use Case: Basic operations using form and JS.
<input type="number" id="num1"> +
<input type="number" id="num2">
<button onclick="calculate()">=</button>
<span id="result"></span>
<script>
function calculate() {
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
document.getElementById("result").textContent = a + b;
}
</script>
🧠 Great intro to arithmetic and DOM.
Use Case: Switch between light and dark theme.
<button onclick="toggleTheme()">Toggle Dark Mode</button>
<script>
function toggleTheme() {
document.body.classList.toggle("dark-mode");
}
</script>
<style>
.dark-mode {
background-color: black;
color: white;
}
</style>
🧠 Used on most modern websites for better user experience.
Use Case: Prevent multiple form submissions.
<button onclick="submitForm(this)">Submit</button>
<script>
function submitForm(btn) {
btn.disabled = true;
btn.textContent = "Submitted!";
}
</script>
🧠 Common in forms and transactions.
Use Case: Display the current time live.
<p id="clock"></p>
<script>
function updateClock() {
const now = new Date().toLocaleTimeString();
document.getElementById("clock").textContent = now;
}
setInterval(updateClock, 1000);
</script>
🧠 Great for dashboards or digital clocks.