CampBroad

Website For a Student Led Campus Broadcasting Club Live Page: https://gracicinya.github.io/StudentMediaClub/

Nyasha Chikanga 101 340 984 - 041 268 139

The client is a school club that specialises in media technology that is looking to recruit students into the club, no matter the level of experience. They offer training to newcomers and encourage hands-on learning as they prepare their members to a possible future in media technology. This site is a call to join their club to all students who wish to join. The website is adaptable to different sized devices.

Characteristics of the landing page that are different from Assignment one are:

hero section - grouped span and buttons for unity, appealed to audience with a call to action text under an image that draws the attention of the target audience. no use of pictograms - There was no time to look for pictograms

Additional sections in other pages:

a form page for signing up an about us, gallery, and past/current projects page

Student Media Club – Feature Checklist

1. Hamburger Menu – A responsive nav menu that toggles open/closed on mobile via a 3-bar button, with accessibility attributes (aria-expanded) and auto-close when a link is clicked. Challenges: Remembering that handling it in the main body allows ease of styling in responsive design.

2. Form Validation – The recruitment form checks that name, email (format too), and interests fields are filled in before submission, showing inline error messages and a temporary success message on valid submit. Challenges: Making the error messages show the way I wanted them to.

3. Back to Top Button – A floating arrow button that appears after scrolling 300px down and smoothly scrolls the user back to the top on click. Challenges: Making the scroll button look nice.

4. Dynamic Content Rendering – The roles list on the recruitment page is built from a JavaScript array rather than hard-coded HTML, generating cards dynamically at page load. Challenges: Making the roles show and later styling them.

5. Tabbed Content – The home page has three tabs ("What We Do," "Find Your Role," "Never Done This Before?") that show/hide their panels on click, with the first tab active by default. Challenges: Styling the buttons in tandem with the JavaScript functionality.

6. Live Filtering by Category – Filter buttons on the roles section (All, Production, Audio, etc.) dynamically re-render the role cards without a page reload, sharing the same roles data array as Feature 4. Challenges: Styling, The classes and id's got confusing at times.

7. Fetch Quote from API – On page load, a random inspirational quote is fetched from the Quotable API and displayed, with a "New Quote" button to refresh it and error handling if the fetch fails. Challenges: Everything: broken pages, formatting, vocab, etc.

AI was used for:

debugging, plannning, understanding, implementantion, commit message generation, and checking for accessibility AI: Anthropic Claude & ChatGPT Challenges: Fighting the urge to let AI do most of the work