Using only HTML, CSS, and JavaScript to interact with a database directly is not secure or recommended
for real-world applications, as JavaScript cannot directly communicate with databases (like MySQL)
without a server-side language like PHP, Python, or [Link]. However, for educational purposes or
testing, you can use local storage or indexedDB (a browser-based database) as an alternative.
Below, I'll show you how to create a mock database with JavaScript using localStorage. This will simulate
a simple signup and login system.
---
Example: Simple Database with JavaScript
HTML ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Degree - Connect</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Degree</h1>
</header>
<main>
<!-- Signup Form -->
<section id="signup">
<h2>Create an Account</h2>
<form id="signupForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Sign Up</button>
</form>
</section>
<!-- Login Form -->
<section id="login">
<h2>Login</h2>
<form id="loginForm">
<label for="loginEmail">Email:</label>
<input type="email" id="loginEmail" name="loginEmail" required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="loginPassword" required>
<button type="submit">Login</button>
</form>
</section>
</main>
<script src="[Link]"></script>
</body>
</html>
---
CSS ([Link])
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f0f2f5;
color: #333;
text-align: center;
header {
background: #4267B2;
color: white;
padding: 1rem 0;
main {
margin: 2rem auto;
width: 80%;
max-width: 500px;
form {
background: white;
padding: 1.5rem;
margin: 1rem 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
form label {
display: block;
margin-top: 10px;
font-weight: bold;
form input {
width: 100%;
padding: 0.5rem;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
form button {
width: 100%;
padding: 0.7rem;
background: #4267B2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
form button:hover {
background: #365899;
}
---
JavaScript ([Link])
// Function to save user to "localStorage"
function saveUser(username, email, password) {
const users = [Link]([Link]('users')) || [];
[Link]({ username, email, password });
[Link]('users', [Link](users));
// Function to check user credentials
function findUser(email, password) {
const users = [Link]([Link]('users')) || [];
return [Link](user => [Link] === email && [Link] === password);
// Handle Signup
[Link]('signupForm').addEventListener('submit', (e) => {
[Link]();
const username = [Link]('username').value;
const email = [Link]('email').value;
const password = [Link]('password').value;
saveUser(username, email, password);
alert('Signup successful! You can now log in.');
[Link]();
});
// Handle Login
[Link]('loginForm').addEventListener('submit', (e) => {
[Link]();
const email = [Link]('loginEmail').value;
const password = [Link]('loginPassword').value;
const user = findUser(email, password);
if (user) {
alert(`Welcome back, ${[Link]}!`);
} else {
alert('Invalid email or password. Please try again.');
});
---
How It Works
1. Signup Process:
The saveUser function adds the user to the browser's localStorage, which acts as a mock database.
Passwords are stored in plain text here (not secure but sufficient for learning purposes).
2. Login Process:
The findUser function checks if the email and password match any user in localStorage.
If a match is found, the user is logged in.
3. LocalStorage:
Data is stored in the browser. Open developer tools (F12 → Application tab → Local Storage) to view the
data.
---
Limitations
1. Security:
Passwords are not encrypted. For real applications, you need backend hashing (e.g., bcrypt).
Data is accessible to anyone using the same browser.
2. Scalability:
LocalStorage is limited to the user's browser. It cannot be accessed across devices.
3. No Server Communication:
This setup is entirely client-side and cannot support features like sharing data between users.
---
When to Use
Educational projects.
Prototyping or demonstrating concepts.
Offline applications where local storage suffices.
For real-world applications, you'll need to use a proper backend and database. Let me know if you'd like
guidance on that!
