The given code represents an HTML document with an embedded JavaScript script, forming an Age Calculator webpage. The script not only computes the user's age from the entered or chosen birthdate but also incorporates event handlers to prevent right-clicking and disable specific keyboard shortcuts. The core feature unveils a delightful touch by showcasing random greetings and dreams corresponding to the calculated age. Within the HTML structure, there are input fields, a calculate button, and designated areas for displaying the outcome, greetings, and dreams.
Steps For Creating Age Calculator Tool
Step 1: Login to Blogger
Step 2: Access the Dashboard: 💖 On the Blogger homepage, click on the dropdown menu next to the blog you want to create a page for.
Step 3: Navigate to Pages: Click on "Pages" in the left sidebar.
Step 4: Create a New Page: Click the "New 📄 page" button.
Step 5: Enter a title for your page in the "Page title" field.
Step 6: Choose "Page 📄 Mode" in "HTML View".
Step 7: Copy the provided 👇 code snippet, and then navigate to the "HTML View" section where you can paste the code.
<style>
/* Common Styles */
.age-calculator {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
text-align: center;
width: 100%;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #428bca;
color: #fff;
cursor: pointer;
}
/* Result Styling */
p#result {
font-size: 18px;
font-weight: bold;
color: #333;
}
/* Additional Styles */
.greeting {
margin-top: 20px;
font-size: 20px;
color: #33aaff;
}
.dream {
margin-top: 20px;
font-size: 20px;
color: #ff66cc;
}
</style>Step 8: Paste the following HTML code directly beneath the previously inserted code.
<div class="age-calculator"> <h2>Age Calculator</h2> <p>Select or enter your birthdate:</p> <input type="date" id="birthdate"> <p>Or enter your birthdate (DD/MM/YYYY):</p> <input type="text" id="birthdate-input" placeholder="DD/MM/YYYY"> <button id="calculate-btn">Calculate Age</button> <p id="result"></p> <div class="greeting" id="greeting"></div> <div class="dream" id="dream"></div> </div>
Step 9: Paste the following JavaScript code directly beneath the previously inserted code.
<script>
const calculateBtn = document.getElementById("calculate-btn");
const dateInput = document.getElementById("birthdate");
const textInput = document.getElementById("birthdate-input");
const result = document.getElementById("result");
const greeting = document.getElementById("greeting");
const dream = document.getElementById("dream");
calculateBtn.addEventListener("click", () => {
const selectedDate = dateInput.value;
const typedDate = textInput.value;
if (selectedDate) {
calculateAge(new Date(selectedDate));
} else if (typedDate) {
const typedDateParts = typedDate.split("/");
if (typedDateParts.length === 3) {
calculateAge(new Date(typedDateParts[2], typedDateParts[1] - 1, typedDateParts[0]));
} else {
result.textContent = "Please enter a valid date in the format DD/MM/YYYY.";
}
} else {
result.textContent = "Please select or enter a birthdate.";
}
});
textInput.addEventListener("input", () => {
if (textInput.value.length === 2 || textInput.value.length === 5) {
textInput.value += "/";
}
});
function calculateAge(birthdate) {
const currentDate = new Date();
const birthYear = birthdate.getFullYear();
const birthMonth = birthdate.getMonth();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const years = currentYear - birthYear;
const months = currentMonth - birthMonth;
if (months < 0) {
result.textContent = `Your age is ${years - 1} years and ${12 + months} months.`;
} else {
result.textContent = `Your age is ${years} years and ${months} months.`;
}
// Display random greetings and dreams based on age
const greetings = [
"Hello, young one!",
"Hello, dear friend!",
"Greetings and salutations!",
"Hi there! 😊",
"Welcome to another year of wisdom!",
"Hello, world traveler!",
"Happy to see you, no matter your age!",
"A hearty hello to you!"
];
const dreams = [
"May your dreams come true!",
"Wishing you happiness and success!",
"May every day be filled with joy!",
"Chase your dreams with determination!",
"Believe in yourself and your dreams!",
"Here's to making the impossible possible!",
"Dream big and aim high!",
"Your journey holds endless possibilities!"
];
const randomGreetingIndex = Math.floor(Math.random() * greetings.length);
const randomDreamIndex = Math.floor(Math.random() * dreams.length);
greeting.textContent = greetings[randomGreetingIndex];
dream.textContent = dreams[randomDreamIndex];
}
</script>Step 10: Save, Preview, or Publish: Click "Save" to save the post as a draft, Click "Preview" to see how the post will look, Click "Publish" to make the post live.
Disclaimer:
Warning - All content and posts on this platform are the intellectual property of It Is Unique Official. Unauthorized copying, reproduction, or distribution of our content is strictly prohibited. Any attempt to replicate or use our material without explicit permission may result in legal action. Please respect our intellectual property rights and contact us for inquiries regarding the use of our content. Thank you for your understanding and cooperation.
Conclusion
The provided code creates an Age Calculator web page with interactive features. It effectively prevents right-clicking and specific keyboard shortcuts, enhancing user experience and control. The age calculation functionality, coupled with personalized greetings and dreams, adds a thoughtful and engaging element to the webpage. The combination of HTML and JavaScript produces an intuitive and dynamic tool for users to determine and celebrate their age.