Skip to content

Added error handling to advice.js and luckyNumberAdvice.js #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Karthik24203 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Added error handling to advice.js and luckyNumberAdvice.js #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 40 additions & 27 deletions scripts/advice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,52 @@
const url = 'https://api.adviceslip.com/advice'
const url = 'https://api.adviceslip.com/advice';

const button = document.querySelector('.advice-button');
const card = document.querySelector('.theCard');
const adviceContainer = document.querySelector(".advice");

const getAdvice = async () => {
button.disabled = true; // Disable button while fetching
adviceContainer.innerHTML = ''; // Clear previous advice

button.disabled = true;
try {
const response = await fetch(url);

const response = await fetch(url);
const advice = await response.json();

const adviceContainer = document.querySelector(".advice");

adviceContainer.innerHTML = ''; //Clears the previous response

const printAdvice = document.createElement("p");
printAdvice.innerText = advice.slip.advice;
adviceContainer.appendChild(printAdvice);
// Check if the API response is OK
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}

card.classList.toggle('isFlipped');

setTimeout(() => {
card.classList.toggle('isFlipped');
button.disabled = false;
}, 4500);
};

button.addEventListener("click", function() {
getAdvice();
});
const advice = await response.json();

// API-specific check (in case response structure is wrong)
if (!advice.slip || !advice.slip.advice) {
throw new Error("Invalid API response: Missing advice field");
}

// Display advice
const printAdvice = document.createElement("p");
printAdvice.innerText = advice.slip.advice;
adviceContainer.appendChild(printAdvice);

// Animate the card flip
card.classList.toggle('isFlipped');
setTimeout(() => {
card.classList.toggle('isFlipped');
}, 4500);

} catch (error) {
// Log error for debugging
console.error("Error fetching advice:", error);

// Show user-friendly error message
const errorMessage = document.createElement("p");
errorMessage.innerText = "⚠️ Oops! Something went wrong. Please try again.";
adviceContainer.appendChild(errorMessage);

} finally {
// Ensure button gets re-enabled even on error
button.disabled = false;
}
};





button.addEventListener("click", getAdvice);
74 changes: 49 additions & 25 deletions scripts/luckyNumberAdvice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,63 @@

const button = document.querySelector('.advice-button');
const card = document.querySelector('.theCard');
const button = document.querySelector(".advice-button");
const card = document.querySelector(".theCard");
const adviceContainer = document.querySelector(".advice");

const getAdvice = async () => {

const luckyNumber = document.querySelector('#luckyNumber').value;

if (isNaN(luckyNumber) || luckyNumber === "" || luckyNumber > 224) {
alert("Please enter a valid number.");
return;
}

const url = `https://api.adviceslip.com/advice/${luckyNumber}`;
const luckyNumber = document.querySelector("#luckyNumber").value;

// ✅ Validate user input before calling the API
if (
isNaN(luckyNumber) ||
luckyNumber === "" ||
luckyNumber > 224 ||
luckyNumber < 1
) {
alert("⚠️ Please enter a valid number between 1 and 224.");
return;
}

button.disabled = true;
const url = `https://api.adviceslip.com/advice/${luckyNumber}`;
button.disabled = true;
adviceContainer.innerHTML = ""; // Clear previous advice

try {
const response = await fetch(url);

if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}

const advice = await response.json();

const adviceContainer = document.querySelector(".advice");

adviceContainer.innerHTML = ''; //Clears the previous response


// ✅ Check for valid API response
if (!advice.slip || !advice.slip.advice) {
throw new Error(
"Invalid API response: Missing advice for that lucky number"
);
}

// ✅ Show the advice
const printAdvice = document.createElement("p");
printAdvice.innerText = advice.slip.advice;
adviceContainer.appendChild(printAdvice);

card.classList.toggle('isFlipped');

// ✅ Animate card flip
card.classList.toggle("isFlipped");
setTimeout(() => {
card.classList.toggle('isFlipped');
button.disabled = false;
card.classList.toggle("isFlipped");
}, 4500);
} catch (error) {
console.error("Error fetching advice:", error);

// ✅ Friendly error message inside the card
const errorMessage = document.createElement("p");
errorMessage.innerText =
"⚠️ Couldn’t find advice for that number. Try again!";
adviceContainer.appendChild(errorMessage);
} finally {
// ✅ Always re-enable the button
button.disabled = false;
}
};

button.addEventListener("click", function() {
getAdvice();
});
button.addEventListener("click", getAdvice);