[ANSWERED] javascript – How can I let the user choose a background color using hex and css gradients

Question 1

I created an example.

const body = document.querySelector("body");
const startInput = document.querySelector("#start");
const endInput = document.querySelector("#end");

let startHex = "#fff";
let endHex = "#fff";

let gradient;

function styleBody(){
  gradient = `linear-gradient(to right, ${startHex}, ${endHex})`;
  body.style.background = gradient;
}

startInput.addEventListener("input", () => {
  startHex = event.target.value;
  styleBody();
});

endInput.addEventListener("input", () => {
  endHex = event.target.value;
  styleBody();
});

<input type="color" id="start">
<input type="color" id="end">

Question 2

const colorPicker1 = document.querySelector("#picker1");
const colorPicker2 = document.querySelector("#picker2");
var firstColor = '#0F0';
var secondColor = '#F00'

document.body.addEventListener("input", gradientPick);

function gradientPick(event) {
  if(event.target === colorPicker1){
    firstColor = event.target.value;
  }
  
  if(event.target === colorPicker2){
    secondColor = event.target.value;
  }
  document.body.style.background = `linear-gradient(${firstColor}, ${secondColor})`;
  document.body.style.backgroundSize = "contain";
  document.body.style.height = "100vh";
}

<input id="picker1" type="color" value="#ff0000">
<input id="picker2" type="color" value="#00ff00">

Question 3

I would like to make it so that the user can input a hex into one text box and another hex into a different text box. This would then use linear-gradient so that it would gradient the first color to the second color. In the code snippet is an example of what it may produce. I would prefer to only use css and html but can use javascript if neccessary. Thanks to anyone who attempts to solve this problem any bit. I will respond to any questions in case I am being vague.

body {
  background: linear-gradient(to right, #ffb6ce, #ff00ea);
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Bollate

[ANSWERED] javascript – How can I let the user choose a background color using hex and css gradients

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Dhaval Jardosh

Comment posted by kloddant

By

Related Post

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate