Binário

binario.markdown

Binário

A Pen by Diego Lipinski de Castro on CodePen.

License.

index.pug

div#app
	.columns
		.column.is-offset-one-quarter
			template(v-for="type in typeConversions")
				.field
					label.label {{ type.name }}
					.control
						input.input(v-model="type.result" type="text" disabled)
					
			hr
			
			.field
				.control
					input.input(v-model="input" type="text" placeholder="Input" v-bind:disabled="selectedType.length <= 0")
			
			.select
				select(v-model="selectedType")
					option(value="nulled" disabled) Select input base type
					template(v-for="type in typeConversions")
						option(:value="type.value") {{ type.name }}

			hr
			
			button.button.is-primary(@click="calculate()") Calculate
			button.button.is-primary(@click="reset()" style="float: right") Reset

script.babel

new Vue({
	el: "#app",
	data() {
		return {
			first: "",
			last: "",
			input: "",
			typeConversions: [
				{ value: "decimal", base: 10, name: "Decimal", result: "" },
				{ value: "hexadecimal", base: 16, name: "Hexadecimal", result: "" },
				{ value: "octadecimal", base: 8, name: "Octadecimal", result: "" },
				{ value: "binario", base: 2, name: "Binário", result: "" }
			],
			selectedType: ""
		};
	},
	created() {
		self = this;
	},
	methods: {
		calculate: () => {
			let typeItem = $.grep(self.typeConversions, type => {
				return type.value == self.selectedType;
			});

			let newDecimal = self.toDecimal(self.input, typeItem[0].base);

			self.typeConversions.forEach(item => {
				item.result = self.converion(newDecimal, item.base);
			});
		},
		toDecimal: (value, base) => {
			return parseInt(value, base);
		},
		converion: (value, newBase) => {
			return self.toDecimal(value).toString(newBase);
		},
		reset: () => {
			self.input = "";
			self.selectedType = "";
			self.typeConversions.forEach(item => {
				item.result = "";
			});
		}
	}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

style.stylus

html, body
	height 100%

body
	display flex
	align-items center
	justify-content center

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" rel="stylesheet" />