The menyou from ethanbonsignori

menyou's Issues

Import sign up modal to index.html

import this code into index.html
This modal will display when a user presses 'create account'. It contains forms for name, email, password and password confirmation. That data will be sent with the javascript code to firebase to check, and there will be errors displayed at the bottom if anything is incorrect. This field also has a password confirmation that will display an error if/when the users password and confirm password fields are not matching/matching.

    <!-- Signup Modal -->
    <div class="modal fade" id="modal-signup" tabindex="10" role="dialog" aria-labelledby="signup-modal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Create Account</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="signup-form">
              <div class="form-group">
                <label for="signup-displayname">Display Name</label>
                <input type="text" class="form-control" id="signup-displayname" required>
                <small class="form-text text-muted">The display name is what other users will see.</small>
              </div>
              <div class="form-group">
                <label for="signup-email">Email</label>
                <input type="email" class="form-control" id="signup-email" required>
                <small class="form-text text-muted">Your email will not be visible to other users.</small>
              </div>
              <div class="form-group position-relative">
                <label for="signup-password">Password</label>
                <input type="password" class="form-control password" id="signup-password" required>
                <div class="password-toggle" data-toggle="tooltip" data-placement="right" title="Hide/Show Password">
                  <i class="fas fa-eye"></i>
                </div>
              </div> <!-- End Position:Relative Form Group -->
              <div class="form-group position-relative">
                <label for="signup-password-confirm">Confirm Password</label>
                <input type="password" class="form-control" id="signup-password-confirm" required>
                <div id="password-match">
                  <i id="match" class="fas fa-check"></i>
                  <i id="no-match" class="fas fa-times"></i>
                </div>
              </div> <!-- End Position:Relative Form Group -->
              <small id="password-response" class="form-text"></small>
              <button id="signup-button" class="btn btn-success">Sign Up</button>
            </form>
          </div>
        </div>
      </div>
    </div> <!-- End Signup Modal -->

API Keys

Get API Keys from required APIs

Edamam / recipe search
Other API

Get whisk working

add ingredients to a shopping list

explore Walmart API
send Edamam response.ingredient list to a shopping cart
link the ingredients needed with Walmart

User Auth - login/logout

User authentication so that saved recipes are unique to each user.

Code user authentication through firebase
Create html for new user sign up
Validate password to make sure it's the same (Confirm password)
Code that displays/hides elements based on the user's status (logged in/out)

README

Import login modal to index.html

Import this code into index.html
This modal will display when a user presses 'log in'. It contains forms for email and password. That will be sent with the javascript code to firebase to check, and send back an error if the password is incorrect or user doesn't exist. The error is displayed in the password-login-response at the bottom.

    <!-- Login Modal -->
    <div class="modal fade" id="modal-login" tabindex="10" role="dialog" aria-labelledby="login-modal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Log In</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="login-form">
              <div class="form-group">
                <label for="login-email">Email</label>
                <input type="email" class="form-control" id="login-email" required>
              </div>
              <div class="form-group position-relative">
              <label for="login-password">Password</label>
                <input type="password" class="form-control password" id="login-password" required>
                <div class="password-toggle" data-toggle="tooltip" data-placement="right" title="Hide/Show Password">
                  <i class="fas fa-eye"></i>
                </div>
              </div> <!-- End Form group -->
              <small id="password-login-response" class="form-text"></small>
              <button id="login-button" class="btn btn-success">Log In</button>
            </form>
          </div>
        </div>
      </div>
    </div> <!-- End Login Modal -->

Import css for login/signup modals to styles.css

import this code to styles.ccs

This css is for styling the buttons and errros in the log in and sign up modals.

/* Account */
.logged-in, .logged-out {
  display: none;
} 
#login-button, #signup-button {
  position: relative;
  bottom: 0;
  left:0;
  width: 107%;
  padding: 1rem;
  margin: 2rem 0 -1rem -1rem ;

  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.password-toggle {
  color: rgb(190, 190, 190);
  position: absolute;
  width: auto;
  bottom: 8px;
  right: 10px;
  margin-top: 0;
  cursor: pointer;
  pointer-events: all; 
}
  .password-toggle:hover {
    color: rgb(170, 170, 170);
  }
  .password-toggle:active {
    color: rgb(150, 150, 150);
  }

#password-match {
  position: absolute;
  width: auto;
  bottom: 10px;
  right: 10px;
  margin-top: 0;
}
  #password-match #no-match {
    color: red;
    display: none;
  }
  #password-match #match {
    color: green;
    display: none;
  }

#password-login-response, #password-response {
  display: inline
}

Link Fontawesome to index.html

add a link to fontawesome at the top of index.html

This is so that icons like the "eye" for the show/hide password and the check & X icon for the password confirmation will work on the login and signup modals.

New Recipe Form

Index.html has form
That form contains input and/or textarea for recipe name, ingredients, steps
Each input has a unique identifier

Submitting Family Recipes

User Story

As a person that values family recipes, I want to be able to save them in a centralized location with easy access so that other family members can also access and update.

##Acceptance Criteria

Button with 'add recipe'
use bootstrap to create a modal with a form for submitting a family recipe
determine the input labels for form
validate the user input
store user input on a database (firebase?)
create input fields for ingredient, directions, and recipe name
click event to append input ingredient to modal div

Search

##User Story
As a chef, I want to be able to enter ingredients that I already have in my kitchen and find a recipe.

Acceptance Criteria

index.html has a text input
index.html has a search button
app.js has variable that stores text input
text input is sent through Ajax call
index.html has somewhere to display results

ethanbonsignori / menyou Goto Github PK

menyou's People

Contributors

Stargazers

Watchers

Forkers

menyou's Issues

New Recipe Form

User Story

Acceptance Criteria

Recommend Projects

Recommend Topics

Recommend Org