Widget:Guides/PlatformSwitcher

<form>

 <fieldset id="platform-switcher">
   <legend>Select your operating system:</legend>

   <label>
     <input type="radio" name="platform" value="windows" checked /> Windows
   </label>

   <label>
     <input type="radio" name="platform" value="macos" /> macOS
   </label>

   <label>
     <input type="radio" name="platform" value="linux" /> Linux
   </label>

   <label>
     <input type="radio" name="platform" value="haiku" /> Haiku
   </label>
 </fieldset>

</form>

<script type="module" defer> const containers = document.querySelectorAll('.platform');

const plat = navigator.platform; const os = plat.includes("Mac") ? "macos"

 : plat.includes("Win") ? "windows"
 : plat.includes("Linux") ? "linux"
 : plat.includes("Haiku") ? "haiku" 
 : "windows";

switch_thing(os); const os_radio = document.querySelector(`[value=${os}]`); os_radio.checked = true;

const fieldset = document.getElementById("platform-switcher");

for (const elem of fieldset.querySelectorAll('input')) {

 elem.addEventListener('change', () => switch_thing(elem.value))

}

function switch_thing(value) {

 for (const x of containers) {
   x.style.display = "none"
 }
 const platform_elems = document.querySelectorAll('.' + value);
 platform_elems.forEach(x => x.style.display = "block");

} </script>