Работа над ошибками
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;
}
}Как работать с цветами в scss?
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
}
Что не так?