I'm working on some code to create lists based on the time of the day... this would be a really easy thing to just add in HTML, but I'm trying this method for some future-proofing, and to see if I can get it to work. I've looked at several pages on w3, MDN, and right here on StackOverflow, and this is what I've put together, but I can't seem to get it to run properly.
I should also say, I'm really new to programming and this is my first project. I've been slowly building it as I learn new concepts as a way to put them into practice.
Thanks for any help you can offer!
morningMedsList = ['med1', 'med2', 'med3', 'med4', 'med5'];
eveningMedsList = ['med1', 'med2', 'med3', 'med4', 'med5'];
const hour = new Date().getHours();
function listMeds() {
if (hour >= 19 && hour <= 22) {
let eveningMeds = document.getElementById('evening-meds-list');
eveMed = document.createElement('li');
eveningMedsList.forEach(function (med, index) {
clone = eveMed.cloneNode();
clone.textContent = (index +1) + ': ' + med;
eveningMeds.appendChild(clone);
});
}
}
listMeds();<div id="reminders-pics-container">
<div id="pics-box-morning">
<p>Morning meds pic</p>
<ul id="morning-meds-list">
</ul>
</div>
<div id="pics-box-lunch">
<p>Lunch meds pic</p>
</div>
<div id="pics-box-dinner">
<p>Dinner meds pic</p>
</div>
<div id="pics-box-evening">
<p> Evening meds pic</p>
<ul id="evening-meds-list">
</ul>
</div>
<div id="pics-box-blank">
<p>No meds</p>
</div>
</div>