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

По вопросам : @sul_furas
加入频道
Готовый Код | Frontend
Привет! Пора написать программу на JavaScript для сортировки списка элементов с использованием Bogosort. В информатике bogosort - это особенно неэффективный алгоритм сортировки, основанный на парадигме генерации и тестирования. Алгоритм последовательно генерирует…
Решение задачи:
function Bogosort(arr){
var isSorted = function(arr){
for(var i = 1; i < arr.length; i++){
if (arr[i-1] > arr[i]) {
return false;
}
}
return true;
};
function shuffle(arr){
var count = arr.length, temp, index;
while(count > 0){
index = Math.floor(Math.random() * count);
count--;
temp = arr[count];
arr[count] = arr[index];
arr[index] = temp;
}
return arr;
}
function sort(arr){
var sorted = false;
while(!sorted){
arr = shuffle(arr);
sorted = isSorted(arr);
}
return arr;
}
return sort(arr);
}
var arra = [3, 0, 2, 5, -1, 4, 1];
console.log("Original Array Elements");
console.log(arra);
console.log("Sorted Array Elements");
console.log(Bogosort(arra));
Привет! Сегодня мы сделаем программу сортировки слияния на JS

Образец массива : [34,7,23,32,5,62]
Пример вывода : [5, 7, 23, 32, 34, 62]

Решение:
Array.prototype.merge_Sort = function () {
if (this.length <= 1)
{
return this;
}
var half = parseInt(this.length / 2);
var left = this.slice(0, half).merge_Sort();
var right = this.slice(half, this.length).merge_Sort();
var merge = function (left, right)
{
var arry = [];
while (left.length > 0 && right.length > 0)
{
arry.push((left[0] <= right[0]) ? left.shift() : right.shift());
}
return arry.concat(left).concat(right);
};
return merge(left, right);
};
var a = [34,7,23,32,5,62];
console.log(a.merge_Sort());
Хай! Напишите функцию JavaScript для вычисления «вчерашнего дня».
Тестовые данные :
console.log (вчера (15 ноября 2014 г.));
console.log (вчера (16 ноября 2015 г.));
console.log (вчера (17 ноября 2016 г.));
Выход :
«Пт 14 ноября 2014 00:00:00 GMT + 0530 (стандартное время Индии)»
"Вс 15 ноября 2015 00:00:00 GMT + 0530 (стандартное время Индии)"
«Ср 16 ноября 2016 00:00:00 GMT + 0530 (стандартное время Индии)»
Хай! Пора решать задачку)
Разница между вызовами
Давайте создадим новый объект rabbit:

function Rabbit(name) {
this.name = name;
}
Rabbit.prototype.sayHi = function() {
alert(this.name);
};

let rabbit = new Rabbit("Rabbit");
Все эти вызовы делают одно и тоже или нет?

rabbit.sayHi();
Rabbit.prototype.sayHi();
Object.getPrototypeOf(rabbit).sayHi();
rabbit.__proto__.sayHi();
Привет! 

В предыдущей задаче мы разобрали символы, а в этой постараемся сделать часы, которые будут показывать не только время, но и дату)

Задача:
Написать на js часы, которые будут выдавать время и дату)

P.s Скидываем свои результаты в комментариях)
Хай! Сегодня задача сделать шахматную доску используя html, css и js)

Совет:
Шаблон шахматной доски можно очень легко создать с помощью JavaScript и концепции document object module (DOM). Используя этот метод, вы можете создать шахматную доску с любым количеством строк и столбцов по вашему желанию, просто изменив несколько параметров. Кроме того, строки кода, написанные с использованием этого метода, также будут намного меньше, чем при создании того же самого с использованием чистого HTML и CSS, особенно когда количество строк и столбцов очень велико.

P.s Решение будет позже)
Хай! Давай сделаем нашу любимую старую игру "Крестики-нолики"

Условия игры:
- игра начинается сразу после загрузки страницы;
- право ходить первым выбирается случайным образом;
- знак, который вы будете ставить, выбирается случайным образом (крестик или нолик);
- если выигрывает игрок, то победные символы (полоса крестиков или ноликов) выделяется зеленым цветом;
- если игрок проигрывает компьютеру, то полоса выделяется красным цветом;
- над полем имеется строка информации, где выводится результат (победа или поражение).


P.s А чтобы было интереснее скидывайте свои решения и сравнивайте свои результаты с другими). Решение будет позже)
Хай! Сможешь ответить?
Вопрос: Сколько аргументов можно передать в main() ?
Anonymous Poll
18%
Зависит от системы
25%
Только 1
51%
Бесконечное количество
7%
Ничего из вышеперечисленного
Салют! Сегодня так много дел, что их некуда записать. Давай сделаем список дел на js?

Задача:
Используя css и js, нужно создать "список дел" для своего дня и поделиться им в комментариях)

Условия:
- Добавление через отдельное поле с кнопкой
- Сделанные задачи отмечаются галочкой
- При наведении на задачу происходит анимация (любая)
Хай! Популярная задача на собеседование FizzBuzz

Постановка:
Требуется написать функцию, выводящую в консоль числа от 1 до n, где n — это целое число, которая функция принимает в качестве параметра, с такими условиями:

вывод fizz вместо чисел, кратных 3;

вывод buzz вместо чисел, кратных 5;

вывод fizzbuzz вместо чисел, кратных как 3, так и 5.


Результат:
// 1
// 2
// fizz
// 4
// buzz

P.s Пять смайлов на посте и скидываем решение)
Готовый Код | Frontend
Хай! Популярная задача на собеседование FizzBuzz Постановка: Требуется написать функцию, выводящую в консоль числа от 1 до n, где n — это целое число, которая функция принимает в качестве параметра, с такими условиями: вывод fizz вместо чисел, кратных 3;…
Привет) Сегодня у нас будет разбор
Решение
Главное здесь — способ поиска кратных чисел с использованием js. Его можно сделать при помощи оператора модуля или же остатка — %, который позволяет показать остаток при делении двух чисел. Если остаток 0, это означает, что первое число кратно второму.

12 % 5 // 2 -> 12 is not a multiple of 5
12 % 3 // 0 -> 12 is multiple of 3

Так, если разделить 12 на 5, получаем 2 с остатком 2. Если же разделить 12 на 3, то получаем 4 с остатком 0. В первом случае 12 не кратно 5, во втором — 12 кратно 3.
const fizzBuzz = num => {
for(let i = 1; i <= num; i++) {
// check if the number is a multiple of 3 and 5
if(i % 3 === 0 && i % 5 === 0) {
console.log('fizzbuzz')
} // check if the number is a multiple of 3
else if(i % 3 === 0) {
console.log('fizz')
} // check if the number is a multiple of 5
else if(i % 5 === 0) {
console.log('buzz')
} else {
console.log(i)
}
}
}
P.s Если справились - в комментариях пишем "+"
Хай! Сегодня у нас задание Палиндром)

Что такое Палиндром?
Палиндром — слово, предложение или последовательность символов, которая абсолютно одинаково читается как в привычном направлении, так и в обратном. К примеру, “Anna” — это палиндром, а “table” и “John” — нет.

Постановка задачи:
Дана строка; нужно написать функцию, которая позволяет вернуть значение true, если строка является палиндромом, и false — если нет. При этом нужно учитывать пробелы и знаки препинания.

palindrome('racecar') === true
palindrome('table') === false

P.s Десять смайлов на посте и скидываем решение)
Всем привет! Сегодня задача на вычисление факториала числа

Напишите программу на JavaScript для вычисления факториала числа.

В математике факториал неотрицательного целого числа n, обозначенного через n !, является произведением всех натуральных чисел, меньших или равных n. Например, 5! = 5 х 4 х 3 х 2 х 1 = 120

Решение
function factorial(x)
{
if (x === 0)
{
return 1;
}
return x * factorial(x-1);
}
console.log(factorial(5));
Ответ: 120
Хай! Сегодня у нас задача Фибоначчи
Классическая задача, которую можно встретить на собеседованиях самого разного уровня. Стоит напомнить, что последовательность Фибоначчи — это ряд чисел, где каждое последующее является суммой двух предыдущих. Так, первые десять чисел выглядят следующим образом: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Постановка
Нужно написать функцию, которая возвращает n-ную запись в определенной последовательности, причем n — число, которое передается в качестве аргумента функции.

fibonacci(3) // --> 2

Эта задача включает прохождение по циклу такое количество раз, которое указано в аргументе, с возвратом значения на соответствующей позиции. Этот способ постановки задачи требует использования циклов. Если вместо этого вы используете рекурсию, это может понравиться интервьюеру и дать вам несколько дополнительных очков.

P.s Пять смайлов и скидываем решение)
Доброе всем утро! Давайте решим ещё одну задачку)
Задача:
Есть ферма животных, у всех животных есть имена и возраст. Животные бывают разных типов: Кошки, Собаки, Коровы. У каждого животного могут быть дети. Если животное является родителем этих детей, в свою очередь глубина семейного древа может достигать N либо 0.

Опишите структуры данных для фермы животных и напишите функцию, которая делает подсчёт всех возрастов животных и выводит общий возраст для всей фермы.

P.s Десять смайлов и скидываем решение)
Готовый Код | Frontend
Доброе всем утро! Давайте решим ещё одну задачку) Задача: Есть ферма животных, у всех животных есть имена и возраст. Животные бывают разных типов: Кошки, Собаки, Коровы. У каждого животного могут быть дети. Если животное является родителем этих детей, в свою…
Решение:
// Родительский класс для всех животных
class Animal {
constructor(name, age, childs = null) {
this.name = name;
this.age = age;
this.childs = childs;
}
}

// Класс Cat - потомок класса Animal
// Имеет те же поля, что и Animal
class Cat extends Animal {
constructor(name, age, childs = null) {
super(name, age, childs);
}
}

// Класс Dog - потомок класса Animal
// Имеет те же поля, что и Animal
class Dog extends Animal {
constructor(name, age, childs = null) {
super(name, age, childs);
}
}

// Класс Cow - потомок класса Animal
// Имеет те же поля, что и Animal
class Cow extends Animal {
constructor(name, age, childs = null) {
super(name, age, childs);
}
}

// Рекурсивная функция для подсчета age
// Обходит все дочерние элементы
function getAnimalsAge(animals) {
let output = 0;

if (animals.length > 0) {
// Использование функции reduce для получения общего age
// https://learn.javascript.ru/array-iteration
output += animals.reduce((acc, current) => {
// Сумма age всех childs
let count = 0;
// Если childs пустой или его нет, тогда нет смысла пробегать по ним
if (current.childs && current.childs.length > 0) {
// Применение рекурсии
count += getAnimalsAge(current.childs);
}

// Возвращаем сумму аккумулятора, текущего животного, сумму age всех childs
return acc + current.age + count;
}, 0);
}

return output;
}

// Функция для получения определённого количества животных
function generateAnimals(type, count) {
let output = [];

for (let i = 0; i <= count; i++) {
let parameter = {
name: ${type} ${i},
age: i,
childs: []
};

let item = null;

switch (type) {
case "Cat":
item = new Cat(parameter.name, parameter.age);
break;
case "Dog":
item = new Dog(parameter.name, parameter.age);
break;
case "Cow":
item = new Cow(parameter.name, parameter.age);
break;
}

if (item) {
output.push(item);
}
}

return output;
}

// Добавление childs ко всем переданным животным
function addChildsTo(animals, count, type) {
animals.forEach(animal => {
if (!animal.childs) {
animal.childs = [];
}
// Обратите внимание, что массив - ссылка, поэтому изменяя здесь его поля
// мы меняем их глобально
animal.childs = generateAnimals(type, count);
});
}

let cats = generateAnimals("Cat", 5);
addChildsTo(cats, 10, "Cat");

let dogs = generateAnimals("Dog", 3);
addChildsTo(dogs, 3, "Dog");

let cows = generateAnimals("Cow", 7);
addChildsTo(cows, 1, "Dog");

// Использование оператора Spread (ES6)
// https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Spread_syntax
let animals = [...cats, ...dogs, ...cows];

console.log(getAnimalsAge(animals)) // 411
Какой минимальный набор языков для веб разработки?
Anonymous Poll
87%
HTML CSS JS
12%
HTML CSS JS PHP PYTHON
0%
JAVA PHP JS
1%
JS GO PYTHON C++
Привет сегодня задача Палиндром

Палиндром — слово, предложение или последовательность символов, которая абсолютно одинаково читается как в привычном направлении, так и в обратном. К примеру, “Anna” — это палиндром, а “table” и “John” — нет.

Постановка

Дана строка; нужно написать функцию, которая позволяет вернуть значение true, если строка является палиндромом, и false — если нет. При этом нужно учитывать пробелы и знаки препинания.

palindrome('racecar') === true
palindrome('table') === false

P,s Десять смайлов и скидываем решение)
Привет! Сегодня у нас будет задача "Фибоначчи"

Классическая задача, которую можно встретить на собеседованиях самого разного уровня. Стоит напомнить, что последовательность Фибоначчи — это ряд чисел, где каждое последующее является суммой двух предыдущих. Так, первые десять чисел выглядят следующим образом: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Постановка

Нужно написать функцию, которая возвращает n-ную запись в определенной последовательности, причем n — число, которое передается в качестве аргумента функции.

fibonacci(3) // --> 2

Эта задача включает прохождение по циклу такое количество раз, которое указано в аргументе, с возвратом значения на соответствующей позиции. Этот способ постановки задачи требует использования циклов. Если вместо этого вы используете рекурсию, это может понравиться интервьюеру и дать вам несколько дополнительных очков.

P.s Справился? Скидывай решение в комментариях) Десять смайлов и кидаем решение)
Хай! Снова числа)
Ваша задача на сегодня это написать выражение, находящее только числа, записанные в стиле JavaScript. Оно должно поддерживать возможный минус или плюс перед числом, десятичную точку, и экспоненциальную запись 5e-3 или 1E10 – опять-таки с возможными плюсом или минусом. Также заметьте, что до или после точки не обязательно могут стоять цифры, но при этом число не может состоять из одной точки. То есть, .5 или 5. – допустимые числа, а одна точка сама по себе – нет.
Привет! Пора решить задачу:
Напишите функцию JavaScript для преобразования метки времени Unix во время.
Решение:
function Unix_timestamp(t)
{
var dt = new Date(t*1000);
var hr = dt.getHours();
var m ="0" + dt.getMinutes();
var s ="0" + dt.getSeconds();
return hr+ ':' + m.substr(-2) + ':' + s.substr(-2);
}
console.log(Unix_timestamp(1412743274));

P.S. Наш канал с макетами -https://yangx.top/figma_makets