I'm attempting to replicate the image below using HTML and JavaScript:
https://i.sstatic.net/kvmqk.jpg
So far, this is what I have:
https://i.sstatic.net/8iHfB.png
Here's my JavaScript code:
function createLink(text, parentElement) {
var a = document.createElement('a');
var linkText = document.createTextNode(text);
a.appendChild(linkText);
temp1 = text.replace("/","-");
temp2 = res1.replace("/","-");
a.href = "http://www.drakedesign.co.uk/mdmarketing/uploads/" + temp2 + ".csv";
parentElement.appendChild(a);
}
var txtFile8 = new XMLHttpRequest();
txtFile8.open("GET", "http://www.drakedesign.co.uk/mdmarketing/uploads/date.txt", true);
txtFile8.onreadystatechange = function() {
if (txtFile8.readyState === 4) {
if( (txtFile8.status == 200) || (txtFile8.status == 0) ) {
allText8 = txtFile8.responseText;
arrayOfLines8 = allText8.match(/[^\r\n]+/g);
for (i = 0; i < arrayOfLines8.length - 1; i++) {
createLink(arrayOfLines8[i], document.getElementById("previousResultsList"));
}
}
}
};
txtFile8.send(null);
This code snippet performs the following actions: - Fetches an online text file containing dates. - Separates each date into an element in an array. - Iterates through a loop to convert each date into a link in the "previousResultsList" div.
I'm wondering how I could potentially separate the elements added to the div:"previousResultsList"
The main challenges are:
1) Separating the elements into a simple list format.
2) How can I split the dates into chunks for any dates in that month and append the image on the side.