Repository navigation
Maintenance: fix dead quotes API, tweet encoding, a11y and mobile layout - #1
Merged
Merged
Conversation
…le fetch errors type.fit/api/quotes no longer returns Access-Control-Allow-Origin (browser fetch is blocked) and now serves only 5 quotes. Switch to https://dummyjson.com/quotes/random, check res.ok, and show a fallback message on failure.
Quotes containing characters like '&' or '#' were truncated in the tweet intent. Also drop the leftover 'text=fady' placeholder from the initial link.
- Replace 'button:focus { outline: none }' with a :focus-visible outline for the Next button and Tweet link
- Style the disabled Next button while a quote is loading
- Mark decorative Font Awesome icons aria-hidden
- Announce new quotes with aria-live=polite
- Give the Next button type=button and a descriptive aria-label; fix loader alt text
The card had a fixed 600px width plus margins, causing horizontal scrolling on phones. Cap it at the viewport width minus its margins.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Three moderate issues remain in tweet-link state and accessibility behavior.
Get a fresh assessment by requesting another Copilot review.
Review effort: Lite
Findings: 1
Open (1)
What changed in this PR
Updates the quote app’s API integration, sharing, accessibility, responsive layout, and documentation.
Changes:
- Replaces the broken quotes API with DummyJSON and adds error handling.
- Encodes tweet text and improves accessibility behavior.
- Adds responsive sizing, metadata, and README documentation.
| File | Summary |
|---|---|
style.css |
Adds mobile sizing, focus styles, and disabled-state styling. |
README.md |
Documents features, API credit, demo, and setup. |
main.js |
Handles quote fetching and tweet URL generation; stale tweet links must be cleared on fetch failure. |
index.html |
Adds metadata and accessibility markup; tweet-link activation and author announcements require updates. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| } catch (err) { | ||
| console.error(err) | ||
| text.innerText = "Couldn't load a quote. Please check your connection and try again." | ||
| author.innerText = '' |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
https://type.fit/api/quotesstill answers with 200, but it no longer sends anAccess-Control-Allow-Originheader, so the browser blocks the request from the deployed site. It also returns only 5 quotes now. The app now useshttps://dummyjson.com/quotes/random, which is CORS-enabled (it echoes therandomquote-app.vercel.apporigin). The fetch checksres.ok, shows a fallback message when it fails, and disables Next while a request is in flight.&,#or?are no longer cut off. Removed the leftover?text=fadyplaceholder.button:focus { outline: none }and added a:focus-visibleoutline for the button and the Tweet link. Decorative icons getaria-hidden, the quote getsaria-live="polite", the button getstype="button"and an aria-label, and the loader alt text is fixed.max-width: calc(100% - 20px).CRLF line endings are kept, so the diffs show only the real changes.
Verification (static only, no browser)
node --check main.jspassesmain.jsunder Node with a stubbed DOM against the live API: it filled the quote, the author and an encoded tweet URL. With a stubbed failingfetch, it showed the fallback message and turned Next back on.src/href/url()(style.css, main.js, loader.svg, bck.jpg) existsLeft for the owner
.loaderis never shown (it always has thehideclass). Either wire it up or remove it along withloader.svg.