Add JavaScript screen navigation system for SPA transitions

[jacobizz]

Implement a basic screen navigation system for the web app. Use a screens map referencing document elements for each screen, and provide a show(screen) function to handle toggling visibility via class changes and scrolling to the top. Add event handlers:

• Set up a button (#enterBtn) to show the "home" screen on click.
• For every element with [data-go], switch to the corresponding screen on click using show() and the element's data-go attribute.

Reference:

const screens = {
  landing: document.getElementById("landing"),
  home: document.getElementById("home"),
  shop: document.getElementById("shop"),
  code: document.getElementById("code"),
};

function show(screen) {
  Object.values(screens).forEach(s => s.classList.remove("screen--active"));
  screens[screen].classList.add("screen--active");
  window.scrollTo(0, 0);
}

document.getElementById("enterBtn").onclick = () => show("home");

document.querySelectorAll("[data-go]").forEach(btn => {
  btn.onclick = () => show(btn.dataset.go);
});

Add this navigation logic to manage screen transitions without full page reloads. Each screen element (e.g. #landing, #home, #shop, #code) should have corresponding markup. Only one screen should have the screen--active class at a time.