frontend-task-state
Shipped: Currency converter with live rates
Repository: https://github.com/mutyalaraghavendra/currencyconverter Live: https://mutyalaraghavendra.github.io/currencyconverter/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
Built a responsive currency converter using React and the Frankfurter public API. The application supports successful conversion plus clearly distinct loading, error, and empty/data-gap states. Reviewers can reproduce all three states without changing the code using ?demo=loading, ?demo=error, and ?demo=empty, with the exact steps documented in the README. The interface is keyboard accessible, responsive at 320px, and has no horizontal scrolling. Repository: https://github.com/rajatpandey14/Currency-Converter Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
I built a very simple state-driven Personal Reading List application with localStorage persistence that lets users add and remove entries. Reviewers can verify all criteria directly in the UI using the built-in demo control panel at the top of the page without changing any code. Clicking "Trigger Loading" shows an animated spinner and status message, "Trigger Empty" explains the feature and offers an "Add Your First Book" button that focuses the input, and "Trigger Error" displays a red alert explaining what failed along with a "Retry Loading" button. Full details and setup instructions are documented in the README. Repository: https://github.com/ghazlsinjab80/personal-reading-list Built for the Verified Frontend Internship · state and data
Shipped: Public repository search
A grid of my personal GitHub repos. The results are loaded once into the site, and searching and sorting are done locally; you can sort them by recent commits, stars, creation date, and name. Clicking one of the cells will open a modal showing the stats of the repository along with a link to it. Repository: https://github.com/MedicMedic/Stellar-s-Public-Repos Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
I build a small browser only reading list app from open library search api that include add list function saved in the localstorge. Repository: https://github.com/aungmyintmyatmaggie129/LeafMark Reading List Live: https://leafmark.netlify.app/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
I built a responsive Exchange Rate Converter that fetches exchange rates from a public API and focuses on clearly handling different application states. What I Built 1. Currency Conversion Users can enter an amount and select the source and target currencies. The application fetches the exchange rate and displays the converted amount. A swap option is provided to quickly switch currencies. 2. Loading State While the API request is in progress, the application shows a clear loading indicator and message. This makes it clear that the system is working and the result has not arrived yet. 3. Error State If the API request fails, a separate error state is displayed. The message explains what went wrong and tells the user what they can do next, such as retrying the request. 4. Empty State If the request succeeds but the API does not provide a rate for the selected currency pair, the application shows an empty/data-gap state. It does not incorrectly treat missing data as a zero value. 5. Success State When a valid exchange rate is available, the application displays the rate and the converted amount clearly. How a Reviewer Can Verify the Acceptance Criteria The reviewer does not need to modify the source code to test the required states. Success: Open the application normally and perform a conversion. Loading: Open the application with ?state=loading . Error: Open the application with ?state=error . Empty: Open the application with ?state=empty . This allows the reviewer to directly verify that Loading, Error, Empty, and Success are separate and clearly distinguishable states. Acceptance Criteria Covered Loading, Error, and Empty states are visually and textually different. Errors explain what failed and what the user should do next. Missing exchange-rate data is treated as a data gap rather than displaying 0 . Unsupported currency pairs are presented as an Empty state, not as an application error. All required states are demonstrable without changing the code. The README provides instructions for testing each state. Repository: https://github.com/techtuber9988/exchange-rate-converter Live: https://exchange-rate-converter-sooty.vercel.app/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
I built a Currency converter that fetches live exchange rates from the Frankfurter API. The app demonstrates three distinct fetch states: Loading (spinner + message while waiting) Error (clear alert when the request fails, with retry option) Empty (coverage gap when a currency pair isn’t supported, shown as “No rate available” instead of an error). How can a reviewer see that the acceptance criteria are met? All three states are visually and textually distinct and can be reached without code changes: Loading → open task2.html?demo=loading or enable Simulate a slow connection in Demo controls. Error → open task2.html?demo=error or enable Force the request to fail. Empty → open task2.html?demo=empty or select BTC or ETH as the “To” currency. The error message explains what failed and what to try next, including a retry button. Unsupported currency pairs are presented as a data gap, not an application error. Repository: https://github.com/hassannnn13/currency-converter.git Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
What did you build? I built a responsive Personal Reading List web application using HTML, CSS, and JavaScript. Users can add articles/resources with a title and URL, view saved items, and remove items. The reading list uses browser localStorage for persistent data. How can a reviewer see that the acceptance criteria are met? Loading state: Open ?state=loading and the loading state will be displayed before the content loads. Error state: Open ?state=error to see the error message explaining what failed and providing a Try Again action. Empty state: Open ?state=empty to see an explanation of the reading-list feature and an Add your first article action. Normal data state: Add an article using the form and verify that it appears in the reading list and remains available after refreshing. Responsive design: Test the application on mobile and desktop widths; the layout adapts without horizontal scrolling. Accessibility: Use keyboard Tab navigation to verify visible focus states and use Enter/Space to operate buttons. Documentation: The README contains the exact steps and URLs for testing all three states without making any code changes. Live Demo: https://vanshika2723.github.io/Personal-reading-list/ Repository: https://github.com/vanshika2723/Personal-reading-list.git Live: https://vanshika2723.github.io/Personal-reading-list/ Built for the Verified Frontend Internship · state and data