Skip to content

Instantly share code, notes, and snippets.

@unkletayo

unkletayo/script.js

Created June 11, 2020 19:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save unkletayo/e13c1cedd11b28b35f721a802e7f6938 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save unkletayo/e13c1cedd11b28b35f721a802e7f6938 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. unkletayo created this gist Jun 11, 2020.
    66 changes: 66 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    const itemContainer = document.getElementById('container__cards');

    getData();

    async function getData() {
    const res = await fetch('/data.json');
    const data = await res.json();

    displayData(data);
    }

    const displayData = (data) => {
    itemContainer.innerHTML = '';

    data.forEach((data) => {
    const itemEl = document.createElement('div');
    itemEl.classList.add('container__cards--item');
    function test(item, msg) {
    if (item == 'true') {
    console.log(msg);
    return msg;
    }
    }

    itemEl.innerHTML = `
    <div class="item-child" id="${data.id}">
    <div class="left">
    <div class="img-container">
    <img src="${data.logo}" alt="${data.company}" class="image">
    </div>
    <div>
    <div class='skills'>
    <span>${data.company}</span>
    <span class='new'>${test(data.new, 'New')}</span>
    <span class="features">Features</span>
    </div>
    <h4>${data.position}</</h4>
    <div class='timeline'>
    <p class="posted">
    ${data.postedAt}
    </p>
    <p>${data.contract}</p>
    <p>${data.location}</p>
    </div>
    </div>
    </div>
    </div>
    <div class='slack right'>
    <p>${data.role}</p>
    <p>${data.level}</p>
    <p>${data.languages.map((data) => data.split(' '))}</p>
    </div>
    `;
    itemContainer.appendChild(itemEl);
    });
    };

    {
    /* <p>${[...data.languages].map((data) => data)}</p> */
    }