Unwrapped '23: Create an annoucement banner for the holidays

banner.css

.annoucement-banner {
  padding: 20px;
  background-color: palegoldenrod;
}

.annoucement-banner a {
  float: right;
}

banner.js

<script>
  // HelpDocs Unwrapped '23 Present - Add annoucement banner

  // Function to add annoucement banner when page is ready
  function ready(fn) {
    if (document.readyState !== 'loading') {
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }

  ready(function() {

    // Start by adding the text you'd like to use inside the banner
    const newContent = document.createTextNode("We're offering limited support during the holidays.");

    // and for the link here
    const linkText = document.createTextNode("Learn more →");

    // then add the link title (for accessibility)
    const linkTitle = "Link to article about limited support during the holidays";

    // and finally add the link to your article/webpage
    const link = "https://your-slug.helpdocs.io/article/x";
    
    // We create a new div element
    const banner = document.createElement("div");
    banner.classList.add("annoucement-banner");

    // Then get the #main element to prepend to
    const mainDiv = document.getElementById("main");
  
    // and give it some content
    const a = document.createElement('a');
    a.appendChild(linkText);
    a.title = linkTitle;
    a.href = link;
  
    // then add the text to the newly created div
    banner.appendChild(newContent);
    banner.appendChild(a);

    // finally it's added before the #main element
    mainDiv.prepend(banner);

    // et voila! You have an announcement banner ✨
  });
</script>