Trying to get the rest of the month in days in form of number

July 19, 2022

I’m trying to find a solution on how i can get the number of the rest of the days
till the end of the month, for exsample: today is the 19 so we have 12 days left till end of the month. and need to store it in variable for calcutation

Here is code

JavaScript

// Get a number from user that represent his montly budget for the month
// add the value of facebook and google (facebook + google) save in variable name budgetSpend
// make a calcultation: monthBudget - budgetSpend = save in var = budgetLeft (budgetLeft/daysTillEndOfMonth)


let btnAnswer = document.querySelector('.btn_answer')
let thisDay = new Date();
let endMonth = new Date();
let currentDay = thisDay.getDate();


console.log(currentDay);


function newResult() {

    let inputFacebook = document.querySelector('.input_facebook').value;
    let inputGoogle = document.querySelector('.input_google').value;
    let inputMonthBudget = document.querySelector('.input_monthBudget').value;

    let budgetSpend = Number(inputFacebook + inputGoogle);
    let budgetLeft = Number(inputMonthBudget - budgetSpend);
    console.log(budgetLeft);

    // with the budgetLeft variable now need to make calc: budgetLeft/daysLeftTillEndOfMonth


}

btnAnswer.addEventListener('click', newResult());

This is the HTML

<body>
    <div class="div_main">

        <h1>Digital Campaign Budget Helper V1.00</h1>
        <h2>How much budget left to spend for each day?</h2>
        <label for="">Facebook Spend:</label>
        <input type="text" name="" class="input_facebook" id="">
        <label for="">Google Spend:</label>
        <input type="text" name="" class="input_google" id="">
        
    </div>
    <div class="div_second">
        
        <label for="">Monthly Budget: </label>
        <input type="text" class="input_monthBudget">

    </div>

    <div class="div_result">
        <h2>Your maxium daily spend till rest of the month is:</h2>
        <button class="btn_answer"> Reavel Answer</button>
        <span class="span_result"></span>

    </div>

    
    <script src="script.js"></script>

>Solution :

You can create a new Date having the same year and month of today but passing 0 as day so that it will be the last day of the month.

Here’s a demo to show how to calculate the day remaining to the end of the month from today.

As pointed out in the comments here, the result given was missing 1 unit because the Date() constructor needed a month index being 1-based while getMonth() returned an index 0-based. I was confused because reading at the mdn documentation it clearly states that monthIndex in Date() constructor is still 0-based.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

By the way it was easy to find out that as today, the month is July and clearly 12 days are missing (not 11). So I changed the code to add 1 to the month of the date passed to the function.

function howManyDaysToEndOfMonth(date){  
  const dayOfMonth = date.getDate();
  const fooDate = new Date(date.getYear(), date.getMonth()+1, 0);  
  const lastDayOfMonth = fooDate.getDate();  
  
  const daysRemainingToEndOfMonth = lastDayOfMonth - dayOfMonth;  
  return daysRemainingToEndOfMonth;
}

const today = new Date();
const daysRemainingToEndOfMonth = howManyDaysToEndOfMonth(today);

console.log(daysRemainingToEndOfMonth);