Firebase RSVP

by rickysullivan

HTML

<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<div id="wrapper">
    <div class="pure-g">
        <div class="content pure-u-1 pure-u-md-3-4">
            <div class="login-area">
                <form class="pure-form pure-form-stacked" action="#">
                    <fieldset>
                        <div class="pure-g">
                            <div class="pure-u-1 pure-u-md-1-3">
                                <input type="text" id="name" name="name" placeholder="Name">
                            </div>
                            <div class="pure-u-1 pure-u-md-1-3">
                                <input type="text" id="code" name="code" placeholder="Code">
                            </div>
                            <div class="pure-u-1 pure-u-md-1-3">
                                <button type="button" id="check" class="pure-button pure-button-primary">Go</button>
                            </div>
                        </div>
                    </fieldset>
                </form> <pre id="status"></pre>

            </div>
            <div class="member-area" style="display: none;">
                <form class="pure-form pure-form-stacked" action="#">
                    <fieldset class="rsvp-details">
                        <label>Name</label> <span class="rsvp-name"></span>

                        <label for="email">E-Mail</label>
                        <input id="email" type="email">
                        <label for="option-two" class="pure-radio">
                            <input id="option-two" type="radio" name="optionsRadios" value="yes">Attending</label>
                        <label for="option-three" class="pure-radio">
                            <input id="option-three" type="radio" name="optionsRadios"...

SCSS

/*
    SASS SCSS
*/
 .content {
    padding: 2em 1em 0;
}
@media (min-width: 48em) {
    .content {
        padding: 2em 3em 0;
    }
}
.rsvp-details {
    span {
        font-size: .5em;
    }
}
pre {
    padding: 20px;
    font-size: 20px;
    border-radius: 15px;
    background-color: #fafafa;
    border: 1px solid #999;
    font-family:'Courier New', 'Courier', monospaced;
}

JavaScript

(function ($) {
    "use strict";

    $("#check").on('click', checkName);

    $(document).keypress(function (e) {
        if (e.which == 13) {
            checkName();
        }
    });

    String.prototype.capitalizeFirstLetter = function () {
        return this.toLowerCase().charAt(0).toUpperCase() + this.slice(1);
    };

    function checkName() {

        var guestName = $("#name").val().capitalizeFirstLetter();
        var guestCode = $("#code").val();

        if (guestName === '' || guestCode === '') {
            show("Please fill all fields");
            return;
        }

        $("#details").text("Loading...");

        var fb = new Firebase("https://blinding-inferno-3411.firebaseio.com/");

        fb.authAnonymously(function (error, authData) {

            if (error) {
                console.log("Login Failed!", error);
            } else {

            }
        });

        fb.child('guests')
            .orderByChild('NAME')
            .startAt(guestName)
            .endAt(guestName + "~")
            .once("value", function (data) {

            var userData = data.val();

            if (userData === null) {
                show("Name not found");
                return;
            }

            for (var el in userData) {

                if (el) {

                    show("Checking code...");

                    if (userData[el].CODE === guestCode) {

                        if (userData[el].RELATED !== '') {

                            fb.child('guests/' + userData[el].RELATED).once('value', function (related) {

                                if (related.val() !== null) {
                                    userData[el].RELATED = related.val();
                                }
                            })
                        }


                        if (userData[el].ADDRESS !== '') {

                            fb.child('addresses/' + userData[el].ADDRESS).once('value', function (address) {

                       ...