Lens
Posted on February 20, 2023
This is a tutorial on how I made this sign-up page that includes a JavaScript dark mode toggle. We'll go over the HTML, CSS, and JavaScript for it so maybe you might learn something new! It took me almost half an hour to make it, but in this blog a pretty much explain each and every line of code😅. Here's a preview of how it looks:
HTML
In our HTML body, we'll make a sign-in div and a sign-in image div, but the image div won't actually contain an image. In the sign-in div is a <form> element that has an h2 heading and two inputs with labels. The first input has a type of text and a label named "Username" while the second input has a type of password with a label named "Password". At the bottom of the form, there's a button that'll say "Sign in" just like our header. Lastly outside our form is a moon ion-icon which will be our dark mode toggle.
<body>
<div class="sign-in">
<ion-icon name="moon-outline" class="dark_toggle"></ion-icon><form>
<h2 style="text-align: center;">Sign in</h2>
<label>Username <input type="text" placeholder="be creative!"></label>
<label>Password <input type="password" placeholder="to be safe"></label>
<button>Sign in</button>
</form>
</div>
<div class="sign-in_image"></div>
</body>
CSS Styling
We'll set up the website by setting the width and height of our HTML and body to 100% with a margin of 0 so there's no extra space. Now we'll give the body a display of flex so the sign-up and sign-up image can be separated horizontally. Next, we'll style the sign-up div by giving it a display of flex to center its form with align-items: center and justify-content: center. After that, we set its width to 50% so it takes up half the screen, and finally, we'll set its margin to 0 so there's no extra space on the corners. As for the form we'll make it display grid and center its text and content with text-align: center and place-items: center. After that we'll give it a width of 80% and a height of 40%. Finally we space out each element in the form equally by 40 pixels with gap: 40px. For the sign-up image we'll just give it a background image (any you like, I just chose a Pinterest pixel animation for fun lol) and make it fit the div with background-size: cover then make it take up half the website by setting its width to 50%.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
font-family: Poppins;
display: flex;
}
.sign-in {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
margin: 0;
}
form {
display: grid;
gap: 40px;
text-align: center;
place-items: center;
width: 80%;
height: 40%;
}
.sign-in_image {
background-size: cover;
width: 50%;
background-image: url("https://i.pinimg.com/originals/15/b8/6c/15b86c9d72bf04495a4beffe1baa34cd.gif");
}
CSS transitions
Now the transitions and hover effects. For the sign-in button, we gave it a background color of black but a color of white. However, we gave it a hover effect where its background color is transparent, but its border is solid, and the color is black. As for our moon icon, we first style it by setting its position to relative then we position it to the top left of the page using the left and bottom properties. Then we give it a hover effect where it background turns black, and it has a white color. Finally we give the button and icon a transition time to make it look cool!
button {
background-color: black;
color: white;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
width: 60%;
}
button:hover {
border: solid;
background-color: transparent;
color: black;
}
/*Styling the dark mode toggle icon*/
.dark_toggle {
position: relative;
bottom: 21rem;
left: 1rem;
font-size: 25px;
cursor: pointer;
/*I gave it padding to make the background bigger*/
padding: 5px;
border-radius: 5px;
transition: 0.3s;
}
.dark_toggle:hover {
background-color: black;
color: white;
}
Making it responsive
To make the website responsive we'll use a media query that's in effect when at most 580 pixels. The sign-in div will have a width and height of 20rem, a border-radius, and a white background color. On the other hand, the sign-in image will have a display of none, so it'll no longer be on the page. The body will now have a display of flex to center its content with align-items: center and justify-content: center. Here's the important part, now we give the body the same background image as our sign-in image div which is now gone. This'll make it look like the image covers up the whole background of the website. We make sure it covers it entirely with background-size: cover. Next we make sure the form takes up all of the sign-in divs space by setting its width and height to 100%. Lastly we position the dark toggle icon to the top right of the sign-in div with the bottom and left properties and a position of relative.
@media (max-width: 580px) {
.sign-in {
width: 20rem;
height: 20rem;
border-radius: 5px;
background-color: white;
}
.sign-in_image {
display: none;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-image: url("https://i.pinimg.com/originals/15/b8/6c/15b86c9d72bf04495a4beffe1baa34cd.gif");
}
form {
width: 100%;
height: 100%;
}
.dark_toggle {
position: relative;
bottom: 9rem;
left: 18rem;
font-size: 20px;
}
}
Dark mode (CSS & JS)
First, we make three classes, a dark class, a dark button class, and a dark input class. In the classes are a grey background color and a color property set to white. However, for the dark button, it'll have a white background and black text color. It'll also have a hover effect where it's border and text turn white, but its background becomes transparent.
.dark_button {
background-color: white;
color: black;
}
.dark_button:hover {
background-color: transparent;
color: white;
}
.dark {
background-color: var(--grey);
color: white;
}
.dark_input {
border-color: white;
background-color: var(--grey);
color: white;
}
Now in Javascript, we store the sign-in button, input elements, Sign-in div, and dark_toggle button icon in a variable. Next we make an event listener for the dark button where the sign-up class toggles the class "dark" and the sign-in button toggles the class "button_dark". However, we have more than one input element, so we'll give the input variable a forEach function where the dark button has an event listener that toggles the "dark_input" class to the input elements.
var dark_toggle = document.querySelector('.dark_toggle');
var signUp = document.querySelector('.sign-in');
var input = document.querySelectorAll('input');
var button = document.querySelector('button');
dark_toggle.addEventListener('click', function() {
signUp.classList.toggle('dark');
button.classList.toggle('dark_button')
})
input.forEach((input) => {
dark_toggle.addEventListener('click', function() {
input.classList.toggle('dark_input');
})
});
There you have it! The reason why I talked about the dark mode buttons positioning and the sign-in buttons CSS in the transitions section was so you wouldn't stress out on how long the CSS styling section was. There are lots of other creative ways to make a sign-in form but here's how I do it. Next time I'll be talking about CSS hover effects so tune in next time. Thanks for reading and have a great day/night 👋.
Posted on February 20, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
