Develop module with API

[htilburgs]

Strugling with formatting. When I use the basic code, I got the result I like but it’s not displayed nice. I like to have 3 columns.

		var MPT = this.MPT;
		
		// Creating the div's for your data items
		var top = document.createElement("div");
		top.classList.add("list-row");

		// Fajr from data
		var mptFajr = document.createElement("div");
		mptFajr.classList.add("small", "bright", "Fajr");
		mptFajr.innerHTML = "Fajr : " + MPT.Fajr + " الفجر";
		wrapper.appendChild(mptFajr);			
			
		// Sunrise from data
		if (this.config.showSunrise != false) {
		    var mptSunrise = document.createElement("div");
		    mptSunrise.classList.add("small", "bright", "Sunrise");
		    mptSunrise.innerHTML = "Sunrise : " + MPT.Sunrise + " شروق الشمس";
		    wrapper.appendChild(mptSunrise);
		}
		// Dhuhr from data
		var mptDhuhr = document.createElement("div");
		mptDhuhr.classList.add("small", "bright", "Dhuhr");
		mptDhuhr.innerHTML = "Duhr : " + MPT.Dhuhr + " الظهر";
		wrapper.appendChild(mptDhuhr);

		// Asr from data
		var mptAsr = document.createElement("div");
		mptAsr.classList.add("small", "bright", "Asr");
		mptAsr.innerHTML = "Asr : " + MPT.Asr + " العصر";
		wrapper.appendChild(mptAsr);
			
		// Sunset from data
		if (this.config.showSunset != false) {
		    var mptSunset = document.createElement("div");
		    mptSunset.classList.add("small", "bright", "Sunset");
		    mptSunset.innerHTML = "Sunset : " + MPT.Sunset + " غروب الشمس";
		    wrapper.appendChild(mptSunset);
		}
			
		// Maghrib from data
		var mptMaghrib = document.createElement("div");
		mptMaghrib.classList.add("small", "bright", "Maghrib");
		mptMaghrib.innerHTML = "Maghrib : " + MPT.Maghrib + " المغرب";
		wrapper.appendChild(mptMaghrib);
		
		// Isha from data
		var mptIsha = document.createElement("div");
		mptIsha.classList.add("small", "bright", "Isha");
		mptIsha.innerHTML = "Isha : " + MPT.Isha + " العشاء";
		wrapper.appendChild(mptIsha);
			
		// Midnight from data
		if (this.config.showMidnight != false) {
		    var mptMidnight = document.createElement("div");
		    mptMidnight.classList.add("small", "bright", "Midnight");
		    mptMidnigh

Now I trying for several hours to figure out how to create table, columns, rows…
I’ve changed the code part to

		var MPT = this.MPT;

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

The result for 1 item is nice

But when I repeat this for the other items, no rows are created and everything is on the same row.

		var MPT = this.MPT;

//Table Test

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);
		
		// Sunrise
		var SunriseTextCell = document.createElement("td");
		SunriseTextCell.className.add = "xsmall bright sunrisetext";
		SunriseTextCell.innerHTML = "Sunrise";
		callWrapper.appendChild(FajrTextCell);
		
		var SunriseTimeCell = document.createElement("td");
		SunriseTimeCell.className = "xsmall bright fajrtime";
		SunriseTimeCell.innerHTML = MPT.Sunrise;
		callWrapper.appendChild(SunriseTimeCell);
		
		var SunriseArabCell = document.createElement("td");
		SunriseArabCell.className = "xsmall bright sunrisearab";
		SunriseArabCell.innerHTML = "شروق الشمس";
		callWrapper.appendChild(SunriseArabCell);		

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

Any help to get me on the right track again?

[A Former User]

@htilburgs
Insert “tr” element after each row.

[htilburgs]

Don’t I do this with this?

var callWrapper = document.createElement("tr");
callWrapper.appendChild(FajrTextCell);

[sdetweil]

@htilburgs yes, for each row, and the columns added to the row

[htilburgs]

@sdetweil I don’t understand what you mean.

[sdetweil]

@htilburgs make a table with HTML.

tr have to be added to table for each row
And td need to be added for each tr

Right? Exactly the same using code

[A Former User]

@htilburgs
https://www.w3schools.com/jsref/dom_obj_table.asp
This might be help. Read following articles about table on that site.

[htilburgs]

@Sean @sdetweil I finaly figured it out! Thanx for the support and pointing me in the correct direction. See the result:

		var MPT = this.MPT;

		// creating the tablerows
		// Fajr
		var FajrRow = document.createElement("tr")
		FajrRow.className = "small fajr-row";
		
		var FajrTextCell = document.createElement("td");
		FajrTextCell.innerHTML = "Fajr";
		FajrRow.appendChild(FajrTextCell);
		table.appendChild(FajrRow);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "bright";
		FajrTimeCell.innerHTML = MPT.Fajr;
		FajrRow.appendChild(FajrTimeCell);
		table.appendChild(FajrRow);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.innerHTML = "الفجر";
		FajrRow.appendChild(FajrArabCell);
		table.appendChild(FajrRow);
......
}		
		return table;	

[sdetweil]

Fabulous! Nice work!

[htilburgs]

@Mykle1 Thanks for the MMM-UFO “templates”. This really helped me to get started.
First one down, several to go…:winking_face: