I need help linking a login page to my text html file.
I tried to google it but that didn’t help
Hey @Shadow45Ghost, welcome to the forums!
Can you please provide a link to the Repl? This way it is easier for members of the community to help you!
Also see this guide on how to share your code:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
background-color: red;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.login-form h2 {
text-align: center;
}
.login-form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-form button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.login-form button:hover {
background-color: #45a049;
}
body {
background: linear-gradient(to bottom, red, blue);
}
</style>
</head>
<body>
<div class="container">
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<form method="post" action="lorem.html">
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Lorem Ipsum</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="lorem.css" />
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper a lacus vestibulum sed arcu non odio. Lorem donec massa sapien faucibus et molestie. Quam viverra orci sagittis eu volutpat odio facilisis mauris sit. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Cursus in hac habitasse platea dictumst. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Quis risus sed vulputate odio ut enim blandit volutpat. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Sagittis id consectetur purus ut faucibus pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Dignissim convallis aenean et tortor at risus viverra adipiscing at. Diam sollicitudin tempor id eu nisl. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Ligula ullamcorper malesuada proin libero nunc consequat.
Pulvinar mattis nunc sed blandit libero volutpat. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Non nisi est sit amet facilisis. Congue eu consequat ac felis donec. Lacus sed turpis tincidunt id aliquet risus feugiat in. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque.
Arcu felis bibendum ut tristique et egestas quis ipsum suspendisse. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. Enim ut sem viverra aliquet eget. Pellentesque elit eget gravida cum sociis natoque penatibus. Morbi tristique senectus et netus et malesuada. Aliquam id diam maecenas ultricies mi eget mauris. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Ultrices gravida dictum fusce ut placerat orci nulla. Laoreet id donec ultrices tincidunt arcu non sodales neque. Pellentesque habitant morbi tristique senectus et netus et. Et netus et malesuada fames ac.
Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Cras semper auctor neque vitae tempus quam pellentesque nec. Elementum integer enim neque volutpat ac tincidunt vitae. Quis auctor elit sed vulputate. Tortor consequat id porta nibh venenatis cras sed felis. A iaculis at erat pellentesque adipiscing commodo. Cras adipiscing enim eu turpis egestas pretium aenean. Mi quis hendrerit dolor magna eget est lorem. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Adipiscing elit pellentesque habitant morbi. Tristique senectus et netus et malesuada fames ac turpis. Enim blandit volutpat maecenas volutpat blandit aliquam. Diam vulputate ut pharetra sit. At risus viverra adipiscing at in tellus integer feugiat. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Id venenatis a condimentum vitae sapien.
Velit egestas dui id ornare arcu odio ut. Scelerisque fermentum dui faucibus in. Habitasse platea dictumst vestibulum rhoncus est. Tempus iaculis urna id volutpat lacus. At lectus urna duis convallis convallis tellus. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Facilisis leo vel fringilla est ullamcorper eget. At volutpat diam ut venenatis tellus. Maecenas ultricies mi eget mauris pharetra et ultrices. Massa vitae tortor condimentum lacinia quis. Faucibus vitae aliquet nec ullamcorper sit amet risus. Mi proin sed libero enim sed faucibus. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Ut eu sem integer vitae justo. Commodo nulla facilisi nullam vehicula. Laoreet non curabitur gravida arcu ac tortor. Sagittis eu volutpat odio facilisis. Mollis nunc sed id semper. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum.</p>
</body>
</html>
I want to link the login in button to this lorum ipsum page
That’s your code. Please send your Repl link.
Hey @Shadow45Ghost!
DISCLAIMER: The Following Text Was Generated By AI (Phind)
I hope this helps!
To implement the functionality you described, you would need to create a JavaScript function that checks if a user exists. If the user exists, you would then redirect them to the desired page. If the user does not exist, you would redirect them to the sign-up page. This can be achieved using various JavaScript methods and conditionals.
Here is a step-by-step guide on how to implement this:
- Create a User Object: Start by creating a user object. This object will hold the user’s data. You can use a JavaScript class to create the user object. A class in JavaScript is a type of function that is used as a blueprint to create objects with specific properties and methods Source 7.
class User {
constructor(username, password) {
this.username = username;
this.password = password;
}
}
- Check if User Exists: Next, you need to check if a user exists. You can use the
hasOwnProperty()method to check if a property exists in a JavaScript object Source 9.
function userExists(username) {
// Assume users is an object that holds all users
return users.hasOwnProperty(username);
}
- Redirect User: Depending on whether the user exists or not, you can use JavaScript’s conditional statements to redirect the user to the appropriate page. You can use
if...elsestatements to perform different actions based on different conditions Source 6.
function login(username, password) {
if (userExists(username)) {
// Redirect user to the desired page
window.location.href = "desiredPage.html";
} else {
// Redirect user to the sign-up page
window.location.href = "signUpPage.html";
}
}
Please note that this is a simplified example and real-world applications would require more complex solutions, such as handling user inputs, validating data, and securely storing and retrieving user data. Also, this code assumes that the users object is available in the scope of the userExists function. In a real application, you would likely fetch user data from a database or an API.
Could you do it for me
@Shadow45Ghost no, I am not as good at the actual coding as knowing what needs to be done. I’m sure other people would be happy to help.
Set the action property of your form element to the URL.
Would you like to work on it with me?
Sure, but don’t paste any invite links here.
Ok how can I send you a link to my team
Oh, if you’re inviting me to a team, you can go to the team page and press Manage team members, then just type my username in and press Invite.
1 Like