Added exercise04
This commit is contained in:
parent
766789654b
commit
057ed8e2dd
Binary file not shown.
27
code/code/exercise04/app/css/mobile.css
Normal file
27
code/code/exercise04/app/css/mobile.css
Normal file
@ -0,0 +1,27 @@
|
||||
.btn-style{
|
||||
min-width: 150px;
|
||||
margin-right: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
body{
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.img-center{
|
||||
margin-top: 30px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
BIN
code/code/exercise04/app/img/bootstrap.png
Normal file
BIN
code/code/exercise04/app/img/bootstrap.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
BIN
code/code/exercise04/app/img/css3.png
Normal file
BIN
code/code/exercise04/app/img/css3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
BIN
code/code/exercise04/app/img/html5.png
Normal file
BIN
code/code/exercise04/app/img/html5.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.9 KiB |
BIN
code/code/exercise04/app/img/jQuery.png
Normal file
BIN
code/code/exercise04/app/img/jQuery.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.8 KiB |
BIN
code/code/exercise04/app/img/js.png
Normal file
BIN
code/code/exercise04/app/img/js.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.8 KiB |
BIN
code/code/exercise04/app/img/react.png
Normal file
BIN
code/code/exercise04/app/img/react.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.2 KiB |
32
code/code/exercise04/app/index.html
Normal file
32
code/code/exercise04/app/index.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title></title>
|
||||
|
||||
<!--css-->
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
<link rel="stylesheet" href="../../lib/bootstrap.min.css">
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="navigation"></div>
|
||||
<div class="container">
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--scripts-->
|
||||
<script src="../../lib//jquery-2.2.4.min.js"></script>
|
||||
<script src="../../lib/es6-shim.min.js"></script>
|
||||
<script src="../../lib/bootstrap.min.js"></script>
|
||||
<script src="scripts/app.js"></script>
|
||||
<script src="scripts/landung.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
3
code/code/exercise04/app/scripts/app.js
Normal file
3
code/code/exercise04/app/scripts/app.js
Normal file
@ -0,0 +1,3 @@
|
||||
function loadTemplates() {
$('#navigation').load('templates/NavbarTemplate.html');
|
||||
$('#content').load('templates/AboutTemplate.html');
|
||||
}
$(document).ready(loadTemplates);
|
77
code/code/exercise04/app/scripts/landung.js
Normal file
77
code/code/exercise04/app/scripts/landung.js
Normal file
@ -0,0 +1,77 @@
|
||||
function simulation() {
|
||||
var v;
|
||||
var s;
|
||||
var fuel;
|
||||
var schub = false;
|
||||
|
||||
setStartValues(50000, -1000, 10000);
|
||||
|
||||
function switchon() {
|
||||
schub = true;
|
||||
update();
|
||||
checkGameOver();
|
||||
}
|
||||
|
||||
function switchoff() {
|
||||
schub = false;
|
||||
update();
|
||||
checkGameOver();
|
||||
}
|
||||
|
||||
function a() {
|
||||
if (schub == false || fuel <= 0)
|
||||
return -1.63;
|
||||
else {
|
||||
fuel = fuel - 100;
|
||||
return -1.63 + 12;
|
||||
}
|
||||
}
|
||||
|
||||
function showValues() {
|
||||
$("#height").html("Höhe: " + s + " m");
|
||||
$("#speed").html("Geschwindigkeit: " + v + " m/s");
|
||||
$("#fuel").html("Teibstoffvorrat: " + fuel + " l");
|
||||
}
|
||||
|
||||
|
||||
function update() {
|
||||
v = v + a();
|
||||
s = s + v;
|
||||
showValues();
|
||||
}
|
||||
|
||||
function checkGameOver() {
|
||||
if (s <= 0) {
|
||||
if (v < -10)
|
||||
alert("Fehlschlag");
|
||||
else
|
||||
alert("Erfolgreich");
|
||||
|
||||
setStartValues(50000, -1000, 10000);
|
||||
showValues();
|
||||
}
|
||||
}
|
||||
|
||||
function setStartValues(height, velocity, Newfuel) {
|
||||
v = velocity;
|
||||
s = height;
|
||||
fuel = Newfuel;
|
||||
}
|
||||
|
||||
$('#content').html("<h2>Mondlandung</h2>");
|
||||
$("#content").append("<div class='menu'>Hauptmenü</div>")
|
||||
$("#content").append("<div id='height'>Höhe: </div>");
|
||||
$("#content").append("<div id='speed'>Geschwindikgiet: </div>");
|
||||
$("#content").append("<div id='fuel'>Treibstoffvorrat: </div>");
|
||||
$("#content").append("<button id='energy' class='btn-style'>Triebwerk an</button>");
|
||||
$("#content").append("<button id='no-energy' class='btn-style'>Triebwerk aus</button>");
|
||||
|
||||
|
||||
|
||||
$("#energy").click(switchon);
|
||||
$("#no-energy").click(switchoff);
|
||||
|
||||
showValues();
|
||||
}
|
||||
|
||||
|
45
code/code/exercise04/app/templates/AboutTemplate.html
Normal file
45
code/code/exercise04/app/templates/AboutTemplate.html
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="row">
|
||||
<h2 class="col-xs-12 page-header">
|
||||
Patientenverwaltung
|
||||
<small>Ein Demoprojekt</small>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center">
|
||||
<img class="img-circle img-responsive img-center"
|
||||
src="img/html5.png" alt="HTML5 LOGO" />
|
||||
<h4>HTML5</h4>
|
||||
<p>Strukturierte Inhalte für den Browser</p>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center">
|
||||
<img class="img-circle img-responsive img-center"
|
||||
src="img/css3.png" alt="CSS3 LOGO" />
|
||||
<h4>CSS3</h4>
|
||||
<p>Flexibles Design und Layout</p>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center">
|
||||
<img class="img-circle img-responsive img-center"
|
||||
src="img/bootstrap.png" alt="Bootstrap" />
|
||||
<h4>Bootstrap3</h4>
|
||||
<p>Responsive und schick</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center">
|
||||
<img class="img-circle img-responsive img-center"
|
||||
src="img/jQuery.png" alt="JQuery LOGO" />
|
||||
<h4>JQuery</h4>
|
||||
<p>Zugriff auf das DOM</p>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center">
|
||||
<img class="img-circle img-responsive img-center"
|
||||
src="img/react.png" alt="REACT LOGO" />
|
||||
<h4>REACT</h4>
|
||||
<p>Building User Interfaces</p>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center">
|
||||
<img class="img-circle img-responsive img-center"
|
||||
src="img/js.png" alt="JavaScript" />
|
||||
<h4>JavaScript</h4>
|
||||
<p>Die Programmiersprache im Browser</p>
|
||||
</div>
|
||||
</div>
|
22
code/code/exercise04/app/templates/NavbarTemplate.html
Normal file
22
code/code/exercise04/app/templates/NavbarTemplate.html
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<span class="navbar-brand">
|
||||
Patientenverwaltung
|
||||
</span>
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="menu" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="#" onclick="simulation()">Mondladnung</a></li>
|
||||
<li><a href="#" onclick="$('#content').load('templates/AboutTemplate.html')">Info</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
Loading…
x
Reference in New Issue
Block a user