kjb88 / teched_sd-w01

Repo for TechEd Software Development Bootcamp - Week 01.

🎓 Tech Educators' SWD Bootcamp 🎓
🎓 Week 01 Assessment 🎓

LinkedIn | Website | Email | Github

Repository for coursework for TechEd Software Development Bootcamp - Week 01.

Project Outline

Create a simple website using HTML, CSS (and optionally JavaScript) to recreate the structural style of this website: https://spacey-kappa.vercel.app/ . Links do not need to be functional (eg: move to a different page).

All requirements and stretch goals were achieved. No specific difficulties.

Requirements

• Correct use of semantic HTML elements, including header, footer and nav - COMPLETE
• Correct use of CSS absolute positioning for overlaying text - COMPLETE
• Corect use of CSS flexbox for layout and nav links - COMPLETE
• Correct use of image elements and file paths to image files - COMPLETE

Stretch Goals

• Add an audio player that displays audio file information (artist, title) with more than one track - COMPLETE
• Automatically update the footer with the current year using JavaScript - COMPLETE
• Implement a light and dark mode using JavaScript and CSS - COMPLETE

Implementation (of Requirements)

Correct Semantic HTML

Header, Main and Footer are all contained within Body. Each section of the website (denoted by the background image) is marked by section tags. Inside each Section, the content is wrapped in Article tags, as a section could contain resources not relevant to the article (such as a nested advertisement).

Correct CSS: Absolute Positioning

Both the header subtitle and the article posts both use absolute positioning to position themselves correctly on the page.

Correct Flexboxing

Flexboxes are used throughout the document to organise elements neatly and grouped appropriately. The Header, Nav, Article ('Featured Post'), Footer div and Audio Player all use flexboxes to group their children together.

Images & File Paths

Images, audio and JavaScript files are all stored within an Assets folder, with subfolders denoting their types: img, audio, js. These are handled through their releative filepaths within the JavaScript and HTML. audioPlayer.js has clearly defined filepaths within its audioLibrary array.

Implementation (of Stretch Goals)

Audio Player

The audio container is defined within main as a div, prior to the closing main tag. This div contains the audio player (audio element) and a span which acts as a container for the audio label.

These elements are targeted by audioPlayer.js to handle playing the next track and updating the audio label with the correct audio data (artist, title). The audio player is also pointed to the file path to the next song in the library after the current song has ended. The index counter (currentTrackIndex) is handled appropriately to avoid overflowing the bounds of the array.

The CSS for the audio player and label is mainly handled within the containing div. The div ensures that the audio player is always visible via sticky positioning. It also handles the flexbox positioning and alignment of the audio player and label (its children).

Automatic Footer Date

The Footer is automatically populated with the current year using new Date()getFullYear(). This is contained within footerDate.js. It also using template literals to join strings together with the company name and copyright symbol.

Light & Dark Mode

Light & Dark Mode works by swapping which data-theme is targeted by the document. Initially, it is set in the HTML tag as data-theme="dark". However, upon pressing the mode toggle button in the header, it will switch to the opposite theme. This will change text and drop-shadow color, as well as drop shadow positioning. It will also change any box-shadow color and positioning, including border colors.

The JavaScript file called viewModeToggle.js handles the input event, theme comparison and applying the new theme to the document. This will also update the button label to reflect the new theme mode.

The CSS for the dark/light themes are held in data-theme property blocks. Inside of these, they include variables which are assigned specific colours depending the mode. These themes also alter the brightness of the document. Due to how the eye perceives drop-shadows, the displacement of the drop-shadow must be changed depending on the contrasting color. This is also held within a variable inside each theme.

Honorary Mentions

Modular CSS Classes

Using classes within CSS, I create a drop-shadow-2px class and a no-pointer-events class which I used frequently throughout the project to generate stylised text and to remove cursor state changes on static elements. The drop-shadow-2px class also utilises variables modified by the theme, producing theme-responsive drop shadows throughout the project.

ARIA Labelling

I have applied aria-labelling to interactive elements that are not immediately obvious as to what they contain via semantics. I have added aria labels to anchor links to explain where the link goes, as an example. Another addition is on the theme mode button and audio player.