Project Breakdown
Helping to make finding, and contacting, your collegues fun
As with most of the projects from Treehouse we were given mockups on how the finished site should look. I have since re-branded the site to add a personal project to my portfolio as I have a keen interest in building my skills in branding and graphic design.
The Internet has evolved technically so much over the last number of years that’s a given, but visually it is a push toward a cleaner aesthetic which I really appreciate. The crossover into digital work utilizing graphic design skills, while increasing the functionality of applications in the digital realm, not to mention having a hand in making the Internet a more visually appealing place is very interesting to me.
Here are the original screenshots of the site which used Treehouse’s mockups.
Original Design
Homepage
Modal Window
Modal window with contact info
Search Feature
Custom search feature filters employees
Redesigned Site
Updated looks including a new logo
and branding
To begin with I created a static version of this website using html, css, css grid, and Flexbox in order to get the bones laid out. This approach allowed me to make sure I had the html and css and working down to the pixel before adding the Javascript interactivity and the API data. Once the site was completed statically I moved on to the Javascript.
Next, the goal was create the twelve employee cards on the main page. To do this I created some global variables. Then I used fetch to pass the url information asynchronously from the radomuser API. This data was then available to me to inject into my html and for this I used template literals. When the page reloads a new group of 12 random users is displayed.
This project also includes a modal window that opens up when the user clicks on one of the employee cards on the main page displaying each employee’s photo along with their contact information.
Within this modal window I was asked to include a way for the user to go forwards and backwards through the employee index. For this feature I included appropriately sized arrows on either side of the employees photo. For better usability I included the ability to click anywhere outside of the modal window to close it. I included this feature since some users may find it difficult to focus their mouse on the small “x” that is located at the top right of the modal.
For the modal window I created the necessary variables and function to handle this task which again included using a template literal to inject the data into the html. This step also made use of object destructuring to help make the template literal cleaner.
I’ve also included a search feature that I used from another project. This makes it easy for the user to find the employee they are wanting to contact, they then can click on this employee to open the modal window.
Modal Window
Using a template literal to inject code
