Giter Club home page Giter Club logo

romcom's Introduction

Create a RomCom Book Cover

This website allows you to generate a random romantic comedy book cover or create a custom one of your own.

Deploy link

Try the website here!

Description

Use our preloaded cover images, titles, and descriptive romantic words to randomly generate a new and exciting book cover. Alternatively, you can choose your own title and descriptions, uploading an image of your choice. When you’ve found a perfect cover, save it along with your other favorites.

Getting Started

Dependencies

The project is ready to go when you are. Open it in your browser, and get ready to make a book.

Execution

Home Page

On the home page, you’ll see several buttons to help you navigate the site.

  • Clicking on the Show New Random Cover will generate a random cover from our list of saved covers, titles, and descriptions.
  • If you like the cover displayed on this home page, clicking the Save Cover button will save it to a new page for you to view again later.
  • When you’re ready to view these saved covers, click the View Saved Covers button.
  • Then, if you’d like to make a cover of your own without the restriction of our preloaded options, navigate to the Make Your Own Cover button.
View Saved Covers
  • When you click your View Saved Covers button, you’ll see every cover you’ve saved up to this point.
  • You can remove a saved cover by double clicking on the image.
  • From here, you can go Home or make your own cover.
Make Your Own Cover
  • To make your own cover, type the title and descriptors of your choice into the respective input fields.
  • You can choose an image of your choice, and copy the address into the cover field.
  • The form won't let you complete your cover until all four fields are filled out: Example of form when input is missing.
  • Congratulations, you’ve made your own new cover! You can save it if you’d like and view it in your saved covers.

Future Additions

In the future, we hope to do the following:

  • Add the ability to drag your favorite covers around to change the order.
  • Allow a single click to increase the size of a specific saved cover.
  • Only accept specific input types for each field in the Make Your Own Cover button.

Authors

  • Michael Putnam (michaelputnam67)
  • Olivia Whitehead (whiteheadol)

Technologies Used

  • JavaScript
  • HTML
  • css

Acknowledgements

  • All members of the 2201 cohort
  • Mentors and rocks who helped get us here

romcom's People

Contributors

michaelputnam67 avatar whiteheadol avatar hannahhch avatar cbdallavalle avatar holladayian avatar letakeane avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.