# Final Project Documentation <br> [Hot Pink 8-Ball ](https://codepen.io/rd2705/pen/yLMEKNJ)

---

## Problem
Have you ever had an opinion about something you desired or wanted, and you were just looking for someone to give you a little push, a little umph to validate your thoughts and desires? Often, your gut doesn't give you enough impetus to just go and "do you". The Hot Pink 8-Ball is a fun, playful service to give you just that.

in the vein of the Magic 8-Ball, the Hot Pink 8-Ball gives you a little more edgey advice. It gives you the validation to go out and be who you want to be. It gives you that little push you need to make a decision that satisfies your wants and desires. The Hot Pink 8-Ball gives you the validation you need because you know you're making the right decision for you.

---

## How it Works
The Hot Pink 8-Ball UI is split into two section:

1. a user interaction section (left section)
`<div class="input-section">`

2. a results section (right section)
`<div class="results-section">`

---

### Unclicked State
A static-text prompt sits above a set of buttons on the left side of the screen.

There are seven buttons available to the user:
* <Shook>
* <Crashy>
* <Snatched>
* <Chic>
* <Fierce>
* <Luxe>
* <Yolo>

These buttons below the prompt are a list of user "feelings" or "situations". The user clicks these buttons to trigger a state change of the Hot Pink 8-Ball in the results section.

---

### Hover State
Using the code below,

.shook:hover {
  color: red;
}

the text color will change when the user hovers over each button. Note the color change for the button, "SHOOK".



The size of the button will also get bigger. All other buttons will fade away. The text will also change from "Shook" to "I feel Shook".

---

### Clicked State
When the user clicks any button, the magic 8 ball on the right side will rotate and a random message will show up to give some advice to user. The color of the background will also change depending on whether the message is lucky or unlucky.
The result would be look like this:

#### Ball Rotation
For the ball rotation, we used the CSS code below.

.magicball {
  width: 100%;
  height: 100%;
  margin-top: 200px;
}

.rotate {
  animation: rotate 0.75s infinite linear;
}
.paused {
  animation-play-state: paused;
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}

When the user clicks the button, the Java Script code below will run.

let spinStatus = "off";
shook.addEventListener("click", () => {
  if (spinStatus === "off") {
    magicball.classList.remove("paused");
    magicball.alt = "spinning magicball";
    off.disabled = false;
    spinStatus = "shook";
  } else {
    magicball.classList.add("paused");
    spinStatus = "off";
  }
});
off.addEventListener("click", () => {
  if (spinStatus === "off") {
    magicball.classList.add("paused");
    magicball.alt = "magicball";
    shook.disabled = false;
    off.disabled = true;
  }
});

---

#### Result: Random Message
With the Hot Pink 8-Ball animation, a result/response which corresponds to the button the user chose will be displayed.
We searched for the Java Script code to show the result in random, tried to understand the logic, and applied it to our code as below.

var answers = [
  "You best believe it!",
  "Mmmph! If you keep it real, you keep it real",
  "You fly. You, so fly",
  "I couldn't have said it better",
  "Girl, we about to Mary, Kate, and Ashley",
  "Because you do you so well, honey",
  "This is gonna be like 2000s R&B - lovely",
  "You go! Call those shots!",
  "Go with your gut on this one",
  "Oh, yass, that's cosmic perfection",
  "Let you tell it, hun",
  "Let's try thinking through this again",
  "No, not in a million years",
  "Look, Boo. Sometimes things don't come together",
  "What if we try this one again?",
  "You don't have to ask me again, but I can't tell you now",
  "What if you didn't know?",
  "Let's you and me vibe on this one",
  "Oh, we bae and kiki on this, but don't say a word"
];

We created an array of asnwers that will be selected randomly when "Show my answer" button is clicked. Based on the answer, the color of the background would change.

#### 8-Ball Responses State Change

Some responses trigger a UI state change. The UI changes based on pre-determined responses that effect that state of the UI. Some answers make the background color darker (via a gradient) and others will make it brighter. These were chosen at random to test the concept.

window.onload = function () {
  var randomanswer = document.getElementById("randomanswer");

  off.addEventListener("click", function () {
    var num = Math.floor(Math.random() * Math.floor(answers.length));
    randomanswer.innerText = answers[num];
    if (num == "0", "2", "4", "6", "8", "10", "12", "14", "16", "18") {
      document.body.style.backgroundColor = "#ffa69e";
      document.body.style.backgroundImage =
        "linear-gradient(315deg, #ffa69e 0%, #5d4954 74%)";
      // setTimeout(function(){
      //    alert("Bad luck today...");
      // },25) 
    } else if (num == "1", "3", "5", "7", "9", "11", "13", "15", "17", "19") {
      document.body.style.backgroundColor = "#f39f86";
      document.body.style.backgroundImage =
        "linear-gradient(315deg, #f39f86 0%, #f9d976 74%)";

---

## Storyboard

1. Unclicked State

2. Clicked State (Hot Pink 8-ball animates)

3. Reveal 8-ball Results State


---

### Summary

The problem that we wanted to address was the lack of confidence individuals sometimes experience when they have to make major decisions. Our interactice magic 8-ball provides our user with a range of emotions to choose and creative answers that will likely make our user's day better. Although we had an extremely difficult time getting all the buttons to work the way we wanted, we eventually succeeded in achieving 90% of our original plan. This is all thanks to the feedback of our peers, help from Jin, Blake, and David, and online sources:))

---

### Reflection

We have learned so much this term! Arrays, booleans, strings are just a few of the key concepts. Reflecting back, we think that the biggest takeaways are (1) having a clear computational idea of what we want to achieve (like what actions do we imagine clicking on the button would perform), (2) breaking down the big idea into smaller pieces (for example, we made pens for each button and then combined them afterwards), and (3) communicating regularly with each other to keep track of our progress and to help each other out. At the end of the day, while coding has a steep learning curve, it is not impossible to achieve our ideas with team work. Perseverance and dedication to the task at hand is incredibly important. We want to thank everyone who has helped us realize our 8-ball. May our 8-ball give you good luck and confidence!