The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Create column cards using DOM elements, Auto generate HTML column/row cards using DOM elements
DutchTony
post May 18 2020, 05:20 AM
Post #1





Group: Members
Posts: 2
Joined: 18-May 20
Member No.: 27,353



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-ht...t-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:/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 18 2020, 06:16 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(DutchTony @ May 18 2020, 12:20 PM) *

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/We..._DOM_Interfaces

QUOTE
Can anybody help me out to convert the following HTML to Javascript document.createElement?

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.

QUOTE
Seems like the HTML has lost its tab spacing formating for my post:/

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...amp;CODE=bbcode

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DutchTony
post May 18 2020, 08:36 AM
Post #3





Group: Members
Posts: 2
Joined: 18-May 20
Member No.: 27,353



QUOTE(Christian J @ May 18 2020, 12:16 PM) *

QUOTE(DutchTony @ May 18 2020, 12:20 PM) *

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/We..._DOM_Interfaces

QUOTE
Can anybody help me out to convert the following HTML to Javascript document.createElement?

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.

QUOTE
Seems like the HTML has lost its tab spacing formating for my post:/

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...amp;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
<!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>

<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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 18 2020, 09:11 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



QUOTE(DutchTony @ May 18 2020, 03:36 PM) *

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 readymade libraries these days, where all formatting is removed to reduce bandwidth. But obviously such libraries are not meant to be human-readable.

QUOTE
I have attached the screenshot as an example (as I still can't seem to transfer tabs or spaces in the HTML below.

Seems the "HTML" BBCode tags remove indenting. I normally use the "CODE" tags instead:

CODE
<!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>

<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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th June 2020 - 05:32 PM