const url = `https://catfact.ninja/fact?max_length=140`;
const getFact = () => {
return fetch('https://catfact.ninja/fact?max_length=140')
.then(res => res.json())
}
const createFactDiv = (fact) => {
const factContainer = document.createElement('div')
const setup = document.createElement('p')
setup.innerText = fact.fact
factContainer.append(setup)
return factContainer
}
const appendFact = (factDiv) => {
const factContainer = document.getElementById('factContainer')
factContainer.append(factDiv)
}
document.addEventListener('DOMContentLoaded', () => {
})
getFact().then ((fact) => {
const FactDiv = createFactDiv(fact)
appendFact(FactDiv)
})
I've been experimenting with different approaches as I navigate through the complexities of JavaScript, as I am relatively new to it. My goal is to develop an app that showcases interesting cat facts. Initially, I was able to view the DIV containing the FACT accurately in the console.log within the DOM elements, but now it seems to have disappeared and I keep encountering the error: Uncaught (in promise) ReferenceError: append is not defined. Any suggestions on how to proceed would be greatly appreciated!