are you looking at the detailed output of the tests? there is stuff you need to do
click on the red button
on line 24 of html you have a self-closing a that needs to be fixed (remove the /)
and where is the data variable getting the API data?
I clicked on the red button couple of times. Number 6, 7, 8, and 9 failed the test. These failed numbers in question are set up in the randomQuoto() function.
Furthermore, at the outset of the JavaScript, I defined an empty data array to store the quotes fetched from the API. This empty data array has been used in the randomQuote () function to generate random indexes out of the data fetched.
I do not see this in your code, if your code is not the codepen you shared at the top, share your updated code
I still do not see the code that is giving a value to the data variable, which line would that be?
it is on the second line
I only see var data, no other code giving a value to data
The code blocks below are from the JavaScript section. The data variable declared on line two is an assumed data array that I used in the randomQuote() function to generate random quotes. I did that , because the data be retrieved by fetch is unknown.
//Global variable to store quotes fetched from the API
var data;
//DOM elements
const content = document.getElementById("quote");
const penName = document.getElementById("author");
const button = document.getElementById("new-quote")
const body = document.getElementById("body")
const randomQuote = () => {
let index = Math.floor(Math.random() * (data.length));
let quote = data[index].text;
let author = data[index].author;
content.innerHTML = quote;
penName.innerHTML = author;
if (!author) {
author = "Unknown Author";
}
}
const url = "https://type.fit/api/quotes";
async function fetchQuote() {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Response Status: ${response.status}`)
}
const result = await response.json();
randomQuote();
} catch (error) {
console.error(error.message)
}
}
button.addEventListener("click", randomQuote)
but when the data from fetch goes into data variable?
I just did a recent orientation on Fetch API. Most of the exerciser executed here are some of the things learned over the past days. This is one of the reason I came back to the forum to solicit help. The previously, I used this code to fetch the data:
var data;
const randomQuote =() => {
let index = Math.floor(Math.random() * (data.length));
let quote = data[index].text;
let author = data[index].author;
if (!author) {
author = "Unknown Author";
}
content.innerHTML = quote;
penName.innerHTML = author;
}
fetch("https://type.fit/api/quotes")
.then(function(response) {
return response.json();
})
.then(function(data) {
this.data = data;
randomQuote();
})
button.addEventListener("click", randomQuote);
In the above code, I did used data in the Fetch API. The console did also displayed Uncaught TypeError. I am learning. This challenge has extended my knowledge beyond where I started. Like every learner, we ask question for help.
Looks like you are sending the response object to a result variable rather than the data variable you created to hold that data.
I just upgraded this line to : data = await response.json(). Inside the randomQuote() function, I declared a mutable function called “index, “ and assigned it Math.floor(Math.random() * (data.length)) to generate quotes from the data array to be fetched from the API. However, this line has kept throwing this message in the console: “Uncaught TypeError: Cannot read properties of undefined (reading ‘length’) .“ The length used is not a variable. Instead, it is attached to the data variable to estimate the total indexes of the data array fetched from the API. I have rewritten and adjusted the method used. Another message I got in the console from the previous method i used was : “Failed to Fetch.“
Well, you haven’t defined data; you’ve just declared it. Try setting it to an empty array. And please don’t use var; that’s so dated.
And we already explained that your “Failed to Fetch” error is due to a cors issue:
Thanks once again for your generous effort. Much appreciated. I haven’t work with nodejs implementation, but I will take a bit of time off to read about it and execute some exerciser.
if you are working in codepen, it’s not node
Grand Day ILM;
I am working in codepen.io , which is also recommended in the project. Based on your analysis diagnosed, can you please concisely elaborate on the sources? Thanks in advance.
what sources are you asking about? I don’t understand your question
I have firmly admitted that there is something wrong with my approach to the project I am currently working on. I wrote this post to solicit help from experiences. In my last comment prior to your comment referenced below, I wrote that I was going to take some times off this project to further acquire more applicable knowledge on Nodejs. I have been up to that task. I read about the latest Nodejs version that will be release tomorrow 15th December 2025, and made a reminder to download it. The concisely elaboration sources that I sought from you was about your observation, being that you said it is not node.
This comment was the cue of my plead.