Feature List - Adam-S-Amir/Odyssey-Outfits GitHub Wiki
Table of Contents
- 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.
- 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.
- 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:
- English (default)
- Norwegian Bokmål
- 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
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.
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.
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
detectDeviceType()executes on page load. This function detects the
user-agentof the user's current device. Depending on the
user-agent, a function
navbar()will execute if the
user-agentis a mobile device. If the
user-agentis a desktop, however, function
navbar_default()will execute. These two function's key responsibilities is replacing the
innerHTMLof 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.jsbeing included in every HTML file. The
index.jsfile'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
Cross Browser Support
- 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:
font-family: 'Archivo', sans-serif; /* Definition of variable --font-family */
font-family: var(--font-family); /* Variable is defined in root.css */
Referenced CSS files can be found at
404 Not Found
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.htmlwill then be displayed to inform the user of the issue.
Referenced file can be found at
- The Dynamic Navbar enhances the website's functionality by detecting the
user-agentof 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
- 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.
:rootselector 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
- 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
- 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.