Делаем кнопку!)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
На странице есть дивы. В них есть текст. Обойдите все дивы и обрежьте тот текст, который в них стоит так, чтобы он стал длиной 10 символов. И добавьте троеточие в конец обрезанного текста
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.
В ответе будет так:
Lorem ipsu...
Lorem ipsu...
Lorem ipsu...
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis numquam sequi sunt. Aspernatur officiis pariatur repellat.
В ответе будет так:
Lorem ipsu...
Lorem ipsu...
Lorem ipsu...
Давай ответим на пару вопросов:)
Какие типы данных бывают в JavaScript?
Каким будет результат выполнения кода?
let firstObj = { name: 'Hello' };
let secondObj = firstObj;
firstObj = { name: 'Bye' };
console.log(secondObj.name);
Какие типы данных бывают в JavaScript?
Каким будет результат выполнения кода?
let firstObj = { name: 'Hello' };
let secondObj = firstObj;
firstObj = { name: 'Bye' };
console.log(secondObj.name);
Задача: создать простую интерактивную игру "Угадай число". В игре должно быть три уровня сложности. Игрок должен угадать число за определенное количество попыток, иначе игра проиграна. При каждой попытке должна выводиться информация о том, больше или меньше загаданное число введенного.
Пример кода находится в комментариях
Эта задача может быть применена на различных веб-сайтах или мобильных приложениях в качестве интерактивного развлечения для пользователей.
Пример кода находится в комментариях
Эта задача может быть применена на различных веб-сайтах или мобильных приложениях в качестве интерактивного развлечения для пользователей.
Написать скрипт, который будет парсить XML-файл, содержащий информацию о курсе валют, и выводить на страницу таблицу с данными о курсах валют на текущий день. Данные должны автоматически обновляться каждую минуту. Также необходимо добавить возможность выбора валюты из списка для отображения на графике ее изменения курса за последний месяц. График должен быть интерактивным и иметь возможность масштабирования и перемещения, а также отображения подробной информации при наведении на точки графика.
Давай ответим на пару вопросов:)
Какие типы данных бывают в JavaScript?
Каким будет результат выполнения кода?
let firstObj = { name: 'Hello' };
let secondObj = firstObj;
firstObj = { name: 'Bye' };
console.log(secondObj.name);
Какие типы данных бывают в JavaScript?
Каким будет результат выполнения кода?
let firstObj = { name: 'Hello' };
let secondObj = firstObj;
firstObj = { name: 'Bye' };
console.log(secondObj.name);
Разработать интерактивную веб-страницу для онлайн-магазина. Страница должна содержать список товаров, отображаемых в виде карточек, с возможностью сортировки по различным параметрам (название, цена и т.д.). Также нужно предусмотреть поиск по каталогу, фильтрацию товаров по различным критериям и возможность добавления выбранных товаров в корзину. Для удобства пользователя нужно реализовать автозаполнение при поиске, возможность добавления товара в список избранных и отображение имеющихся товарных предложений. Приложение должно быть написано на JavaScript с использованием фреймворка React и объединено с API-службами для получения актуальной информации о наличии и цене товаров в реальном времени.
Написать функцию на JavaScript, которая принимает массив чисел и возвращает новый массив, содержащий только уникальные значения. Решение должно быть эффективным и не использовать встроенные методы массивов, такие как filter или includes.
Вот решение функции, которая принимает массив чисел и возвращает новый массив, содержащий только уникальные значения:
function uniqueArray(arr) {
const obj = {};
const output = [];
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
if (!obj[item]) {
obj[item] = true;
output.push(item);
}
}
return output;
}
Как это работает:
Мы создаем объект obj
Мы создаем пустой массив output
Мы проходим по исходному массиву arr
Если obj не содержит элемент item значения как свойство, то мы добавляем его в obj и output
Это решение имеет временную сложность O(n), потому что мы проходим по каждому элементу массива ровно один раз.
Вот решение функции, которая принимает массив чисел и возвращает новый массив, содержащий только уникальные значения:
const obj = {};
const output = [];
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
if (!obj[item]) {
obj[item] = true;
output.push(item);
}
}
return output;
}
Мы создаем объект obj
Мы создаем пустой массив output
Мы проходим по исходному массиву arr
Если obj не содержит элемент item значения как свойство, то мы добавляем его в obj и output
Это решение имеет временную сложность O(n), потому что мы проходим по каждому элементу массива ровно один раз.
Хай! Сегодня твоя #задача :
Создать заявление switch, которое будет в окне предупреждений alert("Добро пожаловать") если fruits является "банан", и alert("Добро пожаловать") если fruits является "Яблоко".
Создать заявление switch, которое будет в окне предупреждений alert("Добро пожаловать") если fruits является "банан", и alert("Добро пожаловать") если fruits является "Яблоко".
Создание стилизованных радио-кнопок
уровень: средний
Задача по HTML и CSS: создайте стилизованные радио-кнопки используя HTML и CSS
Сделайте radio-кнопки как на изображении
Можно использовать только HTML и CSS.
Решение: https://codepen.io/dmitryvalak/pen/jOEXjvL
уровень: средний
Задача по HTML и CSS: создайте стилизованные радио-кнопки используя HTML и CSS
Сделайте radio-кнопки как на изображении
Можно использовать только HTML и CSS.
Решение: https://codepen.io/dmitryvalak/pen/jOEXjvL
Задача по HTML и CSS: создание HTML таблиц и работа с ними
Выполните все пункты задания и сравните с результатом.
1.Создайте папку в удобном для вас месте на вашем компьютере
2. В этой папке создайте новый HTML документ - index.html
3. В index.html создайте HTML скелет документа
4. Создайте новый CSS файл - style.css
5. Подключите CSS файл к HTML файлу
6. Создайте таблицу состоящую из 5 строк и 5 столбцов, укажите таблице класс table
7. Первую строку оберните в тег thead и столбцы переделайте в заглавные столбцы (th)
8. Последнюю строку оберните в тег tfoot
9. Оставшиеся строки оберните в тег tbody
10. Обозначьте столбцы первой строки заголовками, прописав текст (первый - №, второй - Имя, третий - E-mail, четвертый - Пол, пятый - Дата) в тегах th
11. Заполните строки, которые находятся в tbody любыми произвольными данными
12. В последней строке, которая находится в tfoot, объедините все столбцы в один, используя соответствующий атрибут для td
13. В получившимся столбце напишите текст "Всего: 3"
14. В CSS файле создайте селектор .table td, .table th и создайте сплошную границу толщиной в 1 пиксель и цветом #ccc; и задайте внутренний отступ сверху и снизу по 5px, слева и справа по 10px
15. Создайте селектор .table и объедините границы ближайших столбцов при помощи специального свойства (ищите в поиске "поведение границ таблицы"), так же задайте таблице ширину 500px;
16. Создайте селектор .table thead и измените цвет фона на #f0f1f4;
17. Создайте селектор .table tfoot и измените цвет фона на #121212;, цвет текста на #fff; и текст прижать к правому краю
Результат: https://codepen.io/dmitryvalak/pen/zYxMWoJ
Выполните все пункты задания и сравните с результатом.
1.Создайте папку в удобном для вас месте на вашем компьютере
2. В этой папке создайте новый HTML документ - index.html
3. В index.html создайте HTML скелет документа
4. Создайте новый CSS файл - style.css
5. Подключите CSS файл к HTML файлу
6. Создайте таблицу состоящую из 5 строк и 5 столбцов, укажите таблице класс table
7. Первую строку оберните в тег thead и столбцы переделайте в заглавные столбцы (th)
8. Последнюю строку оберните в тег tfoot
9. Оставшиеся строки оберните в тег tbody
10. Обозначьте столбцы первой строки заголовками, прописав текст (первый - №, второй - Имя, третий - E-mail, четвертый - Пол, пятый - Дата) в тегах th
11. Заполните строки, которые находятся в tbody любыми произвольными данными
12. В последней строке, которая находится в tfoot, объедините все столбцы в один, используя соответствующий атрибут для td
13. В получившимся столбце напишите текст "Всего: 3"
14. В CSS файле создайте селектор .table td, .table th и создайте сплошную границу толщиной в 1 пиксель и цветом #ccc; и задайте внутренний отступ сверху и снизу по 5px, слева и справа по 10px
15. Создайте селектор .table и объедините границы ближайших столбцов при помощи специального свойства (ищите в поиске "поведение границ таблицы"), так же задайте таблице ширину 500px;
16. Создайте селектор .table thead и измените цвет фона на #f0f1f4;
17. Создайте селектор .table tfoot и измените цвет фона на #121212;, цвет текста на #fff; и текст прижать к правому краю
Результат: https://codepen.io/dmitryvalak/pen/zYxMWoJ
codepen.io
Работа с таблицами
...
Создание постраничной навигации
уровень: начинающий
Задача по HTML и CSS: создайте простую постраничную навигацию
Элементы навигации должны быть по центру
Размер элементов навигации 40х40
Фон элементов навигации #ddd, цвет текста #333, текст по центру по двум осям
Фон элементов навигации при наведении #ccc
Фон активного элемента навигации #d10953, цвет текста #fff
Расстояние между элементами навигации 6px
Для создание стрелок используйте специальные символы HTML
Пример на картинке
Решение: https://codepen.io/dmitryvalak/pen/WNbPzJG
Ставь лайк)
уровень: начинающий
Задача по HTML и CSS: создайте простую постраничную навигацию
Элементы навигации должны быть по центру
Размер элементов навигации 40х40
Фон элементов навигации #ddd, цвет текста #333, текст по центру по двум осям
Фон элементов навигации при наведении #ccc
Фон активного элемента навигации #d10953, цвет текста #fff
Расстояние между элементами навигации 6px
Для создание стрелок используйте специальные символы HTML
Пример на картинке
Решение: https://codepen.io/dmitryvalak/pen/WNbPzJG
Ставь лайк)
Создание "хлебных крошек"
уровень: начинающий
Задача: создайте "хлебные крошки" используя HTML и CSS
На изображении показано как должны выглядеть "хлебные крошки"
Используйте список для создания структуры хлебных крошек
Стрелочки должны быть реализованы через псевдо-элемент after для всех элементов списка, кроме последнего
В последнем элементе списка должен быть span, в остальных - ссылки
Цвет ссылок #0b56ea, без подчеркивания, при наведении подчеркивать ссылки снизу
Цвет текста в span #333;
Решение: https://codepen.io/dmitryvalak/pen/VwYgdjW
уровень: начинающий
Задача: создайте "хлебные крошки" используя HTML и CSS
На изображении показано как должны выглядеть "хлебные крошки"
Используйте список для создания структуры хлебных крошек
Стрелочки должны быть реализованы через псевдо-элемент after для всех элементов списка, кроме последнего
В последнем элементе списка должен быть span, в остальных - ссылки
Цвет ссылок #0b56ea, без подчеркивания, при наведении подчеркивать ссылки снизу
Цвет текста в span #333;
Решение: https://codepen.io/dmitryvalak/pen/VwYgdjW
Создание формы регистрации
Уровень: начинающий
Условия: создайте форму регистрации используя HTML и CSS, как на указанном изображении
Решение: https://codepen.io/dmitryvalak/pen/XWJOVqw
Не забудь поставить лайк)
Уровень: начинающий
Условия: создайте форму регистрации используя HTML и CSS, как на указанном изображении
Решение: https://codepen.io/dmitryvalak/pen/XWJOVqw
Не забудь поставить лайк)
Создание стилизованных чекбоксов
Уровень: средний
Условие: Сделайте чекбоксы как на изображении. Можно использовать только HTML и CSS. Иконку галочки можете найти на сайте flaticon.com
Решение: https://codepen.io/dmitryvalak/pen/zYxyVRa
Уровень: средний
Условие: Сделайте чекбоксы как на изображении. Можно использовать только HTML и CSS. Иконку галочки можете найти на сайте flaticon.com
Решение: https://codepen.io/dmitryvalak/pen/zYxyVRa