Beiträge von Teilzeit_Rambo

Teilzeit_Rambo · 28. Oktober 2021

Zitat von Sempervivum

Super, dass es so funktioniert.

Kaum versuche ich es im bestehenden Programm zu implementieren, funktioniert es nicht

Zitat von Sempervivum

Ich hatte es so verstanden, dass sich die Farbe der Kacheln unabhängig einstellt, d. h. 2. Kachel ist grün und wechselt beim Klick auf orange, 3. Kachel ist purple und wechselt beim Klick auf grey?

Ich glaube, ich habe mich falsch ausgedruckt, das tut mir Leid falls ich dadurch für Verwirrung gesorgt habe.

Jede Kachel soll zu Beginn weiß sein. Der dazugehörige Wert aus der DB ist 0.
Tag1: Keine Vorkommnisse = grün. Ich klicke die Kachel auf grün. Der Wert wird in der DB abgespeichert. Die anderen Kacheln bleiben unberührt.
Tag2: Kachel 1 ist grün, da der Wert in der DB dem für grün entspricht. Da es heute Probleme gab = orange klicke ich die zweite Kachel so lange, bis diese orange ist. Der Wert wird in der DB abgespeichert.

So soll das weitergehen.

Teilzeit_Rambo · 28. Oktober 2021

Danke, dass du mich so motivierst. Array ist angelegt, die Farben werden aus dem array genommen. Die Reihenfolge klappt auch.

Code

<div class="kasten">
        <div class="feld1" onclick="changeColor(this)">1</div>
        <div class="feld2" onclick="changeColor(this)">2</div>
        <div class="feld3" onclick="changeColor(this)">3</div>
        <div class="feld4" onclick="changeColor(this)">4</div>
       
      </div>

Code

var color = ['green', 'orange', 'purple', 'grey','red',];

var zaehlen = 0;
function changeColor(tile)
{
    tile.style.background =  color[zaehlen];
    zaehlen++;
    if (zaehlen>4)
    zaehlen =0;
}

Jetzt muss ich mir erstmal Gedanken machen, wie ich diese Werte weiter verarbeite. Ziel soll es sein, dass jede Kachel für einen Tag steht ( 4 Kacheln dienen erstmal nur der Orientierung). Die angeklickte Farbe soll zukünftig verknüpft mit dem aktuellen Tag in einer Datenbanktabelle abgespeichert werden. Hierdurch sollen zwei Sachen gewährleistet werden, eine Auswertung von einzelnen Tagen und die Speicherung der Daten.

Teilzeit_Rambo · 28. Oktober 2021

Also ich habe mal nachgelesen und geschaut, ob ich es geändert bekomme. Leider ist das nicht der Fall und so langsam verzweifel ich ...

Hier sind meine drei Codeblöcke

HTML: HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet.css">
    <title>Titel der Seite | Name der Website</title>
  </head>
  <body>
    
    <div class="kasten">
        <div class="feld1" onclick="changeColor(this)">1</div>
        <div class="feld2">2</div>
        <div class="feld3">3</div>
        <div class="feld4">4</div>
      </div>
    
  <script src="index.js"></script>
  </body>
</html>

Alles anzeigen

Code: Javascript

function changeColor(tile)
{
    tile.style.background = "blue";
}

Code: CSS

.kasten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr;
  gap: 4px 4px;
  grid-auto-flow: column dense;
  align-content: center;
  grid-template-areas:
    "feld1 feld2"
    "feld3 feld4";
  width: 100%;
  height: 50%;
}

.feld1 { grid-area: feld1;
background: red; }

.feld2 { grid-area: feld2;
  background: red;

}

.feld3 { grid-area: feld3; 
  background: red;
}

.feld4 { grid-area: feld4;
  background: red;
}

Alles anzeigen

Leider funktioniert der Eventlistener nicht ... oder eher gesagt, irgendwo mache ich noch einen fatalen Fehler

Teilzeit_Rambo · 28. Oktober 2021

Hallo Sempervivum,

da diese Thematik für mich neu ist brauche ich sicherlich erst was Zeit, um das gelesene zu verstehen und umzusetzen. Finde den Vorschlag mit dem Array sehr gut, das leuchtet ein und macht sehr viel Sinn.
Wie das mit dem Eventlistener funktioniert muss ich mir dann mal durchlesen.
Mit dem übergeben des geklcikten Feldes hat spontan nicht wirklich geklappt. Ich gebe dem ganzen jetzt gleich einen neuen Versuch.

Vielen Dank für deine Mühe

VG

Teilzeit_Rambo

Teilzeit_Rambo · 27. Oktober 2021

Hallo m.scatello,

vielen Dank für deine schnelle Antwort und entschuldige, wenn ich dir zu wenig Eigenleistung offenbart habe.

Zu erst habe ich die vier Felder als Button versehen

Code

<button onclick="changeColor()" class="feld1">1</button>
<button onclick="changeColor()" class="feld2">2</button>
<button onclick="changeColor()" class="feld3">3</button>
<button onclick="changeColor()" class="feld4">4</button>

Dann habe ich ein Script erstellt, welches in der css die background-farbe des feldes ändert:

Code

const name = document.querySelector(".feld1");
function changeColor() {
name.style.background = "green";

Habe aktuell die Schwierigkeit, dass ich das nur für ein Feld machen kann. Habe den selben Quellcode verwendet, jedoch beim querySelector feld 2 gewählt, da passiert garnichts mehr.
Des Weiteren habe ich leider keinen Ansatz, wie ich die Farben nach jeweiligem Klick ändere. Nutze ich da eine For-Schleife?

Teilzeit_Rambo · 27. Oktober 2021

Hallo zusammen,

ich habe folgendes Problem und finde leider nicht so wirklich den richtigen Weg, da Javascript für mich eine große Unbekannte ist.

Ich habe vier Cards / Kacheln, wie man es auch nennen mag definiert und per css gestyled.
Ich möchte, dass pro onclick auf die Kachel die background Farbe sich in einer bestimmten Reihenfolge ändert. Sprich Start Kacheln in weiß -> click Kacheln wird grün --> click Kachel wird orange > click Kacheln wird rot--> click Kachel wird grau > click Kacheln wird in Startfarbe gesetzt.

HTML

div class="card">
                    <div class="card-header">
                        <h3>
                            Sicherheit
                        </h3>
                    
                    </div>
                    <div class="card-content">
                        <div class="kasten">
                            <div class="feld1">1</div>
                            <div class="feld2">2</div>
                            <div class="feld3">3</div>
                            <div class="feld4">4</div>
                          </div>

                    </div>
                </div>

Alles anzeigen

CSS

.card-header {
    padding: 15px 30px;
    border-bottom: 1px solid var(--second-bg-color);
    position: relative;

.kasten {
            display: grid; 
            grid-auto-flow: column dense; 
            grid-auto-columns: 1fr 1fr 1fr 1fr; 
            grid-auto-rows: 1fr 1fr 1fr 1fr; 
            grid-template-columns: repeat(2, 1fr); 
            grid-template-rows: repeat(2, 1fr); 
            gap: 4px 4px; 
            grid-template-areas: 
              "feld1 feld2"
              "feld3 feld4"; 
            align-content: center; 
            width:100px; 
            height: 100px; 
            text-align: center;
          }
          .feld1 { grid-area: feld1; background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
          .feld2 { grid-area: feld2;background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
          .feld3 { grid-area: feld3;background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
          .feld4 { grid-area: feld4;background: var(--main-bg-color);
            color: var(--main-color);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }

Alles anzeigen

Könnt ihr mir bei diesem Problem helfen?

Liebe Grüße

Teilzeit_Rambo · 23. Oktober 2021

Hey Jonas,

nochmals vielen Dank für deinen Tipp. Ich habe es mit flexbox realisiert und es funktioniert. Sorry für die späte Rückmeldung, aber ich war noch im Urlaub

Besten Dank

Teilzeit_Rambo · 8. Oktober 2021

Zitat von jonas3344

Am Besten die beiden Anleitungen ganz schnell wieder vergessen und sich in Flexbox einlesen:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Vielen Dank für den Vorschlag. Ich schaue mir die Thematik "flexbox" an und setzte mich direkt an die Umsetzung

Teilzeit_Rambo · 8. Oktober 2021

Hallo zusammen,

ich zerbreche mir leider seit Tagen den Kopf und bräuchte eure geballte Unterstützung. Ich möchte für meine Abteilung ein kleines Dashboard erstellen. Ich möchte bis zu 21 Kacheln (7x3) darstellen auf der Frontansicht. Ich versuche aktuell 2 Sachen miteinander zu verbinden

Ich habe das Problem, dass diese Kacheln (siehe https://www.w3schools.com/howto/howto_css_column_cards.asp) unterschiedlich viele Zeilen haben. Ich möchte, dass diese Kacheln immer die selbe Höhe haben, abhängig vom Inhalt. In der oberen css erkenne ich, dass 4 Säulen erstellt werden (width: 25%). Diese würde ich für mein vorhaben auf 14.3% ändern. Leider klappt das mit der Höhe nicht so ganz. Hier versuche ich folgende Anleitung (siehe https://www.w3schools.com/howto/howto_css_equal_height.asp) anzuwenden, leider klappt das vorhaben nicht wie gewünscht. Kann mir da jemand weiterhelfen?

Viele Grüße vom teilzeit_rambo

Beiträge von Teilzeit_Rambo

Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Card soll Farbe bei onclick wechseln - in fester Reihenfolge

Identische Spaltenhöhe bei unterschiedlichem Inhalt

Identische Spaltenhöhe bei unterschiedlichem Inhalt

Identische Spaltenhöhe bei unterschiedlichem Inhalt