Add files via upload

Prasannad02 · Jul 14, 2023 · 7733ef4 · 7733ef4
commit 7733ef4
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,96 @@
+
+## Title
+
+ Mini Calendar
+## Description 
+
+Prasanna's Mini Calendar is a simple web project that displays the current date, day, month, and year. It provides a minimalist design and serves as a handy reference for users.
+
+
+## Authors
+
+- [Prasanna](https://github.com/Prasanna02) 
+
+
+## Demo
+
+Live Demo:
+
+    https://codesoftg.github.io/TGCodes-Mini-Calendar/
+## Getting Started:
+
+To use Prasanna's Mini Calendar web page, follow these steps:
+
+1. Download the source code:
+
+    --Clone or download the repository to your local machine.
+
+2. Open the project:
+
+    --Use your preferred code editor to open the downloaded project files.
+
+3. Customize the code:
+
+    --Modify the HTML, CSS, and JavaScript files to match your desired design and requirements.
+
+    --Customize the font style, colors, and layout to align with your website's style or personal preferences.
+
+    --Update the background color, font family, or any other CSS properties as needed.
+
+4. Test the functionality:
+
+    --Open the HTML file in a web browser to see the mini calendar in action.
+    --Verify that the current date, day, month, and year are displayed correctly.
+
+    --Ensure that the design and layout meet your expectations.
+
+5. Deploy the web page:
+
+    --Upload the modified code to your web hosting or server.
+
+6. Explore customization options:
+
+    --Experiment with different fonts, colors, and styles to create a personalized look and feel.
+
+    --Adjust the dimensions and positioning of the calendar elements to fit your design requirements.
+
+7. Enjoy the mini calendar:
+
+    --View your website or web page with the functional and visually appealing mini calendar.
+
+    --Benefit from the simplicity and convenience of having the current date information readily available.
+
+Feel free to customize and tailor the code further to suit your specific needs or integrate it into your existing projects.
+## Features
+
+- Displays the current date, day, month, and year.
+
+- Minimalist design with a clean and user-friendly interface.
+
+- Uses JavaScript to fetch the current date and update the calendar dynamically.
+
+- Responsive layout that adapts to different screen sizes.
+
+- Easy to integrate into any website or project.
+## Contributing
+
+Contributions are always welcome!
+
+If you have any suggestions, improvements, or bug fixes, feel free to submit a pull request. Please ensure that your contributions align with the overall design and goals of the website. 
+
+
+## 🔗 Links
+
+For any questions or inquiries, please feel free to reach out. 
+
+TG :
+
+[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/prasanna1572/)
+
+
+[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Hirthik_cham)
+
+[![instagram](https://img.shields.io/badge/instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/moonstrucktraveller003/)
+
+
+Thank you for visiting the page!
diff --git a/Website icon.png b/Website icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mini Calendar</title>
+    <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+    <div class="hero">
+        <div class="calendar">
+            <div class="left">
+                <p id="date">12</p>
+                <p id="day">Wednesday</p>
+            </div>
+            <div class="right">
+                <p id="month">July</p>
+                <p id="year">2023</p>
+            </div>
+        </div>
+    </div>
+
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,15 @@
+const date = document.getElementById("date");
+const day = document.getElementById("day");
+const month = document.getElementById("month");
+const year = document.getElementById("year");
+
+const today = new Date();
+// console.log(today);
+
+const weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satruday"];
+const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+date.innerHTML = (today.getDate() < 10) ? "0" + today.getDate() : today.getDate();
+day.innerHTML = weekDays[today.getDay()];
+month.innerHTML = months[today.getMonth()];
+year.innerHTML = today.getFullYear();
diff --git a/style.css b/style.css
@@ -0,0 +1,55 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+.hero {
+    width: 100%;
+    min-height: 100vh;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.calendar {
+    width: 300px;
+    height: 250px;
+    background: #FFF;
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+}
+
+.left,
+.right {
+    height: 100%;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 24px;
+    background: black;
+}
+
+.right {
+    width: 42%;
+    background: yellow;
+    font-weight: bold;
+    color: black;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.left {
+    width: 58%;
+}
+
+#date{
+    font-size: 100px;
+    line-height: 90px;
+}
+