I made a two buttons for changing the padding on my website. They work, however I have to set to padding for nav, main and footer manually in the CSS. Here is the code:
main { padding: 20px 25%; } footer { padding: 5px 25%; } nav { padding: 0 25%; }
var padding = 15; $('#paddingPlus').click(function() { switch(padding) { case 0: changePadding(5); padding = 5; break; case 5: changePadding(10); padding = 10; break; case 10: changePadding(15); padding = 15; break; case 15: changePadding(20); padding = 20; break; case 20: changePadding(25); padding = 25; break; case 25: changePadding(30); padding = 30; break; case 30: alert('You have reached the maximum amount of padding!'); break; } }); $('#paddingMinus').click(function() { switch(padding) { case 0: alert('You have reached the minimum amount of padding!'); break; case 5: changePadding(0); padding = 0; break; case 10: changePadding(5); padding = 5; break; case 15: changePadding(10); padding = 10; break; case 20: changePadding(15); padding = 15; break; case 25: changePadding(20); padding = 20; break; case 30: changePadding(25); padding = 25; break; } }); function changePadding(pad) { $('nav').css('padding', '0 ' + pad + '%'); $('main').css('padding', '20px ' + pad + '%'); $('footer').css('padding', '5px ' + pad + '%'); }
I tried to do this with localstorage so that it saves the padding, but it doesn’t work and chrome shows me no error-message. Here is the code:
main { } footer { } nav { }
switch(localStorage.getItem('padding')) { case 0: changePadding(0); localStorage.setItem('padding', 0); break; case 5: changePadding(5); localStorage.setItem('padding', 5); break; case 10: changePadding(10); localStorage.setItem('padding', 10); break; case 15: changePadding(15); localStorage.setItem('padding', 15); break; case 20: changePadding(20); localStorage.setItem('padding', 20); break; case 25: changePadding(25); localStorage.setItem('padding', 35); break; case 30: changePadding(30); localStorage.setItem('padding', 30); break; default: changePadding(15); localStorage.setItem('padding', 15); } $('#paddingPlus').click(function() { switch(localStorage.getItem('padding')) { case 0: changePadding(5); localStorage.setItem('padding', 5); break; case 5: changePadding(10); localStorage.setItem('padding', 10); break; case 10: changePadding(15); localStorage.setItem('padding', 15); break; case 15: changePadding(20); localStorage.setItem('padding', 20); break; case 20: changePadding(25); localStorage.setItem('padding', 25); break; case 25: changePadding(30); localStorage.setItem('padding', 30); break; case 30: alert('You have reached the maximum amount of padding!'); break; } }); $('#paddingMinus').click(function() { switch(localStorage.getItem('padding')) { case 0: alert('You have reached the minimum amount of padding!'); break; case 5: changePadding(0); localStorage.setItem('padding', 0); break; case 10: changePadding(5); localStorage.setItem('padding', 5); break; case 15: changePadding(10); localStorage.setItem('padding', 10); break; case 20: changePadding(15); localStorage.setItem('padding', 15); break; case 25: changePadding(20); localStorage.setItem('padding', 20); break; case 30: changePadding(25); localStorage.setItem('padding', 25); break; } }); function changePadding(pad) { $('nav').css('padding', '0 ' + pad + '%'); $('main').css('padding', '20px ' + pad + '%'); $('footer').css('padding', '5px ' + pad + '%'); }
I would really appreciate it if someone could tell me where my error is. Thanks in advance
Answer
To expand on the previous answer, does this help?
$('#paddingPlus').click(function() { let padding = parseInt(localStorage.getItem('padding')); if (padding >== 30) { alert('You have reached the maximum amount of padding!'); } else { padding += 5; changePadding(padding); } } $('#paddingMinus').click(function() { let padding = parseInt(localStorage.getItem('padding')); if (padding === 0) { alert('You have reached the minimum amount of padding!'); } else { padding -= 5; changePadding(padding); } } function changePadding(pad) { localStorage.setItem('padding', pad); $('nav').css('padding', '0 ' + pad + '%'); $('main').css('padding', '20px ' + pad + '%'); $('footer').css('padding', '5px ' + pad + '%'); }