Objekt-Übung

Ein Einkaufsliste für die Familie:

Unter Arrays/Kleines Beispiel habe ich schon einen Einkaufsliste geschrieben.

Diesmal versuchen wir es mit einem Objekt mit 3 Instanzen:
Einer Einkaufsliste für die Familie:
  • Eine für Mutter mom
  • Eine für Vater dad
  • Eine für Schwester sister

Was benötigen wir dafür?
  • Ein Objekt namens Einkaufsliste()
  • Eine Methode um den jeweiligen Eintrag zu speichern store
  • Eine Methode um die jeweiligen Einträge in die Liste zu schreiben writeToArea
  • Eine Methode um den letzten Eintrag der jeweiligen Liste zu löschen delLastEntrie
  • Eine Methode um alle Einträge der jeweiligen Liste zu löschen delAllEntries
Das sollte es auch schon gewesen sein.
function Einkaufsliste(){

   // Speichern
   this.store = function (id){
      // Ausführung
   }

   // Schreiben in die Liste
   this.writeToArea = function(){
      // Ausführung
   }

   // Letzten Eintrag löschen
   this.delLastEntrie = function(){
      // Ausführung
   }

   // Alle Einträge löschen
   this.delAllEntries = function(){
      // Ausführung
   }
}

const mom = new Einkaufsliste();
const dad = new Einkaufsliste();
const sister = new Einkaufsliste();


Kopiert Euch gerne den Code und probiert es aus: Code
Einkaufsliste für:

Mutter

Eintrag Mutter

Vater

Eintrag Vater

Schwester

Eintrag Schwester



Code 

HTML:

<ul class="beispiel-ul">

<div class="center fett">Einkaufsliste für:</div>
<br>
<div class="listen-wrapper flex">
	<div class="liste liste-1">
		<div class="center fett">Mutter</div>
		<div id="list_mom" class="myTextarea"></div>
		<p>
			Eintrag Mutter<br>
			<input id="tetx_1" type="text" class="myInput" value=""  
			name="entrie_mom" placeholder="Was brauchst Du?">
		</p>
		<p>
			<input id="mom" type="button" 
			value="Speicher Eintrag" class="save-list" 
			onclick="mom.store(this.id)">
			<input id="mom_del_lastEntrie_1" 
			type="button" value="Lösche letzen Eintrag" class="del-list" 
			onClick="mom.delLastEntrie();">
			<input id="mom_del_allEntries_1" 
			type="button" value="Lösche alle Einträge" class="del-list" 
			onClick="mom.delAllEntries();">
		</p>
	</div>
	<div class="liste liste-2">
		<div class="center fett">Vater</div>
		<div id="list_dad" class="myTextarea"></div>
		<p>
			Eintrag Vater<br>
			<input id="tetx_2" type="text" class="myInput" 
			value=""  name="entrie_dad" 
			placeholder="Was brauchst Du?">
		</p>
		<p>
			<input id="dad" type="button" 
			value="Speicher Eintrag" class="save-list" 
			onClick="dad.store(this.id)">
			<input id="dad_del_lastEntrie" 
			type="button" value="Lösche letzen Eintrag" class="del-list"
			onClick="dad.delLastEntrie();">
			<input id="dad_del_allEntries_2" 
			type="button" value="Lösche alle Einträge" class="del-list" 
			onClick="dad.delAllEntries();">
		</p>
	</div>
	<div class="liste liste-3">
		<div class="center fett">Schwester</div>
		<div id="list_sister" class="myTextarea"></div>
		<p>
			Eintrag Schwester<br>
			<input id="tetx_3" type="text" class="myInput" 
			value=""  name="entrie_sister" 
			placeholder="Was brauchst Du?">
		</p>
		<p>
			<input id="sister" 
			type="button" value="Speicher Eintrag" class="save-list" 
			onClick="sister.store(this.id)">
			<input id="sister_del_lastEntrie" 
			type="button" value="Lösche letzen Eintrag" class="del-list" 
			onClick="sister.delLastEntrie();">
			<input id="sister_del_allEntries_2" 
			type="button" value="Lösche alle Einträge" class="del-list" 
			onClick="sister.delAllEntries();">
		</p>
	</div>
</div>









CSS:

.center{
	text-align:center;
}

.fett{
	font-weight:900;
}

.listen-wrapper {
	border:1px solid black;
}
.flex{
	display:flex;
	justify-content: center;
}

.liste{
	display:inline-block;
	text-align:center;
	padding:5px;
}

.myTextarea{
	width:150px;
	height:200px;
	margin:5px auto;
	resize:none;
}

#list_mom, 
#list_dad, 
#list_sister{
    border: 1px solid white;
    text-align: left;
    padding: 5px;
}

.save-list, .del-list{
	display:block;
	margin: 3px auto;
	width: 150px;
	color: black !important;
	font-size: 13px;
	cursor:pointer;
}

.myInput {
    width: 130px;
    height: 15px;
    margin-top: 10px;
    color: black !important;
    border: 1px solid black;
}

.example-wrapper{
	margin-right: 10px;
}






JavaScript:

// Object erzeugen
function Einkaufsliste(){
 // Das ist der Zettel
 this.areaId 		= ''; 
 // Das Eingabefeld
 this.myEntrieId 	= '';
 // Der Value des Eingabefeldes
 this.entrieValue	= '';
 // Array um die Eintraege zu speichern
 this.liste 			= [];
 // Laenge des Arrays
 this.listeLength	= 0;	
 // Zaehler
 this.count			= 0;
 
 this.store = function (id){
  this.areaId 			= 'list_'+id; 
  this.myEntrieId 		= 'entrie_'+id;
  this.entrieValue = 
  document.querySelector('input[name='+this.myEntrieId+']').value;
  if(this.entrieValue != ''){
 	this.liste[this.count] 	= this.entrieValue;
 	document.querySelector('input[name='+this.myEntrieId+']').value = '';
 	document.querySelector('input[name='+this.myEntrieId+']').focus();
 	this.count++;
 	this.writeToArea();
   }
 };
 
 this.writeToArea = function(){
  this.listeLength = this.liste.length;
  let text = '';
  for(let i = 0; i < this.listeLength; i++){
  	text += this.liste[i]+"<br>";
  }
  document.querySelector('div[id='+this.areaId+']').innerHTML = text;
  return true;
 };
 
 this.delLastEntrie = function(){
  if( this.count > 0 ){
 	this.liste.pop();
 	this.count--;
 	this.writeToArea();
  }
 };
 
 this.delAllEntries = function(){
  if( this.count > 0 ){
 	this.liste.length 	= 0;
 	this.count 			= 0;
 	this.writeToArea();	
  }
 }
}

// Erzeugen der Instanzen
const mom 	 = new Einkaufsliste();
const dad 	 = new Einkaufsliste();
const sister = new Einkaufsliste();