https://github.com/yashi-singh-1/fcc-authors-page
This project is a solution to the freeCodeCamp fCC Author's Page. It involves creating a web page that displays a list of authors, fetching data from an API and allowing users to load more authors by clicking a button. The page showcase author's names, images, and short bios, with a basic error handling.
https://github.com/yashi-singh-1/fcc-authors-page
api api-integration css data-fetching fetch-api freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project frontend html html-css html-css-javascript javascript web-development
Last synced: 2 months ago
JSON representation
This project is a solution to the freeCodeCamp fCC Author's Page. It involves creating a web page that displays a list of authors, fetching data from an API and allowing users to load more authors by clicking a button. The page showcase author's names, images, and short bios, with a basic error handling.
- Host: GitHub
- URL: https://github.com/yashi-singh-1/fcc-authors-page
- Owner: Yashi-Singh-1
- Created: 2024-08-11T04:27:21.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-11T04:28:38.000Z (9 months ago)
- Last Synced: 2024-11-10T11:14:16.942Z (6 months ago)
- Topics: api, api-integration, css, data-fetching, fetch-api, freecodecamp, freecodecamp-challenge, freecodecamp-frontend, freecodecamp-project, frontend, html, html-css, html-css-javascript, javascript, web-development
- Language: JavaScript
- Homepage:
- Size: 1.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FreeCodeCamp Authors Page
This project is a solution to the [Learn Fetch and Promises by Building an FCC Authors Page challenge on FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-fetch-and-promises-by-building-an-fcc-authors-page/step-1). The challenge focuses on using asynchronous JavaScript techniques to fetch and display a list of authors from an API.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
The goal of this challenge is to create a web page that displays a list of authors, fetching data from an API. The page includes:
- Author names and their images.
- Short bios for each author.
- A "Load More Authors" button to fetch and display additional authors as the user interacts with the page.
### Screenshot
### Links
- Live Demo: [View the Authors Page](https://codepen.io/Yashi-Singh/pen/jOjLgZQ)
## My process
### Built with
- **HTML5** for the structure and layout of the page
- **CSS3** for styling and responsive design
- **JavaScript (ES6)** for fetching data from the API, handling asynchronous operations, and dynamically updating the DOM
### What I learned
Working on this project enhanced my understanding of:
- **Asynchronous JavaScript**: Using `fetch` and `Promises` to handle data retrieval from APIs.
- **DOM Manipulation**: Dynamically creating and updating HTML elements based on fetched data.
- **CSS Flexbox**: Using Flexbox to align and style author cards in a responsive layout.
- **Error Handling**: Implementing basic error handling to manage data fetching issues and provide feedback to users.
### Continued development
Future improvements for this project may include:
- **Enhanced UI**: Further refining the design and user interface for a more polished look and feel.
- **Additional Features**: Adding sorting or filtering options for the authors.
- **Mobile Optimization**: Ensuring the page is fully responsive and functional on mobile devices.
- **Improved Error Handling**: Enhancing error handling and user feedback mechanisms in case of data fetching issues.
### Useful resources
- [MDN Web Docs - Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) - Documentation on using the Fetch API for network requests.
- [MDN Web Docs - Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) - Overview of Promises and their usage in JavaScript.
- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Comprehensive guide to using Flexbox for layout and design.
## Author
- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)
## Acknowledgments
A big thank you to FreeCodeCamp for providing this challenge, which allowed me to apply and improve my skills in asynchronous programming and data handling. Special thanks to the community and resources that provided support and inspiration throughout the project.