Zero dependency js widget
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need to get some really lightweight js made so we can easily embed a simple single js file that will render this widget in the footer of a website and will behave like what we have coded here - https://codepen.io/social_quotient/pen/RwyreaQ we should not make any assumptions about the site that this is going to run on. For sure we dont want jquery or bootstrap or fontawesome dependencies etc..

awarded to Carlos Olivo
Tags
javascript

Crowdsource coding tasks.

1 Solution

Winning solution

Zero external dependency version | Widget version | Embed version

Option 1

Save the script below to a reachable internet address and use it as

<script src="https://www.yourpage.tld/widget.js"></script>

JS

(function () {
  "use strict";

  function htmlToElement(html) {
    var template = document.createElement("template");
    html = html.trim();
    template.innerHTML = html;
    return template.content.firstChild;
  }

  var $random = `p${(Math.random() + 1).toString(36).substring(7)}`;

  document
    .querySelector("body")
    .appendChild(
      htmlToElement(
        '<div id="pool"><style>#pool{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;pointer-events:none}#pool button:focus{outline:none}#pool button:hover{opacity:.8}#pool .button-wrapper{width:54px;height:100%;position:absolute;bottom:0;right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;right:20px;bottom:20px;transition:1.25s all ease .9s}#pool button{width:54px;height:54px;border:none;border-radius:50%;cursor:pointer;z-index:4;position:relative;transition:1.25s all ease .1s}#pool .main-button{background:#00799c;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;pointer-events:auto}#pool .main-button .main_logo_img{display:inline;fill:#fff;height:20px;width:20px}#pool .layer{position:absolute;left:0;right:0;bottom:0;width:54px;height:54px;background:#00799c;border-radius:50%;z-index:-99;pointer-events:none;transition:1.25s all ease .5s}#pool .button-wrapper.clicked{-webkit-transform:rotate(90deg) translateY(-96px);-ms-transform:rotate(90deg) translateY(-96px);transform:rotate(180deg) translateY(-20px) translateX(20px);right:0;bottom:0;-webkit-transition:.3s all ease .6s;transition:.3s all ease .6s}#pool .button-wrapper.clicked .main-button{opacity:0;-webkit-transition:.3s all ease .3s;transition:.3s all ease .3s}#pool .button-wrapper.clicked .layer{-webkit-transform:scale(100);-ms-transform:scale(100);transform:scale(100);-webkit-transition:2.25s all ease .9s;transition:1.25s all ease .9s}#pool .layered-content{position:absolute;top:0;left:0;right:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;opacity:0;transition:.7s all ease .3s}#pool .layered-content .content .main_logo_img{fill:#fff;height:125px;max-width:100%}#pool .layered-content.active{opacity:1;pointer-events:auto}#pool .layered-content .content{height:auto;max-width:95%}#pool .close-button{background:#fff;color:#00799c;font-size:20px;font-weight:1000;position:absolute;right:20px;top:20px}#pool .close-button:before{content:"×"}#pool .layered-content.active .close-button{-webkit-animation:.2s bounceIn;animation:.2s bounceIn}#pool .content p{color:#fff;font-weight:300;line-height:1.5;font-family:"Roboto",sans-serif}#pool .content p a{font-size:12px;background:#fff;padding:2.5px 5px;color:#00799c;text-decoration:none;border-radius:50px;display:inline-block;margin-left:1.5px}#pool .content p{opacity:0;position:relative;top:-7.5px;-webkit-transition:.5s all ease .5s;transition:.5s all ease .5s}#pool .layered-content.active .content p{opacity:1;top:0;-webkit-transition:.5s all ease 1s;transition:.5s all ease 1s}</style><div class="button-wrapper"><div class="layer"></div><button class="main-button "><img class="main_logo_img" src="https://www.perdix.us/wp-content/uploads/2022/09/Perdix-Favicon.svg" alt="Perdix"></button></div><div class="layered-content"><button class="close-button"></button><div class="content"><p>Powered By</p><img class="main_logo_img" src="https://www.perdix.us/wp-content/uploads/2022/09/Perdix-Logo-white2.svg" alt="Perdix"><p><a href="https://www.perdix.us/" target="_blank" rel="noopener noreferrer">Learn more </a></p></div></div></div>'.replaceAll("pool",$random)
      )
    );

  var $mainButton = document.querySelector(`#${$random} .main-button`),
    $closeButton = document.querySelector(`#${$random} .close-button`),
    $buttonWrapper = document.querySelector(`#${$random} .button-wrapper`),
    $layer = document.querySelector(`#${$random} .layered-content`);

  $mainButton.addEventListener("click", function () {
    $buttonWrapper.classList.add("clicked");
    setTimeout(function () {
      $layer.classList.add("active");
    }, 900);
  });

  $closeButton.addEventListener("click", function () {
    $layer.classList.remove("active");
    $buttonWrapper.classList.remove("clicked");
  });
})();

Option 2

Embed the whole script as-is

JS - Embed version

<script type="text/javascript">
  !function(){"use strict";function a(a){var b=document.createElement("template");return a=a.trim(),b.innerHTML=a,b.content.firstChild}var b="p"+(Math.random()+1).toString(36).substring(7);document.querySelector("body").appendChild(a('<div id="pool"><style>#pool{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;pointer-events:none}#pool button:focus{outline:none}#pool button:hover{opacity:.8}#pool .button-wrapper{width:54px;height:100%;position:absolute;bottom:0;right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;right:20px;bottom:20px;transition:1.25s all ease .9s}#pool button{width:54px;height:54px;border:none;border-radius:50%;cursor:pointer;z-index:4;position:relative;transition:1.25s all ease .1s}#pool .main-button{background:#00799c;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;pointer-events:auto}#pool .main-button .main_logo_img{display:inline;fill:#fff;height:20px;width:20px}#pool .layer{position:absolute;left:0;right:0;bottom:0;width:54px;height:54px;background:#00799c;border-radius:50%;z-index:-99;pointer-events:none;transition:1.25s all ease .5s}#pool .button-wrapper.clicked{-webkit-transform:rotate(90deg) translateY(-96px);-ms-transform:rotate(90deg) translateY(-96px);transform:rotate(180deg) translateY(-20px) translateX(20px);right:0;bottom:0;-webkit-transition:.3s all ease .6s;transition:.3s all ease .6s}#pool .button-wrapper.clicked .main-button{opacity:0;-webkit-transition:.3s all ease .3s;transition:.3s all ease .3s}#pool .button-wrapper.clicked .layer{-webkit-transform:scale(100);-ms-transform:scale(100);transform:scale(100);-webkit-transition:2.25s all ease .9s;transition:1.25s all ease .9s}#pool .layered-content{position:absolute;top:0;left:0;right:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;opacity:0;transition:.7s all ease .3s}#pool .layered-content .content .main_logo_img{fill:#fff;height:125px;max-width:100%}#pool .layered-content.active{opacity:1;pointer-events:auto}#pool .layered-content .content{height:auto;max-width:95%}#pool .close-button{background:#fff;color:#00799c;font-size:20px;font-weight:1000;position:absolute;right:20px;top:20px}#pool .close-button:before{content:"\xd7"}#pool .layered-content.active .close-button{-webkit-animation:.2s bounceIn;animation:.2s bounceIn}#pool .content p{color:#fff;font-weight:300;line-height:1.5;font-family:"Roboto",sans-serif}#pool .content p a{font-size:12px;background:#fff;padding:2.5px 5px;color:#00799c;text-decoration:none;border-radius:50px;display:inline-block;margin-left:1.5px}#pool .content p{opacity:0;position:relative;top:-7.5px;-webkit-transition:.5s all ease .5s;transition:.5s all ease .5s}#pool .layered-content.active .content p{opacity:1;top:0;-webkit-transition:.5s all ease 1s;transition:.5s all ease 1s}</style><div class="button-wrapper"><div class="layer"></div><button class="main-button "><img class="main_logo_img" src="https://www.perdix.us/wp-content/uploads/2022/09/Perdix-Favicon.svg" alt="Perdix"></button></div><div class="layered-content"><button class="close-button"></button><div class="content"><p>Powered By</p><img class="main_logo_img" src="https://www.perdix.us/wp-content/uploads/2022/09/Perdix-Logo-white2.svg" alt="Perdix"><p><a href="https://www.perdix.us/" target="_blank" rel="noopener noreferrer">Learn more </a></p></div></div></div>'.replaceAll("pool",b)));var c=document.querySelector("#"+b+" .main-button"),d=document.querySelector("#"+b+" .close-button"),e=document.querySelector("#"+b+" .button-wrapper"),f=document.querySelector("#"+b+" .layered-content");c.addEventListener("click",function(){e.classList.add("clicked"),setTimeout(function(){f.classList.add("active")},900)}),d.addEventListener("click",function(){f.classList.remove("active"),e.classList.remove("clicked")})}();
</script>
hey one note... I will only be able to embed js as an external file, it would be something similar to a chat script which looks like this - https://www.dropbox.com/s/ity4q4myyyf5nlz/2022-09-09_09-53-33.jpg?dl=0 - most of these 3rd party widgets are all kinda the same. you just give the non technical user the snippet to add to their site and it handles calling remote files etc.. so the embed code has to fully be responsible for calling the remote js file and handling all of the styling with that js file, we should also remove the need to call a custom font
Qdev 28 days ago
Updated.
Carlos Olivo 26 days ago