Scribd
Upload
3 views

Using only HTML-WPS Office

Html

Uploaded by

successojedokun606
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
3 views

Using only HTML-WPS Office

Html

Uploaded by

successojedokun606
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 10

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 Node.js. 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 (index.html)

<!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="styles.css">

</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="script.js"></script>

</body>

</html>

---

CSS (styles.css)

/* 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 (script.js)

// Function to save user to "localStorage"

function saveUser(username, email, password) {

const users = JSON.parse(localStorage.getItem('users')) || [];

users.push({ username, email, password });

localStorage.setItem('users', JSON.stringify(users));

// Function to check user credentials

function findUser(email, password) {

const users = JSON.parse(localStorage.getItem('users')) || [];

return users.find(user => user.email === email && user.password === password);

// Handle Signup

document.getElementById('signupForm').addEventListener('submit', (e) => {

e.preventDefault();

const username = document.getElementById('username').value;


const email = document.getElementById('email').value;

const password = document.getElementById('password').value;

saveUser(username, email, password);

alert('Signup successful! You can now log in.');

e.target.reset();

});

// Handle Login

document.getElementById('loginForm').addEventListener('submit', (e) => {

e.preventDefault();

const email = document.getElementById('loginEmail').value;

const password = document.getElementById('loginPassword').value;

const user = findUser(email, password);

if (user) {

alert(`Welcome back, ${user.username}!`);

} 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!

You might also like