Contact & About

Learn how this assignment project was built, then send a message through the validated demo contact form.

HTML · CSS · Vanilla JS

About the project

WorkTrack is a five-page responsive website created as a frontend assignment. It simulates a small freelance assignment tracker where assignments are logged, payments are recorded, and progress is summarised on a dashboard.

The site intentionally avoids frameworks and libraries. It uses only HTML5 for structure, CSS3 for layout and design, and vanilla JavaScript for all of the logic.

The most important feature is the data engine in script.js: two simple for loops generate more than 1,700 assignment records and 1,700 payment records from small sample arrays. Those records are then searched, filtered, sorted, paginated and summarised entirely in the browser.

All data is fictional and stored in memory only. Refreshing the page rebuilds the same demo data set.

Project objectives

  • Build a complete five-page site using only HTML, CSS and vanilla JavaScript.
  • Generate 1,700+ records dynamically with visible JavaScript loops.
  • Demonstrate search, filtering, sorting and pagination on a large data set.
  • Calculate statistics and dashboard totals from data instead of hard-coding them.
  • Create a responsive, mobile-friendly dashboard layout.
  • Validate a contact form and add interactive FAQ accordions.
  • Keep the code organised and commented for easy explanation.

Technologies used

No React, Next.js, Vue, Angular or any other frontend framework.

HTML5 CSS3 Vanilla JavaScript (ES6) CSS Grid Flexbox Media Queries DOM APIs Array methods Intl / toLocaleString

WhatsApp / Phone

0343 8652277

Message us directly for assignment and payment questions.

Chat on WhatsApp Call Now

Send a message

Front-end validation only — no message is actually sent.

This form is for demonstration purposes and does not submit data anywhere.

Thank you! Your message passed validation. (Demo only — nothing was sent.)

Frequently asked questions

Click a question to show the answer.

WorkTrack is a student frontend assignment. It is a five-page website that demonstrates tables, filters, pagination and dashboard statistics using only HTML, CSS and vanilla JavaScript.

The file script.js contains small arrays of assignment names, client names, categories and payment methods. A for loop runs from 1 to 1700 and pushes a new object into an array on every pass, creating IDs such as ASG-0001 through ASG-1700.

No. The payment page is a visual demonstration only. It is not connected to a bank, a payment gateway or any real account, and no money moves.

HTML5 for page structure, CSS3 for the responsive dashboard design (Grid, Flexbox and media queries), and vanilla JavaScript for data generation, rendering, filtering, sorting, pagination and form validation.

Yes. In script.js, change the ASSIGNMENT_COUNT and PAYMENT_COUNT constants near the top of the file. The tables, totals and pagination update automatically.