Skip to content

Add comprehensive error handling to API calls #9

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
jaiswalsachin49 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Add comprehensive error handling to API calls #9

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
78 changes: 63 additions & 15 deletions scripts/advice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,74 @@ const button = document.querySelector('.advice-button');
const card = document.querySelector('.theCard');

const getAdvice = async () => {

button.disabled = true;

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

const adviceContainer = document.querySelector(".advice");
adviceContainer.innerHTML = ''; // Clear previous content

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

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

card.classList.toggle('isFlipped');

setTimeout(() => {
try {
console.log('Fetching advice from API...');

const response = await fetch(url);

// Check if the response is ok (status 200-299)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const advice = await response.json();

// Check if the API returned the expected structure
if (!advice || !advice.slip || !advice.slip.advice) {
throw new Error('Invalid response format from API');
}

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

console.log('Advice successfully loaded:', advice.slip.advice);

card.classList.toggle('isFlipped');

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

} catch (error) {
console.error('Error fetching advice:', error);

// Display user-friendly error message
const errorMessage = document.createElement("p");
errorMessage.style.color = '#ff6b6b';
errorMessage.style.textAlign = 'center';
errorMessage.style.padding = '20px';

// Determine appropriate error message based on error type
let userMessage;
if (error.name === 'TypeError' && error.message.includes('fetch')) {
userMessage = "😕 Oops! It seems you're offline or the advice service is temporarily unavailable. Please check your internet connection and try again.";
} else if (error.message.includes('404')) {
userMessage = "😅 The advice fairy seems to have misplaced that particular piece of wisdom. Please try again!";
} else if (error.message.includes('HTTP error')) {
userMessage = "🛠️ The advice service is having a moment. Please try again in a few seconds!";
} else {
userMessage = "🤔 Something unexpected happened while fetching your advice. Please try again!";
}

errorMessage.innerText = userMessage;
adviceContainer.appendChild(errorMessage);

// Show the card with error message
card.classList.toggle('isFlipped');
button.disabled = false;
}, 4500);

// Reset button and card state after showing error
setTimeout(() => {
card.classList.toggle('isFlipped');
button.disabled = false;
}, 4500);
}
};

button.addEventListener("click", function() {
Expand Down
98 changes: 80 additions & 18 deletions scripts/luckyNumberAdvice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,97 @@ const button = document.querySelector('.advice-button');
const card = document.querySelector('.theCard');

const getAdvice = async () => {

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

// Input validation with better user feedback
if (isNaN(luckyNumber) || luckyNumber === "" || luckyNumber > 224) {
alert("Please enter a valid number.");
const adviceContainer = document.querySelector(".advice");
adviceContainer.innerHTML = '';

const errorMessage = document.createElement("p");
errorMessage.style.color = '#ff6b6b';
errorMessage.style.textAlign = 'center';
errorMessage.style.padding = '20px';
errorMessage.innerText = "🔢 Please enter a valid lucky number between 1 and 224!";
adviceContainer.appendChild(errorMessage);

console.warn('Invalid lucky number entered:', luckyNumber);
return;
}

const url = `https://api.adviceslip.com/advice/${luckyNumber}`;

button.disabled = true;

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

const adviceContainer = document.querySelector(".advice");
adviceContainer.innerHTML = ''; // Clear previous content

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

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

card.classList.toggle('isFlipped');

setTimeout(() => {
try {
console.log(`Fetching advice for lucky number ${luckyNumber} from API...`);

const response = await fetch(url);

// Check if the response is ok (status 200-299)
if (!response.ok) {
if (response.status === 404) {
throw new Error(`No advice found for lucky number ${luckyNumber}`);
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
}

const advice = await response.json();

// Check if the API returned the expected structure
if (!advice || !advice.slip || !advice.slip.advice) {
throw new Error('Invalid response format from API');
}

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

console.log('Lucky number advice successfully loaded:', advice.slip.advice);

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

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

} catch (error) {
console.error('Error fetching lucky number advice:', error);

// Display user-friendly error message
const errorMessage = document.createElement("p");
errorMessage.style.color = '#ff6b6b';
errorMessage.style.textAlign = 'center';
errorMessage.style.padding = '20px';

// Determine appropriate error message based on error type
let userMessage;
if (error.name === 'TypeError' && error.message.includes('fetch')) {
userMessage = "😕 Oops! It seems you're offline or the advice service is temporarily unavailable. Please check your internet connection and try again.";
} else if (error.message.includes(`No advice found for lucky number ${luckyNumber}`)) {
userMessage = `🎯 Sorry, there's no advice available for lucky number ${luckyNumber}. Try a different number between 1 and 224!`;
} else if (error.message.includes('HTTP error')) {
userMessage = "🛠️ The advice service is having a moment. Please try again in a few seconds!";
} else {
userMessage = "🤔 Something unexpected happened while fetching your lucky advice. Please try again!";
}

errorMessage.innerText = userMessage;
adviceContainer.appendChild(errorMessage);

// Show the card with error message
card.classList.toggle('isFlipped');

// Reset button and card state after showing error
setTimeout(() => {
card.classList.toggle('isFlipped');
button.disabled = false;
}, 4500);
}
};

button.addEventListener("click", function() {
Expand Down