JavaScript

Progress bar with Vue.js

This example shows how to create a simple progress bar with a little Vue.js and Foundation CSS help.
Create a simple HTML template and attach minimized Foundation CSS file.

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="foundation.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div id="app">
    <section class="row">
        <div class="small-12 columns">
            <div class="progressbar">
                <div class="progressbar text-center"
		  style="background-color: green; margin: 0; color: white;"
		  :style="{width: progress + '%'}">
		  {{ progress }} %
                </div>
            </div>
        </div>
    </section>
    <section class="row">
        <div class="small-12 columns text-center">
            <button id="attack" @click="increase">Increase</button>
            <button id="attack" @click="decrease">Decrease</button>
	</div>
    </section>   
</div>
<script src="app.js"></script>
</body>
</html>

Add custom CSS styles:

/* app.css */
.text-center {
    text-align: center;
}

.progressbar {
    width: 80%;
    height: 40px;
    background-color: #eee;
    margin: 1em auto;
    transition: width 500ms;
}

button {
    font-size: 20px;
    background-color: #eee;
    padding: 12px;
    box-shadow: 0 1px 1px black;
    margin: 10px;
}

Add some Vue.js code to provide business logic for the progress bar:

/* app.js */
new Vue({
  el: '#app',
  data: {
	progress: 50,
  },
  methods: {
	increase: function() {
	  if (this.progress < 100) {
	    this.progress += 1;
	  }
	},
	decrease: function() {
	  if (this.progress > 0) {	
	    this.progress -= 1;
	  }
	}	
  }
});

clicksand.net

Goal: Develop a website (theme) for a book author based on provided PDF mocks. Use WordPress as a CMS for the site. Test and deploy the site on the company’s server.
Web technologies used: HTML5, CSS, PHP, WordPress.
Tools and software: Photoshop, MS Visual Studio Code
Release date: May, 2017
Project type: Contract work for Civilis Marketing.
clicksand.net

ngc2017

Goal: Create a website and web application for a scientific conference. Create a custom administrator back-office to manage the conference participants. Integrate Stripe payment gateway.
Specifics: Contract work for Nano and Giga Inc.
Web technologies: PHP, MySQL, JavaScipt, jQuery, Bootstrap, HTML5, CSS3.
Libraries: Bootstrap 3.0.
Release date: October 2, 2016.
nanoandgiga.com/ngc2017/