DEV Community: Veed - The Hood Developer

Build a Modal (Pop up) With HTML, CSS and JavaScript

Veed - The Hood Developer — Sat, 21 Aug 2021 20:29:28 +0000

In this article I will show you how to create a modal that pops up whenever you click a button. The main focus of the article will not be on the CSS but on what you will need to achieve this functionality so feel free to copy the CSS styles.

There are three major elements you will need to achieve the modal functionality:

A button to trigger the modal
The modal itself (Well obviously 😅)
A button to close the modal

Let's go ahead to create them in our HTML

  <body>
      <!-- button to launch the modal -->
      <button class="show-modal">Log In</button>

      <!-- the modal itself -->
      <div class="modal hidden">
         <!-- button to close the modal -->
         <button class="close-modal">&times;</button>

         <h1>Welcome back, friend😍</h1>
         <form action="">
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">
            <button type="submit">Log in</button>
            <p>Don't have an account? <a href="">Sign up</a></p>
         </form>
      </div>
      <div class="overlay hidden"></div>
 </body>

We will use the class "hidden" to set the initial display of the modal to none.
Let's add our CSS and style the button triggering the modal

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #333;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-modal {
  font-size: 2rem;
  font-weight: 600;
  padding: 1.2rem 2.5rem;
  margin: 5rem 2rem;
  border: none;
  background-color: rgb(92, 22, 139);
  color: rgb(241, 241, 241);
  border-radius: 0.5rem;
  cursor: pointer;
}

Now let's include styles for the modal and overlay

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  background-color: white;
  padding: 4rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
  text-align: center;
}

.modal h1 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

p {
  font-size: 1.1rem;
}
a {
  text-decoration: none;
  color: rgb(2, 0, 145);
}

form input,
form button {
  display: block;
  width: 100%;
  margin: 1.3rem 0;
  border-radius: 5px;
  border: none;
  outline: none;
  padding: 1rem;
  font-size: 1.1rem;
}

form input {
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px 
  #ffffff73;
}

form button {
  background-color: rgb(2, 0, 145);
  color: #fff;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.close-modal {
  position: absolute;
  top: 0.8rem;
  right: 1.3rem;
  font-size: 2.5rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* CLASS TO HIDE MODAL */
.hidden {
  display: none;
}

That's all for our HTML and CSS.
The first thing we need to do in our JavaScript is to select the elements we need as I mentioned earlier.

const modal = document.querySelector(".modal"); //selects the modal
const btnCloseModal = document.querySelector(".close-modal"); //selects the button to close the modal
const btnOpenModal = document.querySelector(".show-modal"); //selects the button to show the modal
const overlay = document.querySelector(".overlay"); //selects the overlay

Next, we create a function that adds or removes the class "hidden" that we used to hide the modal and overlay.

const toggleModal = function () {
  modal.classList.toggle("hidden");
  overlay.classList.toggle("hidden");
};

The method classList.toggle() takes a CSS class name and adds it to the specified element if the class is not present and removes the class from the element if it is present.

Next, we want that function toggleModal to run. It will remove the hidden class when the show-modal button is clicked, add the class the close-modal button is clicked and when the user clicks outside the modal (the overlay). We can achieve that by using the addEventListener() method on the elements we selected.

btnOpenModal.addEventListener("click", toggleModal);

btnCloseModal.addEventListener("click", toggleModal);

overlay.addEventListener("click", toggleModal);

That's all! We now have a fully functional Log In modal.

You can test it live via codepen https://codepen.io/veed_/pen/QWgLvYb . Hope you found this helpful.

Function Declaration VS Function Expression In JavaScript

Veed - The Hood Developer — Wed, 18 Aug 2021 20:59:24 +0000

Basically, function declaration and function expression are two ways of creating a function in JavaScript. But how do they differ? And how do you know which of them to use when creating functions?

Function Declaration

Here, the function is defined starting with the function keyword then a name followed by parentheses and then curly braces where your statements will be written.

//Example of Function declaration 
function calcAge(birthYear) {
    return 2021 - birthYear;
}

Function Expression

Unlike function declaration, function expression does not have a name, this is usually called an anonymous function. The value of the function cannot be used until it is stored in a variable.

//Example of Function expression
const calcAge = function(birthYear) {
    return 2021 -birthYear;
}

What is the difference between the two?

The main practical difference is that you can call function declaration before you define it and your code will work just fine but with function expression, it's impossible and JavaScript will throw an error at you.

//Calling Functiion declaration before defining it

calcAge(2000);

function calcAge(birthYear) {
    return 2021 - birthYear;
}

I tried doing the same above with Function expression and I got this error in return:

Uncaught ReferenceError: Cannot access 'calcAge' before initialization

This happens because of a process called "Hoisting". Hoisting is a JavaScript behaviour which moves all the declarations to the top of your code before execution.
Function declarations are hoisted but function expressions are not. This is why calling a function before defining it is possible with function declaration.

Which of them should you use when writing your functions?

Most of the time, it is just a matter of preference. Personally, I prefer to use function expression as it forces me to define all my functions at the top of my code. I get to write cleaner and more readable codes this way..

Diamond Card Layout with CSS

Veed - The Hood Developer — Sun, 15 Aug 2021 21:19:42 +0000

Today, I'll show you how to design a diamond card layout (items should be exactly four) with a few steps using HTML and CSS

Step 1 - Setting up the HTML structure of the layout
It is worth knowing that your HTML structure is very important. Poor HTML structure will lead to complications when styling your CSS.
First, let's create a section in our html body for us to construct the layout for the diamond cards. Next, create a container that will hold the cards.

The simple trick is that the two cards we want to be at the top and bottom of the diamond should be wrapped together in a container, see the code below:

 <section class="diamond-card">
            <h1>Diamond Card section design with CSS</h1>
            <div class="card-container">
                <div class="card">
                    <div class="card-content card-content-1">
                        <h2>Launch your product</h2>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                        <div class="img-container"><img src="images/process-4.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-2">
                        <h2>Project brief</h2>
                        <p>Lorem ipsum dolor sit amet nhir consectetu nhir adipisicing elit. </p>
                        <div class="img-container"><img src="images/process-1.svg" alt="process"></div>
                    </div>
                    <div class="card-content card-content-3">
                        <h2>Start Developing</h2>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-3.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-4">
                        <h2>Wireframes & Design</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-2.svg" alt="process"></div>
                    </div>
                </div>
            </div>
 </section>

Step 2 - Adding CSS styles
Let's add some basic CSS styles. By default, html elements have margin and padding (usually about 8px) set by the browser. We overwrite these properties using the global selector "*" and setting the values to 0.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-weight: 600;
  color: #7f7e84;
  text-align: center;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.445);
}

.diamond-card {
  padding: 1rem 0;
}

Next, target the "card-container" class and give it a display of flex to arrange the cards side by side on the same row.


.card-container {
  width: 80%;
  margin: 40px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card {
  flex-basis: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.card-content {
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 22px 0 rgba(128, 128, 129, 0.37);
}

.card-content h2 {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1.3rem;
}
.card-content p {
  color: #5c5b5b;
  font-size: 14px;
}

.img-container {
  margin-top: 10px;
  text-align: right;
}

.img-container img {
  width: 7rem;
}

That's basically it! The rest of the styling is up to you
We can go ahead and add some hover effect and border designs to each card:

.card-content:hover {
  cursor: pointer;
  transition: 0.3s;
  transform: scale(1.1);
}

.card-content:hover p {
  color: rgb(34, 34, 34);
}

.card-content-1 {
  border: 3px solid #45d3d3;
}

.card-content-2 {
  border: 3px solid #ea5353;
}

.card-content-3 {
  border: 3px solid #fc4ac1;
}

.card-content-4 {
  border: 3px solid #549ef2;
}

There you go. We've just designed a diamond card layout. Play around with it, tweak it.

You can try and make the design responsive as a challenge.