Pedge Mobile Angular

by rsmclaug

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=initial-scale=1, initial-scale=1.0">

<div id="mainContent" ng-controller="MainController">
    <div id="logo">
        <img src="http://www.vertafore.com/images/vertafore_logo_small.png"/>
        <h4>Producer<i>EDGE</i></h4>
    </div>
    <div id="signupView" class="container">
        <h4 class="header">Get Started</h4>
        <form name="signupForm">
            <div>
                <input type="text" ng-model="signup.firstName" name="firstName" placeholder="First Name" ng-required="true"/>
                <input type="text" ng-model="signup.lastName" placeholder="Last Name" ng-required="true"/>
                <select ng-model="signup.residentState" id="residentState" placeholder="State" ng-required="true" class="disabled">
                    <option value="" disabled="disabled" selected="selected">Resident State...</option>
                    <option value="MI">Michigan</option>
                    <option value="OH">Ohio</option>
                </select>
                <span class="error" ng-show="!checkEmail()">Email does not match</span>
                <input type="email" ng-model="signup.email" placeholder="Email Address" ng-required="true"/>
                <input type="email" ng-model="signup.confirmEmail" placeholder="Confirm Email" ng-required="true"/>
                <span class="error" ng-show="!checkPassword()">Password does not match</span>
                <input type="password" ng-model="signup.password" placeholder="Password" ng-required="true"/>
                <input type="password" ng-model="signup.confirmPassword" placeholder="Confirm Password" ng-required="true"/>
            </div>
            <div>
               ...

CSS

body {
    background-color: #f0f0f0;
}
#mainContent input[type='text'], #mainContent input[type='password'], #mainContent input[type='email'], #mainContent select {
    display: block;
    margin-bottom: 10px;
    padding-left: 5px;
    width: 100%;
    height: 30px;
}

#mainContent select {
    padding-left: 2px;
}
#logo {
    padding: 10px 0;
    text-align: center;
}
#logo h4 {
    display: inline;
}
.header {
    margin: 0 0 10px 0;
    text-align: center;
}
#goButton, #signinButton {
    margin-top: 10px;
    width: 100%;
}
.error {
    color: rgb(255, 55, 55);
}
.disabled, option.disabled {
    color: #A3A3A3;
}
option {
    color: black
}
.container button {
    width: 100%;
    margin-bottom: 10px;
}
.section {
    background: white;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 20px;
}
#alreadyHaveAccount, #needAnAccount {
    text-align: center;
    padding: 10px 0;
}
#footer {
    text-align: center;
    width: 100%;
    margin: 10px 0;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
    $scope.signup = {};

    $scope.view1Go = function() {
        $("#signupView").hide();
        $("#signinView").hide();
        $("#menuView").show();
        $(window).scrollTop();
    };

    $scope.checkEmail = function(){
        var signup = $scope.signup;
        return signup.email === signup.confirmEmail;
    };

    $scope.checkPassword = function(){
        var signup = $scope.signup;
        return signup.password === signup.confirmPassword;
    };

    attachEventHandlers();
});

var attachEventHandlers = function(){
    $("#residentState").on("change", function(){
        var $this = $(this);
        $this.removeClass("disabled").off("change");

    });
    $("#signinLink").on("click", function(){
        $(".container").hide();
        $("#signinView").show();
        $(window).scrollTop();
    });
    $("#signupLink").on("click", function(){
        $(".container").hide();
        $("#signupView").show();
        $(window).scrollTop();
    });
    $("#licensesButton").on("click", function(){
        $(".container").hide();
        $("#licensesView").show();
        $(window).scrollTop();
    });
    $("#educationButton").on("click", function(){
        $(".container").hide();
        $("#educationView").show();
        $(window).scrollTop();
    });
    $("#renewalButton").on("click", function(){
        $(".container").hide();
        $("#renewalView").show();
        $(window).scrollTop();
    });
    $("#transactionButton").on("click", function(){
        $(".container").hide();
        $("#transactionView").show();
        $(window).scrollTop();
    });
    $("#accountButton").on("click", function(){
        $(".container").hide();
        $("#accountView").show();
        $(window).scrollTop();
    });
    $("#logoutButton").on("click", function(){
        $(".container").hide();
        $("#signinView").show();
        $(window).scrollTop();
   ...