martinch59609
/
mdt5_webApplicationen
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

NotizenApp mit local storage programmiert. Local Storage Funktionen funktionieren, jedoch nicht die Navigation. 

Die Anzeige der Notizen funktioniert noch nicht richtig.
master
Christian Martin 3 years ago
parent
b3502d3b7d
commit
e4a4618380
22 changed files with 471 additions and 3 deletions
Split View Show Diff Stats
  1. 0
    2
      app/scripts/app.js
  2. 23
    0
      appV0/Eintrag/eintraege.html
  3. 0
    0
      appV0/css/mobile.css
  4. 0
    0
      appV0/einkaufswagen.jpg
  5. 0
    0
      appV0/img/faviconNotiz.ico
  6. 67
    0
      appV0/index.html
  7. 48
    0
      appV0/index.js
  8. 0
    0
      appV0/lib/es6-shim.min.js
  9. 0
    0
      appV0/lib/jquery-2.2.4.min.js
  10. 0
    0
      appV0/notizen.js
  11. 24
    1
      appV0/notizenEintrag.html
  12. 28
    0
      appV1/css/mobile.css
  13. BIN
      appV1/einkaufswagen.jpg
  14. 60
    0
      appV1/eintraege.html
  15. BIN
      appV1/img/faviconNotiz.ico
  16. 64
    0
      appV1/index.html
  17. 12
    0
      appV1/lib/es6-shim.min.js
  18. 4
    0
      appV1/lib/jquery-2.2.4.min.js
  19. 46
    0
      appV1/notizen.js
  20. 34
    0
      appV1/notizenAusgabe.js
  21. 33
    0
      appV1/test.html
  22. 28
    0
      appV1/test2.html

+ 0
- 2
app/scripts/app.js View File

@@ -1,2 +0,0 @@

alert("Hello World!");

app/Eintrag/index.html → appV0/Eintrag/eintraege.html View File

@@ -40,6 +40,29 @@
<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>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBGML4iAFtqv-l1Xxcguk9rww82060MqVY",
authDomain: "notizenapp-e3416.firebaseapp.com",
databaseURL: "https://notizenapp-e3416.firebaseio.com",
projectId: "notizenapp-e3416",
storageBucket: "notizenapp-e3416.appspot.com",
messagingSenderId: "794357045429",
appId: "1:794357045429:web:5035e6ba66cb4b534786fc",
measurementId: "G-CRZFWJ08LQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</div>
</body>
</html>

app/css/mobile.css → appV0/css/mobile.css View File


app/einkaufswagen.jpg → appV0/einkaufswagen.jpg View File


app/img/faviconNotiz.ico → appV0/img/faviconNotiz.ico View File


+ 67
- 0
appV0/index.html View File

@@ -0,0 +1,67 @@
<!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>
<div class="container">
<h1 class="title">Notizen</h1>
<h2>
Willkommen!
<small>Meine Notizen mobil verfügbar</small>
</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email Addresse</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Passwort</label>
<input type="password" class="form-control" id="InputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-light" id="btnLogin">Login</button>
<button type="submit" class="btn btn-primary" id="btnSignUp">Sign Up</button>
<button type="submit" class="btn btn-secondary" id="btnLogout">Logout</button>
</form>
<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>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-firestore.js"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBGML4iAFtqv-l1Xxcguk9rww82060MqVY",
authDomain: "notizenapp-e3416.firebaseapp.com",
databaseURL: "https://notizenapp-e3416.firebaseio.com",
projectId: "notizenapp-e3416",
storageBucket: "notizenapp-e3416.appspot.com",
messagingSenderId: "794357045429",
appId: "1:794357045429:web:5035e6ba66cb4b534786fc",
measurementId: "G-CRZFWJ08LQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="index.js"></script>
</div>
</body>
</html>

+ 48
- 0
appV0/index.js View File

@@ -0,0 +1,48 @@

//Get elements

const txtEmail = document.getElementById('InputEmail1');
const txtPassword = document.getElementById('InputPassword1');
const btnLogin = document.getElementById('btnLogin');
const btnSignUp = document.getElementById('btnSignUp');
const btnLogout = document.getElementById('btnLogout');

// Add login event
btnLogin.addEventListener('click', e => {
// Get email and pass
const email = txtEmail.value;
const pass = txtPassword.value;
const auth = firebase.auth();
// Sign in
const promise = auth.signInWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
promise.then(function (user) {
// success
console.log("Email: " + user.email);
window.location.href = "notizenEintrag.html";
})
});

// Add signup event
btnSignUp.addEventListener('click', e => {
// Get email and pass
const email = txtEmail.value;
const pass = txtPassword.value;
const auth = firebase.auth();
// Sign in
const promise = auth.createUserWithEmailAndPassword(email, pass);
promise.catch(e => console.log(e.message));
promise.then(function (user) {
// success
console.log("Email: " + user.email);
window.location.href = "notizenEintrag.html";
})
alert("SignUp gedrückt");

});

btnLogout.addEventListener('click', e => {
firebase.auth().signOut();

});


app/lib/es6-shim.min.js → appV0/lib/es6-shim.min.js View File


app/lib/jquery-2.2.4.min.js → appV0/lib/jquery-2.2.4.min.js View File


app/scripts/notizen.js → appV0/notizen.js View File


app/index.html → appV0/notizenEintrag.html View File

@@ -39,7 +39,7 @@
<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>
<script src="notizen.js"></script>

<img src="einkaufswagen.jpg" alt="Foto von mir">

@@ -49,6 +49,29 @@
<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>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBGML4iAFtqv-l1Xxcguk9rww82060MqVY",
authDomain: "notizenapp-e3416.firebaseapp.com",
databaseURL: "https://notizenapp-e3416.firebaseio.com",
projectId: "notizenapp-e3416",
storageBucket: "notizenapp-e3416.appspot.com",
messagingSenderId: "794357045429",
appId: "1:794357045429:web:5035e6ba66cb4b534786fc",
measurementId: "G-CRZFWJ08LQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</div>
</body>
</html>

+ 28
- 0
appV1/css/mobile.css View File

@@ -0,0 +1,28 @@

.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%;
}

.shadow-textarea textarea.form-control::placeholder {
font-weight: 300;
}
.shadow-textarea textarea.form-control {
padding-left: 0.8rem;
}

BIN
appV1/einkaufswagen.jpg View File


+ 60
- 0
appV1/eintraege.html View File

@@ -0,0 +1,60 @@
<!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/">Notizen</a></li>
<li><a class="nav-link" href="/">Neue Notiz eintragen</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1 class="title">Notizeinträge</h1>
<h2>
Übersicht
</h2>

Text: <br>
<textarea id="elem"></textarea> <br>

<form>
<div class="form-group">
<label for="NotizInputKey">Notiz nach Thema löschen</label>
<input type="NotizInputKey" class="form-control" id="key" placeholder="Thema">
</div>
<div class="form-group shadow-textarea">
<textarea class="form-control z-depth-1" id="data" rows="3"></textarea>
</div>

<button type="submit" class="btn btn-light" id="delete_key">Notiz nach Thema löschen</button>
<button type="submit" class="btn btn-light" id="delete_all">Alle Notizen löschen</button>
</form>


<script src="notizenAusgabe.js"></script>


<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>
</div>
</body>
</html>

BIN
appV1/img/faviconNotiz.ico View File


+ 64
- 0
appV1/index.html View File

@@ -0,0 +1,64 @@
<!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="/">Neue Notiz eintragen</a></li>
<li><a class="nav-link" href="/Eintrag/">Notizen</a></li>
</ul>
</div>
</div>
</nav>

<div class="container">
<h1 class="title">Notizen</h1>
<h2>
Willkommen!
<small>Meine Notizen mobil verfügbar</small>
</h2>

Text: <br>
<textarea id="elem"></textarea> <br>


<form>
<div class="form-group">
<label for="NotizInputKey">Thema für neue Notiz</label>
<input type="NotizInputKey" class="form-control" id="key" placeholder="Thema">
</div>
<div class="form-group shadow-textarea">
<label for="data">Neue Notiz</label>
<textarea class="form-control z-depth-1" id="data" rows="3" placeholder="Schreibe etwas..."></textarea>
</div>
<button type="submit" class="btn btn-light" id="Speichern">Neue Notiz speichern</button>
<button type="submit" class="btn btn-primary" id="Lesen" >Notizen lesen</button>
<button type="submit" class="btn btn-light" id="delete_key">Notiz nach Thema löschen</button>
<button type="submit" class="btn btn-light" id="delete_all">Alle Notizen löschen</button>
</form>
<script src="notizen.js"></script>

<img src="einkaufswagen.jpg">

<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>
</div>
</body>
</html>

+ 12
- 0
appV1/lib/es6-shim.min.js
File diff suppressed because it is too large
View File


+ 4
- 0
appV1/lib/jquery-2.2.4.min.js
File diff suppressed because it is too large
View File


+ 46
- 0
appV1/notizen.js View File

@@ -0,0 +1,46 @@
const btnWeiterleiten = document.getElementById('Lesen');
const btnSpeichern = document.getElementById('Speichern');
const btnLoeschenKey = document.getElementById('delete_key');
const btnAllesLoeschen = document.getElementById('delete_all');



function speichern() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
window.localStorage.setItem(key, data);
alert(data);
}

function weiterleiten() {

window.open('eintraege.html','Lesen');
}

btnSpeichern.addEventListener('click', e => {
speichern()});

btnWeiterleiten.addEventListener('click', e => {
weiterleiten()});


function loeschen() {
var key = document.getElementById('key').value;
window.localStorage.removeItem(key);
alert(key);
}

function allesLoeschen() {
window.localStorage.clear();
}

btnLoeschenKey.onclick
btnLoeschenKey.addEventListener('click', e => {
loeschen()});

btnAllesLoeschen.addEventListener('click', e => {
allesLoeschen()});





+ 34
- 0
appV1/notizenAusgabe.js View File

@@ -0,0 +1,34 @@

const btnLoeschenKey = document.getElementById('delete_key');
const btnAllesLoeschen = document.getElementById('delete_all');

auslesen();


function auslesen() {

var count = window.localStorage.length;
for (let i=0; i<=count; i++) {
var keyname = window.localStorage.key(i);
document.getElementById('elem').value = window.localStorage.getItem("Haus");
}
}


function loeschen() {
var key = document.getElementById('key').value;
window.localStorage.removeItem(key);
}

function allesLoeschen() {
window.localStorage.clear();
}


btnLoeschenKey.addEventListener('click', e => {
loeschen()});

btnAllesLoeschen.addEventListener('click', e => {
allesLoeschen()});


+ 33
- 0
appV1/test.html View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>

<script>
function speichern() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
window.localStorage.setItem(key, data);
}

function lesen() {
var key = document.getElementById('key').value;
document.getElementById('data').value = window.localStorage.getItem(key);
}
</script>

</head>
<body>

Text: <br>
<textarea id="data"></textarea> <br>
Schlüssel: <input type="text" id="key">
<input type="button" id="save" value="Speichern">
<script>
var btnSpeichern = document.getElementById('save');
btnSpeichern.addEventListener('click', e => {
speichern()});
</script>
<input type="button" value="Lesen" onclick="lesen()">

</body>
</html>

+ 28
- 0
appV1/test2.html View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>

<script>
function speichern() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
window.localStorage.setItem(key, data);
}

function lesen() {
var key = document.getElementById('key').value;
document.getElementById('data').value = window.localStorage.getItem(key);
}
</script>

</head>
<body>

Text: <br>
<textarea id="data"></textarea> <br>
Schlüssel: <input type="text" id="key">
<input type="button" value="Speichern" onclick="speichern()">
<input type="button" value="Lesen" onclick="lesen()">

</body>
</html>

Write Preview
Loading…
Cancel
Save