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!
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
* {
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
JavaScript Code
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();
});