Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: UI Changed #1056

Closed
wants to merge 2 commits into from
Closed

feat: UI Changed #1056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cf36fd
UI Changed
subhamkumarr Jul 11, 2023
65e727c
enhancement of login form
subhamkumarr Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions Public/bmi-calculator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,34 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<!--CSS Stylesheet-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../assets/css/bmi-calculator.css">

</head>
<body>
<div class="background_image">
<div class="overlay_effect">
<!-- <h1 style="color: white;">health</h1> -->
<div class="Container">
<h2>BMI Calculator <hr></h2>
<div class="box">
<!--Weight Input Field-->
<div id="weight_field">
<label>Weight(In Kg):</label><input id="weight" class="weight_class" type="text" placeholder="Enter Your weight"/>
<label>Weight(In Kg):</label>
<input id="weight" class="weight_class" type="text" placeholder="Enter Your weight"/>
<hr>
</div>
<!--Height Input field-->
<div class="height-section">
<div id="height_field">
<label>Height(In Feet):</label><input id="height_feet" class="height_class" type="text" placeholder="Feet"/>
<hr>
</div>
<div id="height_field">
<label>Enter Inch:</label><input id="height_inch" class="height_class" type="text" placeholder="Inch"/>
<hr>
</div>
</div>
<div class="button_container">
Expand All @@ -45,7 +53,7 @@ <h2>BMI Calculator <hr></h2>
<!--footer section-->
<div class="new-addition">
<table>
<thead>
<thead >
<tr>
<th> Body Mass Classification</th>
<th>Body Mass Index(BMI)</th>
Expand Down
147 changes: 85 additions & 62 deletions Public/loginform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,92 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Login Form</title>
<link rel="stylesheet" href="../assets/css/loginform.css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<title>Login and Registration Form in HTML</title>
<link rel="stylesheet" href="../assets/css/loginform.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
<a href="#" class="form__link" id="linkResetPassword">Forgot your password?</a>
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" id="signupUsername" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="reset">Continue</button>
<p class="form__text">
<a class="form__link" href="./" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
<form class="form form--hidden" id="resetPassword">
<h1 class="form__title">Reset Password</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="reset">Send reset password instruction</button>
<p class="form__text">
<a class="form__link" href="./" id="linkHome">Go back to previous page</a>
</p>
</form>
</div>
<script src="../assets/Js/loginform.js"></script>
<div class="wrapper">
<div class="title-text">
<div class="title login">
Login Form
</div>
<div class="title signup">
Signup Form
</div>
</div>





<div class="form-container">
<div class="slide-controls">
<input type="radio" name="slide" id="login" checked>
<input type="radio" name="slide" id="signup">
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Signup</label>
<div class="slider-tab"></div>
</div>




<div class="social-container">
<a href="#" class="social"><i class="fa fa-facebook"></i></a>
<a href="#" class="social"><i class="fa fa-google"></i></a>
<a href="#" class="social"><i class="fa fa-linkedin"></i></a>
<!-- <a href="#" class="social"> <i class="fa fa-twitter"></i> </a> -->
</div>







<div class="form-inner">
<form action="#" class="login">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Login">
</div>
<div class="signup-link">
Not a member? <a href="">Signup now</a>
</div>
</form>
<form action="#" class="signup">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="field">
<input type="password" placeholder="Confirm password" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Signup">
</div>
</form>
</div>
</div>
</div>
<script src="../assets/Js/loginform.js"></script>
</body>

</html>
67 changes: 17 additions & 50 deletions assets/Js/loginform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,17 @@
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");

messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}

function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}

function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
const resetPasswordForm = document.querySelector("#resetPassword");

document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
resetPasswordForm.classList.add("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
resetPasswordForm.classList.add("form--hidden");
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
document.querySelector("#linkResetPassword").addEventListener("click", e => {
e.preventDefault();
resetPasswordForm.classList.remove("form--hidden");
loginForm.classList.add("form--hidden");
createAccountForm.classList.add("form--hidden");
});
document.querySelector("#linkHome").addEventListener("click", e => {
e.preventDefault();
resetPasswordForm.classList.add("form--hidden");
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
inputElement.addEventListener("input", e => {
clearInputError(inputElement);
});
});
const loginText = document.querySelector(".title-text .login");
const loginForm = document.querySelector("form.login");
const loginBtn = document.querySelector("label.login");
const signupBtn = document.querySelector("label.signup");
const signupLink = document.querySelector("form .signup-link a");
signupBtn.onclick = (()=>{
loginForm.style.marginLeft = "-50%";
loginText.style.marginLeft = "-50%";
});
loginBtn.onclick = (()=>{
loginForm.style.marginLeft = "0%";
loginText.style.marginLeft = "0%";
});
signupLink.onclick = (()=>{
signupBtn.click();
return false;
});
Loading