For my fourth project with Flatiron, I chose to do a project manager that included a Ruby-on-Rails as a backend API and a vanilla Javascript frontend.
As simple as this sounds, the project became very complicated on the frontend as the style sheet grew. This caused me to go back and rename different classes so that the styles were used in a more economical way.
One of the biggest challenges was using Bootstrap with Javascript. When I created the toggle background button, I wasn’t able to use the class I created. This is the because Bootstrap includes a standard white background that overrides what you do to the body.
I was using !important to override the Bootstrap styles, but when I created the document.body.classList.toggle(‘white’) element I had to add an id=”alt-body” to the body tag in order to make the specificity high enough for it to override Bootstrap.
It was little things like this that really made things difficult and time-consuming, but by thinking about them logically I was able to work through them and ultimately make a project I was proud of.
One of my favorite parts of this project was adding the Bootstrap modal for the ticket forms and comment boxes.
It was a little tricky to the get the styles right, but it made them look really clean and it allowed me to use Javascript for expanding the modal to the right for the comment section.
Javascript also allowed me to create a drag n’ drop feature and use CSS transitions for the side navigation bar.
I think this is probably my best frontend project so far, it was nice to focus on the visuals rather than all the backend code this time around.