Drawing smiley using javascript and showing in semi transparent div
Categories:
Drawing a Smiley Face in a Semi-Transparent JavaScript Div
Learn how to dynamically create and display a simple smiley face using JavaScript and CSS, rendered within a semi-transparent HTML div element.
This article guides you through the process of drawing a basic smiley face using JavaScript and then embedding it within a semi-transparent div element. This technique is useful for creating dynamic overlays, interactive elements, or simply adding a touch of visual flair to your web applications. We'll cover the HTML structure, CSS styling for transparency, and the JavaScript logic to construct the smiley face.
Understanding the Core Components
To achieve our goal, we'll primarily rely on three web technologies: HTML for structure, CSS for styling (especially transparency), and JavaScript for dynamic content creation and manipulation. The smiley face itself will be constructed using basic HTML elements, styled with CSS to resemble eyes and a mouth, all contained within a parent div that will have the semi-transparent effect.
flowchart TD
A[HTML Structure] --> B{CSS Styling}
B --> C[JavaScript Logic]
C --> D[Create Smiley Elements]
D --> E[Apply Smiley Styles]
E --> F[Create Transparent Div]
F --> G[Append Smiley to Div]
G --> H[Append Div to Body]Workflow for creating and displaying the smiley face
Setting Up the HTML and CSS
First, let's prepare our HTML file with a basic structure and define the CSS rules that will give our container div its semi-transparent background and position it on the page. We'll also include some basic styling for the smiley face components, which will be created dynamically by JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smiley in Transparent Div</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.transparent-container {
position: relative;
width: 300px;
height: 300px;
background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
border: 1px solid #ccc;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.smiley-face {
position: relative;
width: 150px;
height: 150px;
background-color: #ffeb3b; /* Yellow face */
border-radius: 50%;
border: 2px solid #333;
}
.eye {
position: absolute;
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%;
top: 45px;
}
.eye.left {
left: 35px;
}
.eye.right {
right: 35px;
}
.mouth {
position: absolute;
width: 80px;
height: 40px;
border: 4px solid #333;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: transparent;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
border-top: none;
}
</style>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Basic HTML structure with embedded CSS for styling the container and smiley components.
rgba() color value in CSS allows you to specify red, green, blue, and alpha (transparency) channels. A value of 0.7 for alpha means 70% opacity, or 30% transparency.Drawing the Smiley with JavaScript
Now, let's write the JavaScript code (script.js) that will dynamically create the div elements for the smiley face and the transparent container. We'll append these elements to the body of our HTML document, bringing our smiley to life within its translucent home.
// script.js
document.addEventListener('DOMContentLoaded', () => {
// 1. Create the semi-transparent container div
const transparentContainer = document.createElement('div');
transparentContainer.className = 'transparent-container';
// 2. Create the smiley face div
const smileyFace = document.createElement('div');
smileyFace.className = 'smiley-face';
// 3. Create the left eye
const leftEye = document.createElement('div');
leftEye.className = 'eye left';
// 4. Create the right eye
const rightEye = document.createElement('div');
rightEye.className = 'eye right';
// 5. Create the mouth
const mouth = document.createElement('div');
mouth.className = 'mouth';
// 6. Append eyes and mouth to the smiley face
smileyFace.appendChild(leftEye);
smileyFace.appendChild(rightEye);
smileyFace.appendChild(mouth);
// 7. Append the smiley face to the transparent container
transparentContainer.appendChild(smileyFace);
// 8. Append the transparent container to the body
document.body.appendChild(transparentContainer);
});
JavaScript code to dynamically create and assemble the smiley face and its transparent container.
DOMContentLoaded event listener ensures that our JavaScript code runs only after the entire HTML document has been loaded and parsed, preventing errors if the script tries to access elements that don't yet exist.Putting It All Together
By combining the HTML structure, the CSS styling, and the JavaScript logic, you will have a web page displaying a cheerful smiley face, gracefully presented within a semi-transparent div. This example demonstrates a fundamental approach to dynamic content creation and styling, which can be extended for more complex UI elements and interactions.
1. Create index.html
Save the HTML code provided in the 'Setting Up the HTML and CSS' section into a file named index.html.
2. Create script.js
Save the JavaScript code provided in the 'Drawing the Smiley with JavaScript' section into a file named script.js in the same directory as index.html.
3. Open index.html
Open the index.html file in your web browser. You should see the semi-transparent div containing the smiley face.