We Are Super Team RoshJud!

---

gitMission Impossible?

• We deployed our app on netlify. To play our game, please click on this link

---

Goals

The goal was to build an interactive game using data from an API

---

User Stories

• As a user I would like to be able to input my gitHub handle and see my avatar displayed on the app.

• As a user I would like to be able to be matched with a super-hero buddy.

• As a user I would like to be able to be assigned a mission to complete in collaboration with my super buddy.

• As a user I would like to be able to predict whether or not we will be able to complete the mission.

• As a user I would like to be able to keep score of my successful predictions.

---

Wire Frame

---

File Architecture

---

It's not JavaScript!

const UserImage = () => {
  const [userData, setUserData] = React.useState(null);
  console.log("This is userData", userData);

  const [gitHandle, setGitHandle] = React.useState();

  return (
    <div>
      <h1>SuperGit</h1>
      <form
        onSubmit={event => {
          event.preventDefault();
          const url = `https://api.github.com/users/${gitHandle}`;
          getUserDataGit(url).then(data => setUserData(data));
        }}
      >
        <fieldset>
          <legend>User</legend>
          <label for="gitHandle"></label>
          <input
            placeholder="Enter user name"
            type="text"
            id="gitHandle"
            name="gitHandle"
            value={gitHandle}
            onChange={event => setGitHandle(event.target.value)}
          ></input>
          <input type="submit" value="submit"></input>
        </fieldset>
        {userData ? <img src={userData.avatar_url} /> : null}
      </form>
    </div>
  );
};

export default UserImage;

---