Skip to content

Instantly share code, notes, and snippets.

@0x00dec0de
Forked from Cherry-Pie/html-css.md
Created March 28, 2016 17:04
Show Gist options
  • Save 0x00dec0de/9b29cb098f64b5676567 to your computer and use it in GitHub Desktop.
Save 0x00dec0de/9b29cb098f64b5676567 to your computer and use it in GitHub Desktop.
T-T #1

HTML + CSS [1 / 4]

Q:

Есть блок с шириной 470px. Нужно вывести в нем список из 9 квадратов зеленого цвета размером 150px * 150px с расстоянием друг от друга по 10px. Схема изображена на рисунке. Использовать нужно приведенный ниже html код. Фактически от вас требуется написать css.

pic

<style>
/* тут будет ваш css код */
</style>

<ul>
  <li></li>
  <li></li>  
  <li></li>  
  <li></li>  
  <li></li>  
  <li></li>   
  <li></li>
  <li></li>  
  <li></li>
</ul>

A:

<style>
* {
  padding: 0;
  margin: 0;
}
ul {
  width: 470px;
  list-style: none;
}
ul:after {
  content: '';
  display: block;
  clear: both;
}
li {
  float: left;
  width: 150px;
  height: 150px;
  margin: 0 10px 10px 0;
  background-color: #10971D;
}
/* надеюсь, в почти уже 2016 году не нужно поддерживать IE ниже 9 */
li:nth-child(3n) { 
  margin-right: 0;
}
</style>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Javascript (jQuery) [2 / 4]

Q:

На странице есть блок с произвольным текстом. Нужно каждые 4 секунды менять его цвет. Последовательность меняющихся цветов должна быть как в радуге. Цвета должны меняться не по кругу, а в одну и в другую сторону последовательно. В результате цвет текста должен меняться в следующей последовательности: К-О-Ж-З-Г-С-Ф-С-Г-З-Ж-О-К-О-Ж-З-Г-С-Ф-С-Г-З-Ж-О ..... и так далее. (Если смена цветов будет плавная, будет вообще отлично)


A:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
(function($) {
  $.fn.rainbow = function(options) {
    var settings = $.extend({
      delay: 4000,
      colors: [
        '#FF0000',
        '#f26522',
        '#fff200',
        '#00a651',
        '#28abe2',
        '#2e3192',
        '#6868ff'
      ]
    }, options);
    
    var $context = $(this);
    $context.css('transition-duration', settings.delay / 5 +'ms');
    
    var step = 0;
    var size = settings.colors.length;
    
    window.setInterval(function() {
      $context.css('color', settings.colors[step]);
        
      if (step == size - 1) {
        step = 1;
        settings.colors.reverse();
      } else {
        step += 1;
      }
    }, settings.delay);
  };
}(jQuery));
</script>


<h1>Friendship is Magic</h1>

<script>
$('h1').rainbow();
</script>

MySQL [3 / 4]

Q:

Есть 2 таблицы. Одна с категориями, другая с товарами.

CREATE TABLE categories 
  ( 
     id   INT NOT NULL auto_increment, 
     name VARCHAR(32) NOT NULL, 
     PRIMARY KEY (id) 
  ) 
engine=myisam 
DEFAULT charset=cp1251 
auto_increment=1; 

CREATE TABLE products 
  ( 
     id          INT NOT NULL auto_increment, 
     category_id INT NOT NULL, 
     price       DECIMAL(10, 2) NOT NULL, 
     name        VARCHAR(128) NOT NULL, 
     description VARCHAR(1024) NOT NULL, 
     PRIMARY KEY (id) 
  ) 
engine=myisam 
DEFAULT charset=cp1251 
auto_increment=1; 

Заполнены таблицы следующими данными:

INSERT INTO  categories(name) 
       VALUES('Холодильники'),('Телевизоры'),('Мобильные телефоны');

INSERT INTO  products(category_id, price, name, description) 
       VALUES
        (1, 2910, 'Indesit NBS-20 AA', 'Полезный объем: 341 л; Полезный объем морозилки: 108 л; К-во компрессоров: 1 шт.; Размеры (ВхШхГ): 200 x 60 x 66 см'),
        (1, 2223, 'Liebherr T 1404', 'Полезный объем: 122 л; Полезный объем морозилки: 14 лК-во компрессоров: 1 шт.; Размеры (ВхШхГ): 85 x 50.1 x 62 см; Цвет: белый'),
        (1, 3490, 'Whirlpool WBE 3114 TS', 'Полезный объем: 307 л; Полезный объем морозилки: 113 л; К-во компрессоров: 1 шт.; Размеры (ВхШхГ): 175 x 59.5 x 64 см; Цвет: нержавеющая сталь');

INSERT INTO  products(category_id, price, name, description) 
       VALUES
        (2, 4520, 'Samsung UE-40EH5007', 'Дисплей: 40 ", 1920×1080; Тюнер: аналоговый, цифровой DVB-T, цифровойDVB-C, цифровой DVB-T2; Звук: 20 Вт'),
        (2, 2355, 'Philips 22PFL4008T/12', 'Дисплей: 22 ", 1920×1080; Тюнер: аналоговый, цифровой DVB-T, цифровой DVB-C, цифровой DVB-T2; Звук: 8 Вт'),
        (2, 3500,'Sony KDL-24W605A Black', 'Дисплей: 24 ", 1366×768; Тюнер: аналоговый, цифровой DVB-T, цифровойDVB-C, цифровой DVB-T2, цифровой DVB-S, цифровой DVB-S2; Звук: 10 Вт'),
        (2, 1959, 'Toshiba 22L1333G', 'Дисплей: 22 ", 1920×1080; Тюнер: аналоговый, цифровой DVB-T, цифровой DVB-C; Звук: 5 Вт');

INSERT INTO  products(category_id, price, name, description) 
       VALUES
        (3, 541, 'Nokia Asha 206 Black', 'Дисплей: 2.4 '', 240x320, TFT; Камера: 1.2 МП; Память: ПЗУ 64 Mб; Аккумулятор: Li-Ion, 1110 мAч; Корпус: пластик'),
        (3, 5165, 'Samsung I9500 Galaxy S 4 Black', 'Дисплей: 5 '', 1920x1080, Super AMOLED; Процессор: Samsung, ядер 8, 1600 МГц;  Камера: 13 МП, вспышка, автофокус; Память: ПЗУ 16384 Mб, ОЗУ 2048 Мб; Аккумулятор: Li-Ion, 2600 мAч; Корпус: пластик');

Написать запрос, который выведет таблицу со следующими данными:

  • Название категории
  • Количество товаров в категории
  • Минимальная цена на товар в категории
  • Максимальная цена на товар в категории
  • Название товара с наиболее длинным описанием в категории
  • Наибольшая длина описания в категории
  • Текст самого длинного описания в категории

A:

-- 1. Название категории
SELECT name 
FROM categories;

-- 2. Количество товаров в категории
SELECT categories.name, COUNT(products.id) as count 
FROM categories 
LEFT JOIN products 
    ON products.category_id = categories.id 
GROUP BY products.category_id;

-- 3. Минимальная цена на товар в категории
SELECT categories.name, MIN(products.price) as min_price 
FROM categories 
INNER JOIN products 
    ON products.category_id = categories.id 
GROUP BY products.category_id;

-- 4. Максимальная цена на товар в категории
SELECT categories.name, MAX(products.price) as max_price 
FROM categories 
INNER JOIN products 
    ON products.category_id = categories.id 
GROUP BY products.category_id;

-- 5. Название товара с наиболее длинным описанием в категории
SELECT c.name, o.name
FROM products o 
INNER JOIN categories c
	ON o.category_id = c.id 
LEFT JOIN products b             
    ON o.category_id = b.category_id AND LENGTH(o.description) < LENGTH(b.description)
WHERE b.description is NULL;

-- 6. Наибольшая длина описания в категории
SELECT c.name, LENGTH(o.description) as length
FROM products o 
INNER JOIN categories c
	ON o.category_id = c.id 
LEFT JOIN products b             
    ON o.category_id = b.category_id AND LENGTH(o.description) < LENGTH(b.description)
WHERE b.description is NULL;

-- 7. Текст самого длинного описания в категории
SELECT c.name, o.description
FROM products o 
INNER JOIN categories c
	ON o.category_id = c.id 
LEFT JOIN products b             
    ON o.category_id = b.category_id AND LENGTH(o.description) < LENGTH(b.description)
WHERE b.description is NULL;

PHP [4 / 4]

Q:

Распечатать ассоциативный массив в виде ASCII таблицы.

Например, у Вас есть массив:

array(
    array(
        'Name' => 'Trixie',
        'Color' => 'Green',
        'Element' => 'Earth',
        'Likes' => 'Flowers'
    ),
    array(
        'Name' => 'Tinkerbell',
        'Element' => 'Air',
        'Likes' => 'Singning',
        'Color' => 'Blue'
    ),
    array(
        'Name' => 'Blum',
        'Element' => 'Water',
        'Likes' => 'Dancing',
        'Name' => 'Blum',
        'Color' => 'Pink'
    )
);
+--------------+---------+-----------+-----------+
|     Name     |  Color  |  Element  |   Likes   |
+--------------+---------+-----------+-----------+
|  Trixie      |  Green  |  Earth    |  Flowers  |
+--------------+---------+-----------+-----------+
|  Tinkerbell  |  Blue   |  Air      |  Singing  |
+--------------+---------+-----------+-----------+
|  Blum        |  Pink   |  Water    |  Dancing  |
+--------------+---------+-----------+-----------+
  • Положение элементов в каждом подмассиве может меняться, но сами ключи должны быть в одном порядке.
  • Столбец Color должен быть цветным в зависимости от названия цвета.

A:

class AsciiTable
{
    const SPACING_X    = 1;
    const SPACING_Y    = 0;
    const JOINT_CHAR   = '+';
    const LINE_X_CHAR  = '-';
    const LINE_Y_CHAR  = '|';
    const COLOR_COLUMN = 'Color';

    private $table = [];
    private $columnsHeaders = [];
    private $columnsLengths = [];
    private $rowSeparator   = '';
    private $rowSpacer      = '';

    private $backgroundColors = [];

    public function __construct($table)
    {
        $this->table = $table;
        $this->columnsHeaders = $this->getColumnsHeaders();
        $this->columnsLengths = $this->getColumnsLengths();
        $this->rowSeparator   = $this->getRowSeparator() . PHP_EOL;
        $this->rowSpacer      = $this->getRowSpacer() . PHP_EOL;

        $this->backgroundColors = [
            'black'      => '40',
            'red'        => '41',
            'green'      => '42',
            'yellow'     => '43',
            'blue'       => '44',
            'magenta'    => '45',
            'cyan'       => '46',
            'light_gray' => '47',
        ];
    } // end __construct

    private function getColoredString($string, $color)
    {
        if (!array_key_exists(strtolower($color), $this->backgroundColors)) {
            return $string;
        }

        $coloredString = "\033[" . $this->backgroundColors[strtolower($color)] . "m"
                       . $string . "\033[0m";

        return $coloredString;
    } // end getColoredString

    public function render()
    {
        $res = $this->fetchHead();
        $res .= $this->fetchBody();
        
        return $res;
    } // end render

    private function fetchBody()
    {
        foreach ($this->table as $rowCells) {
            $rowCells = $this->getRowCells($rowCells);
            $body .= $rowCells . PHP_EOL;
            $body .= str_repeat($this->rowSpacer, self::SPACING_Y);
            $body .= $this->rowSeparator;
        }

        return $body;
    } // end fetchBody

    private function fetchHead()
    {
        $head = $this->rowSeparator;
        $head .= str_repeat($this->rowSpacer, self::SPACING_Y);
        $head .= $this->getRowHeaders() . PHP_EOL;
        $head .= str_repeat($this->rowSpacer, self::SPACING_Y);
        $head .= $this->rowSeparator;
        $head .= str_repeat($this->rowSpacer, self::SPACING_Y);

        return $head;
    } // end fetchHead

    private function getColumnsHeaders()
    {
        return array_keys(reset($this->table));
    } // end getColumnsHeaders

    private function getColumnsLengths()
    {
        $lengths = [];
        foreach ($this->columnsHeaders as $header) {
            $headerLength = mb_strlen($header);
            $max = $headerLength;
            foreach ($this->table as $row) {
                $length = mb_strlen($row[$header]);
                if ($length > $max) {
                    $max = $length;
                }
            }

            if (($max % 2) != ($headerLength % 2)) {
                $max += 1;
            }

            $lengths[$header] = $max;
        }

        return $lengths;
    } // end getColumnsLengths

    private function getRowSeparator()
    {
        $row = '';
        foreach ($this->columnsLengths as $columnLength) {
            $row .= self::JOINT_CHAR; 
            $row .=str_repeat(self::LINE_X_CHAR, (self::SPACING_X * 2) + $columnLength);
        }
        $row .= self::JOINT_CHAR;

        return $row;
    } // end getRowSeparator

    private function getRowSpacer()
    {
        $row = '';
        foreach ($this->columnsLengths as $columnLength) {
            $row .= self::LINE_Y_CHAR; 
            $row .= str_repeat(' ', (self::SPACING_X * 2) + $columnLength);
        }
        $row .= self::LINE_Y_CHAR;

        return $row;
    } // end getRowSpacer

    private function getRowHeaders()
    {
        $row = '';
        foreach ($this->columnsHeaders as $header) {
            $length = $this->columnsLengths[$header];

            $row .= self::LINE_Y_CHAR; 
            $row .= str_pad($header, (self::SPACING_X * 2) + $length, ' ', STR_PAD_BOTH);
        }
        $row .= self::LINE_Y_CHAR;

        return $row;
    } // end getRowHeaders

    private function getRowCells($rowCells)
    {
        $row = '';
        foreach ($this->columnsHeaders as $header) {
            $value = $rowCells[$header];
            $length = $this->columnsLengths[$header];

            $row .= self::LINE_Y_CHAR;

            $cellValue = str_repeat(' ', self::SPACING_X);
            $cellValue .= str_pad($value, self::SPACING_X + $length, ' ', STR_PAD_RIGHT);
            if ($this->isColorizableColumn($header)) {
                $cellValue = $this->getColoredString($cellValue, $value);
            }

            $row .= $cellValue;
        }
        $row .= self::LINE_Y_CHAR;

        return $row;
    } // end getRowCells

    private function isColorizableColumn($header)
    {
        return $header === self::COLOR_COLUMN;
    } // end isColorizableColumn

}


//
$table = array(
    array(
        'Name'    => 'Trixie',
        'Color'   => 'Yellow',
        'Element' => 'Earth',
        'Likes'   => 'Flowers'
    ),
    array(
        'Name'    => 'Tinkerbell',
        'Element' => 'Air',
        'Likes'   => 'Singing',
        'Color'   => 'Blue'
    ),
    array(
        'Element' => 'Water',
        'Likes'   => 'Dancing',
        'Name'    => 'Blum',
        'Color'   => 'Magenta'
    ),
);

$ascii = new AsciiTable($table);
echo $ascii->render();

По поводу

Столбец Color должен быть цветным в зависимости от названия цвета.

Под такой пункт следует предоставлять список [название -> цвет]. Ну, и, как я понимаю, не "Столбец Color", а "Ячейка столбца Color".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment