Scribd
Upload
4 views6 pages

LABASSIGNMENT

The document is a lab assignment for web technologies, specifically focusing on designing a login and sign-up web page using HTML and JavaScript. It includes a structured layout with forms for user login and registration, along with styling and functionality for toggling between the forms and managing user sessions. The JavaScript functions handle user interactions, such as signing up, logging in, and displaying a welcome message upon successful login.

Uploaded by

muhammadmujtaba2013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views6 pages

LABASSIGNMENT

The document is a lab assignment for web technologies, specifically focusing on designing a login and sign-up web page using HTML and JavaScript. It includes a structured layout with forms for user login and registration, along with styling and functionality for toggling between the forms and managing user sessions. The JavaScript functions handle user interactions, such as signing up, logging in, and displaying a welcome message upon successful login.

Uploaded by

muhammadmujtaba2013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Web Technologies

Lab Assignment #01

Question No. 01
 Design the HTML Form of the Login and Sign Up Web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Sign Up - CMMG</title>
<style>
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #24b024;
}

/* Container */
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
text-align: center;
}

h2 {
margin-bottom: 20px;
}

label {
display: block;
margin: 10px 0 5px;
text-align: left;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
}

button {
width: 100%;
padding: 10px;
background-color: #634caf;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #4565a0;
}

p {
margin-top: 10px;
}

a {
color: #5b4caf;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* Toggle Visibility */
.form-section {
display: none;
}

.form-section.active {
display: block;
}

/* Welcome Page */
.welcome-section {
display: none;
}
</style>
</head>
<body>

<div class="form-container">
<!-- Login Form -->
<div class="form-section active" id="login-section">
<h2>CMMG </h2>
<form id="login-form">
<label for="login-email">Email:</label>
<input type="email" id="login-email" required placeholder="Enter
your email">

<label for="login-password">Password:</label>
<input type="password" id="login-password" required
placeholder="Enter your password">

<button type="button" onclick="login()">Login</button>


<p>Don't have an account? <a href="#"
onclick="toggleForm('signup')">Sign Up</a></p>
</form>
</div>

<!-- Sign-Up Form -->


<div class="form-section" id="signup-section">
<h2>Create an Account - CMMG</h2>
<form id="signup-form">
<label for="signup-username">Username:</label>
<input type="text" id="signup-username" required
placeholder="Choose a username">

<label for="signup-email">Email:</label>
<input type="email" id="signup-email" required placeholder="Enter
your email">

<label for="signup-password">Password:</label>
<input type="password" id="signup-password" required
placeholder="Create a password">

<label for="signup-confirm-password">Confirm Password:</label>


<input type="password" id="signup-confirm-password" required
placeholder="Confirm your password">

<button type="button" onclick="signUp()">Sign Up</button>


<p>Already have an account? <a href="#"
onclick="toggleForm('login')">Login</a></p>
</form>
</div>

<!-- Welcome Section -->


<div class="welcome-section" id="welcome-section">
<h2>Welcome, <span id="welcome-username"></span>!</h2>
<p>You have successfully logged in.</p>
<p><a href="https://cmmg.pk/" target="_blank">Visit CMMG
Website</a></p>
<button type="button" onclick="logout()">Log Out</button>
</div>
</div>

<script>
function toggleForm(formType) {
document.getElementById('login-
section').classList.remove('active');
document.getElementById('signup-
section').classList.remove('active');

if (formType === 'signup') {


document.getElementById('signup-
section').classList.add('active');
} else {
document.getElementById('login-section').classList.add('active');
}
}

function signUp() {
const username = document.getElementById('signup-username').value;
const email = document.getElementById('signup-email').value;
const password = document.getElementById('signup-password').value;
const confirmPassword = document.getElementById('signup-confirm-
password').value;

if (password !== confirmPassword) {


alert("Passwords do not match!");
return;
}

// Save user data in localStorage


localStorage.setItem('username', username);
localStorage.setItem('email', email);
localStorage.setItem('password', password);

alert("Sign up successful! Please log in.");


toggleForm('login');
}

function login() {
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;

// Retrieve stored data


const storedEmail = localStorage.getItem('email');
const storedPassword = localStorage.getItem('password');
const storedUsername = localStorage.getItem('username');

if (email === storedEmail && password === storedPassword) {


document.getElementById('welcome-username').textContent =
storedUsername;
showWelcomePage();
} else {
alert("Invalid email or password.");
}
}

function showWelcomePage() {
document.getElementById('login-section').style.display = 'none';
document.getElementById('signup-section').style.display = 'none';
document.getElementById('welcome-section').style.display = 'block';
}

function logout() {
document.getElementById('welcome-section').style.display = 'none';
document.getElementById('login-section').style.display = 'block';
document.getElementById('login-form').reset();
}
</script>

</body>
</html>

You might also like