Random Blob Generator using HTML, CSS and JavaScript (Source Code) - Coding Torque

byPiyush Patil -
0
Random Blob Generator using HTML, CSS and JavaScript

Welcome to Coding Torque! Are you ready to unleash your creativity and bring your ideas to life with HTML, CSS, and JavaScript? In this tutorial, we will guide you through the process of building a dynamic and interactive Random Blob Maker App. You'll learn how to use various programming techniques to generate unique and eye-catching designs, and you'll have a blast experimenting with different color schemes and patterns. Whether you're a beginner or an experienced coder, this project is sure to inspire and engage you. So let's get started!

Join us on Telegram Join Now

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. QR Code Generator using JavaScript

I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.


Demo





HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Random Blob Generator using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <!-- Further code here -->

    <!-- JQUERY  -->
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

    <script src="script.js"></script>
</body>

</html>


Paste the below code in your <body> tag 

<div class="container">
    <div class="blob-wrapper">
        <div class="blob"></div>
    </div>
    <p class="style">border-radius: <span>Haha, blobs are funny :D</span>;</p>
    <button onclick="generateBlob()">Click me</button>
</div>


Output Till Now


CSS Code

Create a file style.css and paste the code below.  

* {
  text-align: center;
}

body {
  background: #675afe;
  display: flex;
  justify-content: center;
}

.container {
  margin-top: 2rem;
  width: 40rem;
  height: 100%;
  background: white;
  border-radius: 20px;
  padding: 40px;
}

.blob-wrapper {
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
}

.blob {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  background: url("../_imgs/coding-torque-logo.png");
  background-size: cover;
}

p {
  font-size: 20px;
  font-family: monospace, monospace;
}

button {
  margin: 0 0 0 20px;
  background: #675afe;
  color: white;
  border: 0;
  padding: 10px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  transition-duration: 0.4s;
}

button:hover {
  background: #675afe;
  cursor: pointer;
}

Output Till Now

Random Blob Generator using HTML, CSS and JavaScript

JavaScript Code

Create a file script.js and paste the code below. 

function generateBlob() {
    const percentage1 = Math.floor(Math.random() * 50) + 25;
    const percentage2 = Math.floor(Math.random() * 50) + 25;
    const percentage3 = Math.floor(Math.random() * 50) + 25;
    const percentage4 = Math.floor(Math.random() * 50) + 25;

    var percentage11 = 100 - percentage1;
    var percentage21 = 100 - percentage2;
    var percentage31 = 100 - percentage3;
    var percentage41 = 100 - percentage4;
    var borderRadius = `${percentage1}% ${percentage11}% ${percentage21}% ${percentage2}% / ${percentage3}% ${percentage4}% ${percentage41}% ${percentage31}%`;
    $(".blob").css("border-radius", borderRadius);
    $(".style span").html(borderRadius)
}

$(document).ready(function () {
    generateBlob();
});
Join us on Telegram Join Now

Written by: Coding Torque | Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us 

Hope you find this post helpful💖
 
 Follow us on Instagram for more projects like this👨‍💻 
Tags:

Post a Comment

Previous Post Next Post