/emojional

Primary LanguageJavaScript

Emojional

FE1 Solo Challenge

Purpose

This Solo Challenge gives students and instructors the opportunity to get a pulse on where you are with the foundational concepts of Module 1 curriculum.

  • Students should use this as an opportunity to challenge themselves and work completely independently. Google can (and probably should!) be used, but peers or mentors should be your last resort.
  • Instructors will be able to use your work, both completion of functionality and code quality, to determine where you stand and if you are behind for this point in the module, provide supports to intervene.

Your challenge it to recreate the functionality you see on this site: https://turingschool.github.io/emojional-js/

Here's an example of what it will look like and do:

emojional-giphy

Setup

  • Fork this repository to your GitHub account
  • Clone your version of the repo down to your selected machine
  • Read this README thoroughly, then begin working!

When you open the project in your text editor and the browser, you'll notice that the HTML and CSS have been written - your job is to implement the functionality with JavaScript! If you would like to change any class or ID names currently in the HTML, be our guest.

Submission - Round 1

At or before 11:30, push your code to your GitHub repository and deploy to GH pages. Complete the provided submission form in your channel to share your work with us.

Workflow

To keep up with good habits, it's recommended to make a branch for each iteration, with several commits per branch.

Iteration 0: MVP - one emotion

Only worry about one of the emoji buttons for now.

  • When the user clicks that button, they should see one of the three responses associated with that button.
  • When the user clicks it again, they should see one of the three responses, potentially a different response than previous.
  • The user should not be able to identify a pattern in regards to the order they see the responses.

Iteration 1: All the Feels

Implement the same functionality you did on one button, but on all three buttons now.

Iteration 2: Level Up

As a user, it may be a little confusing if you get the sme response twice in a row (you may wonder, did that "work"?). Write your code in a way that doesn't allow a user to get a "random" answer two times a row. You may have noticed that the "example" site linked above does not have this functionality.

Possible Responses

You are not required to use these specific phrases, we just provide them to save you time!

Very Happy Emoji

  • "You go!"
  • "Your smile just cheered me up!"
  • "YAY!"

Silly Emoji

  • "Interesting response"
  • "Sounds ... good?"
  • "Me too."

Sad Emoji

  • "Do you want to talk?"
  • "Keep your head up"
  • "We can cry together!"
  • "What can I do?"