connorcorc / romcom

M1 pair project

RomCom

RomCom is a website that generates romance novel covers. The covers can either be randomly generated or the user can create a custom cover using images, title, and descriptors of their choice.

The project spec & rubric can be found here

Please visit our site here!

Features

When you first visit the RomCom site you will be pleasantly surprised with a randomly generated romance novel cover. This cover contains a title, a background image, and two descriptions about this tale. There are a list of preselected images, titles, and descriptor words each in arrays. Every time you refresh the page or click "Show New Random Cover" you will be treated to a brand new randomly selected cover. However if none of these covers seem appeal to you, you can create a custom cover using the "Make Your Own Cover" button. This will take you to a form where you can enter your own background image, title, and two descriptor words. These will then be displayed on your new custom romance novel cover!

If you decide you like one of the randomly generated or custom covers that was created, you can add it to your saved covers by clicking "Save Cover." To view these saved covers, simply click the "View Saved Covers" button.

If you decide you no longer want a particular cover in your library, just double click the cover to remove it from your list and the new updated list of covers will be displayed.

If you want to return back to the home page, click the "Home" button where you will be treated to another randomly generated cover!

Contributors

This website was built by two front end engineering students with the Turing School of Software and Design. The following students are: Nicole Forseth and Connor Corcoran. The HTML, CSS, and Cover.js files were built by instructors in the program with some additional hints in our main.js file (where all of our work is located).

Technologies

HTML, CSS, Javascript. Simple DOM manipulation and use of eventListeners were a focus of this project.

Future Additions

We are unlikely to add much additional functionality to this project, but here are a few options:

• Disable the 'Make My Book' button until all fields are filled
• Provide error messages if data entered is not correct
• Ability to preview the custom cover before it is created
• Update the HTML and CSS for a new more exciting look

Sources

• MDN
• W3Schools