Hey, I'm gonna create a simple blog post layout with a footer that includes a rating system. I’ll use just HTML, CSS, and JavaScript
Let’s start!
Step 1 : The HTML Body
Every web page starts. At the very top, we tell the browser using HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog Post</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
-
The
<head>contains information about the page, like the title and viewport settings. -
The
<body>contains everything want to show on the screen.
Step 2 : Adding Blog Content
Inside the <body>, let’s add a paragraph:
<p style="background-color: rebeccapurple;">This is my blog post.</p>
Here’s what happens:
-
The
<p>tag displays a paragraph of text. -
The
styleattribute changes the background color to rebeccapurple (or any color u want), making the text stand out.
Step 3 : Creating the Footer with a Rating System
Now, let’s build a footer that lets users rate the post:
<footer>
<span style="font-family: 'Courier New', Courier, monospace;">Rate my Post</span>
<input type="number" id="rating" name="rating" min="1" max="5" step="1">
<button type="button" onclick="updateRating()">Submit</button>
<p id="pCopyRight">© 2024 My Blog</p>
</footer>
Breaking it down:
-
The
<span>shows the text “Rate my Post” in Courier New font. -
The
<input>allows users to type a number:-
type="number"ensures only numbers are accepted. -
min="1"andmax="5"limit the rating between 1 and 5. -
step="1"means only whole numbers are allowed.
-
-
The
<button>calls theupdateRating()function when clicked. -
The
<p>shows copyright text.
Step 4 : Adding JavaScript Interactivity
Now I'll add a <script> at the bottom of the page:
<script type="text/javascript">
console.log("Footer script loaded.");
console.log("Footer script loaded again.");
console.log(new Date().getFullYear());
// Automatically update copyright year
document.getElementById("pCopyRight").innerText =
"© " + new Date().getFullYear() + " My Blog";
// Handle rating submission
function updateRating() {
const ratingInput = document.getElementById("rating");
const ratingValue = ratingInput.value;
if (ratingValue) {
alert("You rated this post: " + ratingValue);
} else {
alert("Please enter a rating between 1 and 5.");
}
}
</script>
What's this?
-
console.log()prints test messages in the developer console. -
The copyright line:
document.getElementById("pCopyRight").innerText = "© " + new Date().getFullYear() + " My Blog";Updates the footer year automatically, no need to edit it every year!
-
The
updateRating()function:-
Reads the number from the input box.
-
Shows an alert with the rating.
-
If nothing is entered, it asks the user to provide a rating.
-
Step 5 : Demo
-
Enter
5in the box → click Submit → alert shows “You rated this post: 5”. -
Leave the box empty → click Submit → alert says “Please enter a rating between 1 and 5.”
-
The footer always displays the current year automatically.
Final Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog Post</title>
</head>
<body>
<p style="background-color: rebeccapurple;">This is my blog post.</p>
<footer>
<span style="font-family: 'Courier New', Courier, monospace;">Rate my Post</span>
<input type="number" id="rating" name="rating" min="1" max="5" step="1">
<button type="button" onclick="updateRating()">Submit</button>
<p id="pCopyRight">© 2024 My Blog</p>
</footer>
<script type="text/javascript">
console.log("Footer script loaded.");
console.log("Footer script loaded again.");
console.log(new Date().getFullYear());
document.getElementById("pCopyRight").innerText =
"© " + new Date().getFullYear() + " My Blog";
function updateRating() {
const ratingInput = document.getElementById("rating");
const ratingValue = ratingInput.value;
if (ratingValue) {
alert("You rated this post: " + ratingValue);
} else {
alert("Please enter a rating between 1 and 5.");
}
}
</script>
</body>
</html>
Conclusion
And that’s it! You’ve built a simple blog post page with a footer rating system.
This example may be simple, but it shows how HTML handles structure, CSS handles styling, and JavaScript adds interactivity.
You can expand this further by:
-
Replacing the number input with star icons
-
Saving ratings in a database
-
Showing average ratings
No comments:
Post a Comment