fCC Wikipedia Viewer

In this example below you will see how to do a fCC Wikipedia Viewer with some HTML / CSS and Javascript

Wikipedia Viewer for freeCodeCamp

Thumbnail
This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright r3b311i0n ©
  • HTML
  • CSS
  • JavaScript
    <div class="jumbotron">
    <h1 class="text-primary text-center">
        fCC Wikipedia Viewer
    </h1>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-12 text-center">
            <a target="_blank" class="random" href="https://en.wikipedia.org/wiki/Special:Random">
                <i class="glyphicon glyphicon-random"></i>
            </a>
            <label class="wikiSearch" for="search">
                <input type="text" id="search">
            </label>
            <i class="glyphicon glyphicon-search"></i>
        </div>
    </div>
    <div class="row population">
        <div class="col-xs-12">
            <ul class="queryList">
            </ul>
        </div>
    </div>
</div>

/*Downloaded from https://www.codeseek.co/r3b311i0n/fcc-wikipedia-viewer-QKaxKX */
    /* github: https://github.com/r3b311i0n/fCC_Wiki_Viewer */

.jumbotron {
    background-color: #ab6ada;
}

.jumbotron h1 {
    color: white;
    cursor: default;
    animation-name: bounceInDown;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    -webkit-animation-name: bounceInDown;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in;
}

@keyframes bounceInDown {
    from {
        opacity: 0;
        transform: translateY(-255px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes bounceInDown {
    from {
        opacity: 0;
        -webkit-transform: translateY(-255px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

.population {
    margin-top: 3em;
}

.queryList {
    list-style: none;
}

.listPadding {
    font-size: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #ab6ada;
    text-decoration: none;
    animation-name: bounceInLeft;
    animation-duration: 1s;
    -webkit-animation-name: bounceInLeft;
    -webkit-animation-duration: 1s;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.3s;
}

.listPadding:hover {
    text-decoration: none;
    color: inherit;
}

.listPadding:visited {
    text-decoration: none;
    color: inherit;
}

.listPadding:focus {
    text-decoration: none;
    color: inherit;
}

@keyframes bounceInLeft {
    from {
        opacity: 0;
        transform: translateX(-1440px);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}

@-webkit-keyframes bounceInLeft {
    from {
        opacity: 0;
        transform: translateX(-1440px);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}

.bounceOut {
    animation-name: bounceOutLeft;
    animation-duration: 1s;
    -webkit-animation-name: bounceOutLeft;
    -webkit-animation-duration: 1s;
}

@keyframes bounceOutLeft {
    from {
        opacity: 1;
        transform: translateX(0%);
    }
    to {
        opacity: 0;
        transform: translateX(-2000px);
    }
}

@-webkit-keyframes bounceOutLeft {
    from {
        opacity: 1;
        transform: translateX(0%);
    }
    to {
        opacity: 0;
        transform: translateX(-2000px);
    }
}

#search {
    outline: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    width: 0;
    -webkit-transition-property: border-color;
    -webkit-transition-duration: 2s;
    transition-property: border-color;
    transition-duration: 2s;
}

#search:hover {
    border-color: #ab6ada;
}

.glyphicon {
    padding-left: 0.5em;
    padding-right: 0.5em;
    opacity: 0;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-property: color;
    transition-duration: 0.5s;
}

.glyphicon:hover {
    color: #ab6ada;
}

.random {
    text-decoration: none;
    color: inherit;
}

.random:hover {
    text-decoration: none;
}

.random:visited {
    color: inherit;
    text-decoration: none;
}

.random:focus {
    color: inherit;
    text-decoration: none;
}


/*Downloaded from https://www.codeseek.co/r3b311i0n/fcc-wikipedia-viewer-QKaxKX */
    const api = "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&prop=info&inprop=url&generator=allpages&gapfrom=";

var main = function () {
    $("#search").animate({
        "width": "15em"
    }, 2000, function () {
        $("#search").css("width", "15em");
    });

    $(".glyphicon").delay(2000).animate({
        "opacity": 100
    }, 3000, function () {
        $(".glyphicon").css("opacity", 100);
    });
};

function getJson() {
    $.ajax({
        url: api + $("#search").val(),
        dataType: "json",
        crossDomain: true,
        method: "GET",
        success: function (article) {
            $(".queryList").children().remove();

            $.each(article["query"]["pages"], function (index, value) {
                $(".queryList").append("<li class='listPadding'>" + "<a class='listPadding' target='_blank' href='" + value["canonicalurl"] + "'>" + value["title"] + "</a></li>");
            });
        }
    });
}

$("#search").on("keypress", function (e) {
    //noinspection JSJQueryEfficiency
    if ($.trim($("#search").val()) != "") {
        if (e.which == 13) {
            //noinspection JSJQueryEfficiency
            $("#search").attr("disabled", "disabled");
            $(".queryList").children().addClass("bounceOut");
            getJson();
            //noinspection JSJQueryEfficiency
            $("#search").removeAttr("disabled");
        }
    }
});

$(".glyphicon-search").on("click", function (e) {
    //noinspection JSJQueryEfficiency
    if ($.trim($("#search").val()) != "") {
        //noinspection JSJQueryEfficiency
        $("#search").attr("disabled", "disabled");
        $(".queryList").children().addClass("bounceOut");
        getJson();
        //noinspection JSJQueryEfficiency
        $("#search").removeAttr("disabled");
    }
});

$(document).ready(main());

Comments