ZA | 25-ITP-May | Malusi Skunyana | Sprint 3 | Programmer Humour #307
Conversation
|
Your PR's title isn't in the expected format. Please check the expected title format, and update yours to match. Reason: Sprint part (Data Flows) doesn't match expected format (example: 'Sprint 2', without quotes) |
5 similar comments
|
Your PR's title isn't in the expected format. Please check the expected title format, and update yours to match. Reason: Sprint part (Data Flows) doesn't match expected format (example: 'Sprint 2', without quotes) |
|
Your PR's title isn't in the expected format. Please check the expected title format, and update yours to match. Reason: Sprint part (Data Flows) doesn't match expected format (example: 'Sprint 2', without quotes) |
|
Your PR's title isn't in the expected format. Please check the expected title format, and update yours to match. Reason: Sprint part (Data Flows) doesn't match expected format (example: 'Sprint 2', without quotes) |
|
Your PR's title isn't in the expected format. Please check the expected title format, and update yours to match. Reason: Sprint part (Data Flows) doesn't match expected format (example: 'Sprint 2', without quotes) |
|
Your PR's title isn't in the expected format. Please check the expected title format, and update yours to match. Reason: Sprint part (Data Flows) doesn't match expected format (example: 'Sprint 2', without quotes) |
MalusiS
added
the
Needs Review
|
Your PR's title isn't in the expected format. Please check the expected title format, and update yours to match. Reason: Sprint part (Data Flows) doesn't match expected format (example: 'Sprint 2', without quotes) |
MalusiS
changed the title
fetch/programmer-humour/script.js
Outdated
| const latestResponse = await fetch('https://xkcd.now.sh/?comic=latest'); | ||
| if (!latestResponse.ok) { | ||
| throw new Error(`HTTP error getting latest: ${latestResponse.status}`); | ||
| } | ||
| const latestData = await latestResponse.json(); | ||
| latestNum = latestData.num; | ||
| } | ||
|
|
||
| // Pick a random comic number between 1 and latestNum | ||
| const randomNum = Math.floor(Math.random() * latestNum) + 1; | ||
|
|
||
| // Fetch the random comic | ||
| const response = await fetch(`https://xkcd.now.sh/?comic=${randomNum}`); | ||
| if (!response.ok) { | ||
| throw new Error(`HTTP error getting comic: ${response.status}`); | ||
| } | ||
|
|
||
| const data = await response.json(); |
There was a problem hiding this comment.
You have two similar sets of code for fetching data. It might be a good idea to refactor the code into a function.
There was a problem hiding this comment.
Thanks for great feedback! Indeed, the fetch logic was duplicated in two places. I have now refactored it into a reusable fetchJson() helper function. This keeps the code DRY, improves readability, and ensures that any future changes to error handling or response parsing only need to be made in one place. It should also make the code easier to extend if we add more API calls later.
fetch/programmer-humour/script.js
Outdated
| } | ||
|
|
||
| const data = await response.json(); | ||
| console.log('Fetched comic data:', data); |
There was a problem hiding this comment.
When submitting a PR, it's best practices to remove debugging code to keep the code clean.
There was a problem hiding this comment.
I have removed the console.log statement so the code is cleaner. I will make sure to keep debugging output out of future PRs. Thank you for great feedback.
cjyuan
added
Reviewed
MalusiS
added
Needs Review
cjyuan
added
Complete
3 participants
Learners, PR Template
Self checklist
Changelist
Summary:
This PR introduces a small web app that fetches and displays a random XKCD comic with the ability to load a new one at the click of a button. The implementation uses HTML, CSS, and JavaScript with Fetch API calls to retrieve comic data from https://xkcd.now.sh.
Details of Implementation:
HTML (index.html):
CSS (style.css):
JavaScript (script.js):
Testing & Verification:
Questions
Ask any questions you have for your reviewer.