AI‐13 - Code-the-Dream-School/intro-to-programming-2025 GitHub Wiki
On the index.js
file:
- Using the Fetch API, create a "GET" request to
https://api.github.com/users/{GITHUB_USERNAME}/repos
where{GITHUB_USERNAME}
is your username for your GitHub account. - Chain a then method to your fetch call and pass it a function that returns the response JSON data.
- Chain another then method and pass it a callback function to parse the response and store it in a variable named
repositories
. - Console.log the value of repositories to better see the data returned from your API fetch.
- Chain a
catch()
function to your fetch call to handle errors from the server so the user would know what happened if your Projects section was empty. - Create a variable named
projectSection
; using DOM Selection to select the projects section by id. - Create a variable named
projectList
; using DOM Selection query theprojectSection
(instead of the entire document) to select the list element. - Create a for loop to iterate over your repositories Array, starting at index 0.
- Inside the loop, create a variable named
project
to make a new list item<li>
element. - Inside the loop, set the inner text of your project variable to the current Array element's name property.
- Inside the loop, append the
project
element to theprojectList
element.
On the index.css
file:
- Add styling to your projects list element, be sure to account for any changes you want in media queries.
- As a stretch goal (optional): Use flexbox (or grid) to style your project list.