Skip to content

Instantly share code, notes, and snippets.

@luiseduardogfranca

luiseduardogfranca/index.html

Created October 15, 2018 12:12
Show Gist options
  • Save luiseduardogfranca/1deb71907794f4685c80c571b19e87e3 to your computer and use it in GitHub Desktop.
Save luiseduardogfranca/1deb71907794f4685c80c571b19e87e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!-- <html>
<head>
<script></script>
</head>
<body>
<div>
<h1>MRU</h1>
<div>
<button onClick="display(1)">Calcular Velocidade Média</button>
<button onClick="display(2)">Calcular Variação de Distância</button>
<button onClick="display(3)">Calcular Variação de Tempo</button>
</div>
<div id='form'>
<form>
<label for=""></label>
<input name="vel" type="number" value="">
<input name="dist" type="number" value="">
<input name="time" type="number" value="">
</form>
</div>
</div>
</body>
</html> -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fisica : MRU</title>
<meta name="description" content="curso de bootstrap 3">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./mru.js"></script>
<style>
.formulario {
margin-top: 15rem;
padding: 2rem;
}
body {
background-color: #dfe6e9;
}
.cor {
color: green;
}
.container-rodape {
color: whitesmoke;
}
.cor2 {
color: white;
bottom: 0px;
}
div.rodape {
position: absolute;
top: 95%;
text-align: center;
}
</style>
</head>
<body>
<div class="modal fade" id="calcVel" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Calcular Velocidade Média</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="vel-dist">Variação Distância:</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="vel-dist" placeholder="Digite o valor" name="vel-dist">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="vel-time">Variação Tempo:</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="vel-time" placeholder="Digite o valor" name="vel-time">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" onclick="calcVel()" class="btn btn-default">Calcular</button>
</div>
</div>
<p><strong>Resultado:</strong> <span id="vel-result"></span></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="calcDist" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Calcular Variação de Tempo</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="time-dist">Variação de Distância:</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="time-dist" placeholder="Digite o valor" name="time-dist">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="time-vel">Velocidade Média:</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="time-vel" placeholder="Digite o valor" name="time-vel">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" onClick="calcTime()" class="btn btn-default">Calcular</button>
</div>
</div>
<p><strong>Resultado:</strong> <span id="time-result"></span></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="calcTime" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Calcular Variação de Distância</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="dist-vel">Velocidade Média:</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="dist-vel" placeholder="Digite o valor" name="dist-vel">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dist-time">Variação Tempo:</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="dist-time" placeholder="Digite o valor" name="dist-time">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" onClick="calcDist()" class="btn btn-default">Calcular</button>
</div>
</div>
<p><strong>Resultado:</strong> <span id="dist-result"></span></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
<h1 class="text-center" style="color: black; font-size: 50px">FISICA - MRUV</h1>
<form class="col-sm-offset-4 col-sm-4 formulario">
<button type="button" data-toggle="modal" data-target="#calcVel" class="btn btn-lg btn-success btn-block" role="button">Calcular VM</button>
<button type="button" data-toggle="modal" data-target="#calcDist" class="btn btn-lg btn-danger btn-block" role="button">Calcular a variação da distância</button>
<button type="button" data-toggle="modal" data-target="#calcTime" class="btn btn-lg btn-default btn-block" href="" role="button" style="background-color: #3F51B5;color: white">Calcular
a variação de tempo</button>
</form>
</body>
</html>
Raw
mru.js
function calcVel(){
var dist, time
dist = document.getElementById("vel-dist").value
time = document.getElementById("vel-time").value
document.getElementById("vel-result").innerHTML = dist/time + " Km/h"
}
function calcDist(vel, time){
var vel, time
vel = document.getElementById("dist-vel").value
time = document.getElementById("dist-time").value
document.getElementById("dist-result").innerHTML = vel * time + " Km"
}
function calcTime(){
var dist, vel
dist = document.getElementById("time-dist").value
vel = document.getElementById("time-vel").value
document.getElementById("time-result").innerHTML = dist / vel + " h"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment