# Spooky Reviews Web App UI

The purpose of this web app is to create a space where users can read audience movie reviews on the horro/thriller genre, and also submit their own ratings and reviews.

---

## Navbar
The site navbar is made up of two rows.

The top row has two items:
1.) Site name and 2.) a search **input** and **button**.

* **Action**: User will enter keywords or phrases into input form and select button.
* **Result**: Button will change color on hover and selection. Submission will return a new webpage with items on website matching keyword.

The second row of the navbar is a horizontal **list** of links.
* **Action**: User will hover over navbar links
* **Result**: Background color of link will change upon hover (in this case from black to red)
--
* **Action**: User will select a link from the list.
* **Result**: A new webpage will open up with corresponding link color highlighted (red).

## Website Title Header
The body of the homepage starts with the first row (one column) that has a simple `h1` tag:

<div class="row">
    <div class="col">
      <h1 class="text-center">Spooky Reviews <i class="fa fa-ticket" aria-hidden="true"></i></h1>
    </div>
  </div>

## Banner Row

The banner row is made of two columns. The first column displays a popular movie poster (**image**). The second column displays a description (**text**) of the film and link to a review (**button**).

* **Action**: Hover over the button.
* **Result**: Button will change color upon hover.

--

* **Action**: User will select button.
* **Result**: Button will change colors upon selection and a new webpage will open to the review.

--

* **Action**: User will select photo.
* **Result**: A new webpage will open to the review.

## Now Playing Section

The "Now Playing" section of the homepage is made up of three rows.

The first row has a simple `h2` tag with the section title:

<div class="row">
      <div class="col">
        <h2 class="text-center">Now Playing </h2>
      </div>
    </div>

The second and third rows are each divided into four columns. Each column contains a `card` with an **image** linked to another webpage:

<div class="col alert alert-light">
        <div class="card bg-dark text-white">
          <img src="https://www.uphe.com/sites/default/files/styles/scale__319w_/public/2020/06/YouShouldHaveLeft_800x1200.jpg?itok=3KMov9xo" class="card-img" alt="...">
          <div class="card-img-overlay">
            <!-- <h6 class="card-title">You Should Have Left</h6> -->
          </div>
        </div>
      </div>

* **Action**: User selects any card / image.
* **Result**: A new webpage will open to a "review page".

## Submit A Review

The 'Submit A Review' section includes two **containers**.

The first `container` contains a header with a `h2` tag and a description with a `p` tag:

<div class="container ">
    <div class="row">
      <div class="col">
        <h2 class="text-center">Submit A Review </h2>
        <p class="text-center"> Have you watched any of these 2020 spooky flicks? We're now accepting user reviews for these 8 films. Share yours below! (limit one review per film)</p>
      </div>
    </div>
  </div>

The second `container` has a `form` with a submission **button** that users can submit information to in order to be collected into a database and posted on a seperate webpage. The form has **required** **input fields** for:
1. name (string)
1. email (string)
1. text (string)

* **Action**: User will select input field.
* **Result**: Border of selected input field will appear blue.
--
* **Inaction**: User will fail to enter string into input field and select submit.
* **Result**: Alert will notify user that field is required.

--
The form also has a `select` input that lists eight options:

<div class="input-group mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="inputGroupSelect01">Movie</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01" required>
              <option selected>Choose...</option>
              <option value="1">You Should Have Left</option>
              <option value="2">Relic</option>
              <option value="3">His House</option>
              <option value="4">The Turning</option>
              <option value="5">Spell</option>
              <option value="6">Alive</option>
              <option value="7">Gretel & Hansel</option>
              <option value="8">The Rental</option>
            </select>
          </div>

* **Action**: User will select option from dropdown list.
* **Result**: Field will be replaced with selected option.
* **Result**: Border will appear around select field.
--
* **Action**: User will select submit button.
* **Result**: Information will be collected and stored in a database.
* **Result:** New webpage will open with review.

### Star Rating Widget

The 'Submit A Review' section also includes a "star rating widget" that consists of five radio input checkboxes styled to look like stars.

`<input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label>`

* **Action**: User hovers over stars.
* **Result**: Input is changed to **checked** for each rating value less than or equal to the input hovered over. Stars respond by looking filled.

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
  color: #ffd700;
} /* hover previous stars in list */

* **Action**: User selects a rating.
* **Result**: Input is marked checked for each input with a rating value equal to or less than the one that was selected. The star(s) remain filled.

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
  color: #ffed85;
}