Skip to content

Instantly share code, notes, and snippets.

@mgumiero9

mgumiero9/form.html

Created January 11, 2017 14:40
Show Gist options
  • Save mgumiero9/fae4e16658dd68f161431ae9b2acff61 to your computer and use it in GitHub Desktop.
Save mgumiero9/fae4e16658dd68f161431ae9b2acff61 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
form.html
<!DOCTYPE html>
<html ng-app="app" lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This is the form of EZDrive Landing Page">
<meta name="author" content="mgumiero9">
<title>
EZDrive Landing Page
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://www.tutorialspoint.com/bootstrap/scripts/jquery.min.js"></script>
<script src="http://www.tutorialspoint.com/bootstrap/js/bootstrap.min.js"></script>
<script>
var myMarca, myModelo;
angular.module('app', []);
angular.module('app').controller('MyCtrl', function MyCtrl($http, $scope){
$http.get('https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas').success(function(dataMarca) {
$scope.greeting = dataMarca;
});
$scope.carregarModelo = function (marca) {
$http.get("https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/"+marca.codigo+"/modelos").success(function (dataModelo) {
myMarca = marca;
$scope.modelo = dataModelo;
});
};
$scope.carregarAno = function (modelo) {
$http.get("https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/"+myMarca.codigo+"/modelos/"+modelo.codigo+"/anos").success(function (dataAno) {
myModelo = modelo;
$scope.ano = dataAno;
});
};
function floatToCurrency(floatNumber) {
Number.prototype.formatMoney = function(c, d, t){
var n = floatNumber,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "," : d,
t = t == undefined ? "." : t,
s = n < 0 ? "-" : "",
i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
return floatNumber.formatMoney(2);
}
function calc(myValor) {
// to find the comma position
var myValorCommaPosition = myValor.search(',');
// removing the .dots and , comma from string, then parsing to Float
var myValorSlicedInt = parseFloat(myValor.slice(2,-2).replace('.', '').replace('.', '').replace(',', ''));
// removing the comma from string and parsing to Float
var myValorSlicedDecimal = parseFloat(myValor.slice(myValorCommaPosition).replace(',', ''));
var myValorSlicedDecimalBy100 = myValorSlicedDecimal / 100;
var myValorFloat = myValorSlicedInt + myValorSlicedDecimalBy100;
var depreciacaoFloat = myValorFloat * 0.1;
var perdaCapitalFloat = myValorFloat * 0.1375;
$scope.depreciacao = ("R$ " + floatToCurrency(depreciacaoFloat));
$scope.perdaCapital = ("R$ " + floatToCurrency(perdaCapitalFloat));
}
$scope.carregarValor = function (ano) {
$http.get("https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas/"+myMarca.codigo+"/modelos/"+myModelo.codigo+"/anos/"+ano.codigo).success(function (dataValor) {
$scope.valor = dataValor;
var myValor = $scope.valor.Valor;
calc(myValor);
});
};
window.onload = function () {
document.getElementsByName("valor2").innerHTML = "teste4";
}
});
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
</head>
<body ng-controller="MyCtrl">
<!-- Page Content -->
<div class="container">
<!-- First Featurette -->
<div class="featurette" id="about">
<!------------------------code---------------start---------------->
<div class="container">
<div class="row" style="margin-left: 30%;">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span> Valor Requerido</strong></div>
<!-- Brand field -->
<div class="form-group">
<label for="marca">Marca</label>
<div class="input-group">
<!--<div>Operator is: {{x}}</div>-->
<select class="form-control" id="marca" name="marca" placeholder="Marca" autofocus required
ng-value="marca" ng-options="x as x.nome for x in greeting"
ng-model="marca" ng-change="carregarModelo(marca)">
<option value="">Selecione</option>
</select>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div><!--{{marca}}-->
</div>
<!-- Model field -->
<div class="form-group">
<label for="modelo">Modelo</label>
<div class="input-group">
<!--<div>Operator is: {{modelo.y}}</div>-->
<select class="form-control" id="modelo" name="modelo" placeholder="Modelo" required
ng-value="modelo" ng-options="y as y.nome for y in modelo.modelos"
ng-model="modelo.y" ng-change="carregarAno(modelo.y)">
<option value="">Selecione</option>
</select>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div><!--{{modelo}}-->
</div>
<!-- Year field -->
<div class="form-group">
<label for="Ano">Ano</label>
<div class="input-group">
<!--<div>Operator is: {{ano.z}}</div>-->
<select id="ano" class = "form-control" name="ano" placeholder="Ano" required
ng-value="ano" ng-options="z as z.nome for z in ano"
ng-model="ano.z" ng-change="carregarValor(ano.z)">
<option value="">Selecione</option>
</select>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div><!--{{ano}}-->
</div>
<div class="form-group">
<label for="valor">Valor Médio</label>
<div class="input-group">
<input type="text" id="valor" class = "form-control" name="valor" value={{valor.Valor}}
placeholder="Aguardando Dados..."
disabled="disabled">
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-group">
<label for="depreciacao">Depreciação / Ano (10% a.a.)</label>
<div class="input-group">
<input type="text" id="depreciacao" class = "form-control" name="depreciacao" value={{depreciacao}}
placeholder="Aguardando Dados..."
>
<script type="text/javascript">
document.getElementById("valor2").innerHTML = "teste3";
</script>
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-group">
<label for="perdacapital">Perda de Capital (13,75% a.a. - SELIC)</label>
<div class="input-group">
<input type="text" id="perdacapital" class = "form-control" name="perdacapital" value={{perdaCapital}}
placeholder="Aguardando Dados..."
>
<script type="text/javascript">
document.getElementById("valor2").innerHTML = "teste3";
</script>
<span class="input-group-addon"></span>
</div>
</div>
<!--
&lt;!&ndash; Year field &ndash;&gt;
<div class="form-group">
<label for="InputAno">Ano</label>
<div class="input-group">
<select id="ano" class = "form-control" name="ano" id="InputAno" placeholder="Ano" required>
<script>
(function() {
var elm = document.getElementById('ano'),
df = document.createDocumentFragment();
myYear = new Date().getFullYear();
for (var i = myYear + 1; i >= myYear - 35; i&#45;&#45;) {
var option = document.createElement('option');
option.value = i;
option.appendChild(document.createTextNode(i));
df.appendChild(option);
}
elm.appendChild(df);
}());
</script>
</select>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
-->
<!-- Name field -->
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<!-- E-mail field -->
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>
<!----Code------end----------------------------------->
</div>
<!-- jQuery -->
</div>
</div>
</body>
</html>
<!-- &lt;!&ndash; Model field &ndash;&gt;
<div class="form-group">
<label for="InputName">Modelo</label>
<div class="input-group">
<select id="modelo" class="form-control" name="modelo" id="InputModelo" placeholder="Modelo" required
value="0" Selecione ng-options="x as x.modelo for x in modelo.modelos"
ng-model="modelo" ng-change="carregarAno(modelo)" >
&lt;!&ndash;<option value="0" selected>Selecione</option>
<option ng-repeat="x as x.nome for x in modelo.modelos" value="{{ x.codigo }}">{{ x.nome }}</option>&ndash;&gt;
</select>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>-->
<!--
&lt;!&ndash; Model field &ndash;&gt;
<div class="form-group">
<label for="InputName">Modelo</label>
<div class="input-group">
<select id="modelo" class="form-control" name="modelo" id="InputModelo" placeholder="Modelo" required>
<option value="0" selected>Selecione</option>
<option ng-repeat="x in modelo.modelos" value="{{ x.codigo }}">{{ x.nome }}</option>
<option ng-model = "modelo" ng-change="carregarAno(modelo)"></option>
</select>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment