Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ Create column cards using DOM elements
Posted by: DutchTony May 18 2020, 05:20 AM
Hi all, I am an Aerospace Engineer working on consumer products through mechatronics in my spare-time and am new to this forum.
I am trying to auto-generate HTML column/row cards through the use of DOM elements. Can anybody help me out to convert the following HTML to Javascript document.createElement? I have looked at tutorials (such as: https://codeburst.io/learn-how-to-create-html-elements-with-plain-javascript-4f1323f96252) but can't seem get it working for my application.
Much appreciated, kind regards, Tony
--------------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>
--------------------
Seems like the HTML has lost its tab spacing formating for my post:/
Posted by: Christian J May 18 2020, 06:16 AM
I am trying to auto-generate HTML column/row cards through the use of DOM elements.
I think this tutorial explains the principle fairly well, though it creates an HTML table: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
From where does the text you want in each card come from? It doesn't make sense to create it all with javascript, then you might as well use static HTML in the first place.
You need to format code examples, e.g. with the #-button at the top of the textarea you type in. See also examples in https://forums.htmlhelp.com/index.php?index.php?s=&act=legends&CODE=bbcode
Posted by: DutchTony May 18 2020, 08:36 AM
I am trying to auto-generate HTML column/row cards through the use of DOM elements.
I think this tutorial explains the principle fairly well, though it creates an HTML table: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
From where does the text you want in each card come from? It doesn't make sense to create it all with javascript, then you might as well use static HTML in the first place.
You need to format code examples, e.g. with the #-button at the top of the textarea you type in. See also examples in https://forums.htmlhelp.com/index.php?index.php?s=&act=legends&CODE=bbcode
Thanks Christian, that was very helpful. I have now managed to write the javascript as follows (the card content will be pulled from an array).
I still have a remaining question, what is good practice in terms of indenting to keep the javascript readible? I have attached the screenshot as an example (as I still can't seem to transfer tabs or spaces in the HTML below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<script>
var body = document.getElementsByTagName("body")[0];
for (var y=0; y<2; y++){ // creates rows
var createRow = document.createElement("div");
for (var x=0; x<4; x++){ // creates columns
var createColumn = document.createElement("div");
var createCard = document.createElement("div");
var createText = document.createElement("p");
var cellText = document.createTextNode("test");
createText.appendChild(cellText);
createCard.appendChild(createText);
createColumn.appendChild(createCard);
createRow.appendChild(createColumn);
body.appendChild(createRow);
createCard.setAttribute("class", "card");
createColumn.setAttribute("class", "column");
}
createRow.setAttribute("class", "row");
}
</script>
<body>
</body>
</html>
Attached thumbnail(s)
Posted by: Christian J May 18 2020, 09:11 AM
I still have a remaining question, what is good practice in terms of indenting to keep the javascript readible?
In general programming, there seem to be different schools: https://en.wikipedia.org/wiki/Indentation_style
Javascripts that are meant to be human-readable usually seem to be formatted similar to the K&R(?) style in the link above, with space characters for indenting. Personally I prefer something like the Allman style, I think it's is easier to read. Also I use tabs for indenting, since it reduces typing (possibly these tabs are replaced with space characters on this forum?).
But it seems most web developers just download http://www.quirksmode.org/blog/archives/2016/10/down_with_the_t.html these days, where all formatting is removed to reduce bandwidth. But obviously such libraries are not meant to be human-readable.
Seems the "HTML" BBCode tags remove indenting. I normally use the "CODE" tags instead:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>*{box-sizing: border-box;}body{font-family: Arial, Helvetica, sans-serif;}/* Float four columns side by side */.column{float: left; width: 25%; padding: 0 10px;}/* Remove extra left and right margins, due to padding */.row{margin: 0 -5px;}/* Clear floats after the columns */.row:after{content: ""; display: table; clear: both;}/* Responsive columns */@media screen and (max-width: 600px){.column{width: 100%; display: block; margin-bottom: 20px;}}/* Style the counter cards */.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1;}</style>
</head>
<script>
var body = document.getElementsByTagName("body")[0];
for (var y=0; y<2; y++){ // creates rows
var createRow = document.createElement("div");
for (var x=0; x<4; x++){ // creates columns
var createColumn = document.createElement("div");
var createCard = document.createElement("div");
var createText = document.createElement("p");
var cellText = document.createTextNode("test");
createText.appendChild(cellText);
createCard.appendChild(createText);
createColumn.appendChild(createCard);
createRow.appendChild(createColumn);
body.appendChild(createRow);
createCard.setAttribute("class", "card");
createColumn.setAttribute("class", "column");
}
createRow.setAttribute("class", "row");
}
</script>
<body>
</body>
</html>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)