periods calculator 2

:root { --dark-body: #FF00FF; --dark-main: #FF00FF; --dark-second: #79788c; --dark-hover: #323048; --dark-text: #f8fbff; --light-body: #f3f8fe; --light-main: #fdfdfd; --light-second: #c3c2c8; --light-hover: #edf0f5; --light-text: #151426; --blue: #0000ff; --white: #fff; --per: #0000ff; --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; --font-family: 'Merriweather', serif; --font-inter-reg: 'Inter', sans-serif; } .dark { --bg-body: var(--dark-body); --bg-main: var(--dark-main); --bg-second: var(--dark-second); --color-hover: var(--dark-hover); --color-txt: var(--dark-text); } #dark-2{ max-width: 90%; } .light { --bg-body: var(--light-body); --bg-main: var(--light-main); --bg-second: var(--light-second); --color-hover: var(--light-hover); --color-txt: var(--light-text); } * { padding: 0; margin: 0; box-sizing: border-box; } /* body { display: flex; place-items: center; font-family: var(--font-family); background-color: var(--bg-body); justify-content: space-around; } */ .calendar_container { /* display: flex; */ justify-content: space-around; font-family: var(--font-family); background-color: var(--bg-body); justify-content: space-around; max-width: 1040px; margin: 0 auto; /* width: 73vw; */ /* height: 88vh; */ font-size: 14px; padding: 40px 0; } .light, .rhs { font-family: var(--font-family); flex: 1; } .rhs { min-width: 55%; /* padding: 40px 0 40px 40px; */ display: flex; align-items: center; } .light{ width: 100%; display: flex; justify-content: space-evenly; } .calendar { /* height: max-content; */ /* width: max-content; */ background-color: var(--bg-main); /* border-radius: 30px; */ padding: 20px; position: relative; overflow: hidden; /* transform: scale(1.25); */ } .light .calendar { height: 100%; box-shadow: var(--shadow); } .calendar-header { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 600; color: var(--color-txt); padding: 10px; margin: 0 auto; } .label { font-size: 18px; font-weight: 600; color: var(--color-txt); padding: 10px; margin-top: 5px; margin-bottom: 5px; } .calendar-header-d { text-align: center; /* display; */ /* justify-content: c; */ align-items: center; font-size: 18px; font-weight: 600; color: var(--color-txt); padding: 30px; } .result { text-align: center; font-size: 18px; font-weight: 600; color: #FF82B5; padding: 19px; } .sel-date-d{ background: var(--dark-hover); color: var(--dark-text); border-radius: 50%; } .p-date{ background: var(--per); color: var(--dark-text); border-radius: 50%; } .calendarbody{ width: 100%; display: flex; flex-direction: column; padding: 32px; text-align: center; height: 100%; justify-content: center; } .calendar-body { padding: 10px; } .calendar-week-day { height: 39px; display: grid; grid-template-columns: repeat(7, 1fr); row-gap:3px; font-weight: 600; } .calendar-week-day div { display: grid; place-items: center; } .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); /* gap: 2px; */ row-gap:3px; color: var(--color-txt); } .calendar-days div { width: 100%; position: relative; /* width: 39px; */ /* height: 39px; */ /* padding: 5px; */ position: relative; cursor: pointer; animation: to-top 1s forwards; /* border-radius: 50%; */ position: relative; width: 100%; padding-bottom: 100%; } .calendar-days div span { position: absolute; } .calendar-days div b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .select2-container--open .select2-dropdown{ top:25px; } /* .calendar-days div:hover span { transition: width 0.2s ease-in-out, height 0.2s ease-in-out; } */ .calendar-days div span:nth-child(2), .calendar-days div span:nth-child(4) { width: 2px; height: 0; background-color: var(--color-txt); } /* .calendar-days div:hover span:nth-child(2), .calendar-days div:hover span:nth-child(4) { height: 100%; } */ .calendar-days div span:nth-child(2) { bottom: 0; left: 0; } .calendar-days div span:nth-child(4) { top: 0; right: 0; } .calendar-days div span:nth-child(3), .calendar-days div span:nth-child(5) { width: 0; height: 2px; background-color: var(--color-txt); } /* .calendar-days div:hover span:nth-child(3), .calendar-days div:hover span:nth-child(5) { width: 100%; } */ .calendar-days div span:nth-child(3) { top: 0; left: 0; } .calendar-days div span:nth-child(5) { bottom: 0; right: 0; } /* .calendar-days div:hover span:nth-child(3) { transition-delay: 0.2s; } .calendar-days div:hover span:nth-child(4) { transition-delay: 0.4s; } .calendar-days div:hover span:nth-child(5) { transition-delay: 0.6s; } */ element.style { } .calendar-days div.curr-date span { display: none; } .calendar-days div span { position: absolute; } .dot { display: block !important; width: 4px; height: 4px; background: red; position: absolute; right: 22%; border-radius: 50%; bottom: 32%; } .highlighted-date{ background-color: #FF82B5 !important; color: white !important; } .calendar-days div.curr-date span { display: none; } .calendar-days div.sel-date, .calendar-days div.sel-date:hover { background-color: var(--white); color: var(--dark-body) ; /* border-radius: 50%; */ } .sel-date-first{ border-radius: 50% 0 0 50%; } .sel-date-last { border-radius: 0 50% 50% 0; } .calendar-days div.sel-date span { display: none; } .reset{ color: var(--white); width: 100%; text-align: center; cursor: pointer; padding-top: 14px; margin-bottom: -10px; } .select2.select2-container.select2-container--default{ width: 307px !important; height: 62px; border: 0.5px solid #FF00FF; border-radius: 10px; color: #FF00FF; font-weight: 900; padding: 17px 24px; } .select2-container--default .select2-selection--single{ border: none !important;; } .select2-container--default .select2-selection--single span{ color: #FF00FF !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 19px !important; right: 18px !important; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ border-color: transparent transparent #FF00FF transparent !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color: #FF00FF transparent transparent transparent !important; } .month-picker { padding: 5px 10px; border-radius: 10px; cursor: pointer; } .month-picker:hover { background-color: var(--color-hover); } .year-picker { display: flex; align-items: center; } .year-change { height: 40px; width: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0 10px; cursor: pointer; font-family: cursive; } .month-change { height: 40px; width: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0 10px; cursor: pointer; font-family: cursive; } .year-change:hover { background-color: var(--color-hover); } .calendar-footer { padding: 10px; display: flex; justify-content: flex-end; align-items: center; } .toggle { display: flex; } .toggle span { margin-right: 10px; color: var(--color-txt); } .dark-mode-switch { position: relative; width: 48px; height: 25px; border-radius: 14px; background-color: var(--bg-second); cursor: pointer; } .dark-mode-switch-ident { width: 21px; height: 21px; border-radius: 50%; background-color: var(--bg-main); position: absolute; top: 2px; left: 2px; transition: left 0.2s ease-in-out; } .dark .dark-mode-switch .dark-mode-switch-ident { top: 2px; left: calc(2px + 50%); } .month-list { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--bg-main); padding: 20px; grid-template-columns: repeat(3, auto); gap: 5px; display: grid; transform: scale(1.5); visibility: hidden; pointer-events: none; } .month-list.show { transform: scale(1); visibility: visible; pointer-events: visible; transition: all 0.2s ease-in-out; } .month-list > div { display: grid; place-items: center; } .month-list > div > div { width: 100%; padding: 5px 20px; border-radius: 10px; text-align: center; cursor: pointer; color: var(--color-txt); } /* .month-list > div > div:hover { background-color: var(--color-hover); } */ @keyframes to-top { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .calendar-body-d{ color: var(--color-txt); padding: 10px; } .secondar_text{ color: var(--bg-second); padding: 10px; } .dark { height: 100%; width: 100%; display: flex; background-color: var(--bg-main); } div#calendar_header { height: 100%; display: flex; align-items: center; justify-content: space-evenly; margin: 0 auto; } .res{ width: 29% !important; } div#dark { max-width: 90%; } .main_head{ padding: 4px !important; } .calendar_full { border: 1px solid #ffffff; } .calendar_month{ border-bottom: 1px solid #FF82B5; } .calendar_month{ border-bottom: 1px solid #FF82B5; } @media screen and (max-width: 768px) { .calendar_container{ flex-direction: column; } .light,.rhs{ width: 90%; margin: 0 auto; } div#dark, #dark-2{ max-width: unset; } } .lhs_qs { display: flex; flex-direction: column; justify-content: center; }
Please select Cycle Length
Cycle Length 21 Days 22 Days 23 Days 24 Days 25 Days 26 Days 27 Days 28 Days 29 Days 30 Days 31 Days 32 Days 33 Days 34 Days 35 Days
How long your Period Lasts
1 Day 2 Days 3 Days 4 Days 5 Days 6 Days 7 Days 8 Days 9 Days 10 Days
Please select the first day of last period
< February >
< 2021 >
S
M
T
W
T
F
S
Calculate Your Periods

February 2021
S
M
T
W
T
F
S
February 2021
S
M
T
W
T
F
S
February 2021
S
M
T
W
T
F
S
let calendar = document.querySelector('.calendar'); let selected_date = ""; let cycle = $("#cycle").val(); let lasts = $("#lasts").val(); let calender_d = document.querySelectorAll(".res"); calender_d.forEach(c=>{ c.style.display = "none"; }) let arrows = document.querySelectorAll(".arrows"); arrows.forEach(c=>{ c.style.display = "none"; }) let calender_title = document.getElementById("calendar_header"); $('select').select2({ minimumResultsForSearch: Infinity }); const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] isLeapYear = (year) => { return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 ===0) } getFebDays = (year) => { return isLeapYear(year) ? 29 : 28 } let selected_dates_d = []; let period_days = []; // Light Mode Calender let month_list = calendar.querySelector('.month-list') month_names.forEach((e, index) => { let month = document.createElement('div') month.innerHTML = `
${e}
` month.querySelector('div').onclick = () => { month_list.classList.remove('show') curr_month.value = index generateCalendar(index, curr_year.value) } month_list.appendChild(month) }) let month_picker = calendar.querySelector('#month-picker') month_picker.onclick = () => { month_list.classList.add('show') } generateCalendar = (month, year) => { let calendar_days = calendar.querySelector('.calendar-days') let calendar_header_year = calendar.querySelector('#year') let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] calendar_days.innerHTML = '' let currDate = new Date() if (!month && month!==0) month = currDate.getMonth() if (!year) year = currDate.getFullYear() let curr_month = `${month_names[month]}` month_picker.innerHTML = curr_month calendar_header_year.innerHTML = year // get first day of month let first_day = new Date(year, month, 1) for (let i = 0; i { cycle = $("#cycle").val(); lasts = $("#lasts").val(); if(cycle==""){ alert("Please Select Cycle Length"); return; } calender_title.style.display = "none"; calender_d.forEach(c=>{ c.style.display = "block"; }) arrows.forEach(c=>{ c.style.display = "flex"; }) var elems = calendar.querySelectorAll(".sel-date-d"); [].forEach.call(elems, function(el) { el.classList.remove("sel-date-d"); }); day.classList.add('sel-date-d'); selected_date = new Date(e.target.innerText+" "+curr_month+" "+curr_year.value); calculate(selected_date,month,year); }); if (i >= first_day.getDay()) { day.classList.add('calendar-day-hover') day.innerHTML = `${i - first_day.getDay() + 1}` day.innerHTML += ` ` if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) { day.classList.add('curr-date') day.innerHTML = `${i - first_day.getDay() + 1}` } } calendar_days.appendChild(day) } } let currDate = new Date() let curr_month = {value: currDate.getMonth()} let curr_year = {value: currDate.getFullYear()} generateCalendar(curr_month.value, curr_year.value) document.querySelector('#prev-year').onclick = () => { --curr_year.value generateCalendar(curr_month.value, curr_year.value) } document.querySelector('#next-year').onclick = () => { ++curr_year.value generateCalendar(curr_month.value, curr_year.value) } document.querySelector('#prev-month').onclick = () => { if(curr_month.value == 0) { --curr_year.value; curr_month.value = 11; } else --curr_month.value; generateCalendar(curr_month.value, curr_year.value) } document.querySelector('#next-month').onclick = () => { if(curr_month.value == 11) { ++curr_year.value; curr_month.value = 0; } else ++curr_month.value; generateCalendar(curr_month.value, curr_year.value) } function calculate(date,month,year){ if(cycle==""){ alert("Please Select Cycle Length"); return; } if(lasts==""){ alert("Please Select Cycle Length"); return; } let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] let curr_date = date.getDate(); selected_dates_d = []; period_days = []; console.log({lasts}); let flag = false; for(j=0; j<16;j++){ for(let i = 0; i< parseInt(lasts); i++){ let newdate = curr_date+i; // console.log(i); // if(newdatedays_of_month[month]){ // newdate = newdate - days_of_month[month]; // period_days.push({date:newdate ,month:month+1,year}); // } // else{ // curr_date = curr_date+parseInt(cycle); if(newdate>days_of_month[month]){ newdate = newdate - days_of_month[month]; curr_date = curr_date - days_of_month[month]; month++; } if(month>11){ month = month-12; if(!flag) year++; flag = true; } period_days.push({date:newdate ,month,year}); // } } curr_date = curr_date+parseInt(cycle); if(curr_date>days_of_month[month]){ curr_date = curr_date - days_of_month[month]; month++; } console.log(period_days); } for(let i = 0; i< 5; i++){ let newdate = curr_date+i+parseInt(cycle)+5-22; if(newdatedays_of_month[month]){ newdate = newdate - days_of_month[month]; selected_dates_d.push({date:newdate ,month:month+1,year}); } else{ selected_dates_d.push({date:newdate ,month,year}); } } // let result = document.getElementById("result"); // result.innerHTML = month_names[selected_dates_d[0].month] + " " + selected_dates_d[0].date + " - " + month_names[selected_dates_d[4].month] + " " + selected_dates_d[4].date gc("dark",period_days[0].month,period_days[0].year); gc("dark_1",period_days[0].month+1,period_days[0].year); gc("dark_2",period_days[0].month+2,period_days[0].year); $(".next").on("click",()=>{ console.log("something") gc("dark",period_days[0].month+3,period_days[0].year); gc("dark_1",period_days[0].month+4,period_days[0].year); gc("dark_2",period_days[0].month+5,period_days[0].year); }) $(".prev").on("click",()=>{ gc("dark",period_days[0].month,period_days[0].year); gc("dark_1",period_days[0].month+1,period_days[0].year); gc("dark_2",period_days[0].month+2,period_days[0].year); }) } function gc(id,month,year){ if(month>11){ month= month-12; year++; } cycle = $("#cycle").val(); lasts = $("#lasts").val(); const calendar = document.getElementById(id); let calendar_days = calendar.querySelector('.calendar-days') let calendar_header_year = calendar.querySelector('.year') let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] calendar_days.innerHTML = '' let month_picker_d = calendar.querySelector('.month-picker'); let currDate = new Date() if (!month && month!==0) month = currDate.getMonth() if (!year) year = currDate.getFullYear() let curr_month_d = `${month_names[month]}` month_picker_d.innerHTML = curr_month_d calendar_header_year.innerHTML = year // get first day of month let first_day = new Date(year, month, 1) for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) { let curr_day = i - first_day.getDay() + 1; let day = document.createElement('div'); // if(curr_day25){ // if(i>=14) // calendar_days.appendChild(day) // continue; // } period_days.forEach((date,index) => { if(date.date == curr_day && date.month == month && date.year == year){ day.classList.add('p-date'); } }); // selected_dates_d.forEach((date,index) => { // if(date.date == curr_day && date.month == month && date.year == year){ // day.classList.add('sel-date'); // if(index==0){ // day.classList.add('sel-date-first') // } // if(index==2){ // day.classList.add('highlighted-date') // } // if(index==selected_dates_d.length-1){ // day.classList.add('sel-date-last') // } // } // }); if (i >= first_day.getDay()) { day.classList.add('calendar-day-hover') day.innerHTML = `${i - first_day.getDay() + 1}` day.innerHTML += ` ` if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) { day.classList.add('curr-date') day.innerHTML = `${i - first_day.getDay() + 1}` } } calendar_days.appendChild(day) } }
Scroll to top