Vue

by ckissi

HTML

<link href="https://fonts.googleapis.com/css?family=Questrial&display=swap" rel="stylesheet">
<div id="app">
  <div class="container">  
   <div id="clr1" class="colcontainer" v-bind:style="{ backgroundColor: clr1color }">
     <div>
        some text
     </div>
   </div>
   <div id="clr2" class="colcontainer"  v-bind:style="{ backgroundColor: clr2color }">
      <div>
         #ffffff
      </div>   
   </div>
   <div id="clr3" class="colcontainer"  v-bind:style="{ backgroundColor: clr3color }">
      <div>
         #ffffff
      </div>   
   </div>
   <div id="clr4" class="colcontainer"  v-bind:style="{ backgroundColor: clr4color }">
     <div>
         #ffffff
      </div>   
   </div>
   <div id="clr5" class="colcontainer"  v-bind:style="{ backgroundColor: clr5color }">
      <div>
         #ffffff
      </div>   
   </div>      
  </div>  
  <input type="hidden" id="palette" v-bind:value="palette_str">
</div>

CSS

html,
body,
#app {
	height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Questrial', sans-serif;
}


.container {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 100%;
  text-align: center;
  justify-content: center;
}

#clr1, #clr2, #clr3, #clr4, #clr5 {
    display: flex;
    width: 20%;
    align-items: center;
    justify-content: center;
}
#clr1 {
    background-color: pink;
}
#clr2 {
    background-color: red;
}
#clr3 {
  background-color: brown;
}
#clr4 {
    background-color: yellow;
}
#clr5 {
    background-color: blue;
}
.colcontainer div {
    background-color: #ebedef;
    border-radius: 0.5rem;
    padding: 0px 15px;
    line-height:37px;    
}

#palette {
   display: none;   
}

Vue

new Vue({
  el: "#app",
  data: function () {
    return {
      palette: '',
      palette_str: '',
      clr1color: 'red',
      clr2color: 'red',
      clr3color: 'red',
      clr4color: 'red',
      clr5color: 'red',
      palettes: [
        { c2: "red", c3: "green", c4: "green",c1: "brown",c5: "yeallow" },          
        { c1: "red", c2: "pink", c3: "blue",c4: "#453534",c5: "#235212" }      
    	]
    }
  },  
  methods: {  	
    escapeKeyListener(evt) {
      if (evt.keyCode === 32) {
         var item_id = Math.floor(Math.random() * this.palettes.length);
         this.palette = this.palettes[item_id];
         this.palette_str = this.palette.c1 + "\n" + this.palette.c2 + "\n" + this.palette.c3 + "\n" + this.palette.c4 + "\n" + this.palette.c5;
         console.log(this.palette.c1);
         this.clr1color = this.palette.c1;
         this.clr2color = this.palette.c2;
         this.clr3color = this.palette.c3;
         this.clr4color = this.palette.c4;
         this.clr5color = this.palette.c5;
      }
      if (evt.keyCode === 67) {
         console.log('Copy');
          let paletteCopy = document.querySelector('#palette');
          paletteCopy.setAttribute('type', 'text');  
          paletteCopy.select();

          try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            alert('Testing code was copied ' + this.palette_str);
          } catch (err) {
            alert('Oops, unable to copy');
          }
      }
      
    }
  },
  created: function() {
      document.addEventListener('keyup', this.escapeKeyListener);
  },
})