# Hot Pink 8-Ball

## 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,

.div name:hover {
    color: colorcode or name;
}

the text color will be changed when the user hovers each button.

<iframe width="560" height="315" src="https://www.youtube.com/embed/-aDmiuNqZl4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 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. However, we made the state work with only "shook" button at this point as we have limited knowledge about Java Script.
The result would be look like this:

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

.magicball {
  animation: rotation 10s;
  animation-play-state: paused;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
}

Therefore, the ball will rotate 360 degree in 10 seconds. Moreover, we add the `animation-play-state: paused;` to pause the animation until the user clicks the button.
When the user clicks the button, the Java Script code below will change the animation state to be run.

var shook = document.getElementById("shook");

shook.addEventListener("click", function(){
magicball.style.animationPlayState= "running";
});

What we found is that we need to name a variation for the HTML tag/class/id to give the element any function. When the user "clicks" the shook button, the computer will select an id "magicball" from HTML and change the `animation-play-state` from "paused" to "running" so that animation will be activated.

#### 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"
];

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

shook.addEventListener("click", function () {
    var num = Math.floor(Math.random() * Math.floor(answers.length));
    randomanswer.innerText = answers[num];
  });
};

As we understood, the logic would be like this. First, variable name is needed to categorize the messages so that it can be function by recalling the given name. Then, the script inside the `window.onload = function ()` will be activated if all the elements are ready. we named the variable as 'shook' to bring the element of the `id= "shook"` in the HTML as below. Therefore, it will select the button since `id= "shook"` is for the button tag.

<button class="shook" id="shook">SHOOK</button>

Similarly, `var randomanswer` will get the elements of the `id= "randomanswer"`. Therefore, it will select the placeholder as the `id= "randomanswer"` is for the placeholder.

<placeholder id="randomanswer"></placeholder>

Next, the variable "shook", which is the shook button, will make a certain event when it is clicked. The variable which we named as "randomanswer", which points the placeholder, will show the inner text. The inner text is called variable "answers", and it points out all the result texts. However, because the result texts need to be show up randomly, another variable "num" which makes the random order of the text is needed.

## Storyboard

1. Unclicked State
2. Hover State

3. Clicked State
- The ball will rotate
- The message will show up