Explore snippets
Discover reusable code snippets, examples, fixes, and ideas shared by developers, students, and teams.
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>