We Keep Coding

Advice needed: Is it possible to change file path at certain time of day to display a different content?

I do have a question. Would it be possible to change a GIF file path (GIF is hosted on a CDN) at certain times of the day so that I can replace the first GIF with a different one?

Well, simple just use JS Date object.
Gets the client local date.
<img id="img1" src="" />
<script>
var date = new Date();
var hour = date.getHours();
if(hour >=0 && hour < 12){
//current hour is between 00 to 11:59pm
document.getElementbyId("img1").src = "";
}else{
//current hour is between 12pm to 23:59pm
document.getElementbyId("img1").src = "";
}
</script>

Display nested data from Firebase in html using javascript?

please help me with my code. I tried display retrieved data in my html table using javascript, but nothing work. I am new in firebase, if it possible please anyone help me or give advice, I have already tried everything methods on stack (
The structure of my base looks like this,please check the image from the link below
/Notes/{Generated User Token}/{Generated Date}/{Generated Note ID}/Fields
My Html Code
<table style="width:100%" id="ex-table">
<tr id="tr">
<th>Name:</th>
</table>
Javascript
var database = firebase.database();
var uid = firebase.auth().uid; // Not working, How to get a path to Generated tokens?
var date = // How to get a path to "DateddMMyyyy" from a structure?
var notes = // How to get a path to "NoteXXXXXXX" from a structure?
database.ref().child('Notes' +token+ '/' +date+ '/' +notes+ '/' ).once('value').then(function(snapshot) {
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr>';
content += '<td>' + val.name + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
I do not know how to write a path to Generated Date "DateddMMyyyy" and Generated Note ID "NoteXXXXXXX"
I need only display end fields from structure. What should I edit in
my code?
Ps: For more details about Generated date, please check code from android studio "timeStamp = new SimpleDateFormat("ddMMyyyy").format(Calendar.getInstance().getTime());"

For getting the date formated id pass the input date to getDateId use it to construct the database.ref()
function getDateId(dt){
var date = new Date(dt);
var currentMonth = date.getMonth();
var currentDate = date.getDate();
if (currentMonth < 10) { currentMonth = '0' + currentMonth};
if (currentDate < 10) { currentMonth = '0' + currentDate};
return `Date${currentDate}${currentMonth}${date.getFullYear()}`
}
var inputDate = new Date();
var dateId = getDateId(inputDate);
console.log(dateId)

display an image in a web page using javascript arrays

I'm trying to automate my website by setting predetermined monthly featured videos.
I have JavaScript files already saved w/ the annual data for that particular year - e.g. choose_2017_video.js as well as 2018 & 2019 files. Each image URL text and description text I set in arrays but I can't seem to get them to display. Each array element corresponds to a month [0-11].
The getMonth() method will be the way of retrieving the data.
Somehow, I need to import the song info. into the HTML roughly like this:
<h2 align="center">Video of the month: javascript:song_info[mnth];</h2>
I also need to be able to import the corresponding image path which is saved in a parallel array (of filenames).
var song_info[12], img_URL[12], mnth = today().getMonth();
song_info[7] = "Newsboys - God's Not Dead"; // example data
img_URL[7] = "Newsboys-Gods_Not_Dead_video.JPG";
This site won't let me correctly describe how I'll display the img code using the img_URL element.
Can someone give me examples of how I can import the song information into the h2 code example and img src code?

This might be done a lot easier in an ASP script since I'm more familiar w/ BASIC. JS wasn't even conceived until after I had entered the workforce after a couple yrs. in college.
My intent is to declare new arrays and a pointer variable. The pointer is supposed to determine the month from the current date. One array holds the description of the song while the other holds the filename of the screenshot to be used to launch the YouTube URL in a different browser tab. If I wanted to embed the video, I would just use HTML5 code. It is called by a script src="JSfilename" from an HTML file.
Here is one of the JS files:
var song_info[12], img_URL[12], mnth = today().getMonth();
song_info[0] = "Sidewalk Prophets - Help Me Find It";
song_info[1] = "TobyMac with Kirk Franklin & Mandisa - Lose Your Soul";
song_info[2] = "MercyMe - Dear Younger Me";
song_info[3] = "Kari Jobe - I Am Not Alone";
song_info[4] = "Danny Gokey - Tell Your Heart to Beat Again";
song_info[5] = "Hawk Nelson - Drops In the Ocean";
song_info[6] = "Plumb - Exhale";
song_info[7] = "Newsboys - God's Not Dead";
song_info[8] = "Francesca Battistelli - Holy Spirit";
song_info[9] = "Brandon Heath - Give Me Your Eyes";
song_info[10] = "Matthew West - Strong Enough";
song_info[11] = "Jordan Feliz - The River";
img_URL[0] = "Sidewalk_Prophets-Help_Me_Find_It_video.png";
img_URL[1] = "TobyMac-LoseMySoul_video.png";
img_URL[2] = "MercyMe-DearYoungerMe_video.png";
img_URL[3] = "KariJobe-IAmNotAlone_video.png";
img_URL[4] = "DannyGokey-TellYourHeartToBeatAgain_video3.PNG";
img_URL[5] = "HawkNelson-DropsInTheOcean_video.PNG";
img_URL[6] = "Plumb-Exhale_video.PNG";
img_URL[7] = "Newsboys-Gods_Not_Dead_video.JPG";
img_URL[8] = "FrancescaBattistelli-HolySpirit_video.JPG";
img_URL[9] = "BrandonHeath-GiveMeYourEyes_video.JPG";
img_URL[10] = "Matthew_West-StrongEnough_video.JPG";
img_URL[11] = "JordanFeliz-TheRiver_video.PNG";

So to be clear, you want something like
<h2 align="center">Video of the month: {your_random_video_name_from_your_JSFile}</h2>
So why not just doing this :
<h2 align="center" id="video_name">Video of the month:</h2>
<img src="#" alt="" id="video_preview"/>
<script>
var today = new Date();
var song_info = new Array, img_URL = new Array, mnth = today.getMonth();
song_info[9] = "CHVRCHES - Leave A Trace"; // example data
img_URL[9] = "http://diymag.com/media/img/Artists/C/Chvrches/October-cover/_1500x1000_crop_center-center_75/chvrches-mike-massaro-diy-2015-05.jpg";
song_info[10] = "Newsboys - God's Not Dead"; // example data
img_URL[10] = "Newsboys-Gods_Not_Dead_video.JPG";
document.getElementById("video_name").insertAdjacentHTML('beforeend',song_info[mnth]);
var image = document.getElementById("video_preview");
image.src = img_URL[mnth];
</script>
Example JSFiddle

How do I integrate java script into html?

I would like to know how my code could be displayed on a webpage instead of displayed in alert boxes, how do I do this. I understand that id's ect are needed but I am a little confused of where to start. Any help would be good. Thankyou!
<!DOCTYPE html>
<html>
<script>
//Set of variables
var nameCheck = /^[a-zA-Z\s]+$/;
//eliminates anything not relevant
var numberCheck = /^[0-9\.]+$/;
//eliminates anything not relevant
var totHours = 0;
//adds total gaming hours on one day
var dayHours = 0;
//how many on one such day set in i from 1-7
var averHours = 0;
//stores the average by dividing by the tothours by 7
var mostPerDay = 0;
//calculates day with most gamed
var mostOnDay = 0;
//Most hours on ONE day
var moreDays = " ";
//adds an s to the end of days if more than one
var mpd = 0;
//most per day
var ah = 0;
//average hours
var th = 0;
//total hours
var name = prompt("What is your name?");
//asks users name
//Make sure user inputs a name that includes letters and or spaces
while (name == "null" || isNaN(name) == false || !name.match(nameCheck)){
alert("Invalid Name!");
name = prompt("What is your name?");
}
//Greets the user by name
alert("Hello " + name );
//Ask how many hours gamed on a day
for (var i = 1; i <= 7; i++){
dayHours = prompt("How many hours have you gamed on day " + i + "?")
//Reask the question if the user inputs an invald answer
while (dayHours == null || isNaN(dayHours) || dayHours > 24 || !dayHours.match(numberCheck) || dayHours < 0){
alert("Incorrect! No letters or symbols, and make sure your input is under 24");
dayHours = prompt("How many hours have you gamed on day " + i + "?")
}
//Adds to total hours
totHours += Number(dayHours)
//Calculates days with most hours gamed
if (mostPerDay > dayHours){
}
else if (mostPerDay < dayHours){
mostPerDay = Number(dayHours);
mostOnDay = i;
}
else if (mostPerDay = dayHours){
mostOnDay += " and " + i;
mostPerDay = Number(dayHours);
}
}
//Adds 's' to the statistics if more than one day
if (isNaN(mostOnDay) == true){
moreDays = "s ";
}
//Divides the total hours by 7 to get average over those 7 days
aver = (totHours / 7);
//Calculates and rounds to the value of 1
th = totHours.toFixed(1);
ah = aver.toFixed(2);
mpd = mostPerDay.toFixed(1);
//States calculated statistics
alert("\nTotal gaming hours this week " + th + "\nAverage gaming hours this week " + ah + "\nMost on one day" + moreDays + mostOnDay + " for " + mpd + " hours." );
//Comments on average hours per day gamed
if (averHours <= 2){
alert("Healthy amount of gaming this week")
}
else if (averHours <= 24){
alert("Unhealthy amount of gaming this week")
}
</script>
</html>

There are several ways to include JavaScript in an HTML document:
Put the JavaScript code in a separate filename.js document and refer to it in the header of the HTML document (that is, between <head> and </head>) as follows: <script type="text/javascript" src="filename.js"></script>. This is the "cleanest" option as it separates functionality (JavaScript) from structure (HTML).
Put the JavaScript code directly in the header of the HTML document; that is, between <script type="text/javascript"> and </script> (no src attribute here)
In the body of the HTML document, again between <script> and </script>, for example when you want to dynamically add text with document.write('');
Changing the text in a <div id="mydiv"> can be done by accessing it via its id:
document.getElementById('mydiv').innerText = 'text';
or through the variants innerHTML, outerText or outerHTML.
For easy DOM manipulation, you may want to look into jQuery. Also, keep in mind that the JavaScript code in the header or external file will be executed immediately, which may cause errors if certain parts of the document body aren't loaded yet. jQuery offers an elegant solution by wrapping the code in
$(document).ready(function () {
// code here
});
Good luck!

A simple method to do this would be to include a link to an external javascript file:
<script src="path/myfile.js"></script>
at the bottom of your html file. If your script requires jQuery, make sure it is linked as an external script before your script. You can reference html elements in your javascript file by giving your html tags an id or class. For example:
In HTML:
<div id = "mydiv"> </div>
Select element in JS:
$('#mydiv')

If you are trying to make your web page more reactive, you may want to look into jquery. It's a lightweight javascript library that can help you make your web page more interactive. Check out the tutorial below:
http://www.w3schools.com/jquery/
I don't entirely understand your question, but just in case you are asking if the javascript will literally show up on your web page, it won't unless you display it as text. If you want to debug your javascript code, you can use developer tools on Chrome or something like it on other browsers:
https://developer.chrome.com/devtools

JavaScript that prints date and time with a link won't work

I'm currently enrolled in a JavaScript class at my community college, and we're supposed to create a page with the following:
"Today's date is (date)"
"Kids Club"
"The time is (time)"
Then, I don't seem to get this part, the instructions state: "Have a link to the new kidsnew.htm page that contains the text "Go To Kids Club". Use onClick and widow.location to open kidsnew.htm.
Before switching, you should use the navigator object and the method to test for the name and version of the browser. Display the name and version of the browser with an alert box and advise the user to upgrade for better results with the new page if their browser is out of date.
The kidsnew page should contain an HTML form button that will take you back to the "kidsold.htm" page."
So. I assume that I'll need the browser verification, where you can find in the first part of the code. I don't get what else I'm supposed to be using, as we were not told of a "onClick" method in the chapter's were reading. Can anyone help me refine the code and get it to display as stated? I did most of it correctly, I think;
Here's my code:
<html>
<head>
<title>Kids Club</title>
<script type = "text/javascript" src = "brwsniff.js"></script>
<script type = "text/javascript">
<!-- hide me from older browsers>
//==============================Browser Info=================================
var browser_info = getBrowser();
var browser_name = browser_info[0];
var browser_version = browser_info[1];
var this_browser = "unknown";
if (browser_name == "msie")
{
if(browser_version < 5.5)
{
this_browser = "old Microsoft";
}
else
{
this_browser = "modern";
}
}
//end
if (browser_name == "netscape")
{
if (browser_version < 6.0){
this_browser = "old Netscape";
else
{
this_browser = "modern";
}
} //end
</script>
//=========================End Browser Info============================
//==========================Start Date Script============================
var date = new Date();
//new is keyword for object Date
//
//getting info from object Date
//
var month = date.getMonth();
var day = date.getDate();
var year = date.getYear();
var hour = date.getHours();
var minutes = date.getMinutes();
//january is month 0, think of arrays
//
month = month + 1;
//fix y2k
//
year = fixY2k(year);
//fix minutes by adding 0 infrotn if less than 10
//
minutes = fixTime(minutes);
var date_string = month + "/" + day + "/" + year;
var time_string = hour + ":" + minutes;
var date = "Today is " + date_string";
var time = "The time is " + time_string;
//y2k fix
//
function fixY2k(number) {
if (number < 1000){
number = number + 1900;
return number;
}
//time fixer
//
function fixTime(number){
if(number < 10) {
number = "0" + number;
}
return number;
}
//========================End Time Script==================================
// show me -->
</script>
</head>
<body>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(date);
</script>
//show me -->
<h1>Kids Club</h1>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(time);
</script>
//show me -->
</body>
</html>

Some comments:
> <script type = "text/javascript">
> <!-- hide me from older browsers>
That's rubbish, HTML comment delimiters were never needed to hide script element content, just remove them.
> var year = date.getYear();
You should use the getFullYear method, it avoids the two digit year issue.
> var date = "Today is " + date_string";
There is no need to declare date a second time. It's not harmful, just unnecessary. date started out as a Date object, now it's a string. That's not good programming style, just modify the existing date_string, e.g.
date_string = "Today is " + date_string";
In the body of the page you have:
> <script type = "text/javascript">
> <!-- hide me from older browsers
> document.write(date);
> </script>
> //show me -->
Note that the comment delimiters start inside the script element, then finish outside it. So the browser is left with invalid HTML and whatever happens next is a result of error correction (the same for the next script element too).
Fix that and you may have solved your problem.