π Mini Calendar Project
π Overview This project demonstrates how to create a simple mini calendar using HTML, CSS, and JavaScript that dynamically displays the current date. The calendar updates based on the date of the computer viewing it, ensuring that the page always shows the current day. For instance, if accessed in December 2024, the calendar will display December 2nd, 2024, which falls on a Monday.
π― Objectives π° Retrieve the current date from the user's computer using JavaScript. π Display the date dynamically on a web page. π§ Format and manipulate date information in JavaScript. π¨ Create a visually appealing calendar using CSS. π» Technologies Used HTML: To structure the content of the page. CSS: To style the calendar and enhance its visual appeal. JavaScript: To retrieve and dynamically display the current date. β¨ Features π Displays the current date in a user-friendly format (e.g., December 2nd, 2024). π Automatically updates each time the page is loaded. π Styled with CSS for a clean, modern appearance.
π Getting Started To view this project locally, follow these simple steps:
Clone or download the project to your local machine. Open the index.html file in your preferred web browser.
π Code Structure The project includes the following files:
index.html: Sets up the structure of the calendar. styles.css: Adds styling to make the calendar look great. script.js: Retrieves the current date and updates the calendar.
π Styling Details The calendar is designed with a minimalist and modern look. It features a rounded border, shadow, and center alignment to stand out on the page. The font is clean and simple, ensuring readability.
π How It Works HTML lays out the basic structure of the calendar. JavaScript retrieves the current date using new Date() and formats it using toLocaleDateString(). CSS adds visual enhancements such as padding, shadows, and colors.