Displaying all user cards on the screen js-CodePudding

I'm trying to make a one-page site with user cards, doing everything through the js file, so that there is only one tag in the html. But here I have a problem, firstly, I didn’t quite understand how to connect an additional userData file to the main js file without a fetch request https://playcode.io/919658 (here is that userData file), I also can’t do it, so that the cards are on different sides, I mean, for example, three or 4 columns, but it goes one after the other at once, how can this be fixed? Thanks in advance.

const userData = [
    {
        "id": 1,
        "name": "John",
        "description": "fafewqrewrqwer2322revzd",
        "profilePicture": "https://images.unsplash.com/1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 2,
        "name": "Josh",
        "description": "qweqwsxasdqwew",
        "profilePicture": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 3,
        "name": "Jane",
        "description": "yjtykyumjhjhjkgjhhjkhkj",
        "profilePicture": "https://media.istockphoto.com/photos/elegant-beauty-picture-id516208984?k=20&m=516208984&s=612x612&w=0&h=KooFBmqHtO2lz5CFV5Oe87u_12wgKCxHvTHxlYuErCU="
    },
    {
        "id": 4,
        "name": "Iness",
        "description": "k4jh23k4jh23kjhk2jhk",
        "profilePicture": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"
    },
    {
        "id": 5,
        "name": "Alex",
        "description": ";oiu;oxzkxfaklwejlkwej",
        "profilePicture": "https://images.unsplash.com/flagged/photo-1573740144655-bbb6e88fb18a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
    }
]

const root = document.querySelector('#root')
const button = document.createElement('button')

function section() {
    const section = document.createElement('section') 
    section.classList.add('section');
    return section;
}

const userCards = userData.map(section);
root.append(...userCards);

body {
    display: flex;
    margin: 0;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: blanchedalmond;
    
}

section {
    margin-top: 10%;
    position: relative;
    width: 250px;
    height: 350px;
    border: 2px solid black;
    background-color: white;
    border-radius: 15px;
}

article {
    text-align: center;
    margin-top: 20%;
}

img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

button {
    background-color: hsl(229deg 100% 73%);
    border: none;
    width: 120px;
    height: 40px;
    border-radius: 10px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    cursor: pointer;
    box-shadow: 0 0 5px 0 black;
    margin-top: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!-- <script src='./UsersData.js' defer></script>  -->
    <script src='./script.js' defer></script> 
    <title>Usercards</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

CodePudding user response：

Here's a possible solution. You can play around with CSS Grid to arrange cards and make the layout responsive. As for userData file you could create a separate directory, 'db' for example, place the file there and add 2 script tags in html: <script src="db/userData.js"></script> <script src="index.js"></script>. The order is important. There'll be an error if userData is loaded after the script where you manipulate the data.

// Put in a separate js file and use script tag in html. Place before index.js <script> tag

const userData = [
    {
        "id": 1,
        "name": "John",
        "description": "fafewqrewrqwer2322revzd",
        "profilePicture": "https://images.unsplash.com/1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 2,
        "name": "Josh",
        "description": "qweqwsxasdqwew",
        "profilePicture": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"
    },
    {
        "id": 3,
        "name": "Jane",
        "description": "yjtykyumjhjhjkgjhhjkhkj",
        "profilePicture": "https://media.istockphoto.com/photos/elegant-beauty-picture-id516208984?k=20&m=516208984&s=612x612&w=0&h=KooFBmqHtO2lz5CFV5Oe87u_12wgKCxHvTHxlYuErCU="
    },
    {
        "id": 4,
        "name": "Iness",
        "description": "k4jh23k4jh23kjhk2jhk",
        "profilePicture": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80"
    },
    {
        "id": 5,
        "name": "Alex",
        "description": ";oiu;oxzkxfaklwejlkwej",
        "profilePicture": "https://images.unsplash.com/flagged/photo-1573740144655-bbb6e88fb18a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
    }
]


const root = document.querySelector('#root')
const button = document.createElement('button')

function createCard(user) {
    const section = document.createElement('section') 
    section.classList.add('section');
    const name = document.createElement('h2');
    name.classList.add('section-name');
    name.textContent = user.name;
    section.append(name);
    const desc = document.createElement('p');
    desc.classList.add('section-desc');
    desc.textContent = user.description;
    section.append(desc);
    return section;
}

const userCards = userData.map(createCard);
root.append(...userCards);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  --font-size-sm: 2rem;
  --font-size-md: 2.4rem;
}

body {
    min-height: 100vh;
    background-color: blanchedalmond;
}

#root {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  padding: 7%;
}

section {
    position: relative;
    padding: 1.2rem;
    width: 100%;
    height: 350px;
    border: 2px solid black;
    background-color: white;
    border-radius: 15px;
}

.section-name {
  font-size: var(--font-size-md, 24px);
}

.section-desc {
  font-size: var(--font-size-sm, 18px);
  padding: 2rem 0;
}

article {
    text-align: center;
    margin-top: 20%;
}

img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

button {
    background-color: hsl(229deg 100% 73%);
    border: none;
    width: 120px;
    height: 40px;
    border-radius: 10px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    cursor: pointer;
    box-shadow: 0 0 5px 0 black;
    margin-top: 20px;
}

<div id="root"></div>