Class and Style Attributes in Vue, Student

by jessupjs

HTML

<h1>Class &amp; Style Attributes in Vue, woo-hoo!</h1>
<p>Click the circle to witness some cool componetry</p>

<div id="circleApp">
  <circles></circles>
</div>

CSS

* {
  border: 0;
  padding: 0;
  margin: 0;
}

h1 { 
  font-size: 1.5rem;
  padding: 0.25% 1%;
}

p {
  font-style: italic;
  padding: 0.25% 2%;
}
  
#circleApp {
  align-items: center;
  display: flex;
  height: 175px;
  justify-content: center;
  margin: 1.25%;
  position: relative;
  width: 450px;
}

.circle {
  border-radius: 50%;
  position: absolute;
}

.lg {
  height: 100px;
  transition: 0.25s linear;
  width: 100px;
}

.md {
  height: 75px;
  transition: 0.25s linear;
  width: 75px;
}

.sm {
  height: 50px;
  transition: 0.5s linear;
  width: 50px;
}

JavaScript

// BEFORE YOU GET STARTED, HAVE A LOOK AT:
// https://vuejs.org/v2/guide/class-and-style.html

// A COMPONENT HAS BEEN CREATED FOR YOU BELOW - YOU DO NOT NEED TO CHANGE THE DATA FUNCTION UNLESS YOU REALLY WANT TO

// Create new Vue component
Vue.component('circles', {
	data: function() {
  	// Closure style
    return {
    	// Class booleans
  		isLg: true,
      isMd: false,
      isSm: false,
      // Style properties
      position: {
      	left: '25%',
        top: '25%',
        backgroundColor: 'rgb(255, 0, 0)'
      }
    }
  },
  methods: {
  
  	// COMPOSE THE toggleClass() METHOD SO THAT THE .sm, .md, .lg CLASSES WILL CHANGE ON-CLICK USING THE CLASS BOOLEANS IN DATA
  
  	// Toggle circle classes
  	toggleClass : function() {
    	
    },
    
    // COMPOSE THE randomMove() METHOD SO THAT THE left, top and rgb VALUES WILL CHANGE ON-CLICK USING THE STYLE PROPERTIES IN DATA
    
    // Move circle randomly
    randomMove : function() {
    	
    },
    
    // COMPOSE THE doItAll() METHOD SO THAT IT WILL CALL THE TWO METHODS ABOVE ON-CLICK
    
    // Combine functions for single click event
    doItAll : function() {
    	
    }
  },
  
  // COMPLETE THE TEMPLATE SO THAT IT CALLS AN ON-CLICK METHOD, EVALUATES THE CLASS AND PLACES THE STYLE
  
  // <circles> modifies class and style
  template:
  	'<div>\
    </div>'
});

// Initialize Vue app
var v = new Vue({   
  el: '#circleApp'
});