wikipedia

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

Thumbnail
This awesome code was written by edw333, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright edw333 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>wikipedia</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <my-app></my-app>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.umd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-all.umd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/edw333/wikipedia-vWgvrO */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

/*Downloaded from https://www.codeseek.co/edw333/wikipedia-vWgvrO */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var Component = ng.core.Component;
var bootstrap = ng.platform.browser.bootstrap;
var RandomLinkComponent = /** @class */ (function () {
    function RandomLinkComponent() {
        this.text = "Click here for a random article";
    }
    RandomLinkComponent = __decorate([
        Component({
            selector: 'random-link',
            template: "\n  <a href=\"https://en.wikipedia.org/wiki/Special:Random\"  target=\"_blank\">\n  {{text}}\n  </a>\n    "
        })
    ], RandomLinkComponent);
    return RandomLinkComponent;
}());
var KeyUpComponent_v3 = /** @class */ (function () {
    function KeyUpComponent_v3() {
        this.value = '';
    }
    KeyUpComponent_v3.prototype.onEnter = function (value) { this.value = value; };
    KeyUpComponent_v3 = __decorate([
        Component({
            selector: 'app-key-up3',
            template: "\n    <input #box (keyup.enter)=\"onEnter(box.value)\">\n    <p>{{value}}</p>\n  "
        })
    ], KeyUpComponent_v3);
    return KeyUpComponent_v3;
}());
var ClickMeComponent = /** @class */ (function () {
    function ClickMeComponent() {
        this.clickMessage = '';
    }
    ClickMeComponent.prototype.onClickMe = function () {
        this.clickMessage = '<app-key-up3></app-key-up3>';
    };
    ClickMeComponent = __decorate([
        Component({
            selector: 'app-click-me',
            directives: [KeyUpComponent_v3],
            template: "\n    <button (click)=\"onClickMe()\">Click me!</button>\n    {{clickMessage}}"
        })
    ], ClickMeComponent);
    return ClickMeComponent;
}());
var AppComponent = /** @class */ (function () {
    function AppComponent() {
        this.title = "Wikipedia";
        console.log("app started");
    }
    AppComponent = __decorate([
        Component({
            selector: 'my-app',
            directives: [RandomLinkComponent, ClickMeComponent, KeyUpComponent_v3],
            template: "\n  <div class=\"container\">\n    <div class=\"row\">\n      <div class=\"col-12 text-center pt-5\">\n        <h1>{{title}}</h1>\n          <random-link></random-link>\n      </div>\n      <div class=\"col-12 text-center\">\n        <search-app></search-app>\n        <app-key-up3></app-key-up3>\n        <app-click-me></app-click-me>\n      </div>\n    </div>\n  </div>\n    "
        })
    ], AppComponent);
    return AppComponent;
}());
// --- MyApp
// END Components
// BOOT ANGULAR:
bootstrap(AppComponent);

Comments