JSFiddle - React, Tailwind, and code Playground

by Kitson Broadhurst

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,700"></script>
<body>
        <h1>Support Chasing ED with 3 Clicks</h1>
        <div id="container">
            <p id="welcome">
                <b>Hola, rockstar!</b><br /><br />We hope you're having an awesome day. You're here because we know you have influence. When you share something, people pay attention. So, please take a few seconds to spread the ED love.
                <br /><br />
                <b>Thanks so much,</b>
                <br />
                Kitson, Zac and Oli
            </p>
            <div id="progress">
                <div class="percent">
                    <div class="number">0%</div>
                </div>
            </div>
            <ul id="actions">
                <li>
                    <h2>1. Share on Facebook</h2>
                    <p>Share Chasing Ed with your friends</p>
                    <button class="facebook">Share</button>
                </li>
                <li>
                    <h2>2. Post on Twitter</h2>
                    <p>Hook your following up</p>
                    <button class="twitter">Tweet</button>
                </li>
                <li>
                    <h2>3. Join the Chase</h2>
                    <p>Thank you in advance for subscribing!</p>
                    <a href="http://bit.ly/chasinged"><button class="play">Website</button></a>
                </li>
            </ul>
        </div>
        <div id="footer">&copy; Chasing ED 2014</div>
    </body>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #555;
    min-height: 100%;
    background-color: #eee;
    background-image: url(/press/images/gray_jean.png);
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


a, a:visited, a:active, a:hover {
    text-decoration: none;
    outline: none;    
}

h1 {
    background-color: #000;
    color: #fff;
    padding: 10px;
    margin: 0px 0px 30px 0px;
    text-align: center;
}

h2 {
    color: #000;
    margin: 0px 0px 20px 0px;
    padding: 0px;
}

#welcome {
    font-size: 14px;
    color: #000;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    margin-bottom: 0px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#container {
    width: 900px;
    margin: 0 auto;
}

#progress {
    background-color: #fff;
    padding: 5px;
    margin-top: 0px;
    margin-bottom: 20px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

#progress .percent {
    background: #87C442;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#9FD04F),color-stop(100%,#87C442));
    background-image: -webkit-linear-gradient(#9FD04F,#87C442);
    background-image: -moz-linear-gradient(#9FD04F,#87C442);
    background-image: -o-linear-gradient(#9FD04F,#87C442);
    background-image: -ms-linear-gradient(#9FD04F,#87C442);
    background-image: linear-gradient(#9FD04F,#87C442);
    width: 1%;
    height: 30px;
    position: relative;
}

#progress .percent .number {
    position: absolute;
    top: 0px;
    height: 30px;
    line-height: 30px;
    color: #000;
    right: -40px;
    width: 40px;
    text-align: center;
    font-weight: bold;
}

#actions {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    list-style-type: none;
}



#actions li {
    float: left;
    width: 33%;
    padding: 10px;
    text-align: center;
   ...

JavaScript

$(function() {
    var clicks = 0;
    $('button').on('click', function() {
        clicks++;
        var percent = Math.min(Math.round(clicks / 3 * 100), 100);
        $('.percent').width(percent + '%');
        $('.number').text(percent + '%');
    });
    
    
    $('.facebook').on('click', function() {
        var w = 580, h = 300,
                left = (screen.width/2)-(w/2),
                top = (screen.height/2)-(h/2);
            
            
            if ((screen.width < 480) || (screen.height < 480)) {
                window.open ('http://www.facebook.com/share.php?u=http://bit.ly/chasinged', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
            } else {
                window.open ('http://www.facebook.com/share.php?u=http://bit.ly/chasinged', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);   
            }
    });
    
    $('.twitter').on('click', function() {
        var loc = encodeURIComponent('http://bit.ly/chasinged'),
                title = "You're not alone in chasing the entrepreneurial dream. Join the Chase!",
                w = 580, h = 300,
                left = (screen.width/2)-(w/2),
                top = (screen.height/2)-(h/2);
                
            window.open('http://twitter.com/share?text=' + title + '&url=' + loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
    });
    
});