RomCom is a website that generates romance novel covers. The covers can be randomly generated from a pre-determined list of cover images, titles and descriptive words, or users can make their own cover!
The project spec & rubric can be found here.
Please visit our site here!
When you first visit RomCom you will be greeted with a randomly generated romance novel cover with a cover image, title, and tagline that uses two descriptive words from our arrays. Every time you refresh the page you will see a new random romance novel- you can also view a new cover by clicking the "Show New Random Cover" button. If you like one of the random covers you see, you can click "Save Cover" and the image will be added to to the "View Saved Covers" page.
If none of the randomly generated covers strike your fancy, you can go to the "Make Your Own Cover" page where you will see a form with four fields- allowing you to customize your cover with a cover image url, a title, and two descriptors which will be added to the sentence "A tale of X and Y." You will not be able to click "Make my book" and submit the form unless you complete all the fields, but once you do, you will be re-directed to the homepage where your newest, greatest, bestselling novel will be displayed!
If you are happy with your novel, you can, as always, click "Save Cover" and add it to the array of saved covers.
Additionally, users have the ability to delete covers from the Saved Covers page by double-clicking on any cover they want to remove.
The website was built by two Front End Engineering, Mod 1 students at the Turing School of Software and Design: Alex Kio and Claire Fields. Instructors at the Turing School built the HTML, CSS and Cover.js files and provided us with a few helpful lines of code to get started with in the Main.js file (where all of our work took place).
The website uses vanilla JavaScript, HTML, and CSS.
We are unlikely to add any future functionality to this website, but here are some ideas for features that might improve it:
- Changes to the HTML and CSS to really make the site pop
- Ability to preview your custom cover before creating it
- Local storage so that all of the beautiful user-created covers would persist on page load (this was outside the scope of the project)
- Responsive design to adapt the website to different size browser windows