SalaryAnalysisBookmarkLet.js

javascript: (function () {  const requiredUrl =    "https://office.topofstacksoftware.com/timetrack/user-calendar.php";  if (!window.location.href.startsWith(requiredUrl)) {    alert(`This is not the real Calender URL.Please go here: ${requiredUrl}`);    return;  }  const datalist = document.querySelectorAll(".fc-event");  function getMyMonthlyHours(monthlyHours) {    let totalHours = 0;    let totalMins = 0;    datalist.forEach((box) => {      const timestamp = box.querySelector(".fc-event-title").innerText;      const [hour, mins] = timestamp.split(":");      totalHours += parseInt(hour);      totalMins += parseInt(mins);    });    totalHours += parseInt(totalMins / 60);    totalMins = parseInt(totalMins % 60);    const timeLeft = Math.abs(      monthlyHours * 60 - (totalHours * 60 + totalMins)    );    return { timeLeft, totalHours, totalMins };  }  const getBox = ({ title, value }) => {    return `<div style="border-left: 5px solid #368ee0 !important; border: 1px solid rgba(128, 128, 128, 0.403); border-radius: 0 5px 5px 0; padding: 10px; display: flex; flex-direction: column; gap: 5px;"><span style="color: #368ee0; font-size: smaller">${title}</span><span style="font-size: 10px">${value}</span></div>%60;  };  function handleSubmit(event) {    event.preventDefault();    const result = document.querySelector("#result");    const monthYear = document.querySelector(".fc-header-title").innerText;    const salary = parseInt(document.getElementById("salary").value);    const workHours = parseInt(document.getElementById("workHour").value);    const { totalHours, totalMins, timeLeft } = getMyMonthlyHours(workHours);    const salaryGenerated =      (totalHours * (salary / workHours) +      totalMins * (salary / (workHours * 60))).toFixed(2);    const resultHtml = %60    ${getBox({      title: "Total Worked",      value: %60${datalist.length} Days%60,    })}    ${getBox({      title: "Total Hours Spent",      value: %60${totalHours} Hours ${totalMins} Mins%60,    })}    ${getBox({      title: totalHours >= workHours ? "Bonus Hours" : "Hours Left",      value:        totalHours >= workHours          ? %60${parseInt(timeLeft / 60)} Hours ${timeLeft % 60} Mins Bonus%60          : %60${parseInt(timeLeft / 60)} Hours ${timeLeft % 60} Mins Left%60,    })}    ${getBox({      title: "Salary Generated",      value: %60${salaryGenerated} BDT%60,    })}    ${getBox({      title: "Overtimes & Bonus",      value:        salaryGenerated > salary          ? %60${salaryGenerated - salary} BDT%60          : %60No Bonus Yet%60,    })}%60;    result.innerHTML = %60    <h4 style="text-align: center; color: #368ee0">${monthYear}</h4>        <div          style="            display: flex;            justify-content: space-between;            font-size: small;          "        >          <span>Total 25 Working Days (${workHours} Work Hours)</span>          <span id="salaryShow">Salary ${salary}</span>        </div>        <hr />        <div          style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px"        >${resultHtml}        </div>    %60;  }  let htmlForm = %60<div style="border-radius: 10px; padding: 10px; position: fixed; bottom: 10px; right: 10px; z-index: 999; background-color: #fff; border: 1px solid rgba(96, 96, 96, 0.342); font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; max-width: 400px; width: 100%;"><div><form id="salaryForm"><label for="salary" style="font-size: x-small">Your Salary</label><input type="number" min="5000" required name="salary" placeholder="Enter your current Salary" style="padding: 20px 10px; width: 100%; box-sizing: border-box; margin: 3px 0;" id="salary" /><label for="workHour" style="font-size: x-small">Monthly Work Hours</label><input type="number" min="0" required placeholder="Enter your work hours" style="padding: 20px 10px; width: 100%; box-sizing: border-box; margin: 3px 0;" name="workHour" id="workHour" value="200" /><button type="submit" style="margin-top: 10px; padding:10px; background-color: #368ee0; color: white; border: none; width: 100%;">Calculate</button></form></div><div id="result"></div></div>%60;  document.body.insertAdjacentHTML("beforeend", htmlForm);  document    .getElementById("salaryForm")    .addEventListener("submit", handleSubmit);})();