In this demo, if a user sets dark mode and gray coloured text as his preferences and we want to use cookies to remember this information event when the user moves away from the page and returns later https://raw.githubusercontent.com/finsweet/jqueryCourse/main/cookies/ex21.js?actionable=true
$("#radio").is(":checked") is used to check if a radio button is on.
We execute css on the blue bordered div to activate dark mode. We then store the user preferences in a cookie.
If you have already activated dark mode, refresh the page then run the code again. It will automatically remember the dark mode was on.
$(document).ready(function(){
XT1
});
</script>
Live demo
<div id="minidivpage" class="example-live"><div class="w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" aria-label="Email Form"><label for="name">Sample text</label><label for="email" class="field-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</label><label class="w-radio"><input type="radio" data-name="Radio 3" id="radio-3" name="radio" value="Radio" class="w-form-formradioinput w-radio-input"><span class="radio-button-label-2 w-form-label" for="radio-3">Dark Mode</span></label><label class="w-radio"><input type="radio" data-name="Radio 4" id="radio-4" name="radio" value="Radio 2" class="w-form-formradioinput w-radio-input"><span class="radio-button-label-2 w-form-label" for="radio-4">Light Mode</span></label></form><div class="w-form-done" tabindex="-1" role="region" aria-label="Email Form success"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail" tabindex="-1" role="region" aria-label="Email Form failure"><div>Oops! Something went wrong while submitting the form.</div></div></div></div>
$(document).ready(function() {
XT1
});
</script>
