Kevin Powell - Community•11mo ago

Should I use a different page to render an entirely new DOM?

I'm making a dictionary app, using the free dictionary api (https://dictionaryapi.dev/), and I'm "replacing" some of the default html dom with a new one, generated according with the api. I wonder if the way I did it is fine? or should I indeed render a new page? Github: https://github.com/LeonCelestino/Dictionary js code is as follows:

GitHub

GitHub - LeonCelestino/Dictionary

Contribute to LeonCelestino/Dictionary development by creating an account on GitHub.

1 Reply

Pi, a future fluent jp speakerOP•11mo ago

const URL = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const submitButton = document.querySelector("#FindWord");

/* DOM */
const container = (frags) => {
    const frag = document.createDocumentFragment();
    const ul = document.createElement("ul");
    ul.classList.add("js-container");
    ul.classList.add("l__dic-container");
    frag.appendChild(ul);

    return frag;
}

const speechContainer = (data) => {
    const frag = document.createDocumentFragment();
    
    data?.forEach(data => {
        const newDOM = `
            <li class="m__speechs-container">
                <h3 class="m__speech">${data.partOfSpeech}</h3>
                <ul>
                    ${
                        data.definitions.map((d) => {
                            return `
                                <li> 
                                    <h4>${d.definition}</h4>
                                    ${
                                        d.example ? `<p>${d.example}</p>` : ""
                                    }
                                </li>
                            `
                        }).join("")
                    }
                </ul>
            </li>
        `
        const context = document.createRange().createContextualFragment(newDOM);

        frag.appendChild(context);
    })

    return frag;
}

/* Events */

submitButton.addEventListener("submit", async function (e) {
    e.preventDefault();
    document.querySelector("#Dictionary").replaceChildren();

    const word = document.querySelector("#Word").value;
    const data = await fetch_api(URL + word);
    document.querySelector("#Dictionary").appendChild(container());

    const ul = document.querySelector(".js-container");
    
    ul.appendChild(speechContainer(data));
})

const URL = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const submitButton = document.querySelector("#FindWord");

/* DOM */
const container = (frags) => {
    const frag = document.createDocumentFragment();
    const ul = document.createElement("ul");
    ul.classList.add("js-container");
    ul.classList.add("l__dic-container");
    frag.appendChild(ul);

    return frag;
}

const speechContainer = (data) => {
    const frag = document.createDocumentFragment();
    
    data?.forEach(data => {
        const newDOM = `
            <li class="m__speechs-container">
                <h3 class="m__speech">${data.partOfSpeech}</h3>
                <ul>
                    ${
                        data.definitions.map((d) => {
                            return `
                                <li> 
                                    <h4>${d.definition}</h4>
                                    ${
                                        d.example ? `<p>${d.example}</p>` : ""
                                    }
                                </li>
                            `
                        }).join("")
                    }
                </ul>
            </li>
        `
        const context = document.createRange().createContextualFragment(newDOM);

        frag.appendChild(context);
    })

    return frag;
}

/* Events */

submitButton.addEventListener("submit", async function (e) {
    e.preventDefault();
    document.querySelector("#Dictionary").replaceChildren();

    const word = document.querySelector("#Word").value;
    const data = await fetch_api(URL + word);
    document.querySelector("#Dictionary").appendChild(container());

    const ul = document.querySelector(".js-container");
    
    ul.appendChild(speechContainer(data));
})

message.txt

Gaming

Programming

Should I use a different page to render an entirely new DOM?