"AddBookingForked"
Bootstrap 3.3.0 Snippet by MaartenDT

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="newEventHolder"> <span><i class="fa fa-plus"></i> Request a Booking</span> </div> <div id="newEventForm"> <label for="event-cardetails" style="text-decoration: underline">Car Details</label> <br/> <label for="event-carreg">Car Reg.</label> <input type="text" id="eventCarReg" placeholder="Reg. Number"></input> <br/> <center> <button type="submit" class="btn btn-success">Search for Reg. Number</button> </center> <br/> <br/> <br/> <label for="event-carmodel">Car Model</label> <input type="text" id="eventCarModel" placeholder="Car Model"></input> <label for="event-carmake">Car Make</label> <input type="text" id="eventCarMake" placeholder="Car Make"></input> <br/> <br/> <label for="event-service" style="text-decoration: underline">Service</label> <br/> <label for="event-servicerequired">Please select the service you require:</label> <br/> <input type="radio" name="radioserv" value="Filter" id="eventService1">Filter Replacement <br/> <input type="radio" name="radioserv" value="NCT" id="eventService2">NCT Check <br/> <input type="radio" name="radioserv" value="Oil" id="eventService3">Oil Change <br/> <input type="radio" name="radioserv" value="Mudflaps" id="eventService4">Mudflaps Replacement <br/> <input type="radio" name="radioserv" value="Other" id="eventService5" checked>Other / Consultation <br/> <br/> <label for="event-bookdetails" style="text-decoration: underline">Booking Details</label> <br/> <label for="event-date">Preferred Date</label> <input type="text" id="eventDate"> <label for="event-time">Preferred Time</label> <input type="time" id="eventTime"/> <br/> <br/> <label for="event-description">Description of Problem</label> <textarea name="event-description" id="eventDescriptionInput" placeholder="Any extra information we should know about?"></textarea> <button name="add-event" id="addEvent">Request Booking</button> <button name="cancel-add-event" id="cancelAddEvent">Cancel</button> </div> <!--<ul id="upcomingEvents"> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Akron Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> </li> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Cleveland Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> </li> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Columbus Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> <li> </ul>--> </div>
.container { margin: 50px auto; width: 640px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } #newEventHolder { margin-bottom: 10px; width: 100%; height: 100px; border: 3px dashed #85b9e4; text-align: center; line-height: 4; font-size: 24px; color: #85b9e4; box-sizing: border-box; border-radius: 3px; } #newEventHolder:hover { border: 3px dashed #3289d2; color: #3289d2; cursor: pointer; } #newEventForm { width: 100%; padding: 15px; box-sizing: border-box; display: none; } #newEventForm label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 16px; color: #244674; } #newEventForm input[type="text"] { padding-left: 15px; margin-bottom: 20px; height: 50px; width: 100%; line-height: 1.875; font-size: 16px; color: #A7C1D9; border: 2px solid #C4DDF2; outline: 0; box-sizing: border-box; background: #f6fafd; } #newEventForm input[type="text"]:focus { background: #FFF; border: 2px solid #9ac5e9; } #newEventForm textarea { margin-bottom: 20px; padding: 5px; height: 120px; width: 100%; line-height: 1.875; font-size: 16px; color: #A7C1D9; border: 2px solid #C4DDF2; outline: 0; box-sizing: border-box; border-radius: 3px; background: #f6fafd; } #newEventForm textarea:focus { background: #FFF; border: 2px solid #9ac5e9; } #newEventForm button { margin-right: 10px; padding: 0 15px; background: #849EBF; color: #eef5fb; font-size: 16px; font-weight: 400; border: 0; outline: 0; line-height: 3.5; border-radius: 3px; cursor: pointer; } #newEventForm button:hover { background: #6284ae; } #newEventForm button#cancelAddEvent { background: #d9e9f7; color: #4c6a91; cursor: pointer; } #newEventForm button#cancelAddEvent:hover { background: #C4DDF2; } #eventHolder { padding: 17px 15px; margin-bottom: 10px; background: #C4DDF2; width: 100%; height: 100px; box-sizing: border-box; border-radius: 3px; } #eventHolder::after { content: ""; display: table; clear: both; } #eventHolder .event-date-holder { float: left; background: #A7C1D9; margin-right: 20px; padding: 10px; width: 50px; text-align: center; border-radius: 4px; box-shadow: 0px 1px 0px 0px #d9e9f7; } #eventHolder .event-date-holder #dateNumber { display: block; font-size: 30px; font-weight: 700; color: #0C1726; } #eventHolder .event-date-holder #dateDay { text-transform: uppercase; } #eventHolder .event-details-holder { float: left; width: 520px; line-height: 3.2; } #eventHolder .event-details-holder::after { content: ""; display: table; clear: both; } #eventHolder .event-details-holder h1 { float: left; margin-right: 30px; vertical-align: bottom; font-size: 20px; font-weight: 600; color: #244674; } #eventHolder .event-details-holder span#eventDescription { position: relative; padding-top: 4px; color: #0f2b42; float: left; font-size: 18px; } #eventHolder .event-details-holder span#eventDescription::before { content: "//"; position: absolute; left: -20px; color: #2a7cc0; } #eventHolder .event-details-holder ul#editTools { float: right; margin: 0px 0px 0px 10px; padding: 0px; } #eventHolder .event-details-holder ul#editTools li { display: inline; margin-right: 15px; padding-top: 5px; font-size: 20px; color: #5ca1db; } #eventHolder .event-details-holder ul#editTools li .fa { text-decoration: 0px 1px 0px 0px #d9e9f7; } #eventHolder .event-details-holder ul#editTools li .fa:hover { color: #3289d2; cursor: pointer; } #eventHolder .event-details-holder ul#editTools li:last-child { margin-right: 0; } .hide { display: none; }
var newEventHolder = document.getElementById("newEventHolder"); var eventForm = document.getElementById("newEventForm"); var eventDate = document.getElementById("eventDate"); //var eventTime = document.getElementById("eventTime"); var addEvent = document.getElementById("addEvent"); var cancel = document.getElementById("cancelAddEvent"); /*var upcomingEvents = document.getElementById("upcomingEvents"); var eventHolder = document.getElementById("eventHolder"); var removeEvent = document.getElementById("removeEvent");*/ // Show New Event form $(newEventHolder).click(function() { $(eventForm).slideDown(400); }); // Add Datepicker to Date input $(eventDate).datepicker(); //$(eventTime).timepicker(); // Close New Event form $(cancel).click(function() { $(eventForm).slideUp(400); }); // Delete icon removed event from list /*$(removeEvent).click(function() { $(eventHolder).addClass('hide').stop(); });*/

Related: See More


Questions / Comments: