How do I use an array from main js file for different js file?-CodePudding

I have a task to make a blog thumbnail and blog content from input that looks like this: blog.html

This is the thumbnails which is located in the same HTML file as the input form: blog.html

This is the blog content and what I'm trying to achieve which is located in the different HTML file: blog-detail.html

I have 2 js files, blog.js for blog.html and blog-detail.js for blog-detail.html. All of the blog value is saved in let blogs = [] in blog.js

This is the snippet from the blog input and thumbnails:

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" >
            <!--MPC = My Project Card-->
            <div >
                <img src="${blogs[i].image}" alt="">
            </div>
            <div >
            <a href="blog-detail.html">
                <p>${blogs[i].title}</p>
            </a>
            </div>
            <div >
                <small>Durasi: 1 Bulan</small>
            </div>
            <div >
                ${blogs[i].content}
            </div>
            <div >
                ${(blogs[i].icons.html === true) ? '<i ></i>' : ''}
                ${(blogs[i].icons.css === true) ? '<i ></i>' : ''}
                ${(blogs[i].icons.nodeJs === true) ? '<i ></i>' : ''}
                ${(blogs[i].icons.reactJs === true) ? '<i ></i>' : ''}  
            </div>
            <div >
                <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 >
        <p>ADD BLOG</p>
    </div>
    <!--Form-->
    <div >
        <div >
            <!--MP = My Project Input-->
            <form onsubmit="addBlog(event)">
                <div >
                    <label for="inputProjectName">Project Name</label>
                    <input type="text" id="inputProjectName">
                </div>
                <div >
                    <div >
                        <label for="inputStartDate">Start Date</label>
                        <input type="date" id="inputStartDate">
                    </div>
                    <div >
                        <label for="inputEndDate">End Date</label>
                        <input type="date" id="inputEndDate">
                    </div>
                </div>
                <div >
                    <label for="inputDescription">Description</label>
                    <textarea name="inputDescription" id="inputDescription"></textarea>
                </div>
                <div >
                    <label for="checkTitle">Technologies</label>
                    <div >
                        <div >
                            <div>
                                <label for="checkHtml" >HTML
                                    <input type="checkbox" id="checkHtml" name="checkHtml"check>
                                    <span ></span>
                                </label>
                            </div>
                            <div>
                                <label for="checkNode" >Node Js
                                    <input type="checkbox" id="checkNode" name="checkNode">
                                    <span ></span>
                                </label>
                            </div>
                        </div>
                        <div >
                            <div>
                                <label for="checkCss" >CSS
                                    <input type="checkbox" id="checkCss" name="checkCss">
                                    <span ></span>
                                </label>
                            </div>
                            <div>
                                <label for="checkReact" >React Js
                                    <input type="checkbox" id="checkReact" name="checkReact">
                                    <span ></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label>Upload Image</label>
                    <div >
                        <label for="inputImage">
                    <div >Choose</div>
                    <div ><i ></i></div>
                    </label>
                        <input type="file" id="inputImage" hidden />
                    </div>
                </div>
                <div >
                    <button type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
    <!--xFormx-->

<div >
        <div >
            <p>MY PROJECT</p>
        </div>
        <div id="contents" >
            <div >
                <!--MPC = My Project Card-->
                <div >
                    <img src="assets/phone1.jpg" alt="">
                </div>
                <div >
                    <a href="blog-detail.html">
                        <p>Dumbways Mobile App - 2022</p>
                    </a>
                </div>
                <div >
                    <small>Duration: 2 Month</small>
                </div>
                <div >
                    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 >
                    <i ></i>
                    <i ></i>
                    <i ></i>
                    <i ></i>
                </div>
                <div >
                    <button>Edit</button>
                    <button>Delete</button>
                </div>
            </div>
        </div>

    </div>

This is the snippet from the blog detail:

document.getElementById("blog-detail").innerHTML = `
    <div >
        <p>${blogs[i].title}</p>
    </div>
    <div >
    <div >
        <img src="${blogs[i].image}" alt="Blog Image">
    </div>
    <div >
        <p>Duration</p>
        <div >
            <div style="padding-left: 2px;">
                <i ></i>
                <p>1 Jan 2021 - 1 Feb 2021</p>
            </div>
            <div>
                <i ></i>
                <p>1 Month</p>
            </div>
        </div>
        <div >
            <p>Technologies</p>
            <div >
                <!--TI = Tech Icon-->
                <div >
                    <div>
                    ${(blogs[i].icons.html === true) ? '<i ></i>' : ''}
                        <p>HTML</p>
                    </div>
                    <div>
                    ${(blogs[i].icons.nodeJs === true) ? '<i ></i>' : ''}
                        <p>nodeJs </p>
                    </div>
                </div>
                <div >
                    <div>
                    ${(blogs[i].icons.css === true) ? '<i ></i>' : ''}
                        <p>CSS</p>
                    </div>
                    <div>
                    ${(blogs[i].icons.reactJs === true) ? '<i ></i>' : ''}
                        <p>ReactJs</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div >
    <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 >
            <p>Blog Title</p>
        </div>
        <!--IDC = Image, Duration, Categories-->
        <div >
            <div >
                <img src="assets/phone5.jpg" alt="Blog Image">
            </div>
            <div >
                <p>Duration</p>
                <div >
                    <div style="padding-left: 2px;">
                        <i ></i>
                        <p>1 Jan 2022 - 1 Aug 2022</p>
                    </div>
                    <div>
                        <i ></i>
                        <p>8 Month</p>
                    </div>
                </div>
                <div >
                    <p>Technologies</p>
                    <div >
                        <!--TI = Tech Icon-->
                        <div >
                            <div>
                                <i ></i>
                                <p>HTML</p>
                            </div>
                            <div>
                                <i ></i>
                                <p>nodeJs </p>
                            </div>
                        </div>
                        <div >
                            <div>
                                <i ></i>
                                <p>CSS</p>
                            </div>
                            <div>
                                <i ></i>
                                <p>ReactJs</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div >
            <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-->

What I'm trying to achieve is when I click the thumbnail title and when directed I want the blog-content.html to show the value that I input from blog.html using innerHTML

I've tried to use module.exports, script type="module" and importing both js files in blog-detail.html but nothing work :(

and I've tried to browse for more solutions but my English isn't very good for browsing, I don't know the keyword to search for more solutions.

Sorry for the long question, Thanks.

CodePudding user response：

you can use local Storage. You can pass you blogs array to from you blogs.js file to local Storage by using localStorage.setItem(); function and now you can retrive value from your another js file (blog-detail.js) by using localStorage.getItem().

If you want to learn more about how to use them Go Here

I hope this solves your problem.