Put color in an image or div with the value of a field in the bank

0

I would like to know if it is possible to put the color code that is saved in the database in an image / div / icon. By doing so, the person fills in and the form and chooses a color to be the topic color of it. it's possible? Do you have any websites to recommend?

    
asked by anonymous 30.11.2017 / 12:35

2 answers

0

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

user table

user id = 12345678
user_name = 'fer'; Home color="#FFF";

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

When you fetch that user's data into the database, you search the color for the id and assign it to a variable, for example:

  

It is worth mentioning that the way in which you will search the database for the variable "color" depends on what technology you are using (mysql, mysqli, PDO and 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 to 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>
    
30.11.2017 / 13:22
0

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>
    
30.11.2017 / 14:28