practice-data.js

const messages = [
    {
        id: 0,
        from: "Abigail",
        text: "Are you here yet?",
        unread: true
    },
    {
        id: 1,
        from: "Jose",
        text: "Thanks",
        unread: false
    },
    {
        id: 2,
        from: "Simone",
        text: "Can I pick it up at 3?",
        unread: false
    }
]

const notifications = [
    {

        id: 0,
        app: "Instagram",
        message: "3 people liked your post",
        time: "10m"
    },
    {
        id: 1,
        app: "Text Message",
        message: "I'll be there in 5 minutes",
        time: "3m"
    },
    {

        id: 2,
        app: "Pixels",
        message: "How was your day today?",
        time: "1h"
    }
]

const tasks = [
    {
        id: 0,
        title: "Do Laundry",
        completed: true
    },
    {
        id: 1,
        title: "Do Dishes",
        completed: false
    },
    {
        id: 2,
        title: "Pay Taxes",
        completed: false
    },
    {
        id: 3,
        title: "Clean Bathroom",
        completed: true
    },
    {
        id: 4,
        title: "Grocery Shopping",
        completed: false
    }
]

const uploadsInProgress = [
    {
        id: 0,
        fileName: "styles.css",
        progress: 43
    },
    {
        id: 1,
        fileName: "index.html",
        progress: 98
    },
]

showInPage.js

function showInPage(displayArray) {
    const previousDiv = document.getElementById("displayDiv");
    if(previousDiv) {
        previousDiv.remove();
    }
    const div = document.createElement("div");
    div.id = "displayDiv";
    for(displayItem of displayArray) {
        const p = document.createElement("p");
        p.style.backgroundColor = "#dadada";
        p.style.width = "500px";
        p.style.padding = "20px";
        p.textContent = displayItem;
        div.appendChild(p);
    }
    document.body.appendChild(div);
}