We're so excited about the next 24 days and the challenges we have in store. Hopefully, you'll enjoy working through these as much as we've enjoyed putting them together.
Brief
In this project, we're creating a Dynamic Table with Pagination.
You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.
Users should be able to:
Display 10 entries of data preloaded into **app.js**
Sort columns ascending or descending by ID, Name, Email Address, and Job Title
When sorting ascending the top arrow in the table header will be a darker blue and the bottom arrow will be a lighter blue. You can update the style by adding a class of `ascending` to the `button`. See line 22 in the index.html starter file as an example.
When sorting descending the bottom arrow in the table header will be a dark blue and the top arrow will be a lighter blue. You can update the style by adding a class of `descending` to the `button`.
Users can view the next page of data (if you’re not on the last page already) by clicking on the next arrow (bottom right).
Users can view the previous page of data (if you’re not on the first page) by clicking on the previous arrow (bottom right).
Need some support on this challenge? Join the Learn Build Teach Discord community. We have a separate channel set up specifically for the Advent of JavaScript.
Getting Started
To get started, download the zip file (within the appropriate section of Podia). This includes all the project assets you need to get started: HTML, CSS, images, and fonts.
Take a look around. Look at the project's Figma file and/or the source HTML and CSS files. This is a great way to see how the pieces and parts should look within the browser.
Customize your project/file architecture to your liking.
Happy coding!
Once you're finished, share your work using #adventofjs
Taking your Project to the Next Level
Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.
Take a step back and try writing the HTML and CSS for this project yourself. Start with the provided Figma file. If you get stuck, you can always purchase the Advent of CSS solutions, where Amy explains how to build this.
FAQs
Can I use libraries/frameworks on these projects?
Of course! We're providing the vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.
Oh no! I'm stuck!
Check out the Learn Build Teach Discord. We have a specific channel set up, just for the Advent of JavaScript.
