DEV Community

Cover image for Blob Maker Step By Step Using HTML, CSS & JavaScript
ziontutorial
ziontutorial

Posted on • Updated on • Originally published at ziontutorial.com

Blob Maker Step By Step Using HTML, CSS & JavaScript

Blob Maker Using HTML, CSS, and JavaScript: Step by Step

Blob Maker Step By Step Using HTML, CSS & JavaScript
Salutations to everybody. I'm delighted you're here for the ziontutorial lesson today. We'll learn about the pie-shaped Blob Maker Step By Step Using HTML, CSS & JavaScript. The software will offer the syntax required to add that shape to the project's CSS code once we only supply the height and width. We'll use HTML, CSS, and JavaScript in today's session to complete this project.
Do you want to design a blob tool in JavaScript? blob tool are useful tools. This article will show you how to make Blob Maker Step By Step Using HTML, CSS & JavaScript

In order to build Blob Maker, we will need to arrange the list using a few HTML (Hypertext Markup Language) characteristics and components.

👉Source Code : https://bit.ly/3hXyvsQ

In order to make the Blob Maker project responsive from the user’s perspective, we will finally use JS (JavaScript).

With source code accessible for you to copy and paste into your own project, we give Blob Maker Step By Step Using HTML, CSS, & JavaScript projects using CSS.

Hopefully, you now have a general idea of the project.

HTML Code

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blob Maker | ziotutorial</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
    <
</head>
<body>
    <div class="wrapper">
        <div class="output">
            <div id="blob"></div>
        </div>
        <div class="dimensions">
            <div>
                <label for="blob-height">
                    Height
                </label>
                <input type="number" value="200" id="blob-height">
            </div>
            <div>
                <label for="blob-width">
                    Width
                </label>
                <input type="number" value="200" id="blob-width">
            </div>
        </div>
        <div class="sliders">
            <input type="range" value="30">
            <input type="range" value="80">
            <input type="range" value="60">
            <input type="range" value="40">
        </div>
        <input type="text" id="css-code" readonly>
        <button id="copy">Copy</button>
    </div>
    <!--Script-->
    <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    font-family: "Roboto Mono",monospace;
    font-weight: 400;
    color: #010120;
}
body{
    background-color: #ffffff;
    background-image: url(./bg.png );

  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.wrapper{
    background-color: #ffffff;
    width: 45%;
    min-width: 550px;
    padding: 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
}
.output{
    background-color: #eef3f8;
    width: 100%;
    min-height: 250px;
    padding: 20px 0;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    display: grid;
    place-items: center;
}
#blob{
    height: 300px;
    width: 300px;
    background: rgb(94,92,122);
background: linear-gradient(90deg, rgba(94,92,122,1) 0%, rgba(9,9,121,1) 42%, rgba(0,212,255,1) 100%);
    box-shadow: 15px 20px 30px rgba(0,0,0,0.15);
}
.dimensions{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 20px 0 40px 0;
}
label{
    font-weight: 500;
}
input[type="number"]{
    height: 40px;
    width: 80px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #a0a0b0;
    border-radius: 3px;
}
input[type="number"]:focus{
    background-color: #f1f5fa;
    border-color: #025eaa;
    color: #025eaa;
}
.sliders{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
input[type="text"]{
    width: 82%;
    margin-top: 50px;
    padding: 10px;
    font-size: 12px;
    border: none;
    background-color: #f1eff9;
    border-radius: 3px;
}
button{
    width: 12%;
    margin-left: 4%;
    padding: 10px 0;
    background-color: #0075ff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
}
Enter fullscreen mode Exit fullscreen mode

Javascript part 👇

👉Source Code : https://bit.ly/3hXyvsQ

After applying JavaScript its look like this

Image description

if you have any query regarding this you can comment in the comment box . Hope you like this article for more such article you can follow and visit my website Link
also you can follow me on below social media platforms too.

⭐Visit Website: Link
⭐Instagram: Link
⭐Subscribe: Link

Top comments (0)