Готовый Код | Frontend
884 subscribers
470 photos
7 videos
240 links
Здесь ты найдешь готовый код для фронтенд разработки

По вопросам : @sul_furas
加入频道
Хай! Давайте сделаем "Поиск исторических событий "
Этот поиск должен выводить все события за определённый год.

Вёрстка:
<div id="parent">
<input id="input" placeholder="введите год и нажмите Enter">
<table id="table"></table>
</div>
* {
box-sizing: border-box;
}
#parent {
margin: 0 auto;
width: 600px;
}
#input {
width: 100%;
margin-bottom: 10px;
padding: 10px;
}
#table {
width: 100%;
}
#table td {
padding: 10px;
text-align: center;
border: 1px solid black;
}
Хай! Напишите функцию merge, которая будет принимать на вход несколько объектов (любое количество), и возвращать единственный объект, содержащий все поля из всех объектов. Если одно и то же поле было в нескольких объектах, необходимо оставить значение, которое встретилось раньше
Привет! Напишите функцию, которая заполняет новый массив предоставленным значением.

/**
* Описание задачи: Напишите функцию, которая заполняет новый массив предоставленным значением.
* Ожидаемый результат: (3, 'a') => ['a', 'a', 'a']
* Сложность задачи: 1 of 5
* @param {number} arraySize - размер массива
* @param {?} value - значение для массива
* @returns {Array}
*/

const fill = (arraySize, value) => {
throw new Error('Напишите здесь свое решение');
}

const data = 3;
const valueToFill = 'a';
console.log(fill(data, valueToFill)) // ['a', 'a', 'a']
Для вас задача:
Напишите код, который создает переменную company, в переменную вставьте два объекта post и name, со значениями developer и Ivan, после выведите значение объекта post в alert. Какой будет результат?

А вот и её решение:
let company = {
post: 'developer',
name: 'Ivan'
}

alert(
company.post);
Простенькое задание)
Какое значение будет выведено в консоль?
console.log([ ] + 1 + 2);

Результат 12
Какое значение будет на выходе?
const client = {
name: "Mr. Smith",
age: 21
}

const increaseAge = (x = { ...client }) => x.age += 1
const changeAgeAndName = (x = { ...client }) => {
x.age += 1
x.name = "Ivan"
}

increaseAge(client)
changeAgeAndName()

console.log(client)

A: {name: "Ivan", age: 22}
B: {name: "Ivan", age: 23}
C: {name: "Mr. Smith", age: 22}
D: {name: "Mr. Smith", age: 23}
У нас так же есть сообщество по задачам: https://yangx.top/htmlcssjstest и по макетам: https://yangx.top/figma_makets
А ещё не забываем, что у нас есть основной канал, где много различных фишек: https://yangx.top/dh_jun )
Хай ! Правильно ли решили задачу?

Нужно найти ошибки в коде

let obj = {a: 10, b: 20, c: 30, d: 40, e: 50};
let sum = 0;

for (let elem in obj) {
if (elem[0] === '1' && elem[0] === '2') {
sum += +elem;
}
}

console.log(sum);

Сделали так:
let obj = { a: 10, b: 20, c: 30, d: 40, e: 50 };
let sum = 0;

for (let elem in obj) {
if (String(obj[elem])[0] === "1" || String(obj[elem])[0] === "2") {
sum += +obj[elem];
}
}

console.log(sum);
Некоторые проблемы иногда нужно показывать с помощью отдельно выделенных областей.
Поэтому решил поделиться хорошей программой ligtshot
Скачать можно по ссылке: https://app.prntscr.com/ru/
Попробуйте сделать задачу устно)
Чему равно g после выполнения следующего кода?
f = g = 0;
(function () {
try {
f = function() {
return f();
};
f();
} catch (e) {
return g++ && f();
} finally {
return ++g;
}
function f() { g += 5; return 0; }
}) ();

Результат: 2
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер с анимацией
Прокрутите колесико мышки или нажмите на квадратики внизу справа, чтобы отобразить следующий слайд с анимационным появлением текста.
https://codepen.io/fluxus/pen/rweVgp
Задачка может быть тестовым заданием)

Потенциальному разработчику предоставляется строка.
Напишите функцию, которая:

- вернет значение истины, если string – это палиндром;
- в противном случае на экран будет выведен результат false;
- делать все это с учетом пробелов и имеющихся знаков препинания.

Пример – при наличии строки, содержащей только слово cat, значение функции должно быть false. А если работать с лексемой racecar – true.
Задача: Возраст

Ваша функция принимает два аргумента:

текущий возраст отца (лет)
текущий возраст сына (лет)
Подсчитайте, сколько лет назад отец был вдвое старше сына (или через сколько лет он будет вдвое старше).

P.s Решение будет позже)
Хай! Сегодня мы ищем разницу в возрасте)
Используя набор данных из примера, подсчитайте среднюю разницу в возрасте между матерями и их детьми (это возраст матери во время появления ребёнка). Можно использовать функцию average, приведённую в главе.

Обратите внимание – не все матери, упомянутые в наборе, присутствуют в нём. Здесь может пригодиться объект byName, который упрощает процедуру поиска объекта человека по имени.

function average(array) {
function plus(a, b) { return a + b; }
return array.reduce(plus) / array.length;
}

var byName = {};
ancestry.forEach(function(person) {
byName[person.name] = person;
});

// Ваш код

// → 31.2
Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания.
8787

66

9879

2345

9898
Что выведет консоль
const first = new Promise((resolve, reject) => {
setTimeout(resolve, 500, "один"); }); const second = new Promise((resolve, reject) => { setTimeout(resolve, 100, "два"); }); Promise.race([first, second]).then(res => console.log(res));
Anonymous Quiz
48%
Два
30%
Один
9%
500
4%
100
9%
resolve
Немного вопросов, которые могут появиться на собесе

1. В чем разница между декларацией функции (function declaration) и функциональным выражением (function expression)?

2. Что такое анонимная функция?

3. Расскажите о стрелочных функциях (arrow function). Чем стрелочные функции отличаются от обычных?

4. Что такое и для чего используют IIFE (Immediately Invoked Function Expression)?

5. Что такое hoisting, как он работает для переменных и функций?

6. Что такое замыкание (closure) и каковы сценарии его использования?
Пора делать задачу)
Напишите функцию JavaScript, чтобы получить разницу во времени в минутах между двумя датами.
Тестовые данные :
dt1 = новая дата («13 октября 2014 г., 11:11:00»);
dt2 = новая дата («13 октября 2014 г., 11:13:00»);
console.log (diff_minutes (dt1, dt2));
2
P.s Как вы думаете, где это используется?
Привет! Пора решать задачу!
Напишите функцию JavaScript для объединения данной строки n раз (по умолчанию 1).

Тестовые данные :
console.log (повтор ( 'Ха!'));
console.log (повтор ( 'Ха!', 2));
console.log (повтор ( 'Ха!', 3));
«Ха!»
«Ха! Ха!»
«Ха! Ха! Ха!»

Решение:
repeat = function repeat(str, count) {
if(typeof(count) =="undefined") {
count =1;
}
return count < 1 ? '' : new Array(count + 1).join(str);
}
console.log(repeat('Ha!'));
console.log(repeat('Ha!',2));
console.log(repeat('Ha!',3));
Ответ:
Ха!
Ха! Ха!
Ха! Ха! Ха!
Хай! Используйте метод reduce в комбинации с concat для свёртки массива массивов в один массив, у которого есть все элементы входных массивов.

var arrays = [[1, 2, 3], [4, 5], [6]];
// Ваш код
// → [1, 2, 3, 4, 5, 6]