Генератор случайных градиентов с использованием JavaScript & CSS

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

Этот тип цвета вы можете легко создать через CSS. Тем не менее, много раз создавать идеальную комбинацию градиента намного сложнее. Чтобы решить эту проблему, я создал этот проект, который может создавать цвета случайным образом за один щелчок.

Смотрите его живую демонстрацию Чтобы узнать, как это работает. Самым важным моментом является то, что цвета будут добавлены здесь под разными углами. Я сделал это только с JavaScript.

Ниже приведены две кнопки, чтобы сгенерировать одну и скопировать другую. Когда вы нажимаете на кнопку «Создать», каждый раз будет создан другой цвет. Вы можете скопировать этот цветовой код, нажав на кнопку копирования.

Шаг 1: Создайте основную структуру градиентного генератора

Мы создали базовую структуру этого проекта ( Случайный генератор градиентов с использованием JavaScript ), используя следующий код HTML и CSS. Сначала я добавил цвет фона веб -страницы с помощью кода CSS.

Затем я сделал коробку. Я использовал ширину этой коробки: 410px, а цвет фона белый. Я также добавил граница радий: 8px Чтобы сделать четыре углы слегка закругленными.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: "Poppins",sans-serif;
}

body{
    height: 100vh;
    background: #448aff;
}

.wrapper{
    width: 410px;
    background-color: #ffffff;
    padding: 30px 30px;
    border-radius: 8px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    box-shadow: 0 20px 25px rgba(60,60,100,0.15);
}

Шаг 2: Добавьте заголовки в коробку

Теперь я добавил заголовок в этот дизайн. Я воспользовался помощью тегов H2, чтобы добавить этот заголовок. Затем я добавил здесь необходимый стиль, используя код CSS.

Gradient Generator

.wrapper h2{
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 30px;
  color: #0558b7;
}

Шаг 3: Создайте дисплей, чтобы увидеть градиентные цвета

Градиент создал дисплей для просмотра цвета. Этот дисплей поможет увидеть Случайные градиентные цвета Анкет Каждый раз, когда вы нажимаете на кнопку «Создать», создается другой цвет.

#output-color{
    width: 100%;
    height: 35vmin;
    border-radius: 5px;
}

Шаг 4: Создайте поле для цветового кода

Теперь я создал поле для просмотра цветового кода. Когда вы создаете градиент, код, необходимый для него, можно найти в этом поле.

Это позволяет вам скопировать этот код и использовать его в вашем файле CFS. Я использовал прокладку, чтобы определить Ширина: 100% и высота этой коробки.

#output-code{
    background-color: #f1f5fc;
    font-size: 2.7vmin;
    font-weight: 500;
    color: #044db4;
    width: 100%;
    padding: 15px 10px;
    border-radius: 5px;
    border: 1px solid #cfd5d5;
    margin: 20px 0 40px 0;
}

Шаг 5: Создать кнопку «Создать» и кнопку копирования

Теперь я создал две кнопки в этом генераторе градиента. Один будет генерировать цвет, а другой скопирует. Для этого я использовал функцию кнопки простого HTML, а затем разработал ее с помощью CSS.

 

    Generate
    Copy
 

.btn-container{
    display: flex;
    justify-content: space-around;
}
.btn-container button{
    background-color: #2e80b3;
    min-width: 42%;
    padding: 12px 0;
    color: #ffffff;
    border-radius: 7px;
    font-size: 3vmin;
    margin-bottom: 8px;
    font-weight: 500;
    cursor: pointer;
}

Используя небольшое количество кода CSS ниже, я установил цвет фона и цвет палачения для второй кнопки. Я взял на себя помощь nth-last-of-type (1) Чтобы выбрать вторую кнопку.

.btn-container button:nth-last-of-type(1){
  background-color: #ae7617;
}
.btn-container button:nth-last-of-type(1):active{
  background: #1bb916;
}

Шаг 6: Активируйте генератор случайного градиента с помощью JavaScript

Выше мы сделали полный дизайн. Сейчас самое время активировать его, используя JavaScript. Если вы новичок, постарайтесь хорошо следовать полной информации. Если у вас есть трудности с пониманием, вы можете сообщить мне, комментируя непосредственно в моем Instagram ( @foolishdeveloper ).

Используя следующий четыре строкового кода, я определил константы некоторых функций идентификатора один за другим. Здесь я определил константы четырех функций ID, таких как кнопка «Создать кнопку», «Кнопка копирования», «Цветовое отображение» и «Код цветового кода».

let generateBtn = document.getElementById("generate-btn");
let copyBtn = document.getElementById("copy-btn");
let outputColor = document.getElementById("output-color");
let outputCode = document.getElementById("output-code");

Теперь я добавил шестнадцатеричные персонажи Используя следующий JavaScript. Эти символы случайным образом объединяются друг с другом, чтобы произвести цвет.

Числа от 0 до 9 и символы от A до F в основном используются здесь. Позже мы создадим цвет, объединив эти символы друг с другом, используя JavaScript Math.random функция

let hexString = "0123456789abcdef";

Сейчас настало время создать цвета, используя функцию JavaScript Math.Random. Если вы знаете Basic Javascript, вы можете легко понять этот метод производства цвета. Метод случайного () используется для генерации псевдордома, которое является числом, созданным с формулой, которая имитирует случайность.

let randomColor = () => {
    let hexCode = "#";
    for( i=0; i<6; i++){
        hexCode += hexString[Math.floor(Math.random() * hexString.length)];
    }
    return hexCode;
}

Теперь я создам градиентный цвет, добавив случайные цвета, добавленные выше. Вы можете Смотрите его живую демонстрацию Анкет ➤ Сначала я создал два случайных цветов и сохранил эти два цвета в цвете One и Color Two.

➤ Затем установите угол, используя Math.Random. Как я уже говорил, градиентные цвета можно увидеть здесь под разными углами друг с другом. Затем этот случайный угол хранится в постоянной, называемой углом.

➤ Использование строки № 4 Я добавил первый и второй цвет друг к другу под случайными углами. Затем я договорился показать этот выход на цветовом дисплее.

➤ Мне удалось генерировать цветовой код, используя код JavaScript ниже. Градиентный цвет, который можно увидеть на дисплее кода, необходимого для цвета, можно увидеть в маленькой коробке. В этом поле я уже создал код HTML и CSS.

let generateGrad = () => {
    let colorOne = randomColor();
    let colorTwo = randomColor();
    let angle = Math.floor(Math.random() * 360);
    outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
    outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo});`;
}

Теперь используя JavaScript ниже, я выполнил кнопку копирования. Всякий раз, когда вы нажимаете на кнопку копирования, код цвета в поле копирования будет скопирован.

copyBtn.addEventListener("click", () => {
    outputCode.select();
    document.execCommand("copy");
});

Я выполнил кнопку «Создать», используя код ниже. Каждый раз, когда вы нажимаете на эту кнопку, будут созданы разные цвета.

generateBtn.addEventListener("click", generateGrad);
window.onload = generateGrad;

Окончательный код JavaScript:

let generateBtn = document.getElementById("generate-btn");
let copyBtn = document.getElementById("copy-btn");
let outputColor = document.getElementById("output-color");
let outputCode = document.getElementById("output-code");
let hexString = "0123456789abcdef";

let randomColor = () => {
    let hexCode = "#";
    for( i=0; i<6; i++){
        hexCode += hexString[Math.floor(Math.random() * hexString.length)];
    }
    return hexCode;
}

let generateGrad = () => {
    let colorOne = randomColor();
    let colorTwo = randomColor();
    let angle = Math.floor(Math.random() * 360);
    outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
    outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo});`;
}

copyBtn.addEventListener("click", () => {
    outputCode.select();
    document.execCommand("copy");
});

generateBtn.addEventListener("click", generateGrad);
window.onload = generateGrad;

Надеемся, что вы узнали из этого урока, как создается случайный генератор градиентов с использованием HTML CSS и JavaScript.

Я полностью объяснил ваше удобство. Вы должны прокомментировать, как вам нравится этот дизайн.

Вы можете посетить мой блог, чтобы получить больше учебников, подобных этому. 😊 https://www.foolishdeveloper.com/

Оригинал: “https://dev.to/shantanu_jana/random-gradient-generator-using-javascript-css-529c”