Splash Screen
Technical Description
The Splash Screen was created to offer a cinematic and immersive introduction to our site. I
obtained the visual depth through the application of div elements combined with personal CSS
@keyframes to provide the effects of constant breathing and glowing backgrounds.
Technically, the main functionality is achieved by using an HTML tag of the form: the
<meta http-equiv="refresh"> tag. I would, however, have liked to have more
control for the user. I created a bespoke JavaScript code (splash.js) which runs a
live visible countdown timer on the screen. I also included a skip button to force boot. When
the user presses this button, my JavaScript instantly removes the timer interval and replaces
the slow meta tag with window.location.href to provide an abrupt transition.
Link to the validation page
Link to the page
Action Impact Simulator (AIS)
Technical Description
The AIS is an interactive dashboard developed using pure Vanilla JavaScript. The 6 action cards
are manually inbuilt into the HTML to meet the structural demands of the brief. In order to
ensure smooth work by the JavaScript math, I became familiar with the custom data attributes in
HTML5. I added data-pts attributes to each card in order to keep the point values.
I used a JavaScript loop to go through these cards and add event listeners. Upon clicking a card,
the script will use classList.toggle('selected'), recalculate the aggregate score,
and update the UI text. The dynamic circular gauge is one of the most interesting technical
features I introduced here. Using the stroke-dashoffset property of an SVG circle
and mathematical manipulations regarding the summation of the score, it is possible to make the
gauge appearance fill up. Additionally, I implemented a gooey liquid blob animation for the
background that shifts colors based on the user's score interacting with specific body classes.
Accessibility
-
Keyboard Navigation: I researched and added
tabindex="0" and
role="button" to the HTML cards. I coded a specific event listener in
ais.js that responds to keydowns of the 'Enter' and 'Space' keys, allowing
users to play the simulator fully without a mouse.
-
ARIA States: I implemented
aria-pressed="true/false" states
to dynamically inform screen readers when a card is selected.
Link to the validation page
Link to the page
Content Page (Student 2)
Technical Description
The page conforms strictly to the common global template that was created by Student 1. In this
case, I was more interested in good document organization. I created the essay with semantic
HTML5 markups such as <article>, <section>, and
<aside> such that the browser actually comprehends the layout. I also used a
Table of Contents which made use of internal anchor links (href="#section-id") that
enable a user to jump directly to various sections of the essay.
Link to the validation page
Link to the page
Challenges and Lessons Learned
Challenge 1 — Navigating Without Global Scripts
During development, we initially relied on a global main.js script to handle UI
components like a sitewide back-to-top button. However, this caused severe conflicts with my
custom CSS implementations, resulting in overlapping buttons fighting for clicks on my Content Page.
Since the team ultimately decided to drop main.js entirely to improve performance and
rely on CSS-only solutions, I had to pivot. I engineered a pure CSS back-to-top anchor link
(using scroll-behavior: smooth) that operates completely independently of JavaScript,
teaching me the importance of native browser features over heavy script dependencies.
Challenge 2 — State Management and Logic Bugs in the Simulator
In the construction of the Action Impact Simulator, a large logic bug occurred. My JavaScript had
to serve as a way of adding points each time a card was clicked. A user who clicked the "Vote
Locally" card five times would simply get an infinite number of points! I needed time to learn
how to monitor the state of the card. I was taught how to verify whether a card was already
active. With the script now depending on card.classList.toggle('selected'), it
determines whether the card is being turned on or off, and then adds or subtracts the
given data-pts value. It taught me that code writing is not just about making
things look good, but anticipating how users will attempt to break your application.
Challenge 3 — The Skip Button that Cannot be Clicked (Z-Index Mystery)
When constructing the Splash Screen, I made the background deep and cinematic with div elements
stacked on top of each other. All appeared aesthetically flawless, and I had my “Force Boot”
skip button exactly where I desired. But upon clicking it in the browser, nothing occurred. The
hover effect was not activated, and the JavaScript event listener remained silent.
Hours of debugging allowed me to find out it was a CSS stacking problem. Since I had set my
glowing overlay background to position: absolute to cover the whole screen, it was
invisibly sitting on top of my button, catching all the mouse clicks. I got to know about the
CSS "stacking context" and rectified the problem by assigning my main wrapper
position: relative and z-index: 10. This brought the button physically
over the background layers, rendering it fully clickable.
Challenge 4 — Engineering the Interactive Liquid Background
For the Action Impact Simulator, I initially decided to change the background depending on the
user's score by swapping a single static background image. However, the transition was a sharp,
abrupt cut that totally destroyed the immersive experience I was hoping to achieve.
To address this, I engineered a highly complex visual workaround. I utilized absolute positioned
div elements representing "blobs" moving via CSS @keyframes, and unified
them using a heavily mathematical SVG <filter id="gooey-effect">. My JavaScript
logic then changes the active state by applying specific classes directly to the body.
This triggers smooth CSS color transitions on the moving blobs, providing a flawless liquid animation.
Challenge 5 — Reacting Grids and Squished Cards
The initial 6 hardcoded action cards I constructed were built on a large desktop screen. I
inserted them using simple CSS next to each other and was proud of it—until I shrunk my browser
window to imitate a cell phone. The cards did not stack; they merely squeezed together until the
text overlapped. I replaced dozens of code lines with a single one:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));. This commanded the
browser to fit as many 240px cards in a row as it could, wrapping them automatically when the
screen became too narrow.
Compliance
All three pages I authored are designed to be in full compliance with Janet's Acceptable Use
Policy and with relevant UK legal requirements for web publishing.
-
Content Integrity: The content introduced about peacebuilding and resolving
conflicts firmly follows the guidelines that the UN provides the public on SDG 16. The text
is educational, original, and does not include any offensive, defamatory, or prohibited
materials.
-
Asset Usage: To comply with copyright regulations and academic integrity,
all backgrounds, textures, and photographs were carefully selected from royalty-free
libraries (like Unsplash) explicitly approved for educational and non-commercial purposes.
Group Meetings and Individual Contribution Log
| Date / Format |
Objective |
Attended? |
My Individual Contribution |
| 12 Feb 2026 (Face-to-Face) |
Agree on SDG topic and assign roles. |
Yes |
I advocated for SDG 16 (Peace & Justice) and volunteered for the Student 2 role
to handle the Action Simulator and Splash logic. |
| 19 Feb 2026 (Discord) |
Finalize theme and wireframe pages. |
Yes |
I drafted the initial logic flow for how the AIS would calculate scores and trigger
background changes. |
| 26 Feb 2026 (Hybrid) |
Merge core pages and test routing. |
Yes |
I integrated the Splash screen timing with the Home page, ensuring the meta refresh fired perfectly. |
| 05 Mar 2026 (Discord) |
Team code review and bug fixing. |
Yes |
Refactored my CSS and JS to operate independently from the removed global scripts, ensuring my components functioned perfectly in isolation. |
| 12 Mar 2026 (Face-to-Face) |
Content review and alignment. |
Yes |
I finalised the copy for the "Conflict to Peace" article and ensured the HTML anchor
links correctly referenced the semantic IDs. |
| 18 Mar 2026 (Hybrid) |
Final W3C validation and packaging. |
Yes |
I ran splash.html, ais.html, and content_ST2.html through the W3C validator,
confirmed zero errors, and took the required screenshots. |
References
The following technical documentation, community discussions, and official guidelines were
consulted and utilized to engineer the specific features of my coursework deliverables:
