Code Ready | Frontend

✅ Делаем пометку для задач на JS Этот пример создает поле ввода и кнопку для добавления задачи. Когда задача добавляется, она отображается в виде элемента списка с кнопкой "Удалить", которая удаляет задачу при клике. ⤵️

<div><input type="text" id="Input" placeholder="Добавить задачу"><button onclick="addTask()">Добавить</button></div>
  <ul id="List"></ul>

function addTask() {
    const taskInput =document.getElementById("Input");
    const taskList = document.getElementById("List");
    const trimmedValue = taskInput.value.trim();
    if (trimmedValue !== "") {
      const taskItem = taskList.appendChild(document.createElement("li"));
      taskItem.textContent = trimmedValue;
      taskItem.appendChild(document.createElement("button"))
        .textContent = "Удалить";
      taskItem.lastChild.onclick = () => taskList.removeChild(taskItem);
      taskInput.value = "";
    }
  }

@code_ready | #обучение #js

✅ Отображение текущего времени на JS Это веб-приложение представляет собой простые часы, отображающие текущее время. JavaScript-код обновляет время каждую секунду, обеспечивая актуальные показания часов. ⤵️

<p id="currentTime"></p>

function updateCurrentTime() {
  var currentTimeElement = document.getElementById("currentTime");
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;
  currentTimeElement.innerText = hours + ":" + minutes + ":" + seconds;
}
setInterval(updateCurrentTime, 1000);
updateCurrentTime();

@code_ready | #обучение #js

Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое 👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

Напоминаю, что с 22 по 28 число закрываю продажи реклам. Поэтому сможете наслаждаться лучшими постами каждый день. Всё будет выходить по графику: • Понедельник — лучший эффект на #js • Вторник — полезная JS #шпаргалка • Среда — новые горячие #клавиши • Пятница — готовый макет сайта с кодом на #github Как вам такой график публикаций? И спокойной ночи) ❤️ @code_ready | #новость

Как готовиться к собеседованию? Вы знали, что большинство работодателей готовятся к собеседованиям по открытым источникам, а многие вопросы повторяются? Как найти такие вопросы, чтобы подготовиться наиболее эффективно и увеличить свои шансы на оффер? В канале progway вы можете найти самые популярные вопросы с собеседований с их подробным разбором: — Как оценить алгоритм? — Откуда методы у примитивов? — Какая структура у HTTP запроса? — Что такое cookies? — и ещё более 150 вопросов Помимо теории, в канале можно найти разборы популярных задач, простое описание сложных концепций с нуля и рекомендации по составлению резюме и прохождению интервью! Автор канала — Денис, разработчик с опытом менторинга и подготовки к собеседованиям более 4 лет. Подписывайся и готовься к собеседованию эффективно! @prog_way_blog

@code_ready | #мем

@code_ready | #консоль

Каналы любого уважающего себя разработчика: Java Developer — поможет узнать обо всех тонкостях и секретах языка Java. Python Developer — научит программировать на Python как настоящий разработчик. Подписывайся и прокачивай свои навыки👇🏻

Соберём под этим постом 150 реакций до утра? Всем спокойной ночи ❤️

✅ Создание анимации кадрирования фото У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон. В примере можно запустить этот эффект с помощью чекбокса: он привязан к псевдоклассу :checked. ⤵️

  <input type="checkbox"/> <br>
<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />

input {
    transform: scale(4);
    display: block;
    margin: 30px auto;
  }
  img {
    display: block;
    margin: 0 auto;
    width: 1400px;
    height: 900px;
    transition: 2s;
  }
  input:checked + br + img {
    width: 500px;
    height: 400px;
    object-fit: cover;
    object-position: left-top;
    transition: width 2s, height 3s;
  }

@code_ready | #обучение #html #css

Всем доброго вечера. На следующей неделе выйдут одни из лучших и очень полезных постов. Такие как: • Создание крутого эффекты на JS. #js • Готовый код для сайта на GitHub. #github • Горячие клавиши для быстрой. верстки #клавиши • JS шпаргалка методов массива. #шпаргалка • Ещё один прикольный эффект. #js Они поочередно будут выходить с 22 по 26 числа по одному посту в день. А также закрываю продажи рекламы на следующею неделю. Поэтому сможете спокойно наслаждаться крутыми постами. ❤️ @code_ready | #новость

✅ Делаем буллиты для списков Чтобы создать кастомные буллиты для неупорядоченных списков, используйте псевдоэлемент :before и его свойство content. Чтобы изменять вид буллита в примере, применяются классы .complete и .incomplete ⤵️

<ul class="complete">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul class="incomplete">
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

ul { list-style: none; }
.complete li::before {
    content: '🗹 '; 
}
.incomplete li::before {
    content: '☐ '; 
}
ul {
    text-align: center;
    font-family: Candara;
    font-size: 1.7rem;
    margin: 0 auto;
}

@code_ready | #обучение #html #css

Белый хакер - программное обеспечение, утилиты, OSINT, инструменты, полезная литература и много другое. Совершенно новый формат непохожий на другие каналы. Белый хакер P. S Уютное место сталкеры

Хотите больше авторских постов? На подобие постов по хештегу #новость. Кто хочет каждый день такие посты ставь ❤️

@code_ready | #мем