my client offers online ordering on site every day has different delivery times. uses third party solution on external site handle online orders , don't want transfer user site unless online ordering available. built crude modal alert box when clicked show user message online ordering available link external site. code uses new date().getday(); determine current day , series of if & else if statements show correct modal. works, since have different different delivery hours, need show else condition different message each if statement showing modal delivery times next day.
like said, kind of crude , can more refactored many less lines of code. if can add else condition every if, need @ point. thank you.
if / else if statements
var monstarttime = '4:00 pm'; var monendtime = '8:00 pm'; var teustarttime = '11:00 am'; var teuendtime = '9:00 pm'; var wedstarttime = '11:00 am'; var wedendtime = '9:00 pm'; ... var curr_day = new date().getday(); var curr_time = getval(); if (curr_day == '1' && get24hr(curr_time) > get24hr(monstarttime) && get24hr(curr_time) < get24hr(monendtime)) { document.queryselector('#alert-success').onclick = function() { $.sweetmodal({ content: '<h2>online ordering available!</h2>' + 'please click button below begin online order.' + '<div class="sweet-modal-buttons"><a href="http://pizzospizzeria.hungerrush.com" target="_blank" class="button greenb">start order</a></div>', // icon: $.sweetmodal.icon_success }); }; } else if (curr_day == '2' && get24hr(curr_time) > get24hr(teustarttime) && get24hr(curr_time) < get24hr(teuendtime)) { document.queryselector('#alert-success').onclick = function() { $.sweetmodal({ content: '<h2>online ordering available!</h2>' + 'please click button below begin online order.' + '<div class="sweet-modal-buttons"><a href="http://pizzospizzeria.hungerrush.com" target="_blank" class="button greenb">start order</a></div>', // icon: $.sweetmodal.icon_success }); }; } else if ... i need squeeze 1 of these else statements every else if
... } else { document.queryselector('#alert-success').onclick = function() { $.sweetmodal({ content: '<h2>online ordering not available</h2>' + 'online ordering available again tomorrow 11:00am 9:00pm', // icon: $.sweetmodal.icon_error, buttons: [{ label: 'close', classes: 'redb' }] }); }; } ...
you're repeating same thing in every code block. if find re-using something, make function.
//store our button event function instead of repeating function setuporderavailable() { document.queryselector('#alert-success').onclick = function() { $.sweetmodal({ content: '<h2>online ordering available!</h2>' + 'please click button below begin online order.' + '<div class="sweet-modal-buttons"><a href="http://pizzospizzeria.hungerrush.com" target="_blank" class="button greenb">start order</a></div>', // icon: $.sweetmodal.icon_success }); }; } function setupordernotavailable() { document.queryselector('#alert-success').onclick = function() { $.sweetmodal({ content: '<h2>online ordering not available</h2>' + 'online ordering available again tomorrow 11:00am 9:00pm', // icon: $.sweetmodal.icon_error, buttons: [{ label: 'close', classes: 'redb' }] }); } }; //store flag let know if ordering available or not var orderingisavailable = false; //monday if (curr_day == '1' && get24hr(curr_time) > get24hr(monstarttime) && get24hr(curr_time) < get24hr(monendtime)) { orderingisavailable = true; //tuesday } else if (curr_day == '2' && get24hr(curr_time) > get24hr(teustarttime) && get24hr(curr_time) < get24hr(teuendtime)) { orderingisavailable = true; //wednesday } else if ... //call function setup our button depending on ordering availability if (orderingisavailable) { setuporderavailable(); } else { setupordernotavailable(); } i didn't go full distance here. method of determining whether ordering available can better, @ least push in right direction, , should allow add alert you're looking for.
Comments
Post a Comment