<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Reactive Colouring with Vue test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
<h1>Colour the Bee</h1>
<p>In the text boxes, type the colour which each part of the bee should be.</br>Color choices: black , yellow.
<//div>
<div class="wrapper">
<h2>Colour 1:</h2><input type="text" v-on:input="cssClassOne = $event.target.value"></input>
<h2>Colour 2:</h2>
<input type="text" v-on:input="cssClassTwo = $event.target.value"></input>
<div v-bind:class="cssClassTwo" id="head">1.</div>
<div class="thorax">
<div v-bind:class="cssClassOne" id="stripe">1.</div>
<div v-bind:class="cssClassTwo" id="stripe">2.</div>
<div v-bind:class="cssClassOne" id="stripe">1.</div>
<div v-bind:class="cssClassTwo" id="stripe">2.</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-Infamous/reactive-colouring-with-vue-test-qjLoPy */
body {
margin: 0;
}
h1 {
font-size: 30px;
text-align: center;
}
p {
font-size: 20px;
text-align: center;
}
.content {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
#head {margin: 0 auto;
height: 100px;
width: 100px;
border: 1px solid black;
border-radius: 50%;
text-align: center;
}
.thorax {
margin: 0 auto;
height: 250px;
width: 200px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
}
.black {
background-color: black;
}
.yellow {
background-color: yellow;
}
#stripe {
width: 100%;
height: 61px;
border: 1px solid black;
text-align: center;
}
/*Downloaded from https://www.codeseek.co/-Infamous/reactive-colouring-with-vue-test-qjLoPy */
new Vue({
el: '.wrapper',
data: {
cssClassOne: '',
cssClassTwo: '',
},
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Vue js
v2.3.4
