Blob Maker Step By Step Using HTML, CSS & JavaScript
Tags: javascript, html, css, webdev
Published: 2022-12-28 16:28:46

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

![Blob Maker Step By Step Using HTML, CSS & JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zv5xoemjt6zs208hq7f0.png)
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>
```

##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;
}
```

## Javascript part 👇
👉Source Code : https://bit.ly/3hXyvsQ


After applying JavaScript its look like this 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3eaitotjxaimobfyeiy.gif)


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](https://ziontutorial.com/)
also you can follow me on below social media platforms too.


⭐Visit Website: [Link](https://ziontutorial.com/)
⭐Instagram:  [Link](www.instagram.com/ziontutorial)
⭐Subscribe: [Link](https://www.youtube.com/c/ZionXtutorial?sub_confirmation=1)