Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                    function clog(item) {
        console.log(item);
    }
    function ilog(item) {
        console.info(item);
    }
    function dlog(item) { //выводит элемент в виде, удобном для исследования HTML-структуры
        console.dir(item);
    }

    //Треугольник. Напишите цикл,  выводит такой треугольник
    /*
    #
    ##
    ###
    ####
    #####
    ######
    #######*/
    function treugol(item) {
        let i = 0, count = item, result = '', x = '';
        for (i; i < count; i++) {
            x += '#';
            result += x + "\r\n";
        }
        return result;
    }
    clog(treugol(7));

    //FizzBuzz. Напишите программу, которая выводит через console.log все числа от 1 до 100,
    //с двумя исключениями. Для чисел, нацело делящихся на 3, она должна выводить ‘Fizz’, а
    //для чисел, делящихся на 5 (но не на 3) – ‘Buzz’.Когда сумеете – исправьте её так, чтобы она
    //выводила «FizzBuzz» для всех чисел, которые делятся и на 3 и на 5.
    function FizzBuzz(item) {
        let count = item, result = '', i = 0;
        for (i; i < count; i++) {
            if (i % 3 == 0 && i % 5 == 0) {
                result += "FizzBizz \r\n";
            }else if (i % 3 == 0) {
                result += "Fizz \r\n";
            } else if (i % 5 == 0 && i % 3 != 0) {
                result += "Bizz \r\n";
            } else {
                result += i + "\r\n";
            }
        }
        return result;
    }
    clog(FizzBuzz(16));

    //Шахматная доска. Напишите программу, создающую строку, содержащую решётку 8х8, в которой
    //линии разделяются символами новой строки. На каждой позиции либо пробел, либо #. В результате
    //должна получиться шахматная доска.
    /*
    # # # #
     # # # #
    # # # #
     # # # #
    # # # #
     # # # #
    # # # #
     # # # #*/
    function chessBoard() {
        var horizontal = 8, vertical = 8, result = "", i, j;
        for (i = 0; i < vertical; i++) {
            for (j = 0; j < horizontal; j++) {
                result += (j % 2 == i % 2) ? "#" : " ";
            }
            result += "\r\n";
        }
        return result;
    }
    clog(chessBoard());

    //Минимум. Напишите функцию minItem,принимающую два аргумента,и возвращающую минимальный из них.
    function minItem(a, b) {
        return (a < b) ? a : b;
    }
    clog(minItem(2, 10)); //2

    //Рекурсия. Ноль чётный. Единица нечётная. У любого числа N чётность такая же, как у N-2.
    //Напишите рекурсивную функцию isEven согласно этим правилам. Она должна принимать число и
    //возвращать булевское значение. Потестируйте её на 50 и 75. Попробуйте задать ей -1.
    //Почему она ведёт себя таким образом? Можно ли её как-то исправить?
    var countIsEvens = 0;
    function isEvens(item) {
        if (item !== countIsEvens) {
            countIsEvens += 1;
            isEvens(item);
        }
        return (countIsEvens % 2 == 0) ? "true" : "false";
    }
    clog(isEvens(50)); //true
    clog(isEvens(75)); //false

    //Считаем бобы. Символ номер N строки можно получить, добавив к ней .charAt(N)
    //( “строчка”.charAt(5) ) – схожим образом с получением длины строки при помощи .length.
    //Возвращаемое значение будет строковым, состоящим из одного символа (к примеру, “к”).
    //У первого символа строки позиция 0, что означает, что у последнего символа позиция будет
    //string.length – 1. Другими словами, у строки из двух символов длина 2, а позиции её символов
    //будут 0 и 1.Напишите функцию countBs, которая принимает строку в качестве аргумента, и
    //возвращает количество символов “B”, содержащихся в строке.Затем напишите функцию countChar,
    //которая работает примерно как countBs, только принимает второй параметр — символ, который мы
    //будем искать в строке (вместо того, чтобы просто считать количество символов “B”). Для этого
    //переделайте функцию countBs.
    function countChar(string, lit) {
        let result = "", str = string.length, bigStr = string.toUpperCase(), bigLit = lit.toUpperCase();
        while (str--) {
            if (bigStr.charAt(str) == bigLit) {
                result += str + " "
            }
        }
        return result;
    }
    clog(countChar("Lorem established the Bonorum source", "b")); //22 10

    //Сумма диапазона.  Напишите функцию range, принимающую два аргумента, начало и конец диапазона,
    //и возвращающую массив, который содержит все числа из него, включая начальное и конечное.
    //Затем напишите функцию sum, принимающую массив чисел и возвращающую их сумму. Запустите
    //указанную выше инструкцию и убедитесь, что она возвращает 55.В качестве бонуса дополните
    //функцию range, чтобы она могла принимать необязательный третий аргумент – шаг для построения
    //массива. Если он не задан, шаг равен единице. Вызов функции range(1, 10, 2) должен будет
    //вернуть [1, 3, 5, 7, 9]. Убедитесь, что она работает с отрицательным шагом так, что вызов
    //range(5, 2, -1) возвращает [5, 4, 3, 2].
    function range(arg1, arg2, step) {
        function isNumeric(n) { //проверяет на число
            return isNaN(parseFloat(n)) && isFinite(n);
        }
        if (isNumeric(arg1) || isNumeric(arg2) || (isNumeric(step))) return; //проверка на ввод чисел
        var arr = [], walk;
        if (arg2 > arg1) {
            walk = step || 1; //по умолчанию 1 если не введен шаг
            for (var i = arg1; i <= arg2; i += walk) {
                arr.push(i);
            }
        } else {
            walk = step || -1;
            for (var j = arg1; j >= arg2; j += walk) {
                arr.push(j);
            }
        }
        return arr;
    }
    clog(range(5, 2, -1)); //[5, 4, 3, 2]
    function sumArr(arr) {
        let summ = 0;
        arr.map(function (elem) {
            summ += elem;
        });
        return summ;
    }
    clog(sumArr(range(1, 20, 4))); //45

    //Обращаем массив вспять. Напишите две функции, reverseArray и reverseArrayInPlace.
    //Первая получает массив как аргумент и выдаёт новый массив, с обратным порядком элементов.
    //Вторая работает как оригинальный метод reverse – она меняет порядок элементов на обратный
    //в том массиве, который был ей передан в качестве аргумента. Не используйте стандартный метод
    //reverse.
    function reverseArray(arr) {
        return arr.reverse();
    }
    clog(reverseArray(["A", "B", "C"])); //["C", "B", "A"]
    function reverseArrayInPlace(arr) {
        let revArr = [];
        arr.map(function (elem) {
            revArr.unshift(elem);
        });
        return revArr;
    }
    clog(reverseArrayInPlace([1,2,3,4,5])); //[5, 4, 3, 2, 1]

    //9,Список.Объекты могут быть использованы для построения различных структур данных. Часто
    //встречающаяся структура – список (не путайте с массивом). Список – связанный набор объектов,
    //где первый объект содержит ссылку на второй, второй – на третий, и т.п.
    var list = {
        value: 1,
        rest: {
            value: 2,
            rest: {
                value: 3,
                rest: null
            }
        }
    };
    function arrayToList(arr) { //Напишите функцию arrayToList, которая строит list структуру, получая в качестве аргумента [1, 2, 3]
        if (arr.length > 1) {
            return { value: arr.shift(), rest: arrayToList(arr) };
        } else {
            return { value: arr.shift(), rest: null };
        }
    }
    dlog(arrayToList([10, 20, 30])); //{value: 10, rest: {value: 20, rest: {value: 30, rest: null}}}

    var arrListToArray = [];
    function listToArray(obj) { //создаёт массив из списка
        for (var key in obj) {
           if (typeof obj[key] == 'object') {
                listToArray(obj[key]);
           } else {
               arrListToArray.push(obj[key]);
           }
        }
        return arrListToArray;
    }
    clog(listToArray(arrayToList([10, 20, 30]))); //[10, 20, 30]

    function prepend(item, obj) { //получает элемент и создаёт новый список, где этот элемент добавлен спереди к первоначальному списку
        return { value: item, rest: obj };
    }
    dlog(prepend(10, prepend(20, null))); //{value: 10, rest: {value: 20, rest: null}}

    var nthArr = [];
    function nth(obj, item) { //качестве аргументов принимает список и число, а возвращает элемент на заданной позиции в списке, или же undefined в случае отсутствия такого элемента
        for (var key in obj) {
            if (typeof obj[key] == 'object') {
                nth(obj[key]);
            } else {
                nthArr.push(obj[key]);
            }
        }
        return nthArr[item];
    }
    clog(nth(arrayToList([10, 20, 30]), 1)); //20
              
            
!
999px

Console