text:
<file_sep>/**
 *
 */
package kata08Extendible;

import java.io.File;
import java.io.FileNotFoundException;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

/**
 * @author sonal
 *{@summary
 *Loading the words from the word text file
 *}
 */
public class LoadingWordFile {

    private int maxNumberOfLetters;
	ArrayList<String> wordList = new ArrayList<String>();

    /**
     * {@summary
     * Get the max number of letter allowed for each word.
     * }
     * @param maxNumberOfLetters
     */
    public LoadingWordFile(int maxNumberOfLetters) {
        this.maxNumberOfLetters = maxNumberOfLetters;
    }

    /**
     * {@summary
     * Constructor a LoadingWordFile.
     * }
     * @param filePath the path of file to be loaded.
     * @param maxNumberOfLetters
     * @throws FileNotFoundException
     */
    public LoadingWordFile(String filePath,int maxNumberOfLetters) throws FileNotFoundException {
        this.maxNumberOfLetters = maxNumberOfLetters;
        Scanner s = new Scanner(new File(filePath));
		while (s.hasNext()){
				wordList.add(s.next().toLowerCase());
		}
    }

    /**
     * {@summary
     * Get the max number of letter allowed for each word.
     * }
     * @return number of letter allowed per word.
     */
    public int getMaxNumberOfLetters() {
        return maxNumberOfLetters;
    }

    /**
     * {@summary
     * Get a copy of all words loaded.
     * }
     * @return {@link List<String>} word list.
     */
    public List<String> getWordList() {
        return new ArrayList<>(this.wordList);
    }

}
<file_sep>/**
 *
 */
package kata08Extendible;

import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author sonal
 *{@summary
 *whole processing and extraction and loading happened in this class
 *}
 */
public class WordProcessingExtendible {

	private Map<String,String> wordMap = new HashMap<>();
	private ArrayList<String> sixCount = new ArrayList<>();
	private Map<String,List<String>> resultMap = new HashMap<>();

	/**
	 * {@summary
	 * loading of the words
	 * }
	 * @param extractionWordsFile
	 */
	public void wordLoading(LoadingWordFile extractionWordsFile) {
        List<String> words = extractionWordsFile.getWordList();
		for(String word : words) {
			if (word.length() == extractionWordsFile.getMaxNumberOfLetters()) {
				sixCount.add(word);
				wordMap.put(word, word);
			} else {
				wordMap.put(word, word);
			}
		}
	}

	/**
	 * {@summary
	 * processing of the words and writing off in the new file
	 * }
	 * @param extractionWordsFile
	 * @throws Exception
	 */
	public void sixLetterWordProcess(LoadingWordFile extractionWordsFile) throws Exception {
		wordLoading(extractionWordsFile);
		for(String word : sixCount) {
			int count = 2;
			while(count <= 4) {
				String segmentOne = word.substring(0, count);
				String segmentTwo = word.substring(count);
				if(wordMap.containsKey(segmentOne) && wordMap.containsKey(segmentTwo)) {
					String combo = String.format("%s + %s", segmentOne, segmentTwo);
					this.addToMap(combo, word);
				}
				count++;
			}
		}
		writingOffTheSixLetterWordsFound();
	}

	/**
	 * {@summary
	 * Writing the words extracted into a new file
	 * }
	 * @throws IOException
	 */
	public void writingOffTheSixLetterWordsFound() throws IOException {
    	//New file path creation: you can change it accordingly
		FileWriter myWriter = new FileWriter("C:\\Users\\sonal\\Downloads\\wordlist2.txt");
		for(Map.Entry<String, List<String>> entry : resultMap.entrySet()) {
			for(String sixLetterWord : entry.getValue()) {
				myWriter.write(sixLetterWord+ " => "+ entry.getKey() );
				myWriter.write("\n");
			}
		}
		myWriter.close();
		System.out.println("Successfully wrote to the file.");
	}

	/**
	 * {@summary
	 * adding the words in a data structure.
	 * }
	 * @param combo
	 * @param keyWord
	 */
	private void addToMap(String combo, String keyWord) {
		List<String> combos = resultMap.get(keyWord);
		if (combos == null) {
			combos = new ArrayList<>();
			combos.add(combo);
			resultMap.put(keyWord, combos);
		} else {
			combos.add(combo);
		}
	}
}
<file_sep>#Wed Mar 10 17:27:17 EST 2021
org.eclipse.core.runtime=2
org.eclipse.platform=4.18.0.v20201202-1800
<file_sep>package kata08Extendible;

/**
 * {@summary
 * Main class to call the other classes for the processing of the words
 * }
 * @author sonal
 *
 */
public class MainExtendible {

	public static void main(String[] args) throws Exception {

		//creation of an object of class WordProcessingExtendible
		WordProcessingExtendible wordProcess = new WordProcessingExtendible();

		//File Path: You can change as per your saved file
		String filePath = "C:\\Users\\sonal\\Downloads\\wordlist.txt";

		//max no of word letter: you can change it also as per your requirement.
        int maxNumberOfWordLetters = 6;

		//creation of an object of class LoadingWordFile
        LoadingWordFile extractionWordsFile = new LoadingWordFile(filePath, maxNumberOfWordLetters);

        //calling the method and extracting the six letter words and saving it in a file
        wordProcess.sixLetterWordProcess(extractionWordsFile);
	}
}

languages: Java INI


text:
<repo_name>jhowliu/ClickThroughAD<file_sep>/transmit.py
def readfile():
    data = open('train.txt')
    return data

def getCategorialSet():
    dataset = readfile()
    categorialSet = []
    data = dataset.readline()

    # Initialize the dictionary list for categorical list.
    for i in range(14, 40):
        categorialSet.append({})

    while data != '':
        data = data.replace('\n', '')
        tmp = data.split('\t')
        index = 0
        for i in range(14, 40):
            if tmp[i] != '' and not tmp[i] in categorialSet[index]:
                categorialSet[index][tmp[i]] = str(len(categorialSet[index]))
            index +=1

        data = dataset.readline()

    return categorialSet

def replaceCodeToInt(Set):
    categorialSet = Set
    dataset = readfile()
    result = []

    data = dataset.readline()
    while data != '':
        data = data.replace('\n', '')
        tmp = data.split('\t')

        index = 0
        for i in range(14, 40):
            if tmp[i] != '':
                tmp[i] = categorialSet[index][tmp[i]]
            index +=1

        result.append(tmp)

        data = dataset.readline()

    return result

def writeOutResult(result):
    out = open('out.csv', 'w')

    for tmp in result:
        out.write(','.join(tmp) + '\n')

def writeOutSet(Set):
    out = open('set.csv', 'w')

    for tmp in Set:
        out.write(str(tmp) + '\n')

def Run():
    categorialSet = getCategorialSet()

    writeOutSet(categorialSet)

    result = replaceCodeToInt(categorialSet)

    writeOutResult(result)

if __name__ == '__main__':
    Run()

branch_name: refs/heads/master

repo_language: Python

repo_name: jhowliu/ClickThroughAD


text:
<repo_name>ashu1840/Android-App<file_sep>/README.md
# Android-App
Android App basic demo

repo_language: Markdown


text:
<repo_name>marianocs23/Senku-2<file_sep>/README.md
# Senku-2
Trabajo para el curso de POO


text:
<repo_name>YustinRD/dz2<file_sep>/App/jade/_pages/index.jade
extends ../main

block content
    article.content-wrapper
        .container
            h2.main-title Мобильные телефоны
            .main-content
                include ../_common/sidebar

                .content
                    .sort
                        .sort__left
                            .sort__select--wrap
                                .sort__title Сортировать по
                                .sort__select
                                    - var options = ['по цене', 'по популярности']
                                    select.sort_select-elem
                                        each option in options
                                            option(value="")= option
                        .sort__right
                            .sort__title Вид каталога
                            .sort__view
                                ul.sort__view-list
                                    - var items = ['rows', 'grids', 'lines']
                                    each item in items
                                        li(class="sort__view-item sort__view-" + item data-view= item)
                                            a.sort__view-link(href="#")
                                                .sort__view-icon
                    .products
                        ul.products__list#products__list
                            - for(var i = 1; i <= 10; i++)
                                li.products__item
                                    .products__item-inner
                                        .products__left
                                            .products__slideshow
                                                .products__slideshow-block
                                                    a.products__slideshow-display(href="#")
                                                        img(src="http://lorempixel.com/200/200/technics/1" alt="").products__slideshow-img
                                                    ul.products__slideshow-thumbs
                                                        - for(var j = 1; j <= 3; j++)
                                                            li.products__slideshow-item
                                                                a.products__slideshow-link(href="#")
                                                                    img(src="http://lorempixel.com/45/45/technics/#{j}" big-src="http://lorempixel.com/200/200/technics/#{j}").products__slideshow-thumb-img
                                                .products__article
                                                    .products__article-word Артикул
                                                    .products__article-number 189789
                                            .products__desc
                                                .products__desc-title Samsung GT-I9301I GALAXY S 3
                                                ul.products__desc-options
                                                    - var options = {'Тип SIM-карты':'Micro-SIM', 'Количество SIM-карт':'1', 'Цвет':'Белый', 'ОC':'Android', 'Связь 3G':'Есть', '4G (LTE)': 'Нет', 'GPS-модуль':'Есть'}
                                                    - var index = 0;
                                                    - for (option in options)
                                                        li(class="products__option-item" + ((index++ % 2) ? '':' products__option-item_colored'))
                                                            .products__option-key= option
                                                            .products__option-value= options[option]
                                                .products__rating(data-rating="3")

                                        .products__right
                                            .products__info
                                                .products__price 12 000
                                                    i.rub
                                            .products__buttom
                                                a.products__buy-btn(href="#") В корзину
                                                .products__availability В наличии
                    .pagination
                        ul.pagination__list
                            li.pagination__item.pagination__item_prev
                                a.pagination__link(href="#")
                                    .pagination__mark
                            - for (var i = 1; i < 4; i++)
                                li.pagination__item
                                    a.pagination__link(href="#")
                                        .pagination__mark= i
                            li.pagination__item.pagination__item_next
                                a.pagination__link(href="#")
                                    .pagination__mark

        include ../_common/about<file_sep>/gulpfile.js
var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')({lazy:false}),
    jade = require('gulp-jade'),
    minifyCss = require('gulp-minify-css'),
    browserSync = require('browser-sync'),
    notify = require("gulp-notify"),
    wiredep = require('wiredep').stream,
    plumber = require('gulp-plumber');

var config = {
    path:{
        html:{
            app:        './App/',
            inject:     './'
        },
        jade:{
            pages:      './App/jade/_pages/',
            dest:       './App/',
            folder:     './App/jade/'
        },
        css:{
            app:        './App/css/'
        },
        js:{
            app:        './App/js/',
            location:   './App/scripts/*.js',
            plugins:    './App/scripts/_plugins/*.js',
        },
        images:{
            main:       './App/img/',
            forSprite:  './App/sprite/',
            addon:      '.png',
            pathForSrite: function(){
                return this.forSprite + "**/*" + this.addon
            }
        },
        sass:{
            main:       './App/sass',
            img:        './App/sass/_img'
        }
    }

};

// Сервер
gulp.task('server', function () {
    browserSync({
        port: 9000,
        server: {
            baseDir: './App/'
        }
    });
});

// Задача по-умолчанию
gulp.task('default', ['server', 'watch']);

gulp.task('jade', function() {
    var YOUR_LOCALS = {}; // можно подключить JSON с данными
    gulp.src(config.path.jade.pages + '*.jade')
        .pipe(plumber())
        .pipe(jade({
            locals: YOUR_LOCALS,
            pretty: '\t', // отступы в 1 таб
        }))
        .pipe(gulp.dest(config.path.jade.dest))
        .pipe(notify('task jade'))
});

gulp.task('watch', function(){
    gulp.watch(config.path.jade.folder + "**/*.jade",['jade']);
    gulp.watch([
        'app/*.html',
        'app/js/**/*.js',
        'app/css/*.css'
    ]).on('change', browserSync.reload);
    gulp.watch(config.path.images.pathForSrite(),['sprite']);
    gulp.watch(config.path.js.location, ['scripts']);
    //gulp.watch(config.path.html.app + "**/*.html",['inject_js']);
});

gulp.task('watch-bower',function(){
    gulp.watch('bower.json',['bower']);
});

gulp.task('bower',function(){
    gulp.src('app/jade/main.jade')
        .pipe(wiredep({
            directory : "app/bower"
        }))
        .pipe(gulp.dest('app/jade/main.jade'));
});

gulp.task('inject_js',function(){
    var sources = gulp.src([ config.path.css.app + '**/*.js', config.path.css.app + '**/*.css'], {read: false});
    //console.log(sources);
    return gulp.src(config.path.html.app + "*.html")
        .pipe(plugins.inject(sources))
        .pipe(gulp.dest('dest/'))
        .pipe(notify('task inject_js'))
});

gulp.task('sprite', function () {
    var spriteData = gulp.src(config.path.images.pathForSrite()).pipe(plugins.spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.scss',
        padding: 20,
        imgPath: '../img/sprite.png',
            cssVarMap: function (sprite) {
            sprite.name = 'sprite_' + sprite.name;
        }
    }));
    spriteData.img.pipe(gulp.dest(config.path.images.main));
    spriteData.css.pipe(gulp.dest(config.path.sass.img));
});

/* --------- scripts --------- */

gulp.task('scripts', function() {
    return gulp.src(config.path.js.location)
        .pipe(plumber())
        .pipe(plugins.concat('main.min.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(config.path.js.app))
        .pipe(notify('scripts'));
});

gulp.task('production', function() {
    gulp.src(config.path.css.app + 'main.css')
        .pipe(plugins.minifyCss())
        .pipe(plugins.rename('main.min.css'))
        .pipe(gulp.dest(config.path.css.app))
        .pipe(notify('production'));

    gulp.src(config.path.js.plugins)
        .pipe(plumber())
        .pipe(plugins.concat('plugins.min.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(config.path.js.app))

});<file_sep>/App/sass/_layout/_adjustment.scss
/* --------- adjustment --------- */

$minWidth: 1100px;
$maxWidth: 1105px;
$container-width:$maxWidth;
$footer-height: 222px;

$colorMain: #ff6e35;
$colorFont: #333333;
$colorBack: #f4f4f4;
$colorPanel: #fbfbfb;
$colorGrey: #dee1e4;

$sizeFontMain: 16px;

html {
  width: 100%;
  font-size: 100.01%;
}

body {
  font: 16px/1.41 $fontOS;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  height: 100% !important;
  background: $colorBack;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none outside none;

  li {
    padding: 0;
    left: 0;
  }
}

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

.wrapper {
  position: relative;
  min-height: 100%;
  min-width: $maxWidth + 30px;
  height: auto !important;
  height: 100%;
  overflow: hidden;

  &:after {
    content: "";
    height: $footer-height;
    position: relative;
  }
}

footer {
  position: relative;
  min-width: $container-width + 30;
  height: $footer-height;
}

.container:before, .clearfix:before,
.container:after, .clearfix:after {
  content: " ";
  display: table;
}

.container:after, .clearfix:after {
  clear: both;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  width: $maxWidth;
  @include clearfix();
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p {
  padding: 0;
  margin: 0;
}

.maincontent {
  margin-bottom: 29px;
}<file_sep>/App/jade/_common/sidebar.jade
-
    var checkboxBrendsList= [
        ['Lenovo'],
        ['Apple'],
        ['Samsung'],
        ['Asus'],
        ['Motorola']
    ]
-
    var checkboxOSList= [
        ['Android'],
        ['iOS'],
        ['Windows Mobile'],
        ['Symbian'],
        ['Custom']
    ]
-
    var colors = [
        ['FFFFFF'],
        ['cccccc'],
        ['000000'],
        ['0a3153'],
        ['ff1800'],
        ['fff343'],
        ['fb914a'],
        ['92c37c'],
        ['40a6ff'],
        ['9870ad'],
        ['dc78ad'],
        ['7f401d']
    ]
.sidebar
    .categories
        ul.categories__list
            - var items = ['Флагманы','Бюджетная линейка']
            each item in items
                li(class="categories__item" + ((item == 'Бюджетная линейка') ? ' active' : ''))
                    a.categories__link(href="#")=item
    .filter
        ul.filter__list
            li.filter__item
                .filter__head
                    a.filter__head-link(href="") Наличие в магазинаx

                .filter__body
                    - var items = ['Во всех магазинах','В ближайшем ко мне магазине']
                    +chechbox('filter__choose',items,'location','radio')
            li.filter__item
                .filter__head
                    a.filter__head-link(href="") Бренды

                .filter__body.filter__body_checkbox
                    +chechbox('filter__choose',checkboxBrendsList,'checkbox')
                    .filter__reset-wrap
                        a.filter__reset(href="#") Сбросить фильтр
            li.filter__item
                .filter__head
                    a.filter__head-link(href="") Цена
                .filter__body
                    .filter__slider
                        .filter__slider-displays
                            .filter__slider-left
                                .filter__slider-text от
                                input.filter__slider-input.filter__slider-input_from(name="" type="text" placeholder="")
                            .filter__slider-right
                                .filter__slider-text до
                                input.filter__slider-input.filter__slider-input_to(name="" type="text" placeholder="")
                        div.filter__slider-element(data-min="0" data-max="30000")
            li.filter__item
                .filter__head
                    a.filter__head-link(href="") Цвет
                .filter__body
                    +ul-color('filter__colors',colors)

            li.filter__item
                .filter__head
                    a.filter__head-link(href="") Операционные системы

                .filter__body.filter__body_checkbox
                    +chechbox('filter__choose',checkboxOSList,'checkboxO')
                    .filter__reset-wrap
                        a.filter__reset(href="#") Сбросить фильтр
        //.sidebar__presence
        //.sidebar__brand
        //.sidebar__price
        //.sidebar__color
        //.sidebar__os<file_sep>/App/jade/main.jade
include _common/_mixins
-
    var breadcrumbsList= [
        ['#','Главная'],
        ['#','Каталог']
    ]
doctype html
html(lang='ru')
    head
        meta(charset='UTF-8')
        meta(http-equiv='X-UA-Compatible', content="IE=edge,chrome=1")
        meta(name='viewport' content='width=device-width')
        title cooltech
        //fonts
        link(rel="stylesheet" href="fonts/stylesheet.css")
        // my css
        +cssInclude(path.css,cssFiles)
        // modernizr js
        script(src="js/modernizr.js")
    body
        .wrapper
            include _common/header
            nav.nav
                .container
                    +navMenu('nav',menuList,1)
            .breadcrumbs
                .container
                    +breadcrumbs('breadcrumbs',breadcrumbsList,1)
            block content
        include _common/footer
        //inject:js
        //endinject
        <!-- bower:js -->
        script(src="js/plugins.min.js")
        <!-- endbower -->
        script(src="js/main.min.js")
<file_sep>/App/sass/_sections/_header__block_contacts.scss
.header__block-contacts {
  padding: 23px 0;
}

.header__left {
  width: 50%;
  float: left;
}

.header__right {
  width: 50%;
  float: left;
}

.socials__list {
  //position: absolute;
  //left: 0;
  //top: 12px;
  //padding-left: 0;
}

.socials__item {
  @include inlineblock(middle);
  margin-right: 12px;

  &:first-child {
    margin-left: 0;
  }
}

.socials__link {
  display: block;
  @include hide-text();
  @include border-radius(50%);
  position: relative;
  background: #333333;
}

.socials__link_tw {
  @include sprite($sprite-tw);
  &:hover {
    @include sprite($sprite-tw-hover);
  }
}

.socials__link_vk {
  @include sprite($sprite-vk);
  &:hover {
    @include sprite($sprite-vk-hover);
  }
}

.socials__link_fb {
  @include sprite($sprite-fb);
  &:hover {
    @include sprite($sprite-fb-hover);
  }
}

.header__block__wrapper {
  max-width: $maxWidth;
  margin: 0 auto;
  position: relative;
}

.header__block_menu {
  height: 79px;
}

.address {
  font-size: 14px;
  @include inlineblock(middle);
  margin-right: 87px;
  margin-left: 87px;
  &:before {
    content: " ";
    @include sprite($sprite-mappin);
    @include inlineblock(middle);
    margin-right: 9px;
  }
}

.telephone {
  font: $fontOSsemibold;
  font-size: 18px;
  @include open-sans(semibold);
  text-decoration: none;
  color: $colorFont;

  &:before {
    content: " ";
    @include sprite($sprite-telephone);
    @include inlineblock(middle);
    margin-right: 11px;
  }
}<file_sep>/README.md
> Как установить мой проект

1. git clone https://github.com/YustinRD/dz2 site
2. cd site
3. bower i
4. npm i
5. gulp
<file_sep>/App/jade/_common/_mixins.jade
include _values

mixin nav(className, items, activeIndex)
    nav(class=className)
        ul(class="#{className}__list")
            each item, index in items
                li(class="#{className}__item" + ((activeIndex == item) ? " active" : ''))
                    a(href="#" class="#{className}__link #{className}__link_#{item}")= item

mixin social(className, items, activeIndex,modifier)
    - var modifier = modifier || ''
    ul(class="#{className}__list #{modifier}")
        each item, index in items
            li(class="#{className}__item")
                a(href="#" class="#{className}__link #{className}__link_#{item}")= item

mixin cssInclude(folder,listName)
    each item in listName
        link(rel="stylesheet"  href="#{folder}#{item}.css")

mixin navMenu(className, items, activeIndex)
        ul(class="#{className}__list")
            each item, index in items
                li(class="#{className}__item" + ((activeIndex == index) ? " #{className}__item_active" : ''))
                    a(href="#{item[0]}" class="#{className}__link")=item[1]

mixin breadcrumbs(className, items)
        ul(class="#{className}__list")
            -var length = items.length - 1
            each item,index in items
                - var class_ = className + "__item"
                - var last = length == index ?  ' ' + class_ + '_active' : ''
                li(class=class_ + last)
                    a(href="#{item[0]}" class="#{className}__link")=item[1]

mixin chechbox(className, items, name,type)
    - type = type || 'checkbox'
    ul(class="#{className}")
        each item in items
            li(class="#{className}-item")
                label(class="#{className}-label")
                    input(class="#{className}-input" type="#{type}" name="#{name}")
                    div(class="#{className}-elem")
                    div(class="#{className}-text")= item

mixin ul(className, items)
        ul(class="#{className}-list")
            each item in items
                li(class="#{className}-item")
                    a(href="#" class="#{className}-link")= item

mixin ul-color(className, colors)
    ul(class="#{className}-list")
        each color in colors
            li(class="#{className}-item")
                a(href="#" class="#{className}-link" style="background-color:#" + color)
<file_sep>/App/sass/_sections/_breadcrumbs.scss
.breadcrumbs {
  margin: 0 auto;
  //width: $maxWidth;
}

.breadcrumbs__list {
  padding: 0;
  display: table;
}

.breadcrumbs__item {
  @include inlineblock();
  font-size: 14px;

  &:before {
    content: '>';
    @include inlineblock(middle)
  }

  &:first-child {
    &:before {
      display: none;
    }
  }
  &.breadcrumbs__item_active {
    .breadcrumbs__link {
      text-decoration: underline;
      color: $colorMain;
    }
  }
}

$margin: 0 4px;

.breadcrumbs__link {
  @include inlineblock(middle);
  font-size: 14px;
  color: $colorFont;
  line-height: 16px;
  text-decoration: none;
  margin: $margin;
}

.breadcrumbs__text {
  margin-right: $margin;
  @include open-sans();
  font-size: 14px;
}

<file_sep>/App/jade/_common/header.jade
header.header
    .header__block-contacts
        .container
            .header__left
                +social('socials',socials,'tw')
            .header__right
                .address ул. Маяковская 6, офис 17
                a.telephone(href="tel:+79211231213") +7 (921) 123-12-13
    .header__block-info
        .container
            a.logo
                img.logo__img(src="img/logo.png" alt="cooltech")
                .logo__text cooltech
            .search
                form.search__form
                    input.search__form-input(placeholder="Что будем искать" name="" type="text")
                    button.search__form-button(type="submit" name="") Найти
            .menu
                ul.menu__list
                    li.menu__item
                        a.menu__link(href="#") Карта проезда
                    li.menu__item
                        a.menu__link(href="#") История заказов
                    li.menu__item
                        a.menu__link(href="#") Корзина
<file_sep>/App/sass/_img/sprite.scss
/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
$sprite-checkbox-name: 'sprite_checkbox';
$sprite-checkbox-x: 235px;
$sprite-checkbox-y: 178px;
$sprite-checkbox-offset-x: -235px;
$sprite-checkbox-offset-y: -178px;
$sprite-checkbox-width: 13px;
$sprite-checkbox-height: 10px;
$sprite-checkbox-total-width: 279px;
$sprite-checkbox-total-height: 226px;
$sprite-checkbox-image: '../img/sprite.png';
$sprite-checkbox: (235px, 178px, -235px, -178px, 13px, 10px, 279px, 226px, '../img/sprite.png', 'sprite_checkbox', );
$sprite-grids-hover-name: 'sprite_grids-hover';
$sprite-grids-hover-x: 82px;
$sprite-grids-hover-y: 172px;
$sprite-grids-hover-offset-x: -82px;
$sprite-grids-hover-offset-y: -172px;
$sprite-grids-hover-width: 16px;
$sprite-grids-hover-height: 16px;
$sprite-grids-hover-total-width: 279px;
$sprite-grids-hover-total-height: 226px;
$sprite-grids-hover-image: '../img/sprite.png';
$sprite-grids-hover: (82px, 172px, -82px, -172px, 16px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_grids-hover', );
$sprite-grids-name: 'sprite_grids';
$sprite-grids-x: 118px;
$sprite-grids-y: 172px;
$sprite-grids-offset-x: -118px;
$sprite-grids-offset-y: -172px;
$sprite-grids-width: 16px;
$sprite-grids-height: 16px;
$sprite-grids-total-width: 279px;
$sprite-grids-total-height: 226px;
$sprite-grids-image: '../img/sprite.png';
$sprite-grids: (118px, 172px, -118px, -172px, 16px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_grids', );
$sprite-lines-hover-name: 'sprite_lines-hover';
$sprite-lines-hover-x: 235px;
$sprite-lines-hover-y: 0px;
$sprite-lines-hover-offset-x: -235px;
$sprite-lines-hover-offset-y: 0px;
$sprite-lines-hover-width: 16px;
$sprite-lines-hover-height: 16px;
$sprite-lines-hover-total-width: 279px;
$sprite-lines-hover-total-height: 226px;
$sprite-lines-hover-image: '../img/sprite.png';
$sprite-lines-hover: (235px, 0px, -235px, 0px, 16px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_lines-hover', );
$sprite-lines-name: 'sprite_lines';
$sprite-lines-x: 190px;
$sprite-lines-y: 172px;
$sprite-lines-offset-x: -190px;
$sprite-lines-offset-y: -172px;
$sprite-lines-width: 16px;
$sprite-lines-height: 16px;
$sprite-lines-total-width: 279px;
$sprite-lines-total-height: 226px;
$sprite-lines-image: '../img/sprite.png';
$sprite-lines: (190px, 172px, -190px, -172px, 16px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_lines', );
$sprite-mappin-name: 'sprite_mappin';
$sprite-mappin-x: 235px;
$sprite-mappin-y: 106px;
$sprite-mappin-offset-x: -235px;
$sprite-mappin-offset-y: -106px;
$sprite-mappin-width: 12px;
$sprite-mappin-height: 16px;
$sprite-mappin-total-width: 279px;
$sprite-mappin-total-height: 226px;
$sprite-mappin-image: '../img/sprite.png';
$sprite-mappin: (235px, 106px, -235px, -106px, 12px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_mappin', );
$sprite-next-name: 'sprite_next';
$sprite-next-x: 0px;
$sprite-next-y: 172px;
$sprite-next-offset-x: 0px;
$sprite-next-offset-y: -172px;
$sprite-next-width: 26px;
$sprite-next-height: 25px;
$sprite-next-total-width: 279px;
$sprite-next-total-height: 226px;
$sprite-next-image: '../img/sprite.png';
$sprite-next: (0px, 172px, 0px, -172px, 26px, 25px, 279px, 226px, '../img/sprite.png', 'sprite_next', );
$sprite-prev-name: 'sprite_prev';
$sprite-prev-x: 189px;
$sprite-prev-y: 92px;
$sprite-prev-offset-x: -189px;
$sprite-prev-offset-y: -92px;
$sprite-prev-width: 26px;
$sprite-prev-height: 25px;
$sprite-prev-total-width: 279px;
$sprite-prev-total-height: 226px;
$sprite-prev-image: '../img/sprite.png';
$sprite-prev: (189px, 92px, -189px, -92px, 26px, 25px, 279px, 226px, '../img/sprite.png', 'sprite_prev', );
$sprite-rows-hover-name: 'sprite_rows-hover';
$sprite-rows-hover-x: 46px;
$sprite-rows-hover-y: 172px;
$sprite-rows-hover-offset-x: -46px;
$sprite-rows-hover-offset-y: -172px;
$sprite-rows-hover-width: 16px;
$sprite-rows-hover-height: 16px;
$sprite-rows-hover-total-width: 279px;
$sprite-rows-hover-total-height: 226px;
$sprite-rows-hover-image: '../img/sprite.png';
$sprite-rows-hover: (46px, 172px, -46px, -172px, 16px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_rows-hover', );
$sprite-rows-name: 'sprite_rows';
$sprite-rows-x: 154px;
$sprite-rows-y: 172px;
$sprite-rows-offset-x: -154px;
$sprite-rows-offset-y: -172px;
$sprite-rows-width: 16px;
$sprite-rows-height: 16px;
$sprite-rows-total-width: 279px;
$sprite-rows-total-height: 226px;
$sprite-rows-image: '../img/sprite.png';
$sprite-rows: (154px, 172px, -154px, -172px, 16px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_rows', );
$sprite-slider-control-name: 'sprite_slider-control';
$sprite-slider-control-x: 271px;
$sprite-slider-control-y: 0px;
$sprite-slider-control-offset-x: -271px;
$sprite-slider-control-offset-y: 0px;
$sprite-slider-control-width: 8px;
$sprite-slider-control-height: 14px;
$sprite-slider-control-total-width: 279px;
$sprite-slider-control-total-height: 226px;
$sprite-slider-control-image: '../img/sprite.png';
$sprite-slider-control: (271px, 0px, -271px, 0px, 8px, 14px, 279px, 226px, '../img/sprite.png', 'sprite_slider-control', );
$sprite-star-name: 'sprite_star';
$sprite-star-x: 235px;
$sprite-star-y: 71px;
$sprite-star-offset-x: -235px;
$sprite-star-offset-y: -71px;
$sprite-star-width: 16px;
$sprite-star-height: 15px;
$sprite-star-total-width: 279px;
$sprite-star-total-height: 226px;
$sprite-star-image: '../img/sprite.png';
$sprite-star: (235px, 71px, -235px, -71px, 16px, 15px, 279px, 226px, '../img/sprite.png', 'sprite_star', );
$sprite-star-filled-name: 'sprite_star_filled';
$sprite-star-filled-x: 235px;
$sprite-star-filled-y: 36px;
$sprite-star-filled-offset-x: -235px;
$sprite-star-filled-offset-y: -36px;
$sprite-star-filled-width: 16px;
$sprite-star-filled-height: 15px;
$sprite-star-filled-total-width: 279px;
$sprite-star-filled-total-height: 226px;
$sprite-star-filled-image: '../img/sprite.png';
$sprite-star-filled: (235px, 36px, -235px, -36px, 16px, 15px, 279px, 226px, '../img/sprite.png', 'sprite_star_filled', );
$sprite-telephone-name: 'sprite_telephone';
$sprite-telephone-x: 235px;
$sprite-telephone-y: 142px;
$sprite-telephone-offset-x: -235px;
$sprite-telephone-offset-y: -142px;
$sprite-telephone-width: 12px;
$sprite-telephone-height: 16px;
$sprite-telephone-total-width: 279px;
$sprite-telephone-total-height: 226px;
$sprite-telephone-image: '../img/sprite.png';
$sprite-telephone: (235px, 142px, -235px, -142px, 12px, 16px, 279px, 226px, '../img/sprite.png', 'sprite_telephone', );
$sprite-to-bottom-name: 'sprite_to_bottom';
$sprite-to-bottom-x: 0px;
$sprite-to-bottom-y: 217px;
$sprite-to-bottom-offset-x: 0px;
$sprite-to-bottom-offset-y: -217px;
$sprite-to-bottom-width: 13px;
$sprite-to-bottom-height: 9px;
$sprite-to-bottom-total-width: 279px;
$sprite-to-bottom-total-height: 226px;
$sprite-to-bottom-image: '../img/sprite.png';
$sprite-to-bottom: (0px, 217px, 0px, -217px, 13px, 9px, 279px, 226px, '../img/sprite.png', 'sprite_to_bottom', );
$sprite-to-up-name: 'sprite_to_up';
$sprite-to-up-x: 189px;
$sprite-to-up-y: 137px;
$sprite-to-up-offset-x: -189px;
$sprite-to-up-offset-y: -137px;
$sprite-to-up-width: 13px;
$sprite-to-up-height: 9px;
$sprite-to-up-total-width: 279px;
$sprite-to-up-total-height: 226px;
$sprite-to-up-image: '../img/sprite.png';
$sprite-to-up: (189px, 137px, -189px, -137px, 13px, 9px, 279px, 226px, '../img/sprite.png', 'sprite_to_up', );
$sprite-fb-dark-hover-name: 'sprite_fb_dark-hover';
$sprite-fb-dark-hover-x: 63px;
$sprite-fb-dark-hover-y: 63px;
$sprite-fb-dark-hover-offset-x: -63px;
$sprite-fb-dark-hover-offset-y: -63px;
$sprite-fb-dark-hover-width: 43px;
$sprite-fb-dark-hover-height: 43px;
$sprite-fb-dark-hover-total-width: 279px;
$sprite-fb-dark-hover-total-height: 226px;
$sprite-fb-dark-hover-image: '../img/sprite.png';
$sprite-fb-dark-hover: (63px, 63px, -63px, -63px, 43px, 43px, 279px, 226px, '../img/sprite.png', 'sprite_fb_dark-hover', );
$sprite-fb-dark-name: 'sprite_fb_dark';
$sprite-fb-dark-x: 0px;
$sprite-fb-dark-y: 63px;
$sprite-fb-dark-offset-x: 0px;
$sprite-fb-dark-offset-y: -63px;
$sprite-fb-dark-width: 43px;
$sprite-fb-dark-height: 43px;
$sprite-fb-dark-total-width: 279px;
$sprite-fb-dark-total-height: 226px;
$sprite-fb-dark-image: '../img/sprite.png';
$sprite-fb-dark: (0px, 63px, 0px, -63px, 43px, 43px, 279px, 226px, '../img/sprite.png', 'sprite_fb_dark', );
$sprite-tw-dark-hover-name: 'sprite_tw_dark-hover';
$sprite-tw-dark-hover-x: 63px;
$sprite-tw-dark-hover-y: 0px;
$sprite-tw-dark-hover-offset-x: -63px;
$sprite-tw-dark-hover-offset-y: 0px;
$sprite-tw-dark-hover-width: 43px;
$sprite-tw-dark-hover-height: 43px;
$sprite-tw-dark-hover-total-width: 279px;
$sprite-tw-dark-hover-total-height: 226px;
$sprite-tw-dark-hover-image: '../img/sprite.png';
$sprite-tw-dark-hover: (63px, 0px, -63px, 0px, 43px, 43px, 279px, 226px, '../img/sprite.png', 'sprite_tw_dark-hover', );
$sprite-tw-dark-name: 'sprite_tw_dark';
$sprite-tw-dark-x: 126px;
$sprite-tw-dark-y: 0px;
$sprite-tw-dark-offset-x: -126px;
$sprite-tw-dark-offset-y: 0px;
$sprite-tw-dark-width: 43px;
$sprite-tw-dark-height: 43px;
$sprite-tw-dark-total-width: 279px;
$sprite-tw-dark-total-height: 226px;
$sprite-tw-dark-image: '../img/sprite.png';
$sprite-tw-dark: (126px, 0px, -126px, 0px, 43px, 43px, 279px, 226px, '../img/sprite.png', 'sprite_tw_dark', );
$sprite-vk-dark-hover-name: 'sprite_vk_dark-hover';
$sprite-vk-dark-hover-x: 126px;
$sprite-vk-dark-hover-y: 63px;
$sprite-vk-dark-hover-offset-x: -126px;
$sprite-vk-dark-hover-offset-y: -63px;
$sprite-vk-dark-hover-width: 43px;
$sprite-vk-dark-hover-height: 43px;
$sprite-vk-dark-hover-total-width: 279px;
$sprite-vk-dark-hover-total-height: 226px;
$sprite-vk-dark-hover-image: '../img/sprite.png';
$sprite-vk-dark-hover: (126px, 63px, -126px, -63px, 43px, 43px, 279px, 226px, '../img/sprite.png', 'sprite_vk_dark-hover', );
$sprite-vk-dark-name: 'sprite_vk_dark';
$sprite-vk-dark-x: 0px;
$sprite-vk-dark-y: 0px;
$sprite-vk-dark-offset-x: 0px;
$sprite-vk-dark-offset-y: 0px;
$sprite-vk-dark-width: 43px;
$sprite-vk-dark-height: 43px;
$sprite-vk-dark-total-width: 279px;
$sprite-vk-dark-total-height: 226px;
$sprite-vk-dark-image: '../img/sprite.png';
$sprite-vk-dark: (0px, 0px, 0px, 0px, 43px, 43px, 279px, 226px, '../img/sprite.png', 'sprite_vk_dark', );
$sprite-fb-name: 'sprite_fb';
$sprite-fb-x: 94px;
$sprite-fb-y: 126px;
$sprite-fb-offset-x: -94px;
$sprite-fb-offset-y: -126px;
$sprite-fb-width: 26px;
$sprite-fb-height: 26px;
$sprite-fb-total-width: 279px;
$sprite-fb-total-height: 226px;
$sprite-fb-image: '../img/sprite.png';
$sprite-fb: (94px, 126px, -94px, -126px, 26px, 26px, 279px, 226px, '../img/sprite.png', 'sprite_fb', );
$sprite-fb-hover-name: 'sprite_fb_hover';
$sprite-fb-hover-x: 189px;
$sprite-fb-hover-y: 46px;
$sprite-fb-hover-offset-x: -189px;
$sprite-fb-hover-offset-y: -46px;
$sprite-fb-hover-width: 26px;
$sprite-fb-hover-height: 26px;
$sprite-fb-hover-total-width: 279px;
$sprite-fb-hover-total-height: 226px;
$sprite-fb-hover-image: '../img/sprite.png';
$sprite-fb-hover: (189px, 46px, -189px, -46px, 26px, 26px, 279px, 226px, '../img/sprite.png', 'sprite_fb_hover', );
$sprite-tw-name: 'sprite_tw';
$sprite-tw-x: 189px;
$sprite-tw-y: 0px;
$sprite-tw-offset-x: -189px;
$sprite-tw-offset-y: 0px;
$sprite-tw-width: 26px;
$sprite-tw-height: 26px;
$sprite-tw-total-width: 279px;
$sprite-tw-total-height: 226px;
$sprite-tw-image: '../img/sprite.png';
$sprite-tw: (189px, 0px, -189px, 0px, 26px, 26px, 279px, 226px, '../img/sprite.png', 'sprite_tw', );
$sprite-tw-hover-name: 'sprite_tw_hover';
$sprite-tw-hover-x: 140px;
$sprite-tw-hover-y: 126px;
$sprite-tw-hover-offset-x: -140px;
$sprite-tw-hover-offset-y: -126px;
$sprite-tw-hover-width: 26px;
$sprite-tw-hover-height: 26px;
$sprite-tw-hover-total-width: 279px;
$sprite-tw-hover-total-height: 226px;
$sprite-tw-hover-image: '../img/sprite.png';
$sprite-tw-hover: (140px, 126px, -140px, -126px, 26px, 26px, 279px, 226px, '../img/sprite.png', 'sprite_tw_hover', );
$sprite-vk-name: 'sprite_vk';
$sprite-vk-x: 47px;
$sprite-vk-y: 126px;
$sprite-vk-offset-x: -47px;
$sprite-vk-offset-y: -126px;
$sprite-vk-width: 27px;
$sprite-vk-height: 26px;
$sprite-vk-total-width: 279px;
$sprite-vk-total-height: 226px;
$sprite-vk-image: '../img/sprite.png';
$sprite-vk: (47px, 126px, -47px, -126px, 27px, 26px, 279px, 226px, '../img/sprite.png', 'sprite_vk', );
$sprite-vk-hover-name: 'sprite_vk_hover';
$sprite-vk-hover-x: 0px;
$sprite-vk-hover-y: 126px;
$sprite-vk-hover-offset-x: 0px;
$sprite-vk-hover-offset-y: -126px;
$sprite-vk-hover-width: 27px;
$sprite-vk-hover-height: 26px;
$sprite-vk-hover-total-width: 279px;
$sprite-vk-hover-total-height: 226px;
$sprite-vk-hover-image: '../img/sprite.png';
$sprite-vk-hover: (0px, 126px, 0px, -126px, 27px, 26px, 279px, 226px, '../img/sprite.png', 'sprite_vk_hover', );
$spritesheet-width: 279px;
$spritesheet-height: 226px;
$spritesheet-image: '../img/sprite.png';
$spritesheet-sprites: ($sprite-checkbox, $sprite-grids-hover, $sprite-grids, $sprite-lines-hover, $sprite-lines, $sprite-mappin, $sprite-next, $sprite-prev, $sprite-rows-hover, $sprite-rows, $sprite-slider-control, $sprite-star, $sprite-star-filled, $sprite-telephone, $sprite-to-bottom, $sprite-to-up, $sprite-fb-dark-hover, $sprite-fb-dark, $sprite-tw-dark-hover, $sprite-tw-dark, $sprite-vk-dark-hover, $sprite-vk-dark, $sprite-fb, $sprite-fb-hover, $sprite-tw, $sprite-tw-hover, $sprite-vk, $sprite-vk-hover, );
$spritesheet: (279px, 226px, '../img/sprite.png', $spritesheet-sprites, );

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}
*/
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
<file_sep>/App/sass/_sections/_header.scss
.header {
  display: block;
  background-color: #fff;
}

@import "_header__block_contacts";
@import "_header__block_info_";
<file_sep>/App/jade/_common/_values.jade
- var socials= ['fb', 'vk', 'tw']
-
    var menuList= [
        ['#','Планшеты'],
        ['#','Мобильные телефоны'],
        ['#','Mp3 плееры'],
        ['#','Персональные компьютеры'],
        ['#','Ноутбуки'],
        ['#','Аксессуары'],
        ['#','Бытовая техника']
    ]
-
    var cssFiles= [
        'main',
    ]
-
    var path={
        "css":"css/"
    }
<file_sep>/App/sass/_sections/_footer.scss
.footer {
  background: url(../img/footer.png);
}

.footer__top {
  padding-top: 34px;
}

.footer__left{
  width: 45%;
  float: left;
  padding-top: 34px;
}

.footer__right{
  width: 55%;
  float: left;
  text-align: right;
}

.footer__logo{
  .footer__logo-img{
    min-width: 255px;
  }
}

.socials__list{
  &.black{
    margin-bottom: 21px;

    .socials__link{
      width: 45px;
      height: 45px;
      background: #ffffff;
      display: block;

      &:after{
        content: "";
        @include absolute-center();
      }
    }

    .socials__item{
      margin-left: 26px;
    }

    .socials__link_fb{
      @include sprite($sprite-fb-dark);

      &:hover{
        @include sprite($sprite-fb-dark-hover);
      }
    }
    .socials__link_vk{
      @include sprite($sprite-vk-dark);

      &:hover{
        @include sprite($sprite-vk-dark-hover);
      }
    }
    .socials__link_tw{
      @include sprite($sprite-tw-dark);

      &:hover{
        @include sprite($sprite-tw-dark-hover);
      }
    }
  }
}

.footer__nav__item{
  @include inlineblock();
  margin-left: 33px;
  margin-bottom: 15px;
}

.footer__nav__link{
  font-size: 14px;
  line-height: 16px;
  color: #ffffff;

  &:hover{
    text-decoration: none;
  }
}

.footer__bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #494949;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  line-height: 14px;
  height: 34px;
}

.footer__copyright{
  padding: 8px 0;
}<file_sep>/App/jade/_common/footer.jade
footer.footer
    .footer__top
        .container
            .footer__left
                a(href="#").logo.footer__logo
                    img(src="img/logo_footer.png", alt="cooltech logo").footer_logo-img
                    .logo__text cooltech
            .footer__right
                +social('socials',socials,'tw','black')
                +navMenu('footer__nav',menuList,1)
    .footer__bottom
        .container
            .footer__copyright All rights reserved. 2015. No copy allowed.

languages: Markdown SCSS JavaScript Pug


text:
<file_sep># Dynamic Search

Adds a dynamic search bar that will display content based on what the input is.

## Installation

Installed on NPM via:

```
npm install brg-dynamic-search
```

## Parameters

* items: an array of objects representing the data to be searched
* callback (optional): a function for displaying items when they meet the results
* noMoreMessage (optional): a string of the message to display when no items meet the search input

## Setup

After installing, require the library in your script:

```
import DynamicSearch from 'brg-dynamic-search';
```

You'll need to add two HTML elements to your page, the input where the search is inputed and the element for containing the results. Note that unless a custom callback is used, the results container should be a `<ul>`:

```
<input data-search-input type="text"/>
<ul data-search-items></ul>
```

In your script, you'll need to pass in your input to search upon instantiation:

```
fetch('www.my-site.com/api/my-data')
  .then((blob) => blob.json())
  .then((data) => {
    DynamicSearch.setup({
      items: data,
    });
  });
```

Data will need to be setup as an array of objects, each containing the following parameters:

* name
* category
* url

Here's an example:

```
const myItems = [
  { name: 'Hello World', url: '/pages/hello-world', category: 'page'},
  { name: 'About', url: '/pages/about', category: 'page'},
  { name: 'Shop All', url: '/collections/shop-all', category: 'collection'},
  { name: 'Toys', url: '/collections/toys', category: 'collection'},
  { name: 'Legos', url: '/products/legos', category: 'product'},
  { name: 'Nerf', url: '/products/nerf', category: 'product'}
];
```

## Custom Results

You can add a custom callback for creating the list items by passing in the following parameter during setup:

```
DynamicSearch.setup({
  items: data,
  callback: myCustomCallback,
});
```

The callback should return an element that will reside inside an `<li>` element for the item. The objects within the data will still need the `name` parameter.

## No Items

In the case there are no items to display, a message will display - this message can be set through the parameter `noMoreMessage` in setup:

```
DynamicSearch.setup({
  items: data,
  noMoreMessage: 'There are no items to display',
});
```<file_sep>/** The DOM of the searchable plugin */
const dom = {
  searchInput: 'data-search-input',
  searchList: 'data-search-items',
};

/**
 * Simulate click on the first link in an list element
 *
 * @param {Event} event: the JS event of the keyup event
 */
const clickLink = (event) => {
  if (event.keyCode !== 13) { return; }
  const link = event.target.querySelector('a');
  link && link.click();
};

/**
 * Build the element of searched item
 *
 * @param {Object} item: the item to display
 *
 * @return {Element}: the element of the item to be added
 */
const buildSearchableItem = (item) => {
  const itemElement = document.createElement('li');
  itemElement.classList.add('isearchr__item')
  itemElement.innerHTML = `

${item.name}

${item.category}

`;
  itemElement.setAttribute('tabindex', '0');
  itemElement.addEventListener('keyup', clickLink);
  return itemElement;
};

/**
 * Build the element for displaying no more items available
 *
 * @param {String} message: the message to be displayed to the user
 *
 * @return {Element}: the element to be added
 */
const buildNoMoreItem = (noMoreMessage) => {
  return `<li class="isearchr__item">${noMoreMessage}</li>`;
};

/**
 * Build the elements of searched items to display and add them to the display
 *
 * @param {Array} items: the array of item objects to display
 * @param {Function} callback: the function for building the individual item elements to add to the searchable list
 */
const buildSearchableDisplayItems = (items, callback) => {
  const itemContainerElement = document.querySelector(`[${dom.searchList}]`);
  itemContainerElement.innerHTML = '';
  items.forEach((item) => {
    const itemElement = callback(item);
    itemContainerElement.appendChild(itemElement);
  });
};

/**
 * Empty the search results container
 */
const emptySearchResults = () => {
  const itemContainerElement = document.querySelector(`[${dom.searchList}]`);
  itemContainerElement.innerHTML = '';
}

/**
 * Builds a list of searchable items that meet the input requirements
 * and displays that list in the searchable item display
 *
 * @param {Event} event: the JS event of the input that holds the search query
 * @param {Array} items: the array of items that are searchable
 * @param {Function} callback: the function for building the individual item elements to add to the searchable list
 */
const getNewSearchItems = (event, allItems, callback, noMoreMessageCallback, noMoreMessage) => {
  const searchTerm = event.target.value.toLowerCase();
  if (searchTerm === '') {
    emptySearchResults();
    return;
  }
  // build list of all items to display
  const itemsToDisplay = allItems.reduce((displayItems, item) => {
    return item.name.toLowerCase().includes(searchTerm)
      ? [...displayItems, item]
      : displayItems;
  }, []);
  // check if we need to display items or a no items message
  if (itemsToDisplay.length > 0) {
    buildSearchableDisplayItems(itemsToDisplay, callback);
  } else {
    const itemContainerElement = document.querySelector(`[${dom.searchList}]`);
    itemContainerElement.innerHTML = noMoreMessageCallback(noMoreMessage);
  }
};

/**
 * Sets up dynamic search
 *
 * @param {Array} items: the array of items that are searchable
 * @param {Function} callback: the function for building the individual item elements to add to the searchable list
 * @param {String} noMoreMessage: the string to display when no items are available that meet the search parameters
 */
const setup = ({items=[],  callback=buildSearchableItem, noMoreMessageCallback=buildNoMoreItem, noMoreMessage="No items found matching that search term"}) => {
  const searchInputElement = document.querySelector(`[${dom.searchInput}]`);
  searchInputElement.addEventListener('keyup', (event) => getNewSearchItems(event, items, callback, noMoreMessageCallback, noMoreMessage));
};

module.exports = {
  setup,
};

languages: Markdown JavaScript

repo_name: benrgreene/Dynamic-Search