Calculated Creativity
Calculated Creativity
Useful code snippets for common web development tasks and features
Our code snippets library provides ready-to-use solutions for common web development challenges. These snippets are thoroughly tested and optimized for performance, helping you save time and implement best practices in your projects.
A mobile-friendly navigation menu that collapses into a hamburger menu on smaller screens.
<nav class="responsive-nav">
<div class="logo">
<a href="#">YourLogo</a>
</div>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>A responsive grid layout using CSS Grid that adjusts columns based on screen size.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.grid-item {
background-color: #f4f4f4;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 15px;
}
}A JavaScript function that creates smooth scrolling to anchor links on the page.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 100, // Offset for fixed header
behavior: 'smooth'
});
}
});
});A PHP script to handle contact form submissions with basic validation and email sending.
<?php
// Check if form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get form data
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$message = trim($_POST['message']);
// Basic validation
if (empty($name) || empty($email) || empty($message)) {
echo "Please fill all required fields.";
exit;
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email format.";
exit;
}
// Email headers
$to = "your@email.com";
$subject = "New Contact Form Submission";
$headers = "From: $name <$email>" . "\r\n";
// Send email
if (mail($to, $subject, $message, $headers)) {
echo "Thank you! Your message has been sent.";
} else {
echo "Sorry, there was an error sending your message.";
}
}
?>Follow these steps to effectively use the code snippets in your projects:
Use the copy button to copy the snippet to your clipboard.
Paste the code into the appropriate file in your project.
Modify variable names, values, and styles to fit your specific needs.
Always test the implemented code to ensure it works as expected in your project.