Explore snippets
Discover reusable code snippets, examples, fixes, and ideas shared by developers, students, and teams.
Save UI State to localStorage
Remember a simple UI preference in localStorage.
const checkbox = document.querySelector('#compactMode');
const savedValue = localStorage.getItem('compactMode');
checkbox.checked = savedValue === '1';
document.body.classList.toggle('compact', checkbox.checked);
checkbox.addEventListener('change', () => {
Fetch JSON with Error Handling
Fetch JSON data and handle HTTP errors cleanly.
async function loadProfile() {
const response = await fetch('/api/profile');
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
return await response.json();
}
loadProfile()Simple Form Validation
Validate a small form before submitting it.
const form = document.querySelector('#contactForm');
const emailInput = document.querySelector('#email');
const messageBox = document.querySelector('#formMessage');
form.addEventListener('submit', (event) => {
messageBox.textContent = '';
Event Delegation for Buttons
Handle clicks for many dynamic buttons with one event listener.
const list = document.querySelector('#todoList');
list.addEventListener('click', (event) => {
const button = event.target.closest('[data-action]');
if (!button) return;
const item = button.closest('.todo-item');
Toggle Class on Click
Toggle a CSS class on an element when a button is clicked.
const button = document.querySelector('#menuButton');
const menu = document.querySelector('#menu');
button.addEventListener('click', () => {
menu.classList.toggle('is-open');
});Password Hash and Verify
Hash a password and verify it later with PHP built-in helpers.
<?php
$password = $_POST['password'] ?? '';
$hash = password_hash($password, PASSWORD_DEFAULT);
// Later, during login:
$valid = password_verify($password, $hash);
if ($valid) {
echo 'Password is correct';
} else {
echo 'Invalid password';
}Toggle Dark Mode Class
A tiny dark mode toggle that stores the selected mode in localStorage.
const toggleButton = document.querySelector('[data-theme-toggle]');
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
}
toggleButton?.addEventListener('click', () => {Fade In Utility Class
A reusable CSS fade-in animation utility class.
.fade-in {
animation: fade-in 300ms ease both;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}Responsive CSS Grid Gallery
A responsive gallery layout using CSS grid and auto-fit.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 0.75rem;
}Card Hover Lift
A small hover effect that lifts a card with transition and shadow.
.hover-card {
border-radius: 1rem;
background: #fff;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.hover-card:hover {
transform: translateY(-4px);CSS Loading Spinner
A small pure CSS loading spinner using border animation.
.spinner {
width: 40px;
height: 40px;
border: 4px solid #e5e7eb;
border-top-color: #4f46e5;
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}Button Pulse Animation
A simple CSS pulse effect for call-to-action buttons.
.button-pulse {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
border-radius: 999px;
background: #4f46e5;
color: #fff;
text-decoration: none;
animation: pulse 1.8s infinite;
}
@keyframes pulse {Accessible Login Form
A simple accessible login form with labels, autocomplete attributes, and required fields.
<form action="/signin" method="post" class="login-form">
<div>
<label for="email">Email address</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
</div>
<div>