I need help to automatically create cards using the information on a .js file.

Example of .js file:

'use strict';
var tasks = [
    {
        "title": "home",
        "color": "blue",
    },
    {
        "title": "city",
        "color": "green",
    },

I would like the program to automatically make 2 bootstrap cards with this information.

I wrote this code, but it doesn't seem to do anything:

<script>
    let createTaskCard = (task) => {
        let card = document.createElement('div');
        card.className = 'card shadow cursor-pointer';

        let cardBody = document.createElement('div');
        cardBody.className = 'card-body';

        let title = document.createElement('h5');
        title.innerText = task.title;
        title.className = 'card-title';

        let color = document.createElement('div');
        color.innerText = task.color;
        color.className = 'card-color';

        cardBody.appendChild(title);
        cardBody.appendChild(color);
        card.appendChild(cardBody);
        cardContainer.appendChild(card);
    }

    let initListOfTasks = () => {
        if (cardContainer) {
            document.getElementById('card-container').replaceWith(cardContainer);
            return;
        }

        cardContainer = document.getElementById('card-container');
        tasks.forEach((task) => {
            createTaskCard(task);
        });
    };   
</script>

I need help to automatically create cards using the information on a .js file.

Example of .js file:

'use strict';
var tasks = [
    {
        "title": "home",
        "color": "blue",
    },
    {
        "title": "city",
        "color": "green",
    },

I would like the program to automatically make 2 bootstrap cards with this information.

I wrote this code, but it doesn't seem to do anything:

<script>
    let createTaskCard = (task) => {
        let card = document.createElement('div');
        card.className = 'card shadow cursor-pointer';

        let cardBody = document.createElement('div');
        cardBody.className = 'card-body';

        let title = document.createElement('h5');
        title.innerText = task.title;
        title.className = 'card-title';

        let color = document.createElement('div');
        color.innerText = task.color;
        color.className = 'card-color';

        cardBody.appendChild(title);
        cardBody.appendChild(color);
        card.appendChild(cardBody);
        cardContainer.appendChild(card);
    }

    let initListOfTasks = () => {
        if (cardContainer) {
            document.getElementById('card-container').replaceWith(cardContainer);
            return;
        }

        cardContainer = document.getElementById('card-container');
        tasks.forEach((task) => {
            createTaskCard(task);
        });
    };   
</script>

• javascript

• I think you're not appending to the body of your document. This line : if (cardContainer) checks if the element cardContainer exists, and it does, because you created it dynamically. I think you want to change that line to: if (document.getElementById('card-container')) – H. Figueiredo Commented Feb 25, 2019 at 14:29
• Actually, your HTML code would be useful, I can't tell if you're supposed to have the 'card-container' created beforehand or not. – H. Figueiredo Commented Feb 25, 2019 at 14:31
• 1 Your code seems working! Just create an HTML element with id card-container & simply call your method initListOfTasks() – Tushar Walzade Commented Feb 25, 2019 at 14:37

2 Answers 2

Your code seems working! Just create an HTML element with id card-container & simply call your method initListOfTasks(). Here's your implementation along with bootstrap -

var tasks = [{
        "title": "home",
        "color": "blue",
    },
    {
        "title": "city",
        "color": "green",
    }
];

let cardContainer;

let createTaskCard = (task) => {

    let card = document.createElement('div');
    card.className = 'card shadow cursor-pointer';

    let cardBody = document.createElement('div');
    cardBody.className = 'card-body';

    let title = document.createElement('h5');
    title.innerText = task.title;
    title.className = 'card-title';

    let color = document.createElement('div');
    color.innerText = task.color;
    color.className = 'card-color';


    cardBody.appendChild(title);
    cardBody.appendChild(color);
    card.appendChild(cardBody);
    cardContainer.appendChild(card);

}

let initListOfTasks = () => {
    if (cardContainer) {
        document.getElementById('card-container').replaceWith(cardContainer);
        return;
    }

    cardContainer = document.getElementById('card-container');
    tasks.forEach((task) => {
        createTaskCard(task);
    });
};

initListOfTasks();

<link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="card-container"></div>

• Note: Ensure that you've written all the JS in the same place & included it in your HTML.

Well you just need to call your function dude !

initListOfTasks()

And be sur that you at least have one element in your DOM that has the id card-container

let cardContainer;

var tasks = [
    {
        "title": "home",
        "color": "blue",
    },
    {
        "title": "city",
        "color": "green",
    }];

let createTaskCard = (task) => {

  let card = document.createElement('div');
  card.className = 'card shadow cursor-pointer';

  let cardBody = document.createElement('div');
  cardBody.className = 'card-body';

  let title = document.createElement('h5');
  title.innerText = task.title;
  title.className = 'card-title';

  let color = document.createElement('div');
  color.innerText = task.color;
  color.className = 'card-color';


  cardBody.appendChild(title);
  cardBody.appendChild(color);
  card.appendChild(cardBody);
  cardContainer.appendChild(card);

}
let initListOfTasks = () => {
  if (cardContainer) {
    document.getElementById('card-container').replaceWith(cardContainer);
    return;
  }

  cardContainer = document.getElementById('card-container');
  tasks.forEach((task) => {
    createTaskCard(task);
  });
};

initListOfTasks(); // Here you go

<div id='card-container'></div>