✔ Komplexe Aufgabe

[Flo1983]

Servus

ich hab ein kleines Problem und zwar habe ich eine Woche Unetrricht verpasst in dem JavaScript unterrichtet wurde und heute haben wir eine Aufgabe bekommen die ich so nicht hinbekomme vll habt ihr ja ne idee wie man sowas lösen kann.

Aufgabe

8 Datensätze die durch einen Zufallsgenerator generiert werden bei druck auf einen Button
die Datensätze sollen bestehen aus Zufalls Vorname, Zufalls Name, Zufalls Alter und Zufalls Verdienst.

diese Datensätze sollen ausgegeben werden in einer Tabelle und neben Alter und Verdienst soll ein Button positioniert werden bei dem die Daten entsprechend nach Alter oder nach Gehalt in 8 Charts (Balken Diagramm) dargestellt werden.

Betätigt man den "Start" Button soll das spiel von neuem beginnen und erst nach betätigen des jeweiligen Button Alter oder Gehalt entsprechend die Charts erstellen.

Wenn jemand eine Idee hat auch gerne per PM ich bin gerade echt am verzweifeln brauche die funktionen am Freitag für eine Klausur.

Grüße Flo

 

[abdellaui]

Falls Vor-/ Name aus einem Array zufällig ausgelesen werden, ist dies leicht realisierbar.

Beachte:
Ich habe mir keine Mühe für das Optische gegeben. Ebenso habe ich bei der Diagramausgabe nicht auf Achsenbeschriftigungen beachtet.


JavaScript:

function generateZufallsObject(){
var vorname = ['Hans','Peter','Müller','Frank'];                   // Index [0,3]
var nachname = ['Mustermann','Olaf','Wilhelm','Bismark'];    // Index [0,3]
var zufallVName = Math.floor(Math.random() * 3);                       // Interval [0;3] siehe vorname Index
var zufallNName = Math.floor(Math.random() * 3);                       // Interval [0;3] siehe nachname Index
var zufallAlter = Math.floor(Math.random() * (100-16+1)) + 16;    // Interval [16;100]
var zufallVerdienst = Math.floor(Math.random() * (10000-450+1)) + 450;    // Interval [450;10000] -> Monatsgehalt
return '<tr id="appendBitteHier"><td>'+vorname[zufallVName]+'</td><td>'+nachname[zufallNName]+'</td><td class="alterDaten" value="'+zufallAlter+'">'+zufallAlter+' Jahre<button onclick="balken(1);">Diagram</button></td><td class="verdienstDaten" value="'+zufallVerdienst+'">'+zufallVerdienst+',- €<button onclick="balken(0);">Diagram</button></td></tr>';
}
spielStart = function(){
var ausgabeGen = "";
for(a=1;a<=8;a++){
   ausgabeGen += generateZufallsObject();
}
var ausgabe = '<table><tbody><th>Vorname</th><th>Nachname</th><th>Alter</th><th>Verdienst</th></tbody>'+ausgabeGen+'<table>';
document.getElementById("inhaltSpeicher").innerHTML = ausgabe;
}
balken = function(x){
if(x==1){
   var className = "alterDaten";
   var titel = "Altersübersicht";
}else{
   var className = "verdienstDaten";
   var titel = "Gehaltsübericht";
}
var elements = document.getElementsByClassName(className);
var arr = [];
var summe = 0;
for(var i=0; i<elements.length; i++) {
   var wert = parseInt(elements[i].getAttribute("value"));
  arr[i] = wert;
  summe += wert;
}
var ausgabeGen = "";
for(var i=0; i<elements.length; i++) {
   var prozent = (arr[i]/summe)*100;
   ausgabeGen +=  '<div class="balken" style="width:'+prozent+'%;"> '+arr[i]+'</div>';
}
ausgabe = '<center>'+titel+'</center><div class="balkenHalter">'+ausgabeGen+'</div>';
document.getElementById("inhaltSpeicher").innerHTML = ausgabe;
}
// falls beim Laden schon einmal das "Spiel" ausgeführt werden soll, so kommentiere dies aus:
/*
spielStart();
*/

HTML:

<button onclick="spielStart();">
Start
</button>
<div id="inhaltSpeicher"></div>

CSS:

table{
  width:100%;
}
th{
  text-align:left;
}
tr,td{
  clear:both;
}
td button{
  float:right;
}
div.balken{
  display:block;
  background:red;
  border:2px solid black;
  text-align:left;
  font-size:10px;
  margin: 15px -2px;
}
div.balkenHalter{
  min-height:100%;
  border:2px solid black;
  position:relative;
  margin:20px;
}

Zusätzlich JSFIDDLE:
https://jsfiddle.net/4banzst8/6/

PS:
Man lernt nicht für die Klasur, sondern für's Leben.

 

[Flo1983]

WOW... ich bin sprachlos

Ich danke dir.

Ich lerne durch Klausuren für das Leben ;-)