Added Calendar App

Front-end-Projects/Basic/Calendar-App/README.md

@@ -0,0 +1,78 @@
+<h1 align='center'><b>💥 Calendar App 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  This web application is simple HTML, CSS, JavaScript Calendar Application designed to display and navigate through months and years, with functionality for viewing dates, days of the week, and the current day.
+    <p></p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+<div>
+  <p>To run this project locally, follow these steps:
+- Fork the repository
+- Clone the repository to your local machine:
+    git clone https://github.com/your-username/Calendar-App.git
+- Open the project folder in your preferred code editor.
+- Run `index.html` using Live Server
+</p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+![Img](./screenshot.webp)
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Shalini Bhandari</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/shalini-bhandari2001'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/shalini-bhandari'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
+

Front-end-Projects/Basic/Calendar-App/app.js

@@ -0,0 +1,178 @@
+
+const currentDate = new Date();
+const currentDay = currentDate.getDate();
+const currentWeekDay = currentDate.getDay();
+const currentYear = currentDate.getFullYear();
+const currentMonth = currentDate.getMonth();
+
+let month = document.querySelector(".month");
+let year = document.querySelector(".year");
+let day = document.querySelector(".day");
+let date = document.querySelector(".date");
+let today = document.querySelector(".today1");
+
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const weekDays = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+];
+
+let userYear = currentYear;
+let userMonth = currentMonth;
+
+function isLeapYear(year) {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+}
+
+const numOfDays = (monthIndex) => {
+  if (monthIndex === 1) return isLeapYear(userYear) ? 29 : 28; // February
+  return [0, 2, 4, 6, 7, 9, 11].includes(monthIndex) ? 31 : 30; // Other months
+};
+
+const updateCalendar = (monthIndex) => {
+  let daysContainer = document.querySelector(".days ul");
+  let daysHTML = "";
+  const firstDayOfMonth = new Date(userYear, monthIndex, 1).getDay();
+
+  for (let i = 0; i < firstDayOfMonth; i++) {
+    daysHTML += `<li class="diff"></li>`;
+  }
+
+  for (let day = 1; day <= numOfDays(monthIndex); day++) {
+    daysHTML += `<li class="${
+      day === currentDay &&
+      monthIndex === currentMonth &&
+      userYear === currentYear
+        ? "today"
+        : ""
+    }">${day}</li>`;
+  }
+
+  daysContainer.innerHTML = daysHTML;
+};
+
+const main = () => {
+  year.innerText = currentYear;
+  month.innerText = months[currentMonth];
+  day.innerText = weekDays[currentWeekDay];
+  date.innerText = currentDay;
+  today.innerText = currentDate.toDateString();
+  updateCalendar(currentMonth);
+};
+main();
+
+let monthDownBtn = document.querySelector(".month-down");
+let yearDownBtn = document.querySelector(".year-down");
+let monthList = document.querySelector(".month-list");
+let yearList = document.querySelector(".year-list");
+let leftBtn = document.querySelector(".left-ico");
+let rightBtn = document.querySelector(".right-ico");
+
+const removeMonthYearCurr = (monthIndex = userMonth, year = userYear) => {
+  document.querySelector(`.M${monthIndex}`)?.classList.remove("curr");
+  document.querySelector(`.Y${year}`)?.classList.remove("curr");
+};
+
+const addMonthYearCurr = (monthIndex = userMonth, year = userYear) => {
+  document.querySelector(`.M${monthIndex}`)?.classList.add("curr");
+  document.querySelector(`.Y${year}`)?.classList.add("curr");
+};
+
+const setYear = () => {
+  year.innerText = userYear;
+};
+
+const setMonth = (monthIndex) => {
+  month.innerText = months[monthIndex];
+};
+
+yearList.addEventListener("click", (e) => {
+  removeMonthYearCurr();
+  userYear = parseInt(e.target.innerText);
+  setYear();
+  addMonthYearCurr(userMonth, userYear);
+  updateCalendar(userMonth);
+});
+
+monthList.addEventListener("click", (e) => {
+  const newMonthIndex = months.indexOf(e.target.innerText);
+  removeMonthYearCurr(userMonth);
+  userMonth = newMonthIndex;
+  setMonth(userMonth);
+  addMonthYearCurr(userMonth);
+  updateCalendar(userMonth);
+});
+
+(() => {
+  monthList.innerHTML = months
+    .map((m, i) => `<li class="M${i}">${m}</li>`)
+    .join("");
+  yearList.innerHTML = Array.from(
+    { length: 11 },
+    (_, i) => `<li class="Y${currentYear + i}">${currentYear + i}</li>`
+  ).join("");
+  addMonthYearCurr();
+})();
+
+leftBtn.addEventListener("click", () => {
+  removeMonthYearCurr(userMonth);
+  userMonth--;
+  if (userMonth < 0) {
+    userMonth = 11;
+    userYear--;
+  }
+  addMonthYearCurr(userMonth, userYear);
+  setMonth(userMonth);
+  setYear();
+  updateCalendar(userMonth);
+});
+
+rightBtn.addEventListener("click", () => {
+  removeMonthYearCurr(userMonth);
+  userMonth++;
+  if (userMonth > 11) {
+    userMonth = 0;
+    userYear++;
+  }
+  addMonthYearCurr(userMonth, userYear);
+  setMonth(userMonth);
+  setYear();
+  updateCalendar(userMonth);
+});
+
+const toggleVisibility = (element, isOpen) => {
+  if (isOpen) {
+    element.classList.add("visible");
+  } else {
+    element.classList.remove("visible");
+  }
+};
+
+monthDownBtn.addEventListener("click", () => {
+  const isOpen = monthList.classList.contains("visible");
+  toggleVisibility(monthList, !isOpen);
+});
+
+yearDownBtn.addEventListener("click", () => {
+  const isOpen = yearList.classList.contains("visible");
+  toggleVisibility(yearList, !isOpen);
+});

Front-end-Projects/Basic/Calendar-App/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calender</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="utility.css">
+    <link rel="stylesheet" href="hover.css">
+
+</head>
+
+<body>
+
+    <main class="main-1">
+        <div class="cont flex">
+            <div class="left flex ">
+                <div class="date">
+                </div>
+                <div class="day">
+                </div>
+                <div class="today1">
+                </div>
+            </div>
+            <div class="right flex">
+                <div class="calen flex  ">
+
+                    <div class="nav-calen flex">
+                        <div class="left-ico">
+                            <img src="IMG/left.svg" alt="">
+
+                        </div>
+                        <div class="month-year flex">
+                            <div class="month-down flex">
+                                <div class="month">
+                                </div>
+                                <img src="IMG/down-arrow.svg" alt="">
+                            </div>
+                            <div class="year-down flex">
+                                <div class="year">
+                                </div>
+                                <img src="IMG/down-arrow.svg" alt="">
+                            </div>
+                        </div>
+                        <div class="right-ico">
+                            <img src="IMG/right.svg" alt="">
+                        </div>
+
+                        <div class="month-list">
+
+                        </div>
+                        <div class="year-list ">
+
+                        </div>
+                    </div>
+                    <div class="week-days">
+                        <ul class="week-days-list ">
+                            <li>Sun</li>
+                            <li>Mon</li>
+                            <li>Tue</li>
+                            <li>Wed</li>
+                            <li>Thur</li>
+                            <li>Fri</li>
+                            <li>Sat</li>
+                        </ul>
+                    </div>
+                    <div class="days">
+
+                        <ul>
+
+                        </ul>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script src="app.js"></script>
+</body>
+
+</html>