<div id="app" :style="background">
<div class="center column">
<color-input v-for="(color,index) in colors" :colorp="color" :key="index" v-on:new-color="updateColors"></color-input>
<button @click="randomColors">random</button>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body{
height:100vh;
width:100vw;
}
#app{
height:100%;
display:flex;
}
.center {
display:flex;
justify-content:center;
align-items:center;
width:400px;
margin:auto;
padding: 25px 0px;
}
.column{
flex-direction: column
}
input{
display: block;
width: 100%;
font-family: "Roboto", sans-serif;
font-weight: 700;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
color: inherit;
background-color: transparent;
-webkit-appearance: none;
appearance: none;
outline: none;
font-size: 4.5rem;
text-align:center;
color:#ffffff
}
button{
font-family: "Roboto", sans-serif;
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: 8px;
border-radius: 3px;
border: 0px;
background: #000000;
color:#ffffff;
text-transform: uppercase;
cursor:pointer;
margin-top:8px;
}
button:focus{
outline:none;
}
API('PyzBqo')
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};
Vue.component("color-input", {
props: ["colorp"],
template:
'<div><input type="text" v-model="color"></div>',
data() {
return {
color: this.colorp,
tweenedColor: this.colorp,
randomColor:''
};
},
methods: {
changeColor() {
this.color = this.randomColor = randomHex()
}
},
watch: {
color() {
TweenLite.to(this.$data, 1, { tweenedColor: this.color });
},
animatedColor() {
this.$emit('new-color',{index : this.$vnode.key,color: this.animatedColor})
}
},
computed: {
animatedColor() {
return this.tweenedColor;
},
backgroundStyle() {
return {
background: this.animatedColor
};
}
},
created() {
}
});
function randomHex() {
return (
"#" +
(
"000000" +
Math.random()
.toString(16)
.slice(2, 8)
.toUpperCase()
).slice(-6)
);
}
new Vue({
el: "#app",
data: {
color: "",
tweenedColor: "",
colors: Array ,
animatedColors: Array
},
created() {
let colors = ['#009FFF', '#EC2F4B']
this.colors = this.animatedColors = colors
},
methods: {
updateColors(e) {
this.animatedColors.splice(e.index,1 , e.color)
},
randomColors() {
this.$children.forEach((color) => {
color.changeColor()
})
}
},
computed: {
gradient() {
return JSON.stringify(this.animatedColors).replaceAll('"','').replace('[','').replace(']','')
},
background() {
return {
background: 'linear-gradient(45deg,' + this.gradient + ')'
}
}
}
});
This Pen doesn't use any external CSS resources.