Dirty Dan’s Doughnuts

Tech Stack

Project Overview

This project was designed to showcase my proficiency in front-end development, focusing on creating interactive websites that provide live feedback based on user interactions and timed events. Additionally, I aimed to demonstrate my expertise in manipulating data using JavaScript, specifically through local and session storage to handle client-side information. The project also highlighted my creativity by integrating self-drawn images and animations created with Adobe Creative Suite software, such as Photoshop and Adobe Animate.

Process

The development process involved building a dynamic front-end experience with real-time feedback mechanisms. I utilized JavaScript to handle user interactions and manage timed events, ensuring that the website responded seamlessly to user inputs. Local and session storage were employed to store and retrieve data on the client’s computer, enabling a personalized experience. This required careful handling of data loops and validation to ensure accuracy and reliability. For the visual aspects, I created original artwork and animations using Adobe Photoshop and Adobe Animate, incorporating these elements to enhance the overall user experience.

Challenges and Solutions

One significant challenge was managing data loops and validation in JavaScript, which led to various bugs and errors. These issues were addressed through debugging and testing, demonstrating my commitment to solving problems and improving project functionality. Additionally, integrating custom images and animations required using different programs specialized in creative design. I leveraged Adobe Creative Suite to create and optimize these elements, ensuring they complemented the interactive features of the website.

This code snippet is designed to verify if a user’s credentials match those stored within two arrays, which can be populated from ‘localStorage’. It loops through both the ‘UserNamesArray’ and ‘PassWordsArray’ to check if the inputted username and password exist. If both credentials are found, it retrieves the index of the matching username, which can be used to access additional user information elsewhere in the application. Upon successful verification, a function is called to handle the logged-in state.

Lessons Learned

This project underscored the importance of thorough testing and debugging in front-end development, particularly when dealing with client-side data storage and real-time feedback. It also reinforced the value of combining technical skills with creative design, showing how self-drawn images and animations can enhance user engagement. Overall, the project highlighted my ability to tackle complex challenges and deliver a polished, interactive web experience.

Conclusion

The project effectively demonstrated my front-end development skills and creativity, showcasing my ability to create interactive, data-driven websites with personalized user experiences. By integrating custom graphics and animations, and overcoming technical challenges related to data management, I was able to produce a project that reflects both my technical proficiency and artistic flair. This assignment reinforced my dedication to delivering high-quality work and my readiness to address and resolve development challenges.