Search Results for “label/blog” – CodingNepal

Drag & Drop in HTML CSS & JavaScript

CodingNepal — Thu, 09 Feb 2023 21:11:22 +0000

Creating a drag-and-drop functionality can be a great project to improve your skills in HTML, CSS, and JavaScript. Moreover, drag-and-drop interfaces are widely used in modern web applications, and having the ability to create one from scratch can be very beneficial for your future projects.

Drag and Drop is the interaction that can be used to rearrange items within a list, move items from one list to another, or even manipulate the position of elements on a page by using a mouse.

Today in this blog you will learn how to Drag & Drop elements from one position to another by using HTML CSS & JavaScript. At the end of this blog post, you will a project that has drag-and-drop functionality with some animations. Recently I have provided a blog on how to create a Multi-Step Progress Bar, I hope that project will also be beneficial for you.

Video Tutorial of Drag & Drop in HTML CSS & JavaScript

I hope you enjoyed the video tutorial on drag and drop and were able to understand how it can be created in HTML CSS and JavaScript. Also, In the video, I explained the codes with written comments to make them easier to understand, and I believe it worked.

If you haven’t seen the video yet, you can continue reading this post to learn how to create a drag-and-drop step-by-step by yourself. Otherwise, you can go to the bottom of this page to copy or download the source code and files for this project.

Steps to create Drag & Drop in HTML CSS & JavaScript

To create a Drag & Drop using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create the basic layout of the project.




  
    
    
    
    Drag & Drop in JavaScript

Next, add the following CSS codes to your style.css file to make the layout look better. These codes will style the layout and give it a visually appealing appearance.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 420px;
  justify-content: center;
}
.container .box {
  position: relative;
  height: 160px;
  width: 160px;
  border-radius: 12px;
  border: 2px solid #333;
}
.box .image {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-image: url("img.jpg");
}
.box.hovered {
  border: 2px dashed #333;
}

Finally, add the following JavaScript code to your script.js file to add functionality for drag and drop

//DOM Elements
const boxes = document.querySelectorAll(".box"),
  image = document.querySelector(".image");

//Loop through each boxes element
boxes.forEach((box) => {
  //When a draggable element dragged over a box element
  box.addEventListener("dragover", (e) => {
    e.preventDefault(); //Prevent default behaviour
    box.classList.add("hovered");
  });

  //When a draggable element leaves box element
  box.addEventListener("dragleave", () => {
    box.classList.remove("hovered");
  });

  //When a draggable element is dropped on a box elemen
  box.addEventListener("drop", () => {
    box.appendChild(image);
    box.classList.remove("hovered");
  });
});

Conclusion and Final Words

By following the steps in this blog post, you have successfully created a drag-and-drop using HTML, CSS, and JavaScript. Now it’s up to you to experiment with the code and make it more useful.

If you face any difficulties while creating your Drag and Drop or your code is not working as expected, you can download the source code files for this Drag and Drop for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Multi Step Progress Bar in HTML CSS & JavaScript

CodingNepal — Sun, 05 Feb 2023 21:11:22 +0000

The multi-step process enhances the user experience by dividing the registration process into smaller, more manageable steps. This reduces confusion and frustration for the user, as clear and concise guidance is provided throughout the process.

In this blog, you will learn how to create a Multi-Step Progress Bar using HTML CSS & JavaScript. As you can see in the image there will be a total of four steps and two buttons to control that multistep progress bar. Additionally, recently I thought to create Neumorphism Loading Animation, you may like that as well.

By the end of this blog post, you will have a Multi-Step Progress Bar. And, you can implement it in various sections like Registration or signup form.

Video Tutorial of Multi-Step Progress Bar

If you would like to create this multistep progress bar step by step, the video tutorial is provided below. Otherwise, you may continue reading.

Steps to create Multi Step Progress Bar in HTML CSS & JS

We will create this multistep progress bar in HTML CSS and JavaScript.

1. File Structure

In the initial step, we will create a new directory for our project. You can name it whatever you want, and inside this directory, create two files: index.html and style.css. These files will contain the necessary HTML and CSS code for the card slider.

2. Creating the Multi-Step Progress Bar

In the second step, we will create the layout and style the progress bar & buttons using HTML and CSS. In your index.html file, add the following HTML code to create the basic structure of the multi-step progress bar.




  
    
    
    
    Multi Step Progress
    
    
  
  
    
      
        1
        2
        3
        4

In your style.css file, add the following CSS code to style the multi-step progress bar. If you want, you can change the font, size, color, and background of the progress bar & buttons by slightly modifying this code.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 400px;
  width: 100%;
}
.container .steps {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.steps .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  color: #999;
  font-size: 22px;
  font-weight: 500;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #e0e0e0;
  transition: all 200ms ease;
  transition-delay: 0s;
}
.steps .circle.active {
  transition-delay: 100ms;
  border-color: #4070f4;
  color: #4070f4;
}
.steps .progress-bar {
  position: absolute;
  height: 4px;
  width: 100%;
  background: #e0e0e0;
  z-index: -1;
}
.progress-bar .indicator {
  position: absolute;
  height: 100%;
  width: 0%;
  background: #4070f4;
  transition: all 300ms ease;
}
.container .buttons {
  display: flex;
  gap: 20px;
}
.buttons button {
  padding: 8px 25px;
  background: #4070f4;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
}
.buttons button:active {
  transform: scale(0.97);
}
.buttons button:disabled {
  background: #87a5f8;
  cursor: not-allowed;
}

Finally, add the following JavaScript code to your script.js file to add functionality for creating a multi-step progress bar.

 //DOM Elements
const circles = document.querySelectorAll(".circle"),
  progressBar = document.querySelector(".indicator"),
  buttons = document.querySelectorAll("button");

let currentStep = 1;

// function that updates the current step and updates the DOM
const updateSteps = (e) => {
  // update current step based on the button clicked
  currentStep = e.target.id === "next" ? ++currentStep : --currentStep;

  // loop through all circles and add/remove "active" class based on their index and current step
  circles.forEach((circle, index) => {
    circle.classList[`${index < currentStep ? "add" : "remove"}`]("active");
  });

  // update progress bar width based on current step
  progressBar.style.width = `${((currentStep - 1) / (circles.length - 1)) * 100}%`;

  // check if current step is last step or first step and disable corresponding buttons
  if (currentStep === circles.length) {
    buttons[1].disabled = true;
  } else if (currentStep === 1) {
    buttons[0].disabled = true;
  } else {
    buttons.forEach((button) => (button.disabled = false));
  }
};

// add click event listeners to all buttons
buttons.forEach((button) => {
  button.addEventListener("click", updateSteps);
});

Conclusion and Final Words

By following the steps in this blog post, you have successfully created a Multi-Step Progress Bar using HTML, CSS, and JavaScript. Now it’s up to you to experiment with the code and make it more useful.

If you encounter any problems or your code is not working as expected, you can download the source code files of this Multi Step Progress Bar project by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.