Bootstrap Snippet NPM Search Engine using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <form role="form" id="NPMSearchForm" action="#">
        <h1 class="form-signin-heading">NPM Search Engine</h1>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">Keywords</span>
            <input type="text" class="form-control" placeholder="Ex: arykow npm" name="keywords">
        </div>
        <br>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Search</button>
        <br>
    </form>
    <section class="packages">
        <div class="row packages-group">
            <div class="col-md-6 package">
                <div class="well well-sm">
                    <div class="row">
                        <div class="col-xs-3 col-md-3 text-center">
                            <img src="http://placehold.it/110x110" alt="bootsnipp" class="img-rounded img-responsive package-image" />
                        </div>
                        <div class="col-xs-9 col-md-9 section-box">
                            <h2 class="name">
                                Bootsnipp <a href="http://bootsnipp.com/" target="_blank"><span class="glyphicon glyphicon-new-window">
                                </span></a>
                            </h2>
                            <p class="description">
                                Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework</p>
                            <hr />
                            <div class="row rating-desc">
                                <div class="col-md-12">
                                    <span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart">
                                    </span><span class="glyphicon glyphicon-heart"></span><span class="glyphicon glyphicon-heart">
                                    </span><span class="glyphicon glyphicon-heart"></span>(36)<span class="separator">|</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
body{ margin-top:0px; }
.glyphicon { margin-right:5px;}
.section-box h2 { margin-top:0px;}
.section-box h2 a { font-size:15px; }
.glyphicon-heart { color:#e74c3c;}
.glyphicon-comment { color:#27ae60;}
.separator { padding-right:5px;padding-left:5px; }
.section-box hr {margin-top: 0;margin-bottom: 5px;border: 0;border-top: 1px solid rgb(199, 199, 199);}
.packages { display: none; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
try {
    var MockBuilder = function() {
        this.data = {
        };
    };
    MockBuilder.prototype.add = function(id, name, description, url) {
        this.data[id] = {
            name: name,
            description: description,
            url: url,
            image: "http://lorempixel.com/200/200/abstract/" + name
        };
        return this;
    };
    MockBuilder.prototype.build = function() {
        return this.data;
    };
    
    var NPMSearchForm = function() {
        this.data = {
            keywords: null
        };
    };
    NPMSearchForm.prototype.keywords = function(keywords) {
        this.data.keywords = keywords;
        return this;
    };
    NPMSearchForm.prototype.submit = function(callback) {
        var data = this.data;
        var mock = new MockBuilder();
        for(var index = 1; index < (1 + Math.random() * 10); index++) {
            mock.add("package" + index, "name" + index, "description" + index, "http://placehold.it/100x" + (10 * index));
        }
        setTimeout(function() {
            callback(null, mock.build());
        }, 1);
    };
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"NPM Search Engine"
Bootstrap 3.0.0 Snippet by kdridi

Related: See More

Questions / Comments:

"NPM Search Engine" Bootstrap 3.0.0 Snippet by kdridi

Related: See More

Questions / Comments:

"NPM Search Engine"
Bootstrap 3.0.0 Snippet by kdridi