Completed Pages & Tasks
- Splash Screen: (View Live | View Validation) - Created the animated entry point with auto-redirect logic.
- Action Impact Simulator (AIS): (View Live | View Validation) - Built an interactive scoring tool that dynamically adjusts the page stylings based on user input.
- Content Page (Desertification): (View Live | View Validation) - Authored a detailed page about land degradation.
Technical Description: Splash Screen
HTML & CSS Structure
The Splash Screen (splash.html) deliberately bypasses the standard global
style.css to ensure a full-screen, focused experience. The design relies on a fixed
background image taking 100vh height with Flexbox used to perfectly centre the content.
Animative Elements & JavaScript
I included a pure CSS spinner animation (@keyframes spin) and a fade-in effect for the text
block. The core logic involves a JavaScript setInterval() function that counts down from 4
seconds, updating the DOM text on each tick. A meta refresh tag
<meta http-equiv="refresh" content="4;url=home.html"> ensures the automatic redirect.
Technical Description: Action Impact Simulator (AIS)
HTML Structure
The AIS uses a flex grid of <div class="action-card"> elements. Each card is assigned
custom HTML data-* attributes (e.g. data-points="3") to store impact values
which are extracted via JavaScript.
JavaScript Integration
The core logic handles click events. When a user clicks a card, the toggleCard(this)
function determines if the card is being selected or deselected. It then adds or subtracts the
corresponding points from a global totalScore variable.
A second function, updateImpact(), checks the total score against predetermined thresholds
(Low/Medium/High). It dynamically manipulates the DOM by altering the textual feedback and physically
changing the document body's background image and level badge colour dynamically.
Technical Description: Content Page (Desertification)
HTML Structure
Structured identically to ST1's Content Page, using targeted ID linking for the table of contents to
provide smooth, immediate navigation down the document. Images are styled using the global
.img-styled class.
Challenges & Lessons Learned
Challenge: Making the AIS logic flawless; initially clicking a card multiple times kept adding points instead of toggling them.
Resolution: I learned how to use state management on individual DOM elements. By adding
a custom attribute data-selected="false/true", the script could accurately identify the
current state of the card before applying the mathematical operation to the total score.
Lesson Learned: JavaScript requires careful tracking of state variables to prevent unexpected behaviour during user interaction.
Accessibility Considerations
- Clear Form Controls: Ensure buttons (like "Skip Intro" or "Reset Selections") are high contrast and large enough for mobile touch targets.
- Visual Feedback: Selected cards in the AIS don't just rely on a subtle border colour change; a distinct tick (✓) appears, aiding users with colour vision deficiencies.
JANET Compliance
As per team rules, the project adhering to JANET acceptable use policies. The JavaScript is strictly client-side DOM manipulation; no external data is fetched, ensuring user privacy. Content remains strictly academic.
Group Meetings & Individual Contribution Log
| Date & Time | Format | Objective | Attended | My Contribution |
|---|---|---|---|---|
| 10 Feb 2026, 14:00 | Face-to-face | Coursework kick-off & role assignment | Yes | I volunteered for the Interactive Elements role (ST2) because I wanted to practice JavaScript DOM manipulation. |
| 17 Feb 2026, 15:00 | Online (Teams) | Determine colour palette and global CSS rules | Yes | I reviewed ST1's colour palette and suggested adding the dark green #1b4332 to provide higher contrast on headings. |
| 24 Feb 2026, 14:00 | Face-to-face | Review Home Page and Gallery progress | Yes | I demonstrated a working prototype of the splash screen countdown and auto-redirect. |
| 03 Mar 2026, 16:00 | Online (Teams) | Content coordination and internal linking | Yes | I shared my draft layout for the AIS logic so the team understood how the points system operated. |
| 10 Mar 2026, 14:00 | Hybrid | Review all content pages and fix CSS bugs | Yes | I successfully integrated the AIS background changing logic without breaking the main navigation bar. |
| 24 Mar 2026, 13:00 | Face-to-face | Final review, validation, and submission prep | Yes | Validated the splash and AIS pages, ensuring no orphaned HTML tags existed. Finished my page editor. |
References
- United Nations. (n.d.). Goal 15: Life on land. Sustainable Development Goals. https://sdgs.un.org/goals/goal15
- University of Westminster. (2025). 4COSC011W Web Development Lecture Notes (Weeks 1-8).
- Unsplash. (n.d.). Royalty-free photography source. https://unsplash.com/
- W3C. (n.d.). Markup Validation Service. https://validator.w3.org/
- MDN Web Docs. (n.d.). CSS Flexbox & Layout Guide. https://developer.mozilla.org/
- W3Schools. (n.d.). JavaScript Timing & Style Objects. https://www.w3schools.com/
- Image Source Assets (Unsplash IDs):
- Forest Hero Background:
1441974231531 - Lush Greenery:
1448375240586 - Forest Canopy:
1473448912268 - Hands with Seedling:
1542601906990 - Recycling Management:
1532996122724 - Conservation Volunteers:
1488521787991 - Sustainable Farming:
1500651230702 - Academic Collaboration:
1526304640581 - Desertification/Land Degradation:
1509099836639 - Tropical Biodiversity (Macaw):
1425082661705 - Natural Biodiversity (Mountain):
1454496522488 - Wild Leopard/Biodiversity facts:
1456926631375