sowie Bootrap einegfügt für ein besseres Design und um eine mobile Ansicht der Website anzubieten.master
@@ -0,0 +1,45 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8" /> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<title>Notizen</title> | |||
<link rel="icon" href="img/faviconNotiz.ico"> | |||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> | |||
<link rel="stylesheet" href="/css/mobile.css"> | |||
</head> | |||
<body> | |||
<nav class="navbar navbar-expand-lg navbar-light bg-light"> | |||
<div class="container"> | |||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu"> | |||
<span class="navbar-toggler-icon"></span> | |||
</button> | |||
<div class="collapse navbar-collapse" id="navbarMenu"> | |||
<ul class="navbar-nav"> | |||
<li><a class="nav-link active" href="/Eintrag/">Einträge</a></li> | |||
<li><a class="nav-link" href="/">Home</a></li> | |||
</ul> | |||
</div> | |||
</div> | |||
</nav> | |||
<div class="container"> | |||
<h1 class="title">Notizeinträge</h1> | |||
<h2> | |||
Eintrag | |||
</h2> | |||
<p>Einträge zu Einkaufsnotizen.</p> | |||
<p>Hier ensteht eine Übersicht.</p> | |||
<img src="/einkaufswagen.jpg" alt="Foto von mir"> | |||
<p>Christian :-)</p> | |||
<script src="/lib/es6-shim.min.js"></script> | |||
<script src="/lib/jquery-2.2.4.min.js"></script> | |||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> | |||
<script src="/scripts/notizen.js"></script> | |||
</div> | |||
</body> | |||
</html> |
@@ -1,4 +1,21 @@ | |||
h2 small { | |||
| |||
.title { | |||
font-size: 65px; | |||
} | |||
h2 small { | |||
color: rgb(228, 122, 35); | |||
font-size: large; | |||
} | |||
h2 { | |||
background-color: #607d8b; | |||
color: #ffffff; | |||
} | |||
img { | |||
display: block; | |||
margin-left: auto; | |||
margin-right: auto; | |||
width: 50%; | |||
} |
@@ -2,25 +2,53 @@ | |||
<html> | |||
<head> | |||
<meta charset="utf-8" /> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<title>Notizen</title> | |||
<link rel="icon" href="img/faviconNotiz.ico"> | |||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> | |||
<link rel="stylesheet" href="css/mobile.css"> | |||
</head> | |||
<body> | |||
<h1>Notizen</h1> | |||
<nav class="navbar navbar-expand-lg navbar-light bg-light"> | |||
<div class="container"> | |||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu"> | |||
<span class="navbar-toggler-icon"></span> | |||
</button> | |||
<div class="collapse navbar-collapse" id="navbarMenu"> | |||
<ul class="navbar-nav"> | |||
<li><a class="nav-link active" href="/">Home</a></li> | |||
<li><a class="nav-link" href="/Eintrag/">Einträge</a></li> | |||
</ul> | |||
</div> | |||
</div> | |||
</nav> | |||
<div class="container"> | |||
<h1 class="title">Notizen</h1> | |||
<h2> | |||
Willkommen! | |||
<small>Meine Notizen mobil verfügbar</small> | |||
</h2> | |||
<p>Einkaufsnotizen.</p> | |||
<p>Sie können sich ruhig etwas umsehen. Im Blog dokumentiere ich meine Erfahrungen beim Programmieren. Daneben können Sie auch meine Webprojekte anschauen. Viel Spass.</p> | |||
<form> | |||
<label for="EinkaufsInput" >Einkaufsnotiz hinzufügen: </label> | |||
<input id="EinkaufsInput" value="" placeholder="Eingabe tätigen" type="text"> | |||
<button id="mehrEinkaufen">neuen Eintrag hinzufügen</button> | |||
</form> | |||
<form> | |||
<label for="NotizInput" >Alternative Notiz hinzufügen: </label> | |||
<input id="NotizInput" value="" placeholder="Eingabe tätigen" type="text"> | |||
<button id="mehrNotiz">neuen Eintrag hinzufügen</button> | |||
</form> | |||
<script src="scripts/notizen.js"></script> | |||
<img src="einkaufswagen.jpg" alt="Foto von mir"> | |||
<p>Marco :-)</p> | |||
<p>Christian :-)</p> | |||
<script src="lib/es6-shim.min.js"></script> | |||
<script src="lib/jquery-2.2.4.min.js"></script> | |||
<script src="scripts/notizen.js"></script> | |||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> | |||
</div> | |||
</body> | |||
</html> |
@@ -1,85 +1,84 @@ | |||
function simulation() { | |||
var v = -1000; | |||
var s = 50000; | |||
var fuel = 10000; | |||
var schub = false; | |||
update(); | |||
function switchOn() { | |||
update(); | |||
schub = true; | |||
} | |||
function switchOff() { | |||
update(); | |||
schub = false; | |||
} | |||
function a() { | |||
if (schub == false || fuel <= 0) | |||
return -1.63; | |||
else { | |||
fuel = fuel - 100; | |||
return -1.63 + 12; | |||
} | |||
} | |||
function update() { | |||
if (checkGameOver() == true) { | |||
setStartValues(); | |||
showCurrentValues() | |||
} | |||
else if ((checkGameOver() == false) && (s < 0) && (v > -10)) { | |||
setStartValues(); | |||
showCurrentValues(); | |||
} | |||
else { | |||
v = v + a(); | |||
s = s + v; | |||
showCurrentValues(); | |||
} | |||
} | |||
function checkGameOver() { | |||
if (s < 0) | |||
if (v < -10) { | |||
alert("Zerschellt. Game Over"); | |||
return true; | |||
} | |||
else { | |||
return false; | |||
} | |||
else { | |||
return false; | |||
} | |||
} | |||
function setStartValues() { | |||
v = -1000; | |||
s = 50000; | |||
fuel = 10000; | |||
schub = false; | |||
return; | |||
} | |||
window.onload = init; | |||
function init() { | |||
var button = document.getElementById('mehr'); | |||
button.onclick = ToDoHinzufügen; | |||
var clearButton = document.getElementById('loeschen'); | |||
clearButton.onclick = allesLöschen; | |||
var eintraegeArray = HolEinträge(); | |||
for (var i = 0; i < eintraegeArray.length; i++) { | |||
var aufgabeNr = eintraegeArray[i]; | |||
var value = JSON.parse(localStorage[aufgabeNr]); | |||
insDOMschreiben(aufgabeNr, value); | |||
} | |||
} | |||
function HolEinträge() { | |||
var eintraegeArray = localStorage.getItem('eintraegeArray'); | |||
if (!eintraegeArray) { | |||
eintraegeArray = []; | |||
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray)); | |||
} else { | |||
eintraegeArray = JSON.parse(eintraegeArray); | |||
} | |||
return eintraegeArray; | |||
} | |||
function showCurrentValues() { | |||
$("#height").html("Höhe: " + s + " m"); | |||
$("#speed").html("Geschwindigkeit: " + v + " m/s"); | |||
$("#fuel").html("Treibstoffvorrat: " + fuel + " l"); | |||
return; | |||
} | |||
function ToDoHinzufügen() { | |||
var eintraegeArray = HolEinträge(); | |||
var value = document.getElementById('eingabe').value; | |||
if(value!='') | |||
{ | |||
var currentDate = new Date(); | |||
var aufgabeNr = 'aufgabe_' + currentDate.getTime() | |||
var aufgabeText = {'value': value}; | |||
localStorage.setItem(aufgabeNr, JSON.stringify(aufgabeText)); | |||
eintraegeArray.push(aufgabeNr); | |||
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray)); | |||
insDOMschreiben(aufgabeNr, aufgabeText); | |||
document.getElementById('eingabe').value=' '; | |||
} | |||
else | |||
{ | |||
alert('Bitte geben Sie etwas ein!'); | |||
} | |||
} | |||
$("body").append("<div id='height'>Höhe: </div>"); | |||
$("body").append("<div id='speed'>Geschwindigkeit: </div>"); | |||
$("body").append("<div id='fuel'>Treibstoffvorrat: </div>"); | |||
function toDoLöschen(e) { | |||
var aufgabeNr = e.target.id; | |||
var eintraegeArray = HolEinträge(); | |||
if (eintraegeArray) { | |||
for (var i = 0; i < eintraegeArray.length; i++) { | |||
if (aufgabeNr == eintraegeArray[i]) { | |||
eintraegeArray.splice(i,1); | |||
} | |||
} | |||
localStorage.removeItem(aufgabeNr); | |||
localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray)); | |||
ausDOMentfernen(aufgabeNr); | |||
} | |||
} | |||
$("body").append("<button id='energy'>Triebwerk an</button>"); | |||
$("body").append("<button id='no-energy'>Triebwerk aus</button>"); | |||
function insDOMschreiben(aufgabeNr, ItemObj) { | |||
var eintraege = document.getElementById('eintraege'); | |||
var eintrag = document.createElement('li'); | |||
eintrag.setAttribute('id', aufgabeNr); | |||
eintrag.innerHTML = ItemObj.value; | |||
eintraege.appendChild(eintrag); | |||
eintrag.onclick = toDoLöschen; | |||
} | |||
$("#energy").click(switchOn); | |||
$("#no-energy").click(switchOff); | |||
function ausDOMentfernen(aufgabeNr) { | |||
var eintrag = document.getElementById(aufgabeNr); | |||
eintrag.parentNode.removeChild(eintrag); | |||
} | |||
$(document).ready(simulation); | |||
function allesLöschen() { | |||
localStorage.clear(); | |||
var ItemList = document.getElementById('eintraege'); | |||
var eintraege = ItemList.childNodes; | |||
for (var i = eintraege.length-1; i >= 0; i--) { | |||
ItemList.removeChild(eintraege[i]); | |||
} | |||
var eintraegeArray = HolEinträge(); | |||
} | |||