Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a dog makeover app. To build this game, we need HTML, CSS and JavaScript. This is an intermediate-level JavaScript project.
If you are looking for more such projects to improve your JavaScript skills, you can check out this playlist here. This playlist contains more than 100 projects. Each of these projects comes with a free-to-download source code. The difficulty level of these projects varies from easy to quite complex ones. This playlist is suitable for all kinds of JavaScript learners.
Video Tutorial:
If you are interested to learn by watching a video tutorial instead of reading this blog post, you can check out the video down below. Also subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
We create a project folder called dog makeover. Within this project, we have three main files and a bunch of image files. The three important files are index.html, style.css and script.js. These files are the HTML document, the stylesheet, and the script file.
HTML:
We begin with the HTML code. The HTML code consists of a main div with the class name container. The container consists of two other divs with the class name dog and draggable. The draggable div consists of all the images that can be dragged upon the dog.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dog Makeover</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="dog" id="dog">
<img src="dog-01.png" id="dog-image" />
</div>
<div class="draggables">
<div class="eyes">
<img
src="eyes-01.png"
class="drag eye"
draggable="true"
id="eye-01"
/>
<img
src="eyes-02.png"
class="drag eye"
draggable="true"
id="eye-02"
/>
<img
src="eyes-03.png"
class="drag eye"
draggable="true"
id="eye-03"
/>
<img
src="eyes-04.png"
class="drag eye"
draggable="true"
id="eye-04"
/>
</div>
<div class="mouths">
<img
src="mouth-01.png"
class="drag mouth"
draggable="true"
id="mouth-01"
/>
<img
src="mouth-02.png"
class="drag mouth"
draggable="true"
id="mouth-02"
/>
<img
src="mouth-03.png"
class="drag mouth"
draggable="true"
id="mouth-03"
/>
<img
src="mouth-04.png"
class="drag mouth"
draggable="true"
id="mouth-04"
/>
</div>
<div class="glasses">
<img
src="glasses-01.png"
class="drag glass"
draggable="true"
id="glass-01"
/>
<img
src="glasses-02.png"
class="drag glass"
draggable="true"
id="glass-02"
/>
</div>
<div class="hats">
<img
src="hats-01.png"
class="drag hat"
draggable="true"
id="hat-01"
/>
<img
src="hats-02.png"
class="drag hat"
draggable="true"
id="hat-02"
/>
<img
src="hats-03.png"
class="drag hat"
draggable="true"
id="hat-03"
/>
</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we have the CSS file. We style our game using CSS. For this copy, the code provided to you below and paste it into your style sheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f2c12e;
}
.container {
width: 31.25em;
position: absolute;
transform: translateX(-50%);
left: 50%;
margin: 1em auto;
box-shadow: 0 0 0 0.62em #ffffff, 0 1.25em 3.12em rgb(83, 66, 15, 0.5);
background-color: #ffffff;
border-radius: 0.5em;
}
.dog {
width: 95%;
height: 21.87em;
position: relative;
margin: 1em auto;
display: grid;
place-items: center;
background-color: #ffedb8;
overflow: hidden;
}
.dog img {
position: relative;
height: 18.75em;
bottom: -1.87em;
}
.draggables {
padding: 1em 0;
width: 31.25em;
position: relative;
background-color: #ffffff;
}
.draggables div {
position: relative;
}
[draggable] {
cursor: move;
}
img {
position: absolute;
}
.eyes {
height: 3.75em;
}
.mouths {
height: 3.12em;
}
.glasses {
height: 5em;
}
.hats {
height: 7em;
}
#eye-01,
#mouth-01 {
left: 0.93em;
}
#hat-01 {
left: 5em;
}
#glass-01 {
left: 4.37em;
}
#eye-02,
#mouth-02 {
left: 8.43em;
}
#hat-02 {
left: 12.5em;
}
#glass-02 {
left: 18.75em;
}
#eye-03,
#mouth-03 {
left: 15.93em;
}
#hat-03 {
left: 22.5em;
}
#eye-04,
#mouth-04 {
left: 23.43em;
}
Javascript:
Next, we implement the logic using JavaScript. We do this in the following steps
- Create initial references
- Function to identify if the device is a touch device
- Create Drag and drop functions
- Functions on the Window load
let currentElement = "";
let initialX = 0,
initialY = 0;
const isTouchDevice = () => {
try {
//we try to create TouchEvent (it would fail for non touch devices and throw error)
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
};
//Drag and drop functions
function dragStart(e) {
initialX = isTouchDevice() ? e.touches[0].clientX : e.clientX;
initialY = isTouchDevice() ? e.touches[0].clientY : e.clientY;
currentElement = e.target;
}
function dragOver(e) {
e.preventDefault();
}
const drop = (e) => {
e.preventDefault();
let newX = isTouchDevice() ? e.touches[0].clientX : e.clientX;
let newY = isTouchDevice() ? e.touches[0].clientY : e.clientY;
currentElement.style.top =
currentElement.offsetTop - (initialY - newY) + "px";
currentElement.style.left =
currentElement.offsetLeft - (initialX - newX) + "px";
};
window.onload = () => {
currentElement = "";
let body = document.body;
body.addEventListener("dragstart", dragStart, false);
body.addEventListener("dragover", dragOver, false);
body.addEventListener("drop", drop, false);
body.addEventListener("touchstart", dragStart, false);
body.addEventListener("touchmove", drop, false);
};
That’s all for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the download button below. I have also included the images used in the project within the source code folder. Also if you have any queries suggestions or feedback comment below.
Happy Coding!
