Feature List - Adam-S-Amir/Odyssey-Outfits GitHub Wiki

Table of Contents

  1. EmailJS

  2. Live Website

  3. Language Switcher

  4. ADA Compliance Mode

  5. Cross Platform Support

  6. Cross Browser Support

  7. 404 Not Found

  8. First-Party Images

  9. Dynamic Navbar

  10. Scroll to Top

  11. Root Styling

  12. Less Intrusive Scrollbar

  13. Legal Compliance Documentation

  14. Terms of Service

  15. Codebase Security


  1. EmailJS is employed to facilitate the transmission of client-generated messages to The Developers, along with a simulated application status email. Upon submission, clients receive a confirmation email sent to their provided email address. This ensures seamless communication and enhances the user experience. No additional user information is gathered and transmitted to The Developers beyond this scope.

Live website

  1. The Developers deployed a live website to fully adhere to the FBLA Website & Coding guidelines. Additionally, features beyond the guideline specifications necessitate a live website for proper functionality.

Language Switcher

  1. The Developers expressed an interest in ensuring the website's accessibility for individuals who do not speak English, aligning with the Equal Employment Opportunity Commission (hereby referred to as "The EEOC") initiative. According to the EEOC, employers are required to permit employees to speak their native language during work hours, unless it interferes with essential business operations. Therefore, The Developers have implemented a native, site-wide language switcher capable of translating all written text on the page into the following languages:
  • Arabic
  • Danish
  • German
  • Greek
  • English (default)
  • Spanish
  • Finnish
  • French
  • Hungarian
  • Italian
  • Japanese
  • Korean
  • Norwegian Bokmål
  • Dutch
  • Polish
  • Portuguese
  • Russian
  • Slovak
  • Slovenian
  • Swedish
  • Turkish
  • Chinese
  1. Translations to these languages were carried out by Yandex, following the terms and conditions specified in their Terms Of Service. For more details, please refer to the Legal Compliance document.

ADA Compliance Mode

  1. ADA Compliance refers to adherence to the Americans with Disabilities Act (ADA), a civil rights law established in the 1990's in the United States. This legislation aims to prohibit discrimination against individuals with disabilities and ensure equal access to various aspects of society, including employment, public accommodations, transportation, and telecommunications.

  2. In line with Odyssey Outfits' commitment to inclusivity, we developed an ADA compliance mode to support the company's hiring efforts. In the context of websites and digital platforms, ADA Compliance involves ensuring that these online resources are accessible to people with disabilities, such as those with visual, auditory, motor, or cognitive impairments. This includes making web content perceivable, operable, understandable, and robust for all users, regardless of their abilities or assistive technologies they may use.

  3. The ADA Compliance Mode enhances accessibility by adjusting the appearance of the website for users with disabilities. When activated, this mode optimizes readability by changing text color to black and background colors to white, ensuring high contrast for improved visibility. Furthermore, all text is presented in Times New Roman font, chosen for its serif style, which aids users in distinguishing between letters more effectively. Images are displayed with a full grayscale effect, reducing visual distractions. Additionally, alternative text for images is available to aid users with visual impairments who rely on screen readers to access content.

Cross Platform Support

  1. Ensuring cross-platform support was a fundamental aspect of the website development process, particularly given the nature of the platform as a simulated professional job-hiring website. Recognizing the diverse array of devices accessing the site, The Developers prioritized implementing a responsive design, utilizing only vanilla JavaScript and CSS. This approach enables the website to dynamically adapt its styling and layout to seamlessly accommodate various screen sizes and device types. By embracing this strategy, The Developers aim to enhance user experience and broaden the reach of the website to a wider audience. A detailed preview of this functionality is listed below:

  2. The function detectDeviceType() executes on page load. This function detects the user-agent of the user's current device. Depending on the user-agent, a function navbar() will execute if the user-agent is a mobile device. If the user-agent is a desktop, however, function navbar_default() will execute. These two function's key responsibilities is replacing the innerHTML of the HTML element with an assigned ID "navbar", with a navigation bar for either desktop, or mobile users. Sub functions will execute with navbar_default(). The primary function of these sub functions are to dynamically modify the content of a designated page based on user navigation. This is possible for every page on the website, due to index.js being included in every HTML file. The index.js file's main purpose is to host all functions integral for improving the user experience. Functions such as, automatic website scaling, ADA Compliance mode, a function determining if the user accepted the TOS agreement, a function with the basic structure to fire a toast message to the user, etc.

Referenced JS file can be found at ./Assets/JS/index.js

Cross Browser Support

  1. The Developers had understood that CSS variables may be unsupported by older browsers, to rectify this, a backup declaration of a var is stored in the same CSS selector as such:

body {
    font-family: 'Archivo', sans-serif; /* Definition of variable --font-family */
    font-family: var(--font-family); /* Variable is defined in root.css */
    margin: 0;
    padding: 0;
    background-color: #073632;
    background-color: var(--background-color);
    color: #DDD0C8;
    color: var(--alt-text-color);
    display: flex;
    flex-direction: column;
    height: 100%;

  1. Referenced CSS files can be found at ./Assets/CSS/

404 Not Found

  1. If a user attempts to access a page that does not exist or if the website experiences an attack that renders it unavailable, a standard error 404 page will be triggered. The contents of 404.html will then be displayed to inform the user of the issue.

  2. Referenced file can be found at ./404.html

First-Party Images

  1. All images incorporated in this project have been exclusively shot or created by The Developers and will remain their proprietary assets henceforth. For more information please visit the Terms of Service and Privacy Policy document (Section 3, §1 - "Intellectual Property Rights ").

Dynamic Navbar

  1. The Dynamic Navbar enhances the website's functionality by detecting the user-agent of a user's device. It dynamically adjusts the navigation bar's content, ensuring optimal display and usability for both mobile and desktop devices. More information on this subject can be found in the Feature List document (Section 5, §2 - "Cross Platform Support").

Scroll to Top

  1. To enhance the user experience, a button will appear in the bottom right corner as the user scrolls down. With a simple click, this button gracefully guides the user back to the top of the website, enhancing navigational ease and convenience.

Root Styling

  1. The :root selector plays a pivotal role in this website, serving as a cornerstone for global variable declaration. By utilizing this selector, The Developers establish a centralized repository for key design parameters, facilitating seamless updates and maintenance. This approach empowers us to maintain consistency and streamline development, as the majority of CSS styles can be effortlessly modified by adjusting these variables.

Less Intrusive Scrollbar

  1. Recognizing the intrusive nature of default scrollbar styling, The Developers refined its appearance for the website. The scrollbar present in this project is sleeker and a less intrusive design characterized by smaller dimensions, rounded edges, and enhanced aesthetics. This endeavor reflects the commitment to elevating user experience and ensuring seamless navigation across this project.

Legal Compliance Documentation

  1. While this project exists in the realm of fiction, the goal is to emulate a genuine job listing website tailored to a specific company's needs. While numerous features commonly found on modern websites were implemented, an overlooked feature was documentation. This crucial addition aims to bridge the divide between the fictional project and a real-world site. It encompasses comprehensive details regarding the project's scope, overarching objectives, data collection practices, adherence to third-party tools, and ownership rights. By integrating this documentation, the aim is to enhance the authenticity and professionalism of the project, bringing it closer to the standards of a genuine website. More information about this documentation can be found in the Legal Compliance document.

Terms of Service & Privacy Policy

  1. In order to transparently communicate the website is fictitious and still collects data, The Developers wrote a comprehensive Terms of Service and Privacy Policy document. This document outlines key subjects including Acceptance of Terms, Legal and Retail Authority, and Intellectual Property Rights, ensuring users are fully informed about the platform's operations and data handling practices. More information can be found in the Terms of Service & Privacy Policy document.

Codebase Security

  1. As this project is fictitious, its objective is to represent a job listing website tailored to the specific needs of a company. This project opts not to use any framework, relying solely on HTML5, CSS3, and JavaScript, otherwise known as DHTML. The Developers have deliberately crafted the codebase to teeter between readability and complete obfuscation. This strategic approach aims to deter individuals from cloning the project and repurposing it against the project's Terms of Service. The CSS is meticulously written with hyper-specificity, and the JavaScript code builds upon itself, making it significantly challenging to restructure and repurpose.