Color an image or div with the value of a field in the database

Question

I wonder if it is possible to put the color code that is saved in the database in an image/div/icone. Working like this, the person fills in the form and chooses a color to be the color of her topic. is it possible? Have any website to recommend?

Answer 1

You can for example create a table in the database with the following field:

user table

id_usuario = 12345678
name_user = 'fer';
color = "#FFF";

and in your form he make a registration in this table, where color will be the color chosen by the user at the time of registration.

When you search that user’s data in the database, you search the color by id and assign it to a variable for example:

It is worth mentioning that the form with which you will search in the database the variable "color" depends on which technology you are using (mysql, mysqli, PDO among others)

$query = select cor from usuario where id_usuario = 12345678
$resource= mysql_query($query);
$resultado = mysql_fetch_array($resource);
$cor = $resultado['cor'];

To assign this variable in a div for example the code is this:

<div style="background-color: <?php echo $cor; ?>"><p>Minha div com a cor escolhida pelo usuário! </p></div>

Answer 2

function getColor(cor){
  var x = document.getElementsByClassName("element");
  for (i = 0; i < x.length; i++) {
    x[i].style= 'color:' + cor;
  }
  document.getElementById("element-div").style.background = cor;
}

.container-full {
  width: 90% !important;
  height: 300px;
  margin: 10px auto;
  color: white;
  font-size: 25px;
  background-color: #d4d4d4;
}

.element{
  color: green;
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: green; 
    border: 2px solid green;
}

.button2 {
    background-color: white; 
    color: blue; 
    border: 2px solid blue;
}

.button3 {
    background-color: white; 
    color: red; 
    border: 2px solid red;
}

.button4 {
    background-color: white;
    color: gray;
    border: 2px solid gray;
}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-full text-center">
  <button class="button button1" onclick="getColor('Green')" >Green</button>
  <button class="button button2" onclick="getColor('Blue')" >Blue</button>
  <button class="button button3" onclick="getColor('Red')" >Red</button>
  <button class="button button4" onclick="getColor('Gray')" >Gray</button>
  <button class="button button5" onclick="getColor('Black')" >Black</button>
  <div id="element-div" style="background-color: green; border: 1px solid black; margin:10px"> Cor em Div   </div>
  <div style="border: 1px solid black; margin:10px">
    <p>Cor em Icon<p>
    <span class="glyphicon glyphicon-asterisk element">
    <span class="glyphicon glyphicon-plus element">
    <span class="glyphicon glyphicon-th-large element">
    <span class="glyphicon glyphicon-signal element">
    <span class="glyphicon glyphicon-camera element">
    <span class="glyphicon glyphicon-user element">
  </div>
</div>