Answer to Question #328782 in HTML/JavaScript Web Application for dante dumuje

Question

6. A counter of how many people have signed a Cause should be visible to anyone 7. Ability to see signature counts and actual new signatures as they happen 9. Ability to share causes on social media like Facebook, Twitter, and Reddit. 

Answer 1

<div>

    <button id="sign-cause-btn">Sign Cause</button>

    <div id="sign-cause-counter"><p></p></div>

    <div id="new-sign-cause-alert" style="display: none;"><p>New sign :)</p></div>

    <div id="share-on-block">

        <a type="button" role="button" title="Share on Facebook" ref="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank" rel="noopener">

            <i class="fab fa-2x fa-facebook-square"></i>

        </a>

        <a type="button" role="button" title="Share on Twitter" ref="https://twitter.com/intent/tweet?url=https%3A%2F%2Fparse.com" target="_blank" rel="noopener">

            <i class="fab fa-2x fa-twitter"></i>

        </a>

        <a id="share-on-reddit" type="button" role="button" title="Share on Reddit" href="#" target="_blank" rel="noopener">

            <i class="fab fa-2x fa-reddit"></i>

        </a>

    </div>

</div>

<script type="text/javascript">

    var signCount = 0;

    var signButton = $("#sign-cause-btn");

    var signCauseCounterJqo = $("#sign-cause-counter");

    var newSignCauseAlertJqo = $("#new-sign-cause-alert");

    signButton.on("click", function() {

        signCount++;

       

        var signMessage = signCount > 1

            ? "There are" + signCount + " signs"

            : "There is" + signCount + " sign";

        signCauseCounterJqo.text(signMessage);

        setTimeout(function hideElement() {

            newSignCauseAlertJqo.style.display = 'none';

        }, 1000);

    });  

    var redditShareBtn = $("div#share-on-block #share-on-reddit");

    redditShareBtn.on("click", function() {

        var currentHref = location.href;

        redditShareBtn.attr("href", "https://www.reddit.com/submit?url='" + currentHref);

    });

</script>