Creating
a full-fledged social media application involves both front-end (JavaScript)
and back-end (server-side language and database) development.
Below
is a basic example of a front-end code snippet using HTML, CSS, and JavaScript for a simple registration and login form. Please note that this example does
not include server-side logic or database interactions, as a complete social
media app would require a server to handle these tasks.
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Simple Social Media
App</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
max-width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<form
id="registrationForm">
<h2>Register</h2>
<label
for="regUsername">Username:</label>
<input type="text"
id="regUsername" required>
<br>
<label
for="regPassword">Password:</label>
<input type="password"
id="regPassword" required>
<br>
<button type="button"
onclick="registerUser()">Register</button>
</form>
<form
id="loginForm">
<h2>Login</h2>
<label for="loginUsername">Username:</label>
<input type="text"
id="loginUsername" required>
<br>
<label
for="loginPassword">Password:</label>
<input type="password"
id="loginPassword" required>
<br>
<button type="button"
onclick="loginUser()">Login</button>
</form>
<script>
function registerUser() {
// Placeholder function for user
registration
var username =
document.getElementById('regUsername').value;
var password =
document.getElementById('regPassword').value;
// Add logic to send registration data
to the server
console.log('Registering user:',
username);
}
function loginUser() {
// Placeholder function for user login
var username =
document.getElementById('loginUsername').value;
var password =
document.getElementById('loginPassword').value;
// Add logic to send login data to the
server
console.log('Logging in user:',
username);
}
</script>
</body>
</html>
In
a real-world scenario, you would need to implement server-side logic to handle
user registration and login, and you should also use secure practices, such as
HTTPS, and store user passwords securely (e.g., using bcrypt).
This
example focuses on the front-end aspect of user registration and login forms
using basic HTML, CSS, and JavaScript.
0 Comments