I am completely new to programming/web development.
What I am trying to do: I am trying to write JavaScript that will take the date from a webpage or an online spreadsheet and change the color of the text or cell background. The color change will be based on if the date taken from the HTML element or online spreadsheet is within 14 or 30 days from today's date.
Here is a sample of html elements I would like to work on. I put the dates in various formats to try and work with them.
The Javascript I have written so far I am posting here because I can get the elements to change color but I don't think the change is actually based on the number of days and I am not able to compare a the number of days I want.
const now = new Date().toDateString();
const date1 = document.getElementById('test1').innerText;
for (let i = 0; i <= test.length; i++) {
i += test[i];
if (date1 <= now)
console.log('safe');
if (date1 >= now)
document.getElementsByClassName('test')[0].style.color = 'purple';
};<div class='test'>
<p id="test1">February 22 2022</p>
<br>
<p id="test">17/2/2022</p>
<br>
<p id="test">17 3 2022</p>
<br>
<p id="test">17 4 2022</p>
<br>
</div>dd/mm/yyyy, dd mm yyyy, Mmm(...) dd yyyyconst months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
const now = new Date();
document.querySelectorAll('.test p').forEach(p => {
const dString = p.textContent;
let [date, month, year] = dString.split(/[ \/]/)
const textMonth = months.indexOf(date.slice(0, 3))
if (textMonth != -1) { // we found a month name
date = month
month = textMonth
} else month -= 1;
const d = new Date(year, month, date)
console.log(d, d <= now)
p.classList.toggle("safe", !isNaN(d) && d <= now)
p.classList.toggle("unknown", isNaN(d))
p.classList.toggle("unsafe", !isNaN(d) && d > now)
}).safe {
color: green;
}
.unsafe {
color: purple;
}
.unknown {
color: red;
}<div class='test'>
<p>February 22 2022</p>
<br>
<p>17/1/2022</p>
<br>
<p>17/2/2022</p>
<br>
<p>17 3 2022</p>
<br>
<p>17 4 2022</p>
<br>
<p>17 4 2025</p>
<br>
</div>Rather than converting them to strings to can use the date objects directly for comparison and the Date constructor can take a string as an input and make an object out of it.
Try something like this:
const now = new Date();
const dates = document.getElementsByTagName('p');
for (d of dates) {
let dateString = d.innerText;
let dateObj = new Date(dateString);
if (dateObj < now)
console.log(`${dateObj} is older`);
else
console.log(`${dateObj} is today or newer`);
};<div class="test">
<p>February 22 2022</p>
<br>
<p>2/22/2022</p>
<br>
<p>2021 2 17</p>
<br>
</div>Edit: Thanks for the idea abt snippets! Did not know much abt that feature. Also found out JS does not understand DD/MM/YYYY, where MM is 2 or 02 :(
Also updated the code a bit with other suggestions here and a hopefully more understandable example.
If you are using any single-page application then please install the moment.js library (npm I moment) or if you are using HTML javascript then please add moment.js CDN
The below code is just a sample of your logic problem only
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="Reset">
<button>Check date is under 30 days</button>
</div>
<script>
$(document).ready(function () {
$("#Reset").click(function () {
/* $.get("https://jsonplaceholder.typicode.com/todos", function (data) {
console.log(data);
alert("Load was performed.");
}) */
let curretDate = new Date();
let dateToCheck = new Date("01/12/2022");
let date_of_30_subtract = moment(curretDate).subtract(30, 'days');
console.log(moment(dateToCheck).isBetween(date_of_30_subtract,curretDate ))
});
});
</script>
</body>
</html>You can set before which date you have to check 14 or 30 days. Thant will subtract those days and get the date after subtraction.