-
Notifications
You must be signed in to change notification settings - Fork 189
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ba71690
commit 1530bf6
Showing
10 changed files
with
719 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <h1 align='center'><b>💥 Calendar App 💥</b></h1> | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h3 align='center'>Tech Stack Used 🎮</h3> | ||
|
|
||
|
|
||
| <div align='center'> | ||
|
|
||
|  | ||
|  | ||
| <!--  --> | ||
|  | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :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 📸 | ||
|  | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <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 ❤️ by 🌟 this repository!</h3> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Binary file not shown.
Oops, something went wrong.