mayfer · April 7, 2015 18:31
diff --git a/gamblerat.html b/gamblerat.html
 <html>
    <head>
        
        <title>Intro to Javascript</title>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <style>
            body { background: #358; color: #fff; padding: 50px; font-family: sans-serif; }

            .row {
                background: rgba(255, 255, 255, 0.5);
                padding: 5px;
                margin: 10px;
            }
            

            .outer {
                background: red;
            }
            .middle {
                background: green;
            }
            .inner {
                background: white;
            }
            .outer, .middle, .inner {
                padding: 30px;
            }

            .invalid {
                border: 5px solid red;
            }

        </style>

        <script>

        $(function() {

            $(document).on('click', '.outer', function(e) {
                console.log("clicked", this);
            });
            $(document).on('click', '.middle', function(e) {
                console.log("clicked", this);
            });
            $(document).on('click', '.inner', function(e) {
                console.log("clicked", this);
            });


            var counter = 1;

            $(document).on('submit', 'form', function(e) {
                e.preventDefault();

                var input = $('input').val();


                var id = "input-row-" + counter;
                counter++;

                function validateEmail(email) {
                    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
                    return re.test(email);
                }

                if(validateEmail(input)) {
                    $('.middle').append(
                        $('<div>').html(input).attr('id', id)
                    );

                    $('input').val('');
                    $('input').removeClass('invalid');
                } else {
                    $('input').addClass('invalid');
                }

            });

            $(document).on('click', 'a', function(e){
            
                console.log("making ajax call");
                $.ajax('./ajax.txt', {
                    success: function(response) {
                        console.log("Got output:", response);
                    },
                    error: function(error) {
                        alert("call failed");
                    },
                    method: "POST",
                    data: {
                        username: "murat",
                        password: "ha ha ha",

                    }
                });
                console.log("finished REQUESTING ajax call");
            });


        });

        </script>


    </head>
    <body>
        
        <h1 id="title">Gamble RAT!!1!</h1>

        <div class='outer'>
            <div class='middle'>
                <div class='inner'>
                    <form>
                        <input type="text" name="whatever" />
                        <button type="submit">Submit</button>
                    </form>
                </div>
                <a href="#">CLICK ME</a>
            </div>
        </div>

    </body>
 </html>
	<html>
	<head>

	<title>Intro to Javascript</title>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<style>
	body { background: #358; color: #fff; padding: 50px; font-family: sans-serif; }

	.row {
	background: rgba(255, 255, 255, 0.5);
	padding: 5px;
	margin: 10px;
	}


	.outer {
	background: red;
	}
	.middle {
	background: green;
	}
	.inner {
	background: white;
	}
	.outer, .middle, .inner {
	padding: 30px;
	}

	.invalid {
	border: 5px solid red;
	}

	</style>

	<script>

	$(function() {

	$(document).on('click', '.outer', function(e) {
	console.log("clicked", this);
	});
	$(document).on('click', '.middle', function(e) {
	console.log("clicked", this);
	});
	$(document).on('click', '.inner', function(e) {
	console.log("clicked", this);
	});


	var counter = 1;

	$(document).on('submit', 'form', function(e) {
	e.preventDefault();

	var input = $('input').val();


	var id = "input-row-" + counter;
	counter++;

	function validateEmail(email) {
	var re = /^([\w-]+(?:\.[\w-]+))@((?:[\w-]+\.)\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
	return re.test(email);
	}

	if(validateEmail(input)) {
	$('.middle').append(
	$('<div>').html(input).attr('id', id)
	);

	$('input').val('');
	$('input').removeClass('invalid');
	} else {
	$('input').addClass('invalid');
	}

	});

	$(document).on('click', 'a', function(e){

	console.log("making ajax call");
	$.ajax('./ajax.txt', {
	success: function(response) {
	console.log("Got output:", response);
	},
	error: function(error) {
	alert("call failed");
	},
	method: "POST",
	data: {
	username: "murat",
	password: "ha ha ha",

	}
	});
	console.log("finished REQUESTING ajax call");
	});


	});

	</script>


	</head>
	<body>

	<h1 id="title">Gamble RAT!!1!</h1>

	<div class='outer'>
	<div class='middle'>
	<div class='inner'>
	<form>
	<input type="text" name="whatever" />
	<button type="submit">Submit</button>
	</form>
	</div>
	<a href="#">CLICK ME</a>
	</div>
	</div>

	</body>
	</html>