forked from kroysemaj/seat-res-starter
/
app.js
74 lines (61 loc) · 1.95 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
$(document).ready(function(){
// looping function creates seating chart divs
// (successful)
var seatNumber = [];
for(var i = 1; i <= 24; i++){
seatNumber.push(i);
$("#seat-chart").append(function(){
return "<div class='available'><h3>" + i + "</h3></div>";
})
}
$("div.available").click(function(){
$(this).toggleClass("reserved");
});
$('.available').on('click', function() {
$('#seat').replaceWith('test');
});
// serialize form input
// (successful-ish)
$("form").submit(function(event) {
var customer = $(this).serializeArray();
console.log(customer);
event.preventDefault();
});
// $("#submitButton").click(function () {
// $( "form" ).submit(function( event ) {
// var customer = $( this ).serializeArray();
// console.log(customer);
// event.preventDefault();
// if ($("div").hasClass("reserved")) {
// $(".reserved").data("First", "");
// }
// });
// });
// show one form field at a time, with background-color change on focus
// (successful — but wondering if it could be DRY with a "for" loop?)
$("#firstName").focus(function() {
$("#lastName").css("background-color", "#ddd");
$("#lastNameDiv").fadeIn(400);
});
$("#lastName").focus(function() {
$("#lastName").css("background-color", "#fff");
$("#phoneNumberDiv").fadeIn(400);
$("#phoneNumber").css("background-color", "#ddd");
});
$("#phoneNumber").focus(function() {
$("#phoneNumber").css("background-color", "#fff");
$("#submitButton").fadeIn(400);
});
});
// creates an array of customer info and appends it to reserved divs
// (successful, but not what we want)
// $("button").click(function () {
// var firstName = $("input[name='firstName']").val();
// var lastName = $("input[name='lastName']").val();
// var phoneNumber = $("input[name='phoneNumber']").val();
// var customer = [];
// customer.push(firstName, lastName, customer);
// if ($("div").hasClass("reserved")) {
// $(".reserved").append(customer);
// }
// });