We created a fun and interactive web application that allows users to create and save a personalized collection of romance novel covers. Users can create custom covers using a form, or they can ask the program to generate random covers for them. User input elements including images, titles, and descriptors are also saved and added into the random generation process, so when they click to receive a random cover, their custom inputs can be included. Whether custom-created or randomly generated, users can save their favorite covers to the site, and can also delete covers they no longer want or need.
- Fork this repository
- Clone down your new, forked repo
cdinto the repository- Run
open index.htmlto automatically open the site in your browser
We were given 6 days to complete this project. While some pseudocoding and coding was completed asynchronously, most of our commits, debugging, and testing were completed over Slack huddles.
When we started the project, Rachel and Parvin were starting week 2 of Mod 1. This is Parvin's second time in Mod 1, but she had not previously completed this same project. The project took approximately 35 combined hours to complete.
Rachel Soae Prather and Parvin Sattorova
The primary learning goals of this project were:
- Write JavaScript that is clean, clear, and easily readable. Use JavaScript to interact with the DOM and manipulate HTML elements to create an interactive user experience.
- Read and interpret HTML, CSS, and JavaScript. Demonstrate understanding by making proper use of provided code and variables.
- Practice use of git workflow and Github to work collaboratively across the project. Use technical and interpersonal skills to keep teammates up to date and organized throughout. Make use of each other's contributions and opinions in the final outcome of the project.
This project was completed using VS Code, Google Chrome, and the Mac Terminal app to access the command line.
It was amazing to create an application that responds to user input! We learned how to use classList additions/subtractions to change the look of the page with ease. It was especially gratifying to bring together all the methods we have learned so far and synthesize them into functional parts of a whole.
One of the challenges we faced was learning how to properly use git branches to divide and save our work. We ran into a couple of merge conflicts, but by going through the process to resolve them we learned where we had made mistakes in our commit/push process and ended the project feeling much stronger in our git workflows.
The most challenging part of coding this project was integrating the use of innerHTML. In order to make our Saved Covers view work, we had to essentially "inject" the HTML we wanted to see. This was tricky because we have not learned very much about HTML yet. We studied the provided HTML file and modelled our section after the Home Page, using interpolation to put specific elements where we wanted them to be. This was both a challenge and a win, because it was so satisfying to get it right!