Unit 4 Learning Diary

Attached is a pdf version of the following text for easier readability

Throughout my experience of writing my CSS I enjoyed the styling of the pages however there was one thing specifically I felt like needed improving. This was the static slider I had implemented on my Search page which needed to be populated dynamically. This allowed me to search the web for something that could be helpful for my website. Through extensive research I found a CodePen snippet (https://codepen.io/predragdavidovic/pen/mdpMoWo). This allowed me to improve the slider functionality using JavaScript and implement a dynamically populated slider for the min/max price of the player.

CodePen Code

The JavaScript code provided was excellent, and I made only minor modifications to it. One notable enhancement I made was replacing the initial HTML code with the snippet I found. I adjusted the minimum and maximum prices as well as introduced a step of 1000, which contributed to a more realistic user experience for the game UltimateXI Advisor is based upon (FIFA).

The original code was well-crafted, with few changes needed. However, I did address some coding practices that could be improved. For instance, I noticed repeated hex color codes for the slider background and highlighted range. To enhance code readability and maintainability, I defined constants at the top of the file for these variables. Additionally, I replaced instances of document.querySelector with document.getElementById since I ensured that the IDs were properly used in the HTML, as they are all unique identifiers. This change was made for consistency with my preferred coding practices. In terms of HTML and CSS, I adjusted class names to align with my naming conventions and modified styles, colors, and sizes to better suit my project's requirements.

Personas that enhance their experience from this feature

The incorporation of this feature was a result of a thoughtful analysis of the website's objectives and requirements, which were meticulously defined during Unit 1, primarily through the creation of personas and scenarios. For instance, Hussain, an enthusiastic FIFA gamer, aspires to enhance his Ultimate Team's performance while staying within budget constraints. He relies on UltimateXI Advisor to identify player cards that meet his financial limits while elevating his team's ratings. Hussain utilizes filtering options to focus on affordable, high-rated players and reviews user comments to confirm their compatibility with his playing style. In contrast, Lyan, a casual FIFA player, seeks to have enjoyable gaming sessions with friends. She visits UltimateXI Advisor in search of players who are easy to buy based on their max price and possess impressive overall ratings. 

Learning Outcomes

• I have met the primary learning objective of the project, which is the ability to "evaluate JavaScript code created by others, recognizing instances of both commendable and suboptimal practices." This is substantiated by my comprehensive critique of the provided code, where I specifically identified examples of suboptimal practices.
• I have demonstrated proficiency in fulfilling the learning outcome related to "employing JavaScript to introduce dynamic content into web pages." The code I integrated has empowered the creation of a dynamic range slider that not only exists but also dynamically updates other page elements, specifically the "number" input fields.
• Additionally, I have successfully met the project's learning objective to "adapt existing JavaScript code to enhance and modify its functionality, while also rectifying errors and instances of suboptimal practices when appropriate." This is evident in my customization of the script to better align with the project's unique requirements and in my efforts to enhance and rectify certain aspects of suboptimal practices, as discussed earlier.
• In summary, the project has enabled me to fulfill these learning outcomes effectively, strengthening my skills in JavaScript code analysis, dynamic content integration, and code modification to enhance functionality and practices.

What Went Well

1. Slider Design: The slider on the search page is a standout feature due to its appealing design. It seamlessly integrates with the overall website layout, adding a touch of elegance to the user interface. This not only enhances the visual appeal of the page but also makes it easier for users to interact with.
2. Research: The extensive research conducted to find the CodePen snippet proved to be a fruitful endeavor. It resulted in the integration of a valuable feature into the project, one that significantly improves its functionality. This highlights the importance of thorough research during the development process, underscoring how dedicated research efforts can lead to beneficial outcomes.
3. Enhanced Functionality: The ability to customize the code and introduce the "step" functionality was a pivotal success. This modification goes beyond just improving the slider's usability; it also elevates the overall functionality of the search page. Users can now conveniently filter results in specific increments, providing them with a more user-friendly and tailored experience when using the website.

What I struggled With

I felt like using the given code from the link the hardest part was understanding how to modify the CSS code for the search page to continue having the attractive design from Unit 3. It took time to make the changes, but it worked out at the end even better than I anticipated.

What I Would Change

Something I am considering starting is to start setting up some testing from users to receive some feedback to see changes there could be. Conducting more extensive testing and gathering user feedback can help identify potential issues or areas for enhancement. This iterative process can lead to a website that better meets user expectations and needs. 

UltimateXI_Advisor_Unit4

Attached is the zip file for the unit's webpages including all the HTML pages, CSS files, and the JavaScript created.