Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Blob Maker app. To build this Project, we need HTML, CSS and JavaScript. This is an intermediate-level JavaScript project.
If you're interested in Improving your JavaScript Concept and skills further, make sure to go through this Series! It features best projects, each with free downloadable source code. The projects range in difficulty from beginner-friendly to more advanced challenges and tough, making this playlist perfect for learners at all levels of experience with JavaScript. So, let's start this with positive note
Blob Pictorial Representation
Project Folder Structure:
Here I have created a project structure called Blob Maker. In this project, I have created three main files naming index.html, style.css and script.js you can create one single file called index.html also and add three codes inside one.
But for better understanding and easy to handle I have created 3 different file structure mentioned above.
These files are the HTML document, the stylesheet, and the script file.
HTML:
- Document Structure:
- Uses <!DOCTYPE html> for HTML5.
- Sets the language to English with <html lang="en">.
- Body Section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob Maker</title>
<link rel="stylesheet" href="style.html">
</head>
<body>
<h1>Blob Maker</h1>
<div>
<label for="colorPicker">Choose Blob Color:</label>
<input type="color" id="colorPicker" value="#f08">
</div>
<div id="blob" style="width: 200px; height: 200px; background-color: #f08;"></div>
<button id="generateBlob">Generate Random Blob</button>
<script src="script.html"></script>
</body>
</html>
In this section I have styled the project using <style> tag and used attributes like font-family, text-align, backround-color, margin and border-radius.
<style>
body { font-family: Arial, sans-serif; text-align: center; }
#blob { background-color: #F0F8FF; margin: 50px auto; border-radius: 50%; transition: all 0.5s; }
</style>
js:
- Color Selection:
- Random Size Generation:
- Element References:
<script>
const blob = document.getElementById('blob');
const colorPicker = document.getElementById('colorPicker');
const generateBlobBtn = document.getElementById('generateBlob');
colorPicker.addEventListener('input', function () {
blob.style.backgroundColor = this.value;
});
generateBlobBtn.addEventListener('click', function () {
blob.style.width = `${Math.random() * 300 + 100}px`;
blob.style.height = `${Math.random() * 300 + 100}px`;
});
</script>Complete Code (Copy):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Blob Maker</title>
<style>
body { font-family: 'Arial', sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f0f4f7; }
#blob { width: 300px; height: 300px; background-color: #ff6b6b; margin: 20px; border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.controls { display: flex; gap: 20px; margin-bottom: 20px; }
input[type="range"] { width: 150px; }
</style>
</head>
<body>
<h1>Advanced Blob Maker</h1>
<div class="controls">
<label for="radius">Blob Shape:</label>
<input type="range" id="radius" min="10" max="50" step="1">
<label for="color">Blob Color:</label>
<input type="color" id="color" value="#ff6b6b">
<button id="randomize">Random Blob</button>
</div>
<div id="blob"></div>
<script>
const blob = document.getElementById('blob');
const slider = document.getElementById('radius');
const colorPicker = document.getElementById('color');
const randomButton = document.getElementById('randomize');
slider.addEventListener('input', updateBlob);
colorPicker.addEventListener('input', updateBlob);
randomButton.addEventListener('click', randomBlob);
function updateBlob() {
let radius = slider.value;
blob.style.borderRadius = `${radius}% ${100 - radius}% / ${100 - radius}% ${radius}%`;
blob.style.backgroundColor = colorPicker.value;
}
function randomBlob() {
slider.value = Math.floor(Math.random() * 41) + 10;
colorPicker.value = `#${Math.floor(Math.random()*16777215).toString(16)}`;
updateBlob();
}
updateBlob(); // Set initial blob
</script>
</body>
</html>
