Drag and Drop Events and some Animations - CSS & JS
I didn't forget about CSS and JavaScript, I just haven't had time between the holidays and some amazing news in my personal life, but this week I went back to normal and that includes my CSS and JS grinding.
I still don't have a job, but that's because I haven't even began searching. Not yet, I gotta be ready and feel ready.
Soon.
Grinding, grinding, grinding. When we are talking code, it all comes down to grinding. The more you grind, practice your skills, find out about new tweaks, practice what you should already know by heart, and just putting your code to work... the more you will learn.
So that's what I am doing. I am already pretty efficient with my HTML and CSS code, I still need a lot of practice and a hell lot to learn regarding JavaScript - and don't worry, I've been taking my lessons religiously even though I haven't posted about JavaScript for something like two weeks; but the point is, these little projects are mainly about HTML and CSS and grinding my skills.
This is sixth post already about little projects based off online ideas and my plan is to join all of these ideas once I am ready and create my own CV website of my own where I'll showcase all that I've learned in a sort of interactive website. Heads up, I'm getting there, slowly but steady, more slowly than steady to be honest but what the hell, slow and steady wins the race.
In the meantime, I will leave you with two project Ideas based off on Brad Traversy's paid course on Udemy. Credit at the bottom and links btw.
Note: The code is based off someone else's ideas, all the comments and doc are mine as this is supposed to be a teaching kind of post, and even though the main concept is not mine, all the code has been tweaked and modified to align with my own ideas.
Drag and drop
I'm going to create and style a few boxes and then give them some effects using a couple of cool classes that are very useful on CSS and will give you - the two people reading my coding posts - a good idea of how the drag and drop functionalities work.
HTML Code
<body>
<div class="empty">
<div class="fill" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<script src="script.js"></script>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(90deg, #f51c1c, #ca6c65);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.empty {
height: 150px;
width: 150px;
margin: 10px;
border: solid 3px black;
background: white;
}
.fill {
background-image: url("https://source.unsplash.com/random/150x150");
height: 145px;
width: 145px;
cursor: pointer;
}
Since I want the image inside the box to have a specific style and effects when I am dragging them, I have to use the class of hold.
.hold {
border: solid 5px #ccc;
}
.hovered {
background-color: #333;
border-color: white;
border-style: dashed;
}
Hold and hovered are drag events, and there are several different ones we can use.
Tip: Research and get familiar with them, just so you know what can be done in case you ever need it.
The following media query will only be applied when the width is 800 pixels or less.
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
JavaScript Code
What I want to do is set specific events to trigger the classes at specific times
First I want to define when do I want to fire the functions I will define after, so to define the when I need to bring in the variables I need.
const fill = document.querySelector(".fill");
const empties = document.querySelectorAll(".empty");
There are two events I want to call for the class of fill, which is dragStart and dragEnd:
fill.addEventListener("dragstart", dragStart);
fill.addEventListener("dragend", dragEnd);
As you can see, the events are called the same only without the CamelCase style that calls the functions
I need the rest of the functions to go on the empty boxes, so that is for the class of empty. I could do it manually, but we can also use a forEach method because there are four boxes with the class of empty:
for (const empty of empties) {
empty.addEventListener("dragover", dragOver);
empty.addEventListener("dragenter", dragEnter);
empty.addEventListener("dragleave", dragLeave);
empty.addEventListener("drop", dragDrop);
}
This function get's called when we begin dragging an image.
function dragStart() {
// I want *dragStart* to preserve its former class but also have a new one
this.className += " hold";
setTimeout(() => (this.className = "invisible"), 0);
}
This function get's called when we finish dragging an image.
function dragEnd() {
this.className = "fill";
}
This function get's called when we are dragging the image over something (another box for example).
function dragOver(e) {
e.preventDefault();
}
This function get's called when we enter any defined space while dragging something.
function dragEnter(e) {
e.preventDefault();
// I also want to have an effect on the box whenever I am hovering over it while dragging the image.
this.className += " hovered";
}
In both function above, we are preventing the default behavior of both events (over and enter).
This function get's called when we leave any defined space while dragging something.
function dragLeave() {
this.className = "empty";
}
Now, I want to be able to drop the image into any of the boxes, in order to do that I have to append the class of fill to said box.
This function get's called when we drop whatever we were dragging.
function dragDrop() {
// First we make sure that the box is empty
this.className = "empty";
// And now we can add the class of *fill*
this.append(fill);
}
Loading... Animation
This is a pretty simple project but one that gives a lot of visual appeal to any website, as long as you don't overuse it and know where to use it.
HTML Code
</head>
<body>
<div class="loading"></div>
<script src="script.js"></script>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(90deg, #a96666, #ff1100);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.loading {
position: relative;
height: 80px;
width: 80px;
}
I want the position of the class loading to be relative because I am going to use the pseudo selectors before and after to create a triangle, and I want to position them as absolute inside this container.
.loading::after,
.loading::before {
/* Whenever we use the pseudo selectors *after* or *before* there's gotta be content, no matter if said content is nothing. */
content: "";
position: absolute;
top: 0;
left: 0;
/* This below is a great way to create a triangle on CSS. We define the width and height to zero but give some volume to the border, then play with the color of the border we want to show. */
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #fff;
I will define some keyframes below, that will be applied here, stay with me
animation: rotateA 2s linear infinite 0.5s;
}
First the function, then duration, then fashion, then overall duration, then delay
In the image above are two triangles, a before and an after triangle, we just need to manipulate them separately. It seems there's only one because they are positioned at the same spot.
.loading::before {
transform: rotate(90deg);
animation: rotateB 2s linear infinite;
}
@keyframes rotateA {
0%,
25% {
transform: rotate(0deg);
}
50%,
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateB {
0%,
25% {
transform: rotate(90deg);
}
50%,
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(450deg);
}
}
These projects are based on a CSS, HTML and JS paid course I got on Udemy by Brad Traversy. I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.
Weldone @anomadsoul. It looks nice.