sowie Bootrap einegfügt für ein besseres Design und um eine mobile Ansicht der Website anzubieten.master
<!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> |
h2 small { | |||||
| |||||
.title { | |||||
font-size: 65px; | |||||
} | |||||
h2 small { | |||||
color: rgb(228, 122, 35); | color: rgb(228, 122, 35); | ||||
font-size: large; | font-size: large; | ||||
} | } | ||||
h2 { | |||||
background-color: #607d8b; | |||||
color: #ffffff; | |||||
} | |||||
img { | |||||
display: block; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
width: 50%; | |||||
} |
<html> | <html> | ||||
<head> | <head> | ||||
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
<title>Notizen</title> | <title>Notizen</title> | ||||
<link rel="icon" href="img/faviconNotiz.ico"> | <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"> | <link rel="stylesheet" href="css/mobile.css"> | ||||
</head> | </head> | ||||
<body> | <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> | <h2> | ||||
Willkommen! | Willkommen! | ||||
<small>Meine Notizen mobil verfügbar</small> | <small>Meine Notizen mobil verfügbar</small> | ||||
</h2> | </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"> | <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/es6-shim.min.js"></script> | ||||
<script src="lib/jquery-2.2.4.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> | </body> | ||||
</html> | </html> |
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(); | |||||
} | |||||