Как использовать массив из основного файла js для другого файла js?

let blogs = []



let month = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sept",
    "Oct",
    "Nov",
    "Dec"
]

function addBlog(event) {
    event.preventDefault()

    let inputName = document.getElementById("inputProjectName").value
    let inputContent = document.getElementById("inputDescription").value
    let inputImage = document.getElementById("inputImage").files[0]

    const projectDate = {

        startDate: document.getElementById("inputStartDate").value,
        endDate: document.getElementById("inputEndDate").value
    }

    inputImage = URL.createObjectURL(inputImage)

    let cardIcons = {
        html: document.querySelector('input[name = "checkHtml"]').checked,
        css: document.querySelector('input[name = "checkCss"]').checked,
        nodeJs: document.querySelector('input[name = "checkNode"]').checked,
        reactJs: document.querySelector('input[name = "checkReact"]').checked
    }

    let blog = {
        title: inputName,
        date: projectDate,
        content: inputContent,
        icons: cardIcons,
        image: inputImage
    }

    blogs.push(blog)

    console.table(blogs)

    renderCard()
}

function renderCard() {

    let containerBlog = document.getElementById("contents")
    containerBlog.innerHTML = '';

    for (let i = 0; i < blogs.length; i++) {

        containerBlog.innerHTML += `
        <div id = "contents" class = "mp-card">
            <!--MPC = My Project Card-->
            <div class = "mpc-img">
                <img src = "${blogs[i].image}" alt = "">
            </div>
            <div class = "mpc-title">
            <a href = "blog-detail.html">
                <p>${blogs[i].title}</p>
            </a>
            </div>
            <div class = "mpc-duration">
                <small>Durasi: 1 Bulan</small>
            </div>
            <div class = "mpc-content">
                ${blogs[i].content}
            </div>
            <div class = "mpc-icons">
                ${(blogs[i].icons.html === true) ? '<i class = "fa-brands fa-html5"></i>' : ''}
                ${(blogs[i].icons.css === true) ? '<i class = "fa-brands fa-css3-alt"></i>' : ''}
                ${(blogs[i].icons.nodeJs === true) ? '<i class = "fa-brands fa-node-js"></i>' : ''}
                ${(blogs[i].icons.reactJs === true) ? '<i class = "fa-brands fa-react"></i>' : ''}  
            </div>
            <div class = "mpc-mod">
                <button>Edit</button>
                <button>Delete</button>
            </div>
        </div>
        `
    }
}

/* My Project */


/* FORM */

.mpi-title {
    width: 100%;
    margin: 50px 0px;
    font-size: 30px;
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
}

.mpi-form-container {
    display: flex;
    justify-content: center;
}

.mpi-form {
    width: 540px;
    display: flex;
    justify-content: center;
}

.mpi-form label {
    font-size: 25px;
    font-weight: bold;
}

.mpi-form .mpi-name input,
.mpi-date input {
    width: 100%;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.mpi-date {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

.mpi-date .date-start {
    flex: 50%;
}

.mpi-date .date-end {
    flex: 50%;
}

[type = "date"]::-webkit-datetime-edit {
    opacity: 0;
}

[type = "date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
}

.mpi-desc textarea {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    border-radius: 8px;
    height: 200px;
}

.mpi-check {
    display: flex;
    gap: 120px;
    margin: 20px 0px;
}

.mpi-check label {
    font-size: 20px;
}

.check-left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-right {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-label {
    display: block;
    position: relative;
    padding-left: 35px;
    color: #514a4a;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.check-label:hover input~.checkmark {
    background-color: #ccc;
}

.check-label input:checked~.checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-label input:checked~.checkmark:after {
    display: block;
}

.check-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mpi-image {
    overflow: hidden;
    height: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f4f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    cursor: pointer;
    padding-right: 8px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}

.mpi-image label {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpi-choose {
    margin-top: -2px;
    border-radius: 8px;
    align-items: center;
    padding: 13px 10px 13px 10px;
    background-color: #e4e4e4;
    color: #b2abab;
}

.mpi-attach {
    padding-right: 10px;
}

.mpi-submit button {
    margin-top: 30px;
    float: right;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    background-color: var(--btn);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 110px;
}

.mpi-submit button:hover {
    background-color: var(--btn-hover)
}


/* x FORM */


/* CARDS */

.mp-container {
    width: 100%;
    background-color: #f8f8f8;
    padding-bottom: 70px;
}

.mp-card-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px 140px;
    padding: 0px 70px 0px 70px;
}

.mp-title {
    width: 100%;
    display: flex;
    font-size: 30px;
    font-weight: bold;
    justify-content: center;
    padding: 40px 0px;
}

.mp-card {
    width: 320px;
    height: 440px;
    max-width: 280px;
    max-height: 440px;
    padding: 10px 15px 10px 15px;
    border: none;
    border-radius: 10px;
    background-color: white;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.mpc-img img {
    border-radius: 10px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.mpc-title {
    overflow: hidden;
    margin-top: 10px;
    font-weight: 900;
}

.mpc-title a {
    text-decoration: none;
    color: black;
}

.mpc-title a:hover {
    text-decoration: underline
}

.mpc-content {
    height: 60px;
    overflow: hidden;
    margin: 20px 0px 20px 0px;
    text-align: justify;
    word-wrap: break-word;
    text-align: justify;
}

.mpc-icons {
    display: flex;
    font-size: 32px;
    gap: 15px;
}

.mpc-mod {
    display: flex;
    gap: 10px;
    text-align: center;
    margin-top: 20px;
}

.mpc-mod button {
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    background: var(--btn);
    color: #fff;
    cursor: pointer;
    width: 50%;
}

.mpc-mod button:hover {
    background-color: var(--btn-hover)
}


/* x CARDS x */


/* x My Project x */

<!--MPI = My Project Input-->
    <div class = "mpi-title">
        <p>ADD BLOG</p>
    </div>
    <!--Form-->
    <div class = "mpi-form-container">
        <div class = "mpi-form">
            <!--MP = My Project Input-->
            <form onsubmit = "addBlog(event)">
                <div class = "mpi-name">
                    <label for = "inputProjectName">Project Name</label>
                    <input type = "text" id = "inputProjectName">
                </div>
                <div class = "mpi-date">
                    <div class = "date-start">
                        <label for = "inputStartDate">Start Date</label>
                        <input type = "date" id = "inputStartDate">
                    </div>
                    <div class = "date-end">
                        <label for = "inputEndDate">End Date</label>
                        <input type = "date" id = "inputEndDate">
                    </div>
                </div>
                <div class = "mpi-desc">
                    <label for = "inputDescription">Description</label>
                    <textarea name = "inputDescription" id = "inputDescription"></textarea>
                </div>
                <div class = "mpi-check-cont">
                    <label for = "checkTitle">Technologies</label>
                    <div class = "mpi-check">
                        <div class = "check-left">
                            <div>
                                <label for = "checkHtml" class = "check-label">HTML
                                    <input type = "checkbox" id = "checkHtml" name = "checkHtml"check>
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for = "checkNode" class = "check-label">Node Js
                                    <input type = "checkbox" id = "checkNode" name = "checkNode">
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <div class = "check-right">
                            <div>
                                <label for = "checkCss" class = "check-label">CSS
                                    <input type = "checkbox" id = "checkCss" name = "checkCss">
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label for = "checkReact" class = "check-label">React Js
                                    <input type = "checkbox" id = "checkReact" name = "checkReact">
                                    <span class = "checkmark"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label>Upload Image</label>
                    <div class = "mpi-image">
                        <label for = "inputImage">
                    <div class = "mpi-choose">Choose</div>
                    <div class = "mpi-attach"><i class = "fa-solid fa-paperclip"></i></div>
                    </label>
                        <input type = "file" id = "inputImage" hidden />
                    </div>
                </div>
                <div class = "mpi-submit">
                    <button type = "submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
    <!--xFormx-->

<div class = "mp-container">
        <div class = "mp-title">
            <p>MY PROJECT</p>
        </div>
        <div id = "contents" class = "mp-card-container">
            <div class = "mp-card">
                <!--MPC = My Project Card-->
                <div class = "mpc-img">
                    <img src = "assets/phone1.jpg" alt = "">
                </div>
                <div class = "mpc-title">
                    <a href = "blog-detail.html">
                        <p>Dumbways Mobile App - 2022</p>
                    </a>
                </div>
                <div class = "mpc-duration">
                    <small>Duration: 2 Month</small>
                </div>
                <div class = "mpc-content">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque temporibus excepturi deserunt consequuntur molestias adipisci corporis neque error. Delectus, dolorum dolorem neque vel earum ipsam ut fugiat quos distinctio blanditiis.
                </div>
                <div class = "mpc-icons">
                    <i class = "fa-brands fa-html5"></i>
                    <i class = "fa-brands fa-css3-alt"></i>
                    <i class = "fa-brands fa-node-js"></i>
                    <i class = "fa-brands fa-react"></i>
                </div>
                <div class = "mpc-mod">
                    <button>Edit</button>
                    <button>Delete</button>
                </div>
            </div>
        </div>

    </div>

document.getElementById("blog-detail").innerHTML = `
    <div class = "bd-title">
        <p>${blogs[i].title}</p>
    </div>
    <div class = "bd-idc">
    <div class = "idc-left">
        <img src = "${blogs[i].image}" alt = "Blog Image">
    </div>
    <div class = "idc-right">
        <p>Duration</p>
        <div class = "bd-duration">
            <div style = "padding-left: 2px;">
                <i class = "fa-solid fa-calendar-days"></i>
                <p>1 Jan 2021 - 1 Feb 2021</p>
            </div>
            <div>
                <i class = "fa-solid fa-clock"></i>
                <p>1 Month</p>
            </div>
        </div>
        <div class = "bd-tech">
            <p>Technologies</p>
            <div class = "i-tech">
                <!--TI = Tech Icon-->
                <div class = "ti-left">
                    <div>
                    ${(blogs[i].icons.html === true) ? '<i class = "fa-brands fa-html5"></i>' : ''}
                        <p>HTML</p>
                    </div>
                    <div>
                    ${(blogs[i].icons.nodeJs === true) ? '<i class = "fa-brands fa-node-js"></i>' : ''}
                        <p>nodeJs </p>
                    </div>
                </div>
                <div class = "ti-right">
                    <div>
                    ${(blogs[i].icons.css === true) ? '<i class = "fa-brands fa-css3-alt"></i>' : ''}
                        <p>CSS</p>
                    </div>
                    <div>
                    ${(blogs[i].icons.reactJs === true) ? '<i class = "fa-brands fa-react"></i>' : ''}
                        <p>ReactJs</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class = "bd-content">
    <p>
        ${blogs[i].content}
    </p>
</div>
    `;

/* Blog Detail */

.bd-title {
    margin: 50px 0px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}

.bd-idc {
    width: 100%;
    display: flex;
    padding: 0px 50px;
    gap: 20px;
}

.idc-left {
    flex: 55%;
    overflow: hidden;
    object-fit: cover;
    padding: 0px 20px
}

.idc-left img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.idc-right {
    flex: 45%
}

.idc-right p {
    font-size: 30px;
    font-weight: bold;
}

.bd-duration {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bd-duration p {
    font-size: 30px;
    font-weight: bold;
}

.bd-duration div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-duration div p {
    font-size: 20px;
}

.bd-duration div i {
    font-size: 30px;
}

.bd-tech {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bd-tech p {
    font-size: 30px;
    font-weight: bold;
}

.i-tech {
    display: flex;
    gap: 0px 60px;
}

.ti-left div {
    display: flex;
    gap: 0px 20px;
    margin-bottom: 20px;
}

.ti-right div {
    display: flex;
    gap: 0px 20px;
    margin-bottom: 20px;
}

.bd-tech div p {
    font-size: 20px;
}

.bd-tech div i {
    font-size: 30px;
}

.bd-content {
    margin-top: 50px;
    padding: 0px 68px;
}

.bd-content p {
    font-size: 20px;
    text-align: justify;
}


/* x Blog Detail x */

<!--Blog Detail-->
    <div id = "blog-detail">
        <!--BD = Blog Detail-->
        <div class = "bd-title">
            <p>Blog Title</p>
        </div>
        <!--IDC = Image, Duration, Categories-->
        <div class = "bd-idc">
            <div class = "idc-left">
                <img src = "assets/phone5.jpg" alt = "Blog Image">
            </div>
            <div class = "idc-right">
                <p>Duration</p>
                <div class = "bd-duration">
                    <div style = "padding-left: 2px;">
                        <i class = "fa-solid fa-calendar-days"></i>
                        <p>1 Jan 2022 - 1 Aug 2022</p>
                    </div>
                    <div>
                        <i class = "fa-solid fa-clock"></i>
                        <p>8 Month</p>
                    </div>
                </div>
                <div class = "bd-tech">
                    <p>Technologies</p>
                    <div class = "i-tech">
                        <!--TI = Tech Icon-->
                        <div class = "ti-left">
                            <div>
                                <i class = "fa-brands fa-html5"></i>
                                <p>HTML</p>
                            </div>
                            <div>
                                <i class = "fa-brands fa-node-js"></i>
                                <p>nodeJs </p>
                            </div>
                        </div>
                        <div class = "ti-right">
                            <div>
                                <i class = "fa-brands fa-css3-alt"></i>
                                <p>CSS</p>
                            </div>
                            <div>
                                <i class = "fa-brands fa-react"></i>
                                <p>ReactJs</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class = "bd-content">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente,
                minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque
                a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse.
            </p>
        </div>
    </div>

    <!--xBlog Detailx-->