Skip to content

Instantly share code, notes, and snippets.

@gorobey

gorobey/index.html

Created October 19, 2025 17:29
Show Gist options
  • Save gorobey/f8a06b17bc79bcd467b78226bd14d10c to your computer and use it in GitHub Desktop.
Save gorobey/f8a06b17bc79bcd467b78226bd14d10c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gorobey created this gist Oct 19, 2025.
    36 changes: 36 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    <h1> Personnalités politiques les plus interpelées sur Twitter</h1>

    <div class="scoreboard">
    <div class="scoreboard__podiums">
    <div class="scoreboard__podium js-podium" data-height="200px">
    <div class="scoreboard__podium-base scoreboard__podium-base--second">
    <div class="scoreboard__podium-rank">2</div>
    </div>
    <div class="scoreboard__podium-number">
    Bar de Wever
    <small><span class="js-podium-data">160</span></small>
    </div>

    </div>
    <div class="scoreboard__podium js-podium" data-height="250px">
    <div class="scoreboard__podium-base scoreboard__podium-base--first">
    <div class="scoreboard__podium-rank">1</div>

    </div>
    <div class="scoreboard__podium-number">
    Charles Michel
    <small><span class="js-podium-data">195</span></small>
    </div>
    </div>
    <div class="scoreboard__podium js-podium" data-height="150px">
    <div class="scoreboard__podium-base scoreboard__podium-base--third">
    <div class="scoreboard__podium-rank">3</div>
    </div>
    <div class="scoreboard__podium-number">
    Jan Jambon
    <small><span class="js-podium-data">100</span></small>
    </div>
    </div>
    </div>


    7 changes: 7 additions & 0 deletions podium.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Podium
    ------


    A [Pen](https://codepen.io/k0y0te/pen/JwjOKY) by [Thomas Scourneau](https://codepen.io/k0y0te) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/JwjOKY).
    143 changes: 143 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,143 @@
    var sum = 1000; // rank 1.
    var time = 250;

    $(document).ready(function() {



    $('.js-podium').each(function(){
    var t = $(this);
    setTimeout( function(){
    t.addClass('is-visible');
    var h = t.data('height');
    console.log(h);
    t.find('.scoreboard__podium-base').css('height', h).addClass('is-expanding');
    }, time);
    time += 250;
    });

    randomizeData();
    startBars();
    sortItems();
    countUp();
    // randomizePodium();


    setInterval(function(){

    randomizeData();
    startBars();
    sortItems();
    countUp();
    oneUp();
    $('.js-podium').removeClass('bump');
    podiumUpdate();

    }, 10000);

    });


    function countUp() {

    $('.scoreboard__item').each(function() {
    var $this = $(this),
    countTo = $this.data('count');

    $({ countNum: $this.text()}).animate({
    countNum: countTo
    },

    {
    duration: 500,
    easing:'linear',
    step: function() {
    $this.find('.js-number').text(Math.floor(this.countNum));
    },
    complete: function() {
    $this.find('.js-number').text(this.countNum);
    //alert('finished');
    }

    });
    });
    }

    function randomizeData() {
    $('.scoreboard__item').each(function(){
    var rand = Math.floor(Math.random() * 900) + 1;
    $(this).data('count', rand );
    $(this).find('.js-number').text(rand);
    });

    }

    function startBars() {
    $('.js-bar').each(function() {
    console.log('running');
    // calculate %.
    var t = $(this);
    setTimeout( function(){
    var width = t.parent('.scoreboard__item').data('count');
    width = width / sum * 100;
    width = Math.round(width);
    t.find('.scoreboard__bar-bar').css('width', width + "%");
    t.parent('li').addClass('is-visible');
    }, time);
    time += 0;
    });
    }

    function sortItems() {
    tinysort.defaults.order = 'desc';

    var ul = document.getElementById('scoreboard__items')
    ,lis = ul.querySelectorAll('li')
    ,liHeight = lis[0].offsetHeight
    ;
    ul.style.height = ul.offsetHeight+'px';
    for (var i= 0,l=lis.length;i<l;i++) {
    var li = lis[i];
    li.style.position = 'absolute';
    li.style.top = i*liHeight+'px';
    }
    tinysort('ol#scoreboard__items>li', 'span.js-number').forEach(function(elm,i){
    setTimeout((function(elm,i){
    elm.style.top = i*liHeight+'px';
    }).bind(null,elm,i),40);
    });


    }

    function randEmail() {
    var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
    var string = '';
    for(var ii=0; ii<15; ii++){
    string += chars[Math.floor(Math.random() * chars.length)];
    }
    return string + '@domain.tld';
    }

    function oneUp() {
    // play audio - update email.
    var randEmail = window.randEmail();
    $('.js-oneup').html('Ny påmeldt: ' + randEmail);
    $('.js-oneup-audio')[0].play();
    }


    function randomizePodium() {
    $('.js-podium-data').each(function() {
    var random = Math.floor(Math.random() * 900) + 1;
    $(this).fadeOut(200).text(random + ' deltagere').fadeIn(200);
    });
    $(this).data('count', random);
    }

    function podiumUpdate() {
    $('.js-podium').each(function() {
    $(this).addClass('bump');
    randomizePodium();
    });
    }
    2 changes: 2 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
    242 changes: 242 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,242 @@
    @import url('https://fonts.googleapis.com/css?family=Raleway|Roboto');

    h1
    {
    font-family: "Raleway";
    font-weight: 400;
    text-align : center;
    }


    @mixin centerer {
    position: absolute;
    //top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    h1
    {
    text-align : center;

    }

    $gray: #ececec;
    $first: #BD4F6C;
    $second: #F0CF65;
    $third: #5E9EAD;

    body {
    font-size: 16px;
    background: #fafafa;
    font-family: "Roboto";
    font-weight : 300;
    }

    .number-holder {
    transition: all 500ms ease-in-out;
    }

    .scoreboard {
    border-radius: 5px;
    display: flex;
    max-width: 1170px;
    margin: 0 auto;
    padding: 3rem 50px;
    flex-direction: column;
    background: #fafafa;
    &__item {
    display: flex;
    padding: 1rem 0;
    width: 100%;
    margin-top: 2rem;
    flex-wrap: wrap;
    jusitfy-content : flex-end;
    opacity: 0;
    top: 20px;
    transition: 500ms ease-in-out;
    &.is-visible {
    opacity: 1;
    top: 0;
    transition: 500ms ease-in-out;
    }
    }
    &__title {
    width: 300px;
    font-weight: 600;
    small {
    color: #333;
    }
    }
    &__status {
    font-weight: 300;
    }
    &__numbers {
    font-weight: 600;
    text-align: right;
    align-self: flex-end;
    margin-left: 20px;
    flex: 1;
    }
    &__update {

    }
    }

    .scoreboard__bar {
    width: 100%;
    margin-top: 1rem;
    background: $gray;
    height: 10px;
    position: relative;
    border-radius: 5px;
    transition: all 500ms ease-in-out;
    display: flex;
    flex-basis: 100%;
    &:before {
    content: "";
    width: 100%;
    flex-basis: 100%;
    clear: both;
    display: block;
    }
    &-bar {
    position: absolute;
    height: 10px;
    left: 0;
    top: 0;
    width: 0;
    border-radius: 5px;
    background: linear-gradient(to right, $second 0%, darken($second,10%) 100%);
    transition: all 250ms ease-in-out;
    }
    }

    .scoreboard__podiums {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 20px auto 100px auto;
    min-height: 350px;
    .scoreboard__podium {
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    flex-wrap: wrap;
    flex: 1;
    opacity: 0;
    top: -10px;
    &.is-visible {
    top: 0;
    opacity: 1;
    transition: all 500ms ease-in-out;
    }

    &-rank {
    font-size: 4rem;
    font-weight: 700;
    @include centerer();
    bottom: 0px;
    }
    &-base {
    height: 0;
    background: $gray;
    color: #fff;
    min-width: 150px;
    border-radius: 5px;
    transition: all 1000ms ease-in-out;
    opacity: 0;
    position: relative;
    &.is-expanding {
    opacity: 1;
    }
    &--first {
    background: linear-gradient(to bottom, $first 0%, darken($first,10%) 100%);

    }
    &--second {
    background-color: $second;
    background: linear-gradient(to bottom, $second 0%, darken($second,10%) 100%);

    }

    &--third {
    background-color: $third;
    background: linear-gradient(to bottom, $third 0%, darken($third,10%) 100%);
    }

    }
    &-number {
    text-align :center;
    font-size: 1.2rem;
    margin-top: 10px;

    small {
    display: block;
    font-size: 60%;
    color: #333;
    line-height: 1.5;
    text-transform: uppercase;
    }
    }
    }
    }
    .credits {
    font-size: 14px;
    text-align: center;
    margin: 20px 0;
    }

    #scoreboard__items {
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: decimal;
    }

    .oneup-audio {
    display: none;
    }

    .style-switch {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border: none;
    font-size: 15px;
    }

    body.dark-mode {
    background: #111;
    color: #fff;
    .scoreboard {
    background: #111;
    color: #fff;
    small {
    color: #eee !important;
    }
    }
    .scoreboard__bar {
    background: #333;
    }
    }

    .bump {
    animation: bump 500ms ease-in-out;
    }

    @keyframes bump {
    0% {

    }
    50% {
    transform: scale(1.1);
    }
    60% {
    transform: scale(1);
    }
    }