Search code examples
phpjqueryhtmllayoutcolors

Be able to change the colour of seperate divs by clicking on buttons

I am creating a wedding checklist website. For my checklist I want to enable the user to change the colour of the todo item to red, amber and green, red for not done, amber for partly done, and green for done. I was wndering how to achieve this, I would also like it to be saved to the database. Thanks in advance.

Solution

  • in db

    1. add a column status with a value of 1 or 2 numbers ( it'll be the id of a status)
    2. Create a table status with a status_id, status_title ,status_color, color_id, enabled

    in your code :

    1. in your div , get the color of the task by getting the stored id

      $colorOfTheTask = "SELECT color_id FROM status,task WHERE task.status = status.id ";

    2. Use this on each of your td (i suppose you're using tables) <td <?php echo 'style="background-color:'.$color_id.';color:'.$color_id.'"';?></td>

    Like that you'll be able to manage your colours easier. You can still use a if statement like this : 

    <td <?php if($id_status==1){
          echo 'style="background-color:red;color:red';}
      if($id_status==2){
          echo 'style="background-color:green;color:green';}
      if($id_status==3){
          echo 'style="background-color:#amber-color-code;color:#amber-color-code"';} ?>
</td>