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 vanilla HTML page starts with this:
<!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>
-
<!DOCTYPE html>→ tells the browser this is HTML5. -
<head>→ holds info about the page (title, settings, etc). -
<body>→ everything you see on screen goes here.
Step 2: Adding Blog Content
Inside the <body>, let’s put a paragraph:
<p style="background-color: rebeccapurple;">This is my blog post.</p>
-
<p>→ adds a paragraph. -
style="background-color: rebeccapurple;"→ gives it a purple background to stand out.
Step 3: Footer with Rating System
Now let’s add a footer:
<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>
Breakdown:
-
<span>→ shows “Rate my Post” in Courier New font. -
<input type="number">→ box where users enter a number:-
min="1"→ lowest rating is 1 -
max="5"→ highest rating is 5 -
step="1"→ only whole numbers (no 2.5)
-
-
<button>→ callsupdateRating()when clicked. -
<p>→ shows copyright.
Step 4: Adding JavaScript
Now add interactivity at the bottom:
<script type="text/javascript">
console.log("Footer script loaded.");
console.log("Footer script loaded again.");
console.log(new Date().getFullYear());
// Auto update copyright
document.getElementById("pCopyRight").innerText =
"© " + new Date().getFullYear() + " My Blog";
// Handle rating
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>
-
console.log()→ test messages (visible in browser console). -
document.getElementById("pCopyRight").innerText = ...→ changes footer year automatically (so it’s always current). -
updateRating()→ runs when user clicks submit:-
Reads input value.
-
Shows alert with rating if valid.
-
Otherwise asks for a rating.
-
Step 5: Full Demo 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());
// Auto update copyright year
document.getElementById("pCopyRight").innerText =
"© " + new Date().getFullYear() + " My Blog";
// Rating function
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>
Step 6: Demo Behavior
-
Type
5→ click Submit → alert says “You rated this post: 5”. -
Leave it blank → click Submit → alert says “Please enter a rating between 1 and 5.”
-
Footer year always updates automatically.
Conclusion
You just learned how to built a simple HTML page with:
-
HTML → structure
-
CSS (inline styles) → colors & fonts
-
JavaScript → rating alerts & auto-updating footer
No comments:
Post a Comment