diff --git a/Soorjyakant1/Readme.md b/Soorjyakant1/Readme.md new file mode 100644 index 0000000..9e56be1 --- /dev/null +++ b/Soorjyakant1/Readme.md @@ -0,0 +1 @@ +##issue solved diff --git a/Soorjyakant1/index.html b/Soorjyakant1/index.html new file mode 100644 index 0000000..423b4a4 --- /dev/null +++ b/Soorjyakant1/index.html @@ -0,0 +1,37 @@ + + + + + + Dynamic Calendar JavaScript | CodingNepal + + + + + + + +
+
+

+
+ chevron_left + chevron_right +
+
+
+ + +
+
+ + + \ No newline at end of file diff --git a/Soorjyakant1/script.js b/Soorjyakant1/script.js new file mode 100644 index 0000000..2d53340 --- /dev/null +++ b/Soorjyakant1/script.js @@ -0,0 +1,55 @@ +const daysTag = document.querySelector(".days"), +currentDate = document.querySelector(".current-date"), +prevNextIcon = document.querySelectorAll(".icons span"); + +// getting new date, current year and month +let date = new Date(), +currYear = date.getFullYear(), +currMonth = date.getMonth(); + +// storing full name of all months in array +const months = ["January", "February", "March", "April", "May", "June", "July", + "August", "September", "October", "November", "December"]; + +const renderCalendar = () => { + let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(), // getting first day of month + lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(), // getting last date of month + lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(), // getting last day of month + lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate(); // getting last date of previous month + let liTag = ""; + + for (let i = firstDayofMonth; i > 0; i--) { // creating li of previous month last days + liTag += `
  • ${lastDateofLastMonth - i + 1}
    • `; + } + + for (let i = 1; i <= lastDateofMonth; i++) { // creating li of all days of current month + // adding active class to li if the current day, month, and year matched + let isToday = i === date.getDate() && currMonth === new Date().getMonth() + && currYear === new Date().getFullYear() ? "active" : ""; + liTag += `
  • ${i}
    • `; + } + + for (let i = lastDayofMonth; i < 6; i++) { // creating li of next month first days + liTag += `
  • ${i - lastDayofMonth + 1}
    • ` + } + currentDate.innerText = `${months[currMonth]} ${currYear}`; // passing current mon and yr as currentDate text + daysTag.innerHTML = liTag; +} +renderCalendar(); + +prevNextIcon.forEach(icon => { // getting prev and next icons + icon.addEventListener("click", () => { // adding click event on both icons + // if clicked icon is previous icon then decrement current month by 1 else increment it by 1 + currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1; + + if(currMonth < 0 || currMonth > 11) { // if current month is less than 0 or greater than 11 + // creating a new date of current year & month and pass it as date value + date = new Date(currYear, currMonth, new Date().getDate()); + currYear = date.getFullYear(); // updating current year with new date year + currMonth = date.getMonth(); // updating current month with new date month + } else { + date = new Date(); // pass the current date as date value + } + renderCalendar(); // calling renderCalendar function + }); +}); \ No newline at end of file diff --git a/Soorjyakant1/style.css b/Soorjyakant1/style.css new file mode 100644 index 0000000..ebd4093 --- /dev/null +++ b/Soorjyakant1/style.css @@ -0,0 +1,103 @@ +/* Import Google font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + align-items: center; + padding: 0 10px; + justify-content: center; + min-height: 100vh; + background: #9B59B6; +} +.wrapper{ + width: 450px; + background: #fff; + border-radius: 10px; + box-shadow: 0 15px 40px rgba(0,0,0,0.12); +} +.wrapper header{ + display: flex; + align-items: center; + padding: 25px 30px 10px; + justify-content: space-between; +} +header .icons{ + display: flex; +} +header .icons span{ + height: 38px; + width: 38px; + margin: 0 1px; + cursor: pointer; + color: #878787; + text-align: center; + line-height: 38px; + font-size: 1.9rem; + user-select: none; + border-radius: 50%; +} +.icons span:last-child{ + margin-right: -10px; +} +header .icons span:hover{ + background: #f2f2f2; +} +header .current-date{ + font-size: 1.45rem; + font-weight: 500; +} +.calendar{ + padding: 20px; +} +.calendar ul{ + display: flex; + flex-wrap: wrap; + list-style: none; + text-align: center; +} +.calendar .days{ + margin-bottom: 20px; +} +.calendar li{ + color: #333; + width: calc(100% / 7); + font-size: 1.07rem; +} +.calendar .weeks li{ + font-weight: 500; + cursor: default; +} +.calendar .days li{ + z-index: 1; + cursor: pointer; + position: relative; + margin-top: 30px; +} +.days li.inactive{ + color: #aaa; +} +.days li.active{ + color: #fff; +} +.days li::before{ + position: absolute; + content: ""; + left: 50%; + top: 50%; + height: 40px; + width: 40px; + z-index: -1; + border-radius: 50%; + transform: translate(-50%, -50%); +} +.days li.active::before{ + background: #9B59B6; +} +.days li:not(.active):hover::before{ + background: #f2f2f2; +} \ No newline at end of file diff --git a/Soorjyakanta/README.md b/Soorjyakanta/README.md new file mode 100644 index 0000000..014e7e3 --- /dev/null +++ b/Soorjyakanta/README.md @@ -0,0 +1 @@ +## Issue #1 solved diff --git a/Soorjyakanta/background.jpg b/Soorjyakanta/background.jpg new file mode 100644 index 0000000..8176a26 Binary files /dev/null and b/Soorjyakanta/background.jpg differ diff --git a/Soorjyakanta/index.css b/Soorjyakanta/index.css new file mode 100644 index 0000000..1d0b7d6 --- /dev/null +++ b/Soorjyakanta/index.css @@ -0,0 +1,123 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); +*{ +margin: 0; +padding: 0; +font-family: 'poppins',sans-serif; +} +section{ +display: flex; +justify-content: center; +align-items: center; +min-height: 100vh; +width: 100%; + + background: url('background.jpg')no-repeat; + background-position: center; + background-size: cover; +} +.form-box{ + position: relative; + width: 400px; + height: 450px; + background: transparent; + border-radius: 20px; + border: 2px solid rgba(255,255,255,0.5); + backdrop-filter: blur(15px); + display: flex; + justify-content: center; + align-items: center; +} +.h2{ + font-size: 2em; + color: #fff; + text-align: center; +} +.inputbox{ +position: relative; +top: 50%; +margin: 30px 0; +width: 310px; +border-bottom: 2px solid #fff; +} +.inputbox label{ +position: absolute; +top: 50%; +left: 5px; +transform: translateY(-s50%); +color: #fff; +font-size: 1em; +pointer-events: none; +transition: .5s; +} + +.inputbox input:focus ~ label, +.inputbox input:valid ~ label{ + top: -15px; +} +.inputbox input{ +width: 100%; +height: 50px; +background: transparent; +border: none; +outline: none; +font-size: 1em; +padding: 0 35px 0 5px; +color: #fff; +} + +.inputbox ion-icon{ + position: absolute; + right: 8px; + color: #fff; + font-size: 1.2em; + top: 20px; +} + +.forget{ + margin: -15px 0 15px; + font-size: .9em; + color: #fff; + display: flex; + justify-content: center; +} + +.forget label input{ + margin-right: 3px; +} + +.forget label a{ + color: #fff; + text-decoration: none; +} +.forget label a:hover{ + text-decoration: underline; +} + +button{ + width: 100%; + height: 40px; + border-radius: 40px; + background: #fff; + border: none; + outline: none; + cursor: pointer; + font-size: 1em; + font-weight: 600; +} + +.register{ + font-size: .9em; + color: #fff; + text-align: center; + margin: 25px 0 10px; +} + +.register p a{ + text-decoration: none; + color: #fff; + font-weight: 600; +} + +.register p a:hover{ + text-decoration: underline; +} \ No newline at end of file diff --git a/Soorjyakanta/index.html b/Soorjyakanta/index.html new file mode 100644 index 0000000..3319322 --- /dev/null +++ b/Soorjyakanta/index.html @@ -0,0 +1,38 @@ + + + + + TECH OFFICIAL LOGIN PAGE + + +
    +
    +
    +
    +

    Login

    +
    + + + +
    +
    + + + +
    +
    + + +
    + +
    +

    Don't have a accouont Register

    +
    +
    +
    +
    +
    + + + +