@code_ready | #консоль

Делать ли разбор вопросов с собеседований? По типу таких.
И как часто хотите их видеть на канале? 🔥

@code_ready |#мем

✅ Генерируем случайную цитату

Эта штука будет отображать случайную цитату при каждом обновлении страницы. В этом коде при каждом нажатии на кнопку "Новая цитата" будет загружаться случайная цитата с использованием открытого API "Quotable".

<div class="random-quote">
    <p id="quoteDisplay"></p>
    <button onclick="fetchRandomQuote()">Новая цитата</button>
</div>

async function fetchRandomQuote() {
    const response = await fetch('https://api.quotable.io/random');
    const data = await response.json();
    const quote = `${data.content} - ${data.author}`;
    document.getElementById('quoteDisplay').textContent = quote;
}
// Загружаем случайную цитату при загрузке страницы
window.onload = fetchRandomQuote;

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

✅ Создание печатающего эффекта

Попробуйте этот CSS код для создания эффекта печатающегося текста .typing-demo устанавливает ширину блока для текста и создает анимацию typing, которая плавно расширяет его до конца. Затем анимация blink мигает границей, чтобы придать тексту более реалистичный вид

<div class="wrapper">
    <div class="typing-demo">@code_ready for you!</div>
</div>

.typing-demo {
    width: 21ch;
    animation: typing 2.5s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
  }
  @keyframes typing {
    from {width: 0;}
  }
  @keyframes blink {
    50% {border-color: transparent;}
  }

@code_ready | #практика #css

✅ Шпаргалка типов курсора в CSS

CSS-свойство cursor устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом. Вы можете указать тип курсора с помощью ключевого слова или загрузить свой значок.

@code_ready | #css #шпаргалка

✅ Делаем разные фигуры из картинок

CSS-свойство clip-path создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Части, которые находятся внутри области, видимы, а части вне области скрыты.

Если хотите создавать любые фигуры из картинок, держите ссылку на официальный сайт Clip Path, там можно как и пользоваться шаблонами, так и делать собственные фигуры!

Как первый пример, оставляю код для создания креста из картинки:

img {
width: 280px;
height: 280px;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

@code_ready | #практика #css

@code_ready | #мем

@code_ready | #консоль

✅ Создание Favicon на сайт

Favicon — значок веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой.

Чтобы его добавить, нужно использовать тег <link> вместе с атрибутами:
1. rel — тип ресурса: со значением icon или shortcut icon
2. type — Тип передаваемых данных: допустим png, jpeg...
3. href — указывающий на путь к изображению.

Как первый пример, кидаю код для создания фавикона с картинкой "Gmail". Там я использую всё, о чем рассказывал выше:

<link rel="icon" type="png" href="https://cdn4.iconfinder.com/data/icons/logos-brands-in-colors/48/google-gmail-128.png">



@code_ready | #практика #html

✅ Приложение - калькулятор расходов

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

<div id="expenses">
    <input type="text" id="expenseName" placeholder="Expense Name">
    <input type="number" id="expenseAmount" placeholder="Amount in USD">
    <button onclick="addExpense()">Add Expense</button>
    <ul id="expenseList"></ul>
    <p>Total Expenses: $<span id="totalExpenses">0.00</span></p>
</div>

function addExpense() {
    const name = document.getElementById("expenseName").value;
    const amount = parseFloat(document.getElementById("expenseAmount").value);
    if (isNaN(amount) || amount <= 0) {
        alert("Please enter a valid amount.");
        return;
    }
    const totalExpensesElement = document.getElementById("totalExpenses");
    const totalExpenses = parseFloat(totalExpensesElement.textContent);
    totalExpensesElement.textContent = (totalExpenses + amount).toFixed(2);
    const listItem = document.createElement("li");
    listItem.textContent = `${name}: $${amount.toFixed(2)}`;
    document.getElementById("expenseList").appendChild(listItem);
    document.getElementById("expenseName").value = "";
    document.getElementById("expenseAmount").value = "";
}

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

@code_ready | #консоль