Develop Reference

getHours(), show and hide

I'm currently working on my first website and have run into an issue that I just can't pass. I am using JavaScript to show and hide elements in my HTML (sounds easy enough right?) But it's not working the way it should. Even when I have an alert on the page that shows the number returned by variable 'hours', there is some issue when showing the correct information.
var today = new Date();
var hours = today.getHours();
alert(hours)
let day = document.querySelector('.day')
let night = document.querySelector('.night')
if (hours > 9 || hours < 12) {
day.style.display = "block";
night.style.display = "none";
}
else {
day.style.display = "none";
night.style.display = "block";
let blurred = document.querySelector('h1')
blurred.classList.add('blur');
}
Not to mention that eventually it should work with getUTCHours, however thought I would try this way first.

I think you specified a wrong if statement since an hour is always greater than 9 or less than 12.
Probably you meant something like if (hours >= 9 && hours <= 12)?

Javascript file suddenly stopped working with no changes

So I got help on this code earlier and it was working before perfectly. However, upon opening VS Code again the code no longer responds with zero errors.
var runned = false;
var d = new Date();
if (d.getHours(5) == 5 && !runned) {
alert("Hello");
runned = true;
}
The code is simply supposed to get the current hour and return an alert.
I verified that the js file was connected to the HTML file with some other code and it worked.

var runned = false;
var d = new Date();
if (d.getHours() == 5 && !runned) {
alert("Hello");
runned = true;
}
getHours() doesn't take parameters
getHours uses the 24-hour clock model, i.e 0-23 so 5 is 5 am but 17 is 5pm
d.getHours() as used above without an argument makes it work in all use case scenarios

How to properly add an image through JavaScript to a webpage

I am following along in a tutorial that creates a dynamic webpage. The webpage is supposed to show the time and an image that updates according to whatever hour it is. However, the way the instructor is inserting his image is new to me and I am not sure where I am messing up but no image at all is being displayed on the page.
let today = new Date(),
hour = today.getHours();
if(hour < 12) {
// Morning
document.body.style.backgroundImage = "url('../images/Morning.jpg')";
greeting.textContent = 'Good Morning';
} else if(hour < 18) {
// Afternoon
document.body.style.backgroundImage = "url('../images/Evening.jpg')";
greeting.textContent = 'Good Afternoon';
} else {
// Evening
document.body.style.backgroundImage = "url('../images/Night.jpg')";
greeting.textContent = 'Good Evening';
}
}```
I get no error messages with the following function after calling it. However, no image is being displayed.

url('../images/Morning.jpg')";
has to be a valid URL. Let's say your HTML file was www.example.com/foo/index.html. There would have to be a www.example.com/images/Morning.jpg file, or else you won't see anything.
This is especially true if your URL before was "Morning/jpg", as that's not a valid URL (well, technically it is, but it almost certainly isn't valid for your case).

How to detect 'current week' for render days conditionally?

I discovered the dayRender function today (in the v4.0.0beta4 of fullCalendar.io).
My goal is render the previous weeks with gray background, the current week with white background e the future weeks with a third backgroundcolor.
Is there something in fullcalendar.io objects that can help me?
Using
dayRender: function(dayRenderInfo) {
console.log( $(dayRenderInfo.el).data('date') );
return dayRenderInfo.el;
}
I know that dayRenderInfo contains el, so using jQuery I can read $(el).data('date') to retrieve the date of the rendered day 'cell'.
But then, in js, how to check it, for example '2019-03-20' is the current week or past or future ?
I posted the question using fullcalendar tag because I hope there is an helper proprerty or similar, otherwiser, anyway, a plain js solution is very appreciated.

My solution is use the dayRender function of fullCalendar.io (actually #v4.0.1)
The function receive an HTML element already rendered. But you can intercept and manipulate it.
I decided to append an attribute, data-date, to the element so I can check it at runtime.
Note: I'm using jQuery.
dayRender: function(dayRenderInfo) {
// Make a Date object from current rendered element
const day = dayRenderInfo.el;
const date_str_of_this_day = $(day).data('date');
const this_day = new Date(date_str_of_this_day);
const today_string = new Date().toISOString().slice(0, 10);
// 0 (Sunday) ... 6 (Saturday)
let number_of_weekday = this_day.getDay();
if (number_of_weekday ==0) {
// I shift to adapt to italian week
// 1 (Monday) ... 7 (Sunday)
number_of_weekday = 7;
}
// From today's date object, I can find monday
let first = this_day.getDate() - number_of_weekday + 1;
const monday_date = new Date(this_day.setDate(first));
const monday_string = monday_date.toISOString().slice(0, 10);
// From monday's date object I can find sunday
let last = monday_date.getDate() + 6;
const sunday_date = new Date(this_day.setDate(last));
const sunday_string = sunday_date.toISOString().slice(0, 10);
if (sunday_string < today ) {
// the current day being renderer is AFTER current week
dayRenderInfo.el.style.backgroundColor = '#ededed';
} else if (today < monday_string ) {
// the current day being renderer is BEFORE current week
dayRenderInfo.el.style.backgroundColor = '#f9e9d7';
} else {
// the current day being renderer is PART OF curremt week
dayRenderInfo.el.style.backgroundColor = 'white';
}
// return altered html rendered
return dayRenderInfo.el;
},

Timezone specific hide/show element script

Hi first time posting here so bear with me.
I've got a live stream that I want to show on Sundays between 6am and 2pm (CEST - Central European Summer Time)
I've got the first part down but how do I make it timezone specific? Make sense?
$(document).ready(function() {
var d = new Date();
var n = d.getDay();
var hour = d.getHours();
if(n == 0 && hour >= 6 && hour < 14)
{
$(".stream").show();
} else {
$(".stream").hide();
}
} );
PS I understand this doesn't hide it completely outside of those times and that's fine. I'm just looking for a solution that works on the client side.