Managing customer relationships efficiently is crucial for small businesses. In this tutorial, we’ll guide you through building a Simple CRM (Customer Relationship Management) System using HTML, CSS, and JavaScript. This beginner-friendly project will help you enhance your web development and JavaScript DOM manipulation skills! 🏢🛒
🔹 What is a CRM System?
A Customer Relationship Management (CRM) system is a tool that helps businesses manage customer interactions, track sales, and maintain customer data. Our simple CRM will allow users to:
✔ Add customer details (Name, Email, and Order information) ✔ Display customer records in a table ✔ Remove customer records easily ✔ Provide a clean and interactive UI
🏗️ Building the CRM System
Let’s dive into the HTML, CSS, and JavaScript code to create our Simple CRM system.
📄 Step 1: HTML Structure
We’ll start with an HTML file that includes a form for input fields and a table to display customer records.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple CRM for Small Businesses</title>
</head>
<body>
<div class="container">
<h2>Simple CRM for Small Businesses</h2>
<input type="text" id="customerName" placeholder="Enter Customer Name">
<input type="text" id="customerEmail" placeholder="Enter Customer Email">
<input type="text" id="customerOrder" placeholder="Enter Order Details">
<button onclick="addCustomer()">Add Customer</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Order</th>
<th>Action</th>
</tr>
</thead>
<tbody id="customerTable"></tbody>
</table>
</div>
</body>
</html>
🎨 Step 2: Styling the CRM with CSS
We apply CSS to enhance the UI, making it visually appealing and user-friendly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #4facfe, #00f2fe);
padding: 20px;
}
.container {
width: 100%;
max-width: 800px;
background: rgba(255, 255, 255, 0.9);
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
text-align: center;
}
button {
width: 100%;
padding: 14px;
border: none;
border-radius: 10px;
background: #ff6f61;
color: white;
font-size: 18px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #e05a50;
}
🖥️ Step 3: Adding Functionality with JavaScript
Now, let’s implement JavaScript to add and remove customer records dynamically.
function addCustomer() {
let name = document.getElementById("customerName").value;
let email = document.getElementById("customerEmail").value;
let order = document.getElementById("customerOrder").value;
if (name.trim() !== "" && email.trim() !== "" && order.trim() !== "") {
let table = document.getElementById("customerTable");
let row = table.insertRow();
row.innerHTML = `<td>${name}</td><td>${email}</td><td>${order}</td><td><button class='remove-btn' onclick="removeCustomer(this)">Remove</button></td>`;
document.getElementById("customerName").value = "";
document.getElementById("customerEmail").value = "";
document.getElementById("customerOrder").value = "";
}
}
function removeCustomer(button) {
let row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
🎯 Key Features of This CRM System
✅ User-Friendly Interface: Clean and professional design with CSS 🎨 ✅ Dynamic Customer Management: Add and remove customers easily 📝 ✅ Minimalist Yet Functional: Simple and effective for small businesses 🏢 ✅ Customizable: Easily extendable to include more features 💡
🚀 Final Thoughts
By the end of this tutorial, you’ll have a working CRM system that can be further customized based on your business needs. This project is perfect for beginners looking to strengthen their JavaScript DOM manipulation skills!
📌 Explore More:
Watch the full video tutorial:
Access the complete source code on GitHub: GitHub Repository
🔥 If you found this helpful, don’t forget to like, comment, and subscribe for more web development tutorials!
#HTML #CSS #JavaScript #CRM #CustomerManagement #WebDevelopment #FrontendDevelopment #Coding #SmallBusiness #TechTutorial 🚀📊