Работа над ошибками

private changePage(e: any) {
    let target = e.target;
    if (target.classList.contains('paging') || (target.classList.contains('paging-text')
        )) {
        let currentPage: any;
        if (!isNaN(target.innerHTML)) {
            currentPage = target.innerHTML;
        } else {
            currentPage = target.children[0].innerHTML;
        }
        let brWidth: number = window.innerWidth;
        let num: number = (brWidth / 400) | 0;
        num = (num > 0) ? num : 1;
        if (currentPage * num > this.numIt) {
            this.paging(this.items, currentPage * num, this.push, '+');
        } else if (currentPage * num < this.numIt) {
            this.paging(this.items, currentPage * num, this.push, '-');
        }
    }
}

Что делает эта функция?

 public renderHTML(itemsList: any):string[] {
        let elementList: Array<any> = [];
        let i: number = 0;
        for (let key in itemsList) {
            let item: Item = itemsList[key];
            var date: Date = new Date(item.pubDate);
            var str: string =
                `<div class="title">
                    <a href="https://www.youtube.com/watch?v=${item.videoId}" class="title-link">${item.title}</a>
                    <img src="${item.thumbnailsMedium}" class="item-img" alt="${item.title}" width="320px" height="180px"/>
                </div>
                <div class="statistic">
                    <div class="view icon-eye">${item.viewCount}</div>
                    <div class="likeCount icon-thumbs-up">${(item.likeCount ? item.likeCount : 0)}</div>
                    <div class="dislikeCount icon-thumbs-down">${(item.dislikeCount ? item.dislikeCount : 0)}</div>
                </div>
                <div class="main-info">
                    <div class="author icon-user">${item.author}</div>
                    <div class="pubDate icon-calendar">${date.toLocaleDateString()}</div>
                </div>
                <div class="description icon-edit">${(item.description ? item.description : '...')}</div>`;
            elementList[i] = str;
            i++;
        }
        return elementList;
    }

header{
    display: flex;

    width: 100%;
    margin-bottom: 5%;

    justify-content: center;
}
.search{
    width: 50%;
    margin-top: 35px;
    margin-left: 10px;
}

Отступы

export default function boxesOnPage() {
  	let n: number = Math.floor(window.innerWidth / 350);
  	if (n == 0) {
    	n = 1;
  	}
  	if (n > 4) {
  		n = 4;
  	}
  	return n;
}

Что тут происходит?

Как улучшить?

Что не так?

    html += `<li class="${classForLi}"><div class="wrap-img">`;
    html += `<img src="${item.snippet.thumbnails.high.url}" alt="Image of request">`;
    html += `<div class="text-info"><h2>`;
    html += `<a href="https://www.youtube.com/watch?v=${item.id}">`;
    html += `${item.snippet.title}</a></h2>`;
    html += `<p>${item.snippet.description}</p>`;
    html += `<span class="author">${item.snippet.channelTitle}</span>`;
    html += `<span class="date-pablished">${date}</span>`;
    html += `</div></div><div class="number-info"><div class="amount-of-view"><span></span>`;
    html += `<span>${item.statistics.viewCount}</span>`;
    html += `</div><div class="amount-of-like"><span></span>`;
    html += `<span>${item.statistics.likeCount}</span>`;
    html += `</div></div></li>`;

Что не так?

 xhr[0] = new XMLHttpRequest();

    xhr[0].open("GET", urlSearch, true);

    xhr[0].onreadystatechange = function(): any {
        if (xhr[0].readyState !== 4) {
            return;
        }

        if (xhr[0].status !== 200) {
            console.log(xhr[0].status + ": " + xhr[0].statusText);
            return;
        } else {
            if (xhr[0].responseText.length === 0) {
                console.log("empty");
            } else {
                let resultOfRequest: any = JSON.parse(xhr[0].responseText);
                let resultOfRequestItems: any = resultOfRequest.items;
                let htmlResult: string = "";

Что не так?

 &:hover,
        &:active,
        &:focus {
            background-color: #b13035;

            &:before {
                border-right-color: #b13035;
            }
        }

 const inner: string = `
                            <div class="video-thumbnail">
                                <a href="https://www.youtube.com/watch?v=${data.id.videoId}">
                                    <img alt="${data.snippet.title}" src="${data.snippet.thumbnails.medium.url}" width="250" height="140">
                                </a>

  public constructor(prev: Function, next: Function, button: Function) {

private render(): void {
        this.pagesContainer.innerHTML = '';
        if (this.size < (this.step * 2) + 6) {
            this.add(1, this.size + 1);
        } else if (this.page < (this.step * 2) + 1) {
            this.add(1, (this.step * 2) + 4);
            this.last();
        } else if (this.page > this.size - this.step * 2) {
            this.first();
            this.add(this.size - (this.step * 2) - 2, this.size + 1);
        } else {
            this.first();
            this.add(this.page - this.step, this.page + this.step + 1);
            this.last();
        }
    }

Inline styles

Зачем передавать фун-ции в качестве параметров?

Что тут происходит?

public click(e: Interfaces.PaginationEvent): void {
        e.preventDefault();
        const button: number = +e.target.textContent;
        const delay = () => {

private createPrevVideosList(): void {
        if (!this.current || this.current === 1) {
            return;
        }
        let from: number = this.current - 1 - this.videosPerPage;
        if (from < 0) from = 0;

public startSwipe(e: Interfaces.Touch): void {
        if (e.target.closest('.search')) {
            return;
        }
        const event = ('changedTouches' in e) ? e.changedTouches[0] : e;
        this.initialPoints = { x: event.pageX, y: event.pageY };
    }

Naming

Что не так?

Что не так?

public create(): void {
        this.body = document.querySelector('body');

        this.header = document.createElement('header');
        this.mainSection = document.createElement('section');
        this.videosListWrapper = document.createElement('div');
        this.currentVideosList = document.createElement('ul');
        this.footer = document.createElement('footer');
        this.paginationBlock = document.createElement('div');
        
        this.mainSection.classList.add('main-section');
        this.videosListWrapper.classList.add('videos-wrapper');
        this.currentVideosList.classList.add('videos-list');
        this.prevVideosList = document.createElement('ul');
        this.prevVideosList.classList.add('videos-list');
        this.nextVideosList = document.createElement('ul');
        this.nextVideosList.classList.add('videos-list');
        this.paginationBlock.classList.add('pagination');

        this.body.appendChild(this.header);
        this.body.appendChild(this.mainSection);
        this.body.appendChild(this.footer);
        const search: Search = new Search(this.searchQuery.bind(this), this.clearAll.bind(this));
        this.header.appendChild(search.getForm());
        this.mainSection.appendChild(this.prevVideosList);
        this.mainSection.appendChild(this.currentVideosList);
        this.mainSection.appendChild(this.nextVideosList);
        this.footer.appendChild(this.paginationBlock);

        this.videosPerPage = Math.floor(document.documentElement.clientWidth / 300);
        this.currentVideosList.style.transform = 'translate(0px)';
        this.currentVideosList.style.width = `${document.documentElement.clientWidth}px`;
        this.prevVideosList.style.transform = `translate(-${document.documentElement.clientWidth}px)`;
        this.prevVideosList.style.width = `${document.documentElement.clientWidth}px`;
        this.nextVideosList.style.transform = `translate(${document.documentElement.clientWidth}px)`;
        this.nextVideosList.style.width = `${document.documentElement.clientWidth}px`;

        window.addEventListener('resize', this.resize.bind(this));

        this.initialPoints = { x: -1, y: -1 };
        this.addManyListeners(this.mainSection, 'touchstart mousedown', this.startSwipe.bind(this));
        this.addManyListeners(this.mainSection, 'touchend mouseup', this.endSwipe.bind(this));
        
        this.data = [];
    }

DRY?

не, не слышали

private createPrevVideosList(): void {
        if (!this.current || this.current === 1) {
            return;
        }
        let from: number = this.current - 1 - this.videosPerPage;
        if (from < 0) from = 0;
        const to: number = from + this.videosPerPage;
        this.prevVideosList.innerHTML = '';
        this.data.slice(from, to).forEach(item => {
            const clip: HTMLLIElement = Clip(item);
            const windowWidth: number = document.documentElement.clientWidth;
            clip.style.marginLeft = clip.style.marginRight = `${(windowWidth - 300 * this.videosPerPage) / this.videosPerPage / 2}px`;
            this.prevVideosList.appendChild(clip);
        });
    }

    private createNextVideosList(): void {
        const from: number = (this.current - 1 + this.videosPerPage);
        const to: number = from + this.videosPerPage;
        this.nextVideosList.innerHTML = '';
        this.data.slice(from, to).forEach(item => {
            const clip: HTMLLIElement = Clip(item);
            const windowWidth = document.documentElement.clientWidth;
            clip.style.marginLeft = clip.style.marginRight = `${(windowWidth - 300 * this.videosPerPage) / this.videosPerPage / 2}px`;
            this.nextVideosList.appendChild(clip);
        });
    }

    private createCurrentVideosList(): void {
        if (!this.totalVideos) {
            return;
        }
        const from: number = (this.current - 1);
        const to: number = from + this.videosPerPage;
        this.data.slice(from, to).forEach(item => {
            const clip: HTMLLIElement = Clip(item);
            const windowWidth = document.documentElement.clientWidth;
            clip.style.marginLeft = clip.style.marginRight = `${(windowWidth - 300 * this.videosPerPage) / this.videosPerPage / 2}px`;
            this.currentVideosList.appendChild(clip);
        });
    }

Найдите 5 отличий

export default class NextPage {
    public dispatcher: interfaces.IDispatcher;
    constructor(dispatcher: interfaces.IDispatcher) {
        this.dispatcher = dispatcher;
    }

    public execute(): void {
        let _this: NextPage = this;
        _this.dispatcher.dispatch({ actionType: 'next-page' });
    }
}

interface IStoreConfig {
    searchStringValue: string;
    allVideos: Array<string>;
    nextPageToken: number;
    totalPagesCount: number;
    itemsPerPage: number;
    currentPageNumber: number;
    previousPage: boolean;
    nextPage: boolean;
    currentPageVideos: Array<string>;
    nextPageVideos: Array<string>;
    videos: interfaces.IYoutubeResponse;
    currentPage: number;
}

 return fetch(request, {
            method: 'get'
        }).then(function (response: Response): Promise<interfaces.IYoutubeResponse> {
            return response.json();
        }).then(function (data: interfaces.IYoutubeResponse): Promise<Response> {

_this????

previousPage: boolean

arrow function

case 'next-page': {
                let self: interfaces.IStoreConfig = this;

                if (this.state.currentPage === this.state.totalPagesCount) {
                    break;
                }

                if ((this.state.currentPage + 3) >= this.state.totalPagesCount) {
                    let _this: interfaces.IStoreConfig = this;
                    let youTubeService: YouTubeService = new YouTubeService();
                    let preloadedVideos: Promise<void> = youTubeService.searchVideos(this.state.searchStringValue, this.state.nextPageToken)
                        .then(function (resultPage: interfaces.IResultPage): void {
                            _this.state.nextPageToken = resultPage.result.nextPageToken;
                            resultPage.result.items.forEach(item => _this.state.allVideos.push(item));
                            _this.state.totalPagesCount = Math.ceil(_this.state.allVideos.length / _this.state.itemsPerPage);
                        }
                        );
                }

        for (let i: number = 0; i < state.currentPageVideos.length; i++) {
            videoTemplate += `
                <li class="video-item">
                    <img src="${videos[i].snippet.thumbnails.medium.url}"/>
                    <div class="video-info">

Что не так?

Перебирающие методы массива

export function initialSizing(): void {
    const width: number = document.documentElement.clientWidth;
    if (width > 1360) {
        state.itemsOnPage = 4;
    } else if (width <= 1360 && width > 1000) {
        state.itemsOnPage = 3;
    } else if (width <= 1000 && width > 640) {
        state.itemsOnPage = 2;
    } else if (width <= 640) {
        state.itemsOnPage = 1;
    }
}

export function resize(): void {
    const width: number = document.documentElement.clientWidth;
    if (state.itemsOnPage !== 4 && width > 1360) {
        state.itemsOnPage = 4;
    } else if (state.itemsOnPage !== 3 && width <= 1360 && width > 1000) {
        state.itemsOnPage = 3;
    } else if (state.itemsOnPage !== 2 && width <= 1000 && width > 640) {
        state.itemsOnPage = 2;
    } else if (state.itemsOnPage !== 1 && width <= 640) {
        state.itemsOnPage = 1;
    }
    if (results.children.length) {
        showPage();
    }
}

Magic numbers

import initiateSearch from "../../middleware/initiateSearch";

const form: HTMLElement = document.createElement("form");
form.classList.add("header-item-search");

const searchInput: HTMLElement = document.createElement("input");
searchInput.setAttribute("type", "text");
searchInput.setAttribute("id", "search");
searchInput.setAttribute("autocomplete", "off");
searchInput.setAttribute("placeholder", "Type something to search...");
searchInput.classList.add("form-control");

form.addEventListener("submit", (e) => {
    e.preventDefault();
    const searchFor: string = (<HTMLInputElement>searchInput).value;
    initiateSearch(searchFor);
});

form.appendChild(searchInput);

export default form;

Global like

listItems[0].classList.add("button");
listItems[0].appendChild(leftButton);
listItems[0].setAttribute("id", "slider-left");

listItems[2].setAttribute("id", "curr-page");
listItems[2].addEventListener("click", toggleTooltip);

listItems[4].classList.add("button");
listItems[4].setAttribute("id", "slider-right");
listItems[4].appendChild(rightButton);

export function scroll(event: MouseEvent): void {
    const target: HTMLElement = <HTMLElement>event.currentTarget;
    const shift: number = -movementStart + event.clientX;
    const newPos: number = state.containerPos + shift;
    target.style.transform = `translate3d(${newPos}px, 0, 0)`;
}

export function swipe(event: TouchEvent): void {
    const target: HTMLElement = <HTMLElement>event.currentTarget;
    const shift: number = -movementStart + event.changedTouches[0].clientX;
    const newPos: number = state.containerPos + shift;
    target.style.transform = `translate3d(${newPos}px, 0, 0)`;
}

Найдите 5 отличий

Что не так?

function initiateSearch(searchFor: string): void {
    state.searchString = searchFor;
    searchVideos(searchFor).then(
        (response) => {
            const responseObject: SearchResult = JSON.parse(response);
            state.nextPageToken = responseObject.nextPageToken || "";
            state.prevPageToken = responseObject.prevPageToken || "";
            return getStats(responseObject);
        }
    ).then(
        (statsResponse) => {
            const statsResponseObject: StatsResult = JSON.parse(statsResponse);
            const created: Array<HTMLElement> = [];
            statsResponseObject.items.forEach((item) => {
                created.push(createItem(item));
            });
            dropPrevState();
            appendItems(created);
            showPage();
        }
    );
}

function loadMoreVideos(pageToken: string): void {
    loadMore(pageToken).then(
        (response) => {
            const responseObject: SearchResult = JSON.parse(response);
            state.nextPageToken = responseObject.nextPageToken || "";
            state.prevPageToken = responseObject.prevPageToken || "";
            return getStats(responseObject);
        }
    ).then(
        (statsResponse) => {
            const statsResponseObject: StatsResult = JSON.parse(statsResponse);
            const created: Array<HTMLElement> = [];
            statsResponseObject.items.forEach((item) => {
                created.push(createItem(item));
            });
            appendItems(created);
        }
    );
}

Найдите 5 отличий

#stringSearch {
  font: normal 4vw/4.5vw 'Source Sans Pro', sans-serif;
  color: white;
}

h2 {
  margin: 15px 0 10px 0;
  padding: 0 10px;
}

form {
  margin-top: -42px;
}

@media (min-width: 768px) {
#preDiv h1 {
  font: bold 80px/100px 'Exo', sans-serif;
}
#preDiv h4 {
  font: normal 24px/30px 'Source Sans Pro', sans-serif;
  letter-spacing: 5px;

}
}

Что не так?

export default function deleteElem(id:string) {
	let mustDue:HTMLElement = document.getElementById(id);
	if (mustDue) {
		mustDue.remove();
	}
}

Орфографические ошибки

import Tag from './createTag';

export default function createBox() {
  	let boxDiv:HTMLElement = Tag('div');
  	boxDiv.id = 'boxDiv';

  	let boxImage:HTMLImageElement = document.createElement('img');
  	let boxTitle:HTMLElement = Tag('h2');
  	let boxA:HTMLElement = Tag('a');
  	boxTitle.appendChild(boxA);
  	let boxAuthor:HTMLElement = Tag('h3');
  	let boxData:HTMLElement = Tag('p');
  	let boxStat:HTMLElement = Tag('ul');
  		for (let i:number = 0; i < 3; i++) {
    		let boxLi:HTMLElement = Tag('li');
    		let boxI:HTMLElement = Tag('i');
    		boxLi.appendChild(boxI);
    		boxStat.appendChild(boxLi);
  		}
  	let boxDescr:HTMLElement = Tag('p');
  	boxDiv.appendChild(boxImage);
  	boxDiv.appendChild(boxTitle);
  	boxDiv.appendChild(boxAuthor);
  	boxDiv.appendChild(boxData);
  	boxDiv.appendChild(boxStat);
  	boxDiv.appendChild(boxDescr);
  	document.getElementById('containerDiv').appendChild(boxDiv);
  	let boxDivEl:HTMLElement = document.getElementById('boxDiv');
  	boxDivEl.classList.add('boxDiv');
  	boxDivEl.getElementsByTagName('img')[0].classList.add('boxImage');
  	boxDivEl.getElementsByTagName('p')[0].classList.add('boxData');
  	boxDivEl.getElementsByTagName('ul')[0].classList.add('boxStat', 'fa-ul');
  	boxDivEl.getElementsByTagName('p')[1].classList.add('boxDescr');
  	boxDivEl.getElementsByTagName('i')[0].classList.add('fa-li', 'fa', 'fa-eye');
  	boxDivEl.getElementsByTagName('i')[1].classList.add('fa-li', 'fa', 'fa-thumbs-o-up');
  	boxDivEl.getElementsByTagName('i')[2].classList.add('fa-li', 'fa', 'fa-thumbs-o-down');
}

Что не так?

export default function firstActiveDiv() {
  	let coll:HTMLCollectionOf<Element> = document.getElementsByClassName('active');
  	if (coll[0]) { 
  		let idNumber:string = coll[0].id;
  		return (+idNumber.slice(6) - 0); 
	} else { 
		return (-1); 
	}
}

function prevent(e:Event):void { // 
  	e.preventDefault();
  	startBoxNumber = 0;
  	currentStart = 0;
  	boxLoadAmount = 15;
  	endBoxNumber = 15;
 
  	finishPage = false;
  	firstRight = false;

  	likeAmount = [], dislikeAmount = [], viewAmount = [];
    point = 0;
    timeToChange = [0];
    if (document.getElementById('preDiv')){
      deleteElem('preDiv');
      onPreClick();
    }
    
  	deleteElem('containerDiv');
  	deleteElem('topH5string');
  	deleteElem('topH5paging');
  
  	document.getElementById('inputSearch').blur();
  	init(); // set key for request
}

Что не так?