Frontend – die neusten Beiträge

Verwandte Themen
maetin944
02.04.2025, 16:41

JQuery Code umschreiben value "1" und value "2"?

Kann man den Code so umschreiben oder ändern, dass wenn man zurück auf keine_dieser_Krankheiten anklickt, dass dann alle Felder _Erkrankungen den value "1" zurück bekommen?

$(document).ready(function() {
  let krankheitenCheckboxes = $("input[type='checkbox'][name$='_Erkrankungen']").not("#keine_dieser_Krankheiten");
  let keineCheckbox = $("#keine_dieser_Krankheiten");
  
  function updateValues() {
    krankheitenCheckboxes.each(function() {
      let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
      if ($(this).prop("checked")) {
        hiddenInput.val("2");
      } else {
        hiddenInput.val("1");
      }
    });
  }
  
  krankheitenCheckboxes.on("change", function() {
    if ($(this).prop("checked")) {
      keineCheckbox.prop("checked", false);
      $("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
    }
    updateValues();
  });
  
  keineCheckbox.on("change", function() {
    if (keineCheckbox.prop("checked")) {
      // Setzt alle _Erkrankungen Felder auf "1"
      krankheitenCheckboxes.each(function() {
        $(this).prop("checked", false);
        let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
        hiddenInput.val("1");
      });
      $("input[type='hidden'][name='keine_dieser_Krankheiten']").val("2");
    } else {
      $("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
    }
    updateValues();
  });
  
  updateValues();
});
HTML, Webseite, JavaScript, HTML5, Code, JQuery, Programmiersprache, Script, Webentwicklung, Frontend
2 Antworten
marcus09421
10.03.2025, 22:03
Mit Links

Wieso geht der Code nicht?

Hallo

Ich möchte mit js ein Programm bauen, welches meinen Körper erkennt und dort drauf dann ein T-Shirt-Modell legt. Also so eine virtuelle Garderobe quasi. Wieso geht der Code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Try-On Final</title>
<style>
 body { margin: 0; overflow: hidden; }
 #webcam {
  position: absolute;
  transform: scaleX(-1);
  opacity: 0.5;
  z-index: 1;
 }
 #output {
  position: absolute;
  z-index: 2;
 }
</style>
</head>
<body>
<video id="webcam" autoplay playsinline></video>
<canvas id="output"></canvas>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
const video = document.getElementById('webcam');
const output = document.getElementById('output');
let net, scene, camera, renderer, shirt;
let bodyPosition = { x: 0, y: 0, width: 0, height: 0 };
async function setupWebcam() {
 try {
  const stream = await navigator.mediaDevices.getUserMedia({
   video: {
    width: { ideal: 640 },
    height: { ideal: 480 },
    facingMode: 'user'
   }
  });
  video.srcObject = stream;
  
  return new Promise(resolve => {
   video.onloadedmetadata = () => {
    output.width = video.videoWidth;
    output.height = video.videoHeight;
    resolve();
   };
  });
 } catch (error) {
  console.error('Webcam error:', error);
  alert('Bitte Webcam-Zugriff erlauben!');
 }
}
function initThreeJS() {
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera(
  60,
  output.width / output.height,
  0.1,
  1000
 );
 camera.position.set(0, 0, 2);
 renderer = new THREE.WebGLRenderer({
  canvas: output,
  alpha: true,
  antialias: true
 });
 renderer.setClearColor(0x000000, 0);
 // Beleuchtung
 const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
 scene.add(ambientLight);
 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
 directionalLight.position.set(0, 2, 5);
 scene.add(directionalLight);
 loadShirtModel();
}
async function loadShirtModel() {
 const loader = new THREE.GLTFLoader();
 try {
  const gltf = await loader.loadAsync('tshirt_model.glb');
  shirt = gltf.scene;
  
  // Material-Anpassung
  shirt.traverse(child => {
   if (child.isMesh) {
    child.material = new THREE.MeshPhongMaterial({
     color: 0xffffff,
     transparent: true,
     opacity: 0.9,
     depthWrite: false
    });
   }
  });
  shirt.scale.set(0.3, 0.3, 0.3);
  scene.add(shirt);
  console.log('T-Shirt Modell geladen');
 } catch (error) {
  console.error('Modellfehler:', error);
  addFallbackCube();
 }
}
function addFallbackCube() {
 const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
 const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
 shirt = new THREE.Mesh(geometry, material);
 scene.add(shirt);
}
function calculateBodyPosition(segmentation) {
 const data = segmentation.data;
 let minX = Infinity, maxX = -Infinity;
 let minY = Infinity, maxY = -Infinity;
 for (let y = 0; y < segmentation.height; y++) {
  for (let x = 0; x < segmentation.width; x++) {
   if (data[y * segmentation.width + x] === 1) {
    minX = Math.min(minX, x);
    maxX = Math.max(maxX, x);
    minY = Math.min(minY, y);
    maxY = Math.max(maxY, y);
   }
  }
 }
 if (minX !== Infinity) {
  bodyPosition = {
   x: (minX + maxX) / 2,
   y: (minY + maxY) / 2,
   width: maxX - minX,
   height: maxY - minY
  };
 }
}
function updateShirtPosition() {
 if (!shirt) return;
 // Koordinatenumrechnung
 const x = (bodyPosition.x / output.width - 0.5) * 2;
 const y = -(bodyPosition.y / output.height - 0.5) * 2;
 
 shirt.position.set(x, y, 0);
 
 // Skalierung basierend auf Körpergröße
 const scaleFactor = bodyPosition.height / output.height * 2;
 shirt.scale.set(scaleFactor, scaleFactor, scaleFactor);
}
async function detectBody() {
 try {
  // Ganzkörper-Segmentierung
  const segmentation = await net.segmentPerson(video, {
   segmentationThreshold: 0.7,
   internalResolution: 'high',
   maxDetections: 1
  });
  calculateBodyPosition(segmentation);
  updateShirtPosition();
  // Rendering
  const ctx = output.getContext('2d');
  ctx.clearRect(0, 0, output.width, output.height);
  renderer.render(scene, camera);
  requestAnimationFrame(detectBody);
 } catch (error) {
  console.error('Detektionsfehler:', error);
 }
}
(async () => {
 await setupWebcam();
 net = await bodyPix.load({
  architecture: 'ResNet50',
  outputStride: 32,
  quantBytes: 2
 });
 initThreeJS();
 detectBody();
})();
</script>
</body>
</html>

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Datenbank, Programmiersprache, Webentwicklung, Frontend
1 Antwort
EchoTech
17.02.2025, 11:58

JavaScript: Wie kann ich eine große Tabelle schneller sortieren?

Hallo zusammen,

ich habe eine große Tabelle in meiner ASP.NET Core Razor Pages Anwendung, die ich clientseitig mit JavaScript sortieren möchte.

Allerdings dauert die Sortierung bei einer großen Datenmenge zu lange, und ich suche nach einer performanten Lösung.

Meine aktuelle Implementierung:

Ich nutze Array.sort() und vergleiche Strings und Zahlen entsprechend, das funktioniert aber das ist nicht effizient genug.

Besonders wenn die Tabelle viele Zeilen (z. B. >10.000) hat, wird die Sortierung langsam.

Meine Anforderungen:

✅ Die Sortierung muss komplett in JavaScript (clientseitig) erfolgen

✅ Sie muss sowohl Texte (Strings mit Umlaute, Sonderzeichen, etc.) als auch Zahlen (inkl. Währungen mit €) schnell sortieren

✅ Die Tabelle wird nachträglich dynamisch mit Daten befüllt (also keine initiale Sortierung im Backend möglich)

✅ Die Lösung soll sehr schnell auch bei großen Datenmengen sein

Ich habe bereits probiert:

❌ Array.sort() (wird langsam bei vielen Zeilen)

❌ localeCompare() (korrekt für Strings, aber langsam)

❌ TypedArrays für Zahlenwerte (bringt nicht genug Speed)

Gibt es eine bessere Möglichkeit, eine HTML-Tabelle performant zu sortieren?

Vielleicht mit Web Worker, einer anderen Datenstruktur oder anderen Algorithmen?

oder gibt es andere Funktionen/Möglichkeiten, die ich noch probieren kann?

hier mein aktueller Ansatz:

Tabelle:

    <div class="col-lg-9 col-md-7 col-12">
      <div class="table-container">
        <table class="table-modern table-hover w-100" id="statistikTable">
          <thead>
            <tr>
              <th onclick="sortTable(0, this)">Datum <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(1, this)">PID <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(2, this)">Nachname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(3, this)">Vorname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(4, this)">Rechnungsnetto <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(5, this)">Belegnummer <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
            </tr>
          </thead>
          <tbody>
            @if (Model.StatistikData != null && Model.StatistikData.Rows.Count > 0)
            {
              foreach (DataRow row in Model.StatistikData.Rows)
              {
                <tr>
                  <td>@(((DateTime)row["Datum"]).ToString("dd.MM.yyyy"))</td>
                  <td>@row["PID"]</td>
                  <td>@row["KundeNachname"]</td>
                  <td>@row["KundeVorname"]</td>
                  <td>@Convert.ToDecimal(row["Rechnungsnetto"]).ToString("N2")</td>
                  <td>@row["Belegnummer"]</td>
                </tr>
              }
            }
            else
            {
              <tr>
                <td colspan="6" class="text-center">Keine Daten gefunden</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>

meine sort Funktion:

  function sortTable(columnIndex, header) {
    const table = document.getElementById("statistikTable");
    const tbody = table.tBodies[0];
    const rows = Array.from(tbody.rows);
    const ascending = table.dataset.sortOrder !== "asc";

    const isNumericColumn = !isNaN(parseFloat(rows[0].cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()));

    let sortedRows;
    if (isNumericColumn) {
      sortedRows = rows
        .map(row => ({
          element: row,
          value: parseFloat(row.cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()) || 0
        }))
        .sort((a, b) => ascending ? a.value - b.value : b.value - a.value);
    } else {
      const collator = new Intl.Collator("de", { numeric: true, sensitivity: "base" });
      sortedRows = rows
        .map(row => ({
          element: row,
          value: row.cells[columnIndex].textContent.trim()
        }))
        .sort((a, b) => ascending ? collator.compare(a.value, b.value) : collator.compare(b.value, a.value));
    }

    const fragment = document.createDocumentFragment();
    sortedRows.forEach(({ element }) => fragment.appendChild(element));
    tbody.appendChild(fragment);

    table.dataset.sortOrder = ascending ? "asc" : "desc";

    updateSortIcons(header, ascending);
  }

  function updateSortIcons(header, ascending) {
    document.querySelectorAll(".sort-icon").forEach(icon => {
      icon.src = "/img/dgvsort.png";
      icon.style.display = "inline";
    });

    const icon = header.querySelector(".sort-icon");
    if (icon) {
      icon.src = ascending ? "/img/dgvsortup.png" : "/img/dgvsortdown.png";
      icon.style.display = "inline";
    }
  }

Freue mich über jede Hilfe! 😊

HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung, Frontend
3 Antworten
haveyou
15.01.2025, 12:28

Wie kann der Scroll-Button ausgeblendet werden bzw. eingeblendet?

Warum funktioniert es nicht, der Button bleibt von Anfang bis Ende der Seite eingeblendet.

Ich möchte eine JS -Funktion schreiben, die diesen Button erst einblendet, wenn der Nutzer ein Stück weit herunter gescrollt hat. Ebenso soll der Button versteckt werden, wenn der Nutzer wieder nach oben gescrollt hat.

Mein bisheriger Code:

HTML:  
   <a href="#" id="topButton">Nach oben</a>

CSS: 
#topButton {
    position: fixed;
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 30px; /* Abstand vom rechten Rand */
    background-color: #007BFF; /* Blau */
    color: white; /* Weißer Text */
    padding: 10px 15px; /* Innenabstand */
    border: none; /* Kein Rand */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: 14px; /* Schriftgröße */
    cursor: pointer; /* Zeiger-Hand-Symbol */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation */
  }


  #topButton:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
    transform: translateY(-2px); /* Leichtes Anheben beim Hover */
  }


  #topButton:active {
    transform: translateY(0); /* Zurücksetzen bei Klick */
  }

JavaScript:
// Element auswählen
let topButton = document.getElementById("topButton");


// Scroll-Event-Listener hinzufügen
window.addEventListener("scroll", function() {
  // Zeigt den Button an, wenn mehr als 50px gescrollt wurde
  if (window.scrollY > 50) {
    topButton.style.display = "block"; // Button wird sichtbar
  } else {
    topButton.style.display = "none"; // Button wird versteckt
  }
});


// Klick-Event für den Button
topButton.addEventListener("click", function(event) {
  event.preventDefault(); // Standard-Aktion verhindern
  window.scrollTo({
    top: 0, // Scrollt nach oben
    behavior: "smooth" // Sanftes Scrollen
  });
});
Homepage, App, Programm, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
haveyou
09.01.2025, 20:44

Warum scrollt es automatisch nach oben, wenn ich auf den Slider klicke (siehe bitte meine letzte Frage für Code)?

Wenn ich auf den Slider klicke, dann scrollt es danach nicht mehr nach unten, sondern geht automatisch nach oben. Woran könnte das Problem liegen?

HTML:

<article id="ÜberschriftAnfang">
  <h1>Michael Jackson - The King of Pop</h1>
  
  <!-- Slideshow Container -->
  <div class="slideshow-container">
   
    <!-- Slide 1 -->
    <div class="mySlides fade active" style="display:block">
      <div class="numbertext">1 / 3</div>
      <img src="Background picture.jpg" style="width:100%" alt="Background Image">
    </div>

    <!-- Slide 2 -->
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="papers.co.jpg" style="width:100%" alt="Background Image 2">
    </div>

    <!-- Slide 3 -->
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="5m6XCzF.jpg" style="width:100%" alt="Background Image 3">
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

  </div>

  <!-- Dots Navigation -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</article>

JS: 

let slideIndex = 1;
showSlides(slideIndex); // Startet die Slideshow und zeigt das erste Bild an.

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");

  // Überprüfen, ob der slideIndex größer als die Anzahl der Slides ist
  if (n > slides.length) {
    slideIndex = 1; // Setze den Index auf 1, wenn er größer ist als die Anzahl der Slides
  }

  // Überprüfen, ob der slideIndex kleiner als 1 ist
  if (n < 1) {
    slideIndex = slides.length; // Setze den Index auf die letzte Slide, wenn er kleiner ist als 1
  }

  // Alle Slides ausblenden
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  // Alle Dots zurücksetzen
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // Zeige das aktuelle Bild und Dot
  slides[slideIndex - 1].style.display = "block";  
  dots[slideIndex - 1].className += " active";
}

CSS: siehe Antwort

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
1 Antwort
Janluca468
12.12.2024, 19:11
Mit Links

Problem mit HTML?

Hallo, ich habe ein Problem mit meiner Login page:
-"Haben Sie schon einen Account?" wird einf nicht angezeigt. Ich habe keine Ahnung woran es liegt. Hier der Code:

<!DOCTYPE html>
<html lang="de">
<head>
<title>LOGIN</title>
<meta charset="UTF-8">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="css/style_Login.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up">
<form action="signup-check.php" method="post">
<h1>Neuer Account</h1>
<?php if (isset($_GET['error'])) { ?>
<p class="error"><?php echo $_GET['error']; ?></p>
<?php } ?>
<?php if (isset($_GET['success'])) { ?>
<p class="success"><?php echo $_GET['success']; ?></p>
<?php } ?>
<span>Registrieren</span>
<!-- Name-->
<?php if (isset($_GET['name'])) { ?>
<input type="text"
name="name"
placeholder="Name"
value="<?php echo $_GET['name']; ?>">
<?php }else{ ?>
<input type="text"
name="name"
placeholder="Name">
<?php }?>
<!-- Benutzername-->
<?php if (isset($_GET['uname'])) { ?>
<input type="text"
name="uname"
placeholder="Benutzername"
value="<?php echo $_GET['uname']; ?>">
<?php }else{ ?>
<input type="text"
name="uname"
placeholder="Benutzername">
<?php }?>
<!-- Passwort-->
<input type="password"
name="password"
placeholder="Passwort">
<input type="password"
name="re_password"
placeholder="Passwort wiederholen">
<!--submit-->
<button type="submit">Los gehts</button>
</form>
</div>
<div class="form-container sign-in">
<form action="login.php" method="post">
<h1>Anmelden</h1>
<span>Einloggen mit Benutzernamen und Passwort</span>
<?php if (isset($_GET['error'])) { ?>
<p class="error"><?php echo $_GET['error']; ?></p>
<?php } ?>
<input type="text" name="uname" placeholder="Benutzername">
<input type="password" name="password" placeholder="Passwort">
<a href="#">Passwort vergessen?</a>
<button type="submit">Los gehts</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Haben Sie schon <br>einen Account?</h1>
<p>Einloggen mit Name & Passwort</p>
<button class="hidden" id="login">Los gehts</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hii, </h1>
<p>erstellen Sie einen Account bei "PROX", um für alle Situationen vorbereitet zu sein</p>
<button class="hidden" id="register">Registrieren</button>
</div>
</div>
</div>
</div>
<script src="js/script_Login.js"></script>
</body>
</html>
HTML, Frontend
1 Antwort
flaviozettel
17.10.2024, 20:44
Mit Bildern

JavaScript: Wie kann ich Daten zwischen zwei Dateien verteilen?

Hallo zusammen,

ich bitte euch um Hilfe bei meinem Problem. Und zwar muss ich im Studium eine Seite so nachbauen, dass ich mittels einer Filterauswahl eine Liste ausgeben kann.

Letztens haben wir gelernt, dass wir den Code anhand Komponenten aufteilen sollen. Ich habe also die Komponenten Titelleiste (wo der Filter, Logo und Titel enthalten sein sollte), Tabelle und Filter erstellt.

Zudem gibt es ja diese Hauptdatei App.js. In einem ersten Schritt habe ich in der Filter.js Funktionen geschrieben, um meine Daten gemäß der möglichen Suchbegriffe zu filtern und habe den aktuellen Wert, welcher vom Nutzer gewählt wird, in einem useState abgespeichert.

Wie kann ich diesen Wert nun der Tabelle.js übergeben, damit dort anhand der Filterung die Ausgabe generiert werden kann?

ChatGPT hat mir geraten, die Daten zuerst in die App.js zu schreiben. Aber wie geht das? Wie komme ich von einem Child in das Parent?

Ich denke, ihr erkennt, dass ich leider noch sehr unerfahren im Programmieren bin.

Folgend die Codes:

App.js:

const Titelseite = () => {
  return (
    <div className="titelseite-container">
      <BasicTable />
    </div>
  );
};

const Tabelle = () => {
  return (
    <div className="tabelle">
      <div>Tabellenleiste</div>
    </div>
  );
};

function App() {
  const [service_ausg, setService] = useState("");
  const [anbieter_ausg, setAnbieter] = useState("");
  const handleServiceChange = (value) => {
    setService(value);
  };
  const handleAnbieterChange = (e) => {
    setAnbieter(e);
  };

  return (
    <div className="App">
      <Titelleiste>
        <Filter
          onChangeService={handleServiceChange}
          onChangeAnbieter={handleAnbieterChange}
        />
        <BasicTable />
      </Titelleiste>
      <Titelseite />
    </div>
  );
}

export default App;

Titelleiste.js:

import Grid from "@mui/material/Grid2";
import { Filter } from "./Filter";
import { useState } from "react";
import data from "./data/tableData.json";

export const Titelleiste = () => {
  const getData = (data) => {
    console.log("Ich bin in Titelleiste und komme von Filter");
  };

  return (
    <Grid container spacing={2}>
      <Grid item size={4}>
        <p>
          <img src="geoharvester.png" width="100px" height="50px" />
        </p>
      </Grid>
      <Grid item size={4}>
        <p>Ein Katalog für schweizer Geodienste</p>
      </Grid>
      <Grid item size={4} container justifyContent="flex-end">
        <p>
          <Filter onChange={getData} />
        </p>
      </Grid>
    </Grid>
  );
};

Filter.js :

import "./App.css";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import data from "./data/tableData.json";
import { App } from "./App";

export const Filter = ({ onChangeService, onChangeAnbieter }) => {
  let array_service = data.map((element) => element.service);
  let array_service_ausg = [...new Set(array_service)]; //* new "Set", entfernt automatisch die Duplikate und erstellt ein neues Objekt. Das neue Objekt wird mittels den "..." in eine Liste gespeichert
  let array_anbieter = data.map((element) => element.anbieter);
  let array_anbieter_ausg = [...new Set(array_anbieter)];
  const funService = (e) => {
    const [service_ausg, setService] = useState("");
    setService(e.target.value);
  };
  const funAnbieter = (e) => {
    TransferAnbieter(e.target.value);
  };

  return (
    <div>
      <form>
        <Select name="service" onChange={funService} sx={{ width: 100 }}>
          {array_service_ausg.map((service) => (
            <MenuItem value={service}>{service}</MenuItem>
          ))}
        </Select>
      </form>
      <Select name="anbieter" onChange={funAnbieter} sx={{ width: 100 }}>
        {array_anbieter_ausg.map((anbieter) => (
          <MenuItem value={anbieter}>{anbieter}</MenuItem>
        ))}
      </Select>
      <br />
    </div>
  );
};

Nach einigen Stunden, die ich bereits in die Recherche meines Problems investiert habe, danke ich euch herzlich für eure Hilfe.

Bild zum Beitrag
HTML, IT, Webseite, JavaScript, HTML5, Code, Informatik, Programmiersprache, Softwareentwicklung, Webentwicklung, Frontend, React
1 Antwort
CoSci
07.10.2024, 23:11
Mit Bildern
Mit Links

JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung, Frontend, node.js
2 Antworten
johndont
13.07.2024, 22:00
Beitrag wurde 1 Mal erneut eingestellt
Mit Bildern

Wie React Icons ausfüllen / Alternative?

In meiner React Component (siehe unten) ist leider das Icon ArrowUpCircleSharp von "react-icons" innen unausgefüllt was nicht schön aussieht wenn es sich über Text und Bilder bewegt, andere Icons wie von FontAwesome Material Icons haben das gleiche Problem. Ich habe es versucht mit den Props Stroke, Fill und mit CSS background, ändert aber nur das Schwarze außen und nicht innerhalb vom Icon.
Was kann ich tun ? Will jetzt nicht umbedingt eine ganze Library einbinden für das Icon, bei react-icons hab ich den Vorteil das es nur die benutzen auch wirklich nutzt,

'use client';
import { useEffect, useState } from "react";
import "../.././assets/styles/components/ScrollToTop/ScrollToTop.scss";
import { IoArrowUpCircleSharp} from "react-icons/io5";


export const ScrollToTop = () => {

const [ScrollY,setScrollY] = useState<number>(0);

useEffect(() => {
    window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))

    return () => {
        window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))
    }
}, [ScrollY])

    return(

        <div
            onClick={()=>{ScrollY > 100 ?
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : 0})
            :
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : document.body.scrollHeight});
            }}
        className={`ScrollToTop ${ScrollY > 100 ? " ScrollToTop_Up" : "ScrollToTop_Down"}`}>
                <IoArrowUpCircleSharp/>
        </div>
    )
}
Bild zum Beitrag
App, HTML, Webseite, programmieren, CSS, JavaScript, Informatik, Programmiersprache, Webentwicklung, Frontend, React, node
2 Antworten
JanMarcel01
04.07.2024, 19:54
Mit Links

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
1 Antwort
tian007
01.07.2024, 12:35

Quereinstieg als Frontend Entwickler mit Background in Business Administration fast unmöglich?

Hallo zusammen, ich habe kürzlich meine Weiterbildung als Frontend-Entwickler abgeschlossen und bin nun auf Jobsuche. Trotz des oft berichteten Fachkräftemangels scheint der Markt für Junior-Stellen hart umkämpft zu sein. Meine Bewerbungsunterlagen wurden von der Weiterbildung geprüft, also können sie nicht so schlecht sein.

Ich habe einen B.Sc. in Business Administration und habe vor kurzem meine Weiterbildung zum Frontend-Entwickler abgeschlossen. Ich habe während des Studiums ein Praktikum im Bereich Operations bei einem IT-Startup absolviert und arbeite derzeit wieder dort als Praktikant, diesmal als Frontend-Entwickler. Aus Budgetgründen können sie im Moment keine neuen Mitarbeiter einstellen. Während dieser Zeit plane ich, mich weiter zum Fullstack-Entwickler (TypeScript + React) zu qualifizieren.

Alternativ denke ich darüber nach, ein SAP-Zertifikat zu erwerben, um eine Stelle im SAP-Bereich zu suchen. Hier gibt es wirklich Stellenangebote (Trainee/Junior) ohne Ende.

Eine weitere Option wäre eine Bewerbung als IT-Consultant, obwohl ich das Gefühl habe, dass ich dafür mehr Erfahrung als Entwickler benötige. Wie soll ich Unternehmen beraten, wenn ich selbst keine Ahnung habe?

Es ist frustrierend, nach dem Sparen und Absolvieren der Weiterbildung keine Stelle zu finden, aber ich bleibe optimistisch und offen für Möglichkeiten. Ich hoffe, ihr könnt mir vielleicht ein paar Tipps geben.

Vielen Dank im Voraus

JavaScript, Jobsuche, Webentwicklung, Frontend, Junior
3 Antworten
Mia1307
22.06.2024, 16:42
Mit Links

Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>
Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend
2 Antworten
Rexxxxx
23.05.2024, 21:25

Action URL in einem PHP-Formular über einen Schalter in Echtzeit dynamisch ändern, wie?

Also Folgendes: ich hab hier ein PHP-Formular mit einem Eingabefeld und einem Submit Button, dass die eingegebenen Werte an eine bestimmte URL sendet. (Das ist erstmal simpel) Ich habe auch herausgefunden, wie man die URL z.b mit einer Zahlenfunktion variieren kann. Auch das geht relativ leicht. Was hingegen scheinbar weniger einfach ist: Ich würde das Action Attribut, also die URL, wo die Eingaben hingesendet werden nun gerne über einen HTML-Schalter z.b Checkbox dynamisch & in Echtzeit ändern. z.b Checkbox aktiv = Daten werden an URL2 gesendet, Checkbox nicht aktiv = Daten werden an URL1 gesendet. Oder es soll einfach ein URL-Zusatz hinzugefügt werden, je nachdem ob die Checkbox aktiv ist oder nicht. Meine jetzt ganz blöde Frage: Wie oder mit welchem Ansatz kann das funktionieren? Ich habe da jetzt bereits XX Stunden rumprobiert: Normale Variablen mit Conditions definieren, Sessions starten, der Versuch ein Cookie zu setzen, dass beim Ein und Ausschalten der Checkbox gesetzt bzw. gelöscht werden soll (klappt nicht). Mit JS Codeschnipseln herumprobiert. Nichts davon scheint zu funktionieren bzw. es wird einfach immer der Zustand "checkbox unchecked" an URL1 gesendet.

Hat irgendeiner mit Ahnung ne Idee wieso das nicht funktioniert und ob es einen lösbaren Ansatz für dieses Problem gibt?

HTML, Webseite, JavaScript, HTML5, Datenbank, PHP, Programmiersprache, Webdesign, Webentwicklung, Webserver, Frontend
4 Antworten
MATHECLUES
18.05.2024, 21:07
Mit Bildern

HTML/CSS/JS: Warum funktioniert meine bindDelete-Funktion nicht und wie kann ich die Preisangaben untereinander formatieren?

Hi, ich habe an einen Spezialisten eine Frage:

import Order from './Order.js';
import ArticleModel from './ArticleModel.js';

export default function UserOrderViewHandler(articleModel) {
  this.articleModel = articleModel;
  this.order = new Order(-1, null, [], 0, 0, 0, 0, 0, false);
}

UserOrderViewHandler.prototype.renderPage = function() {
  let body = document.getElementsByTagName('body')[0];
  body.innerHTML = "";
  body.innerHTML = `<div class="container">
    <sidebar>
      <h1 class="mb-4">Unser Sortiment</h1>
      <div id="articleList">
        <div class="row space-between">
          <div class="col-md-4 mb-4">
            <div class="card" data-index="0">
              <div>
                <h2>Salamipizza</h2>
                <p>Halbe hausgemachte Pizza mit Käse und regionaler Salami</p>
                <p><strong>6.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="1">
              <div>
                <h2>Hamburger</h2>
                <p>Burger mit österreichischem Rindfleisch, Ketchup und Senf</p>
                <p><strong>6.00 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="2">
              <div>
                <h2>Wochenmenü</h2>
                <p>Frittatensuppe --- Spaghetti Bolognese --- Muffin</p>
                <p><strong>12.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </sidebar>
    <sidebar>
      <h1 class="mb-4 extramargin">Bestellung</h1>
      <ul id="order"></ul>
      <div class="form-group">
        <label for="pickupTime">Gewünschte Abholzeit:</label>
        <input type="time" id="pickupTime" class="form-control">
      </div>
    </sidebar>
  </div>`;
}

UserOrderViewHandler.prototype.renderOrder = function() {
  let orderElement = document.getElementById('order');
  orderElement.innerHTML = "";
  orderElement.className = "list-group";

  let i = 0;

  for (let article of this.order.articleList) {
    let articleElement = document.createElement('li');
    articleElement.className = "list-group-item d-flex justify-content-between align-items-center";
    articleElement.innerHTML = `
      <div>1 x ${article.name} &emsp; &emsp; &emsp;${article.price.toFixed(2)} €</div>
      <button class="delBtn btn btn-danger btn-sm" data-index="${i}">Entfernen</button>
    `;
    orderElement.appendChild(articleElement);
    i++;
  }
}

UserOrderViewHandler.prototype.bindAddBtn = function() {
  let buttons = document.getElementsByClassName('addBtnClss');
  const that = this;

  for (let button of buttons) {
    button.addEventListener('click', function() {
      let index = this.closest('.card').getAttribute('data-index');
      let article = that.articleModel.getByIndex(index);

      if (article) {
        that.order.addArticle(article);
        that.renderOrder();
      }
    });
  }
}

UserOrderViewHandler.prototype.bindDeleteBtn = function() {
  let orderElement = document.getElementById('order');
  orderElement.addEventListener('click', function(event) {
    if (event.target.classList.contains('delBtn')) {
      let index = event.target.getAttribute('data-index');
      that.order.deleteArticle(index);
      that.renderOrder();
    }
  });
}
  1. Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?
  2. Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:

Danke für die Hilfe.

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
1 Antwort
Thoss
24.04.2024, 14:25
Mit Bildern

Html semibold und bold schauen gleich aus?

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>
Bild zum Beitrag
HTML, Webseite, CSS, Mozilla Firefox, Google Chrome, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code, Microsoft Edge
1 Antwort
Rolajamo
20.04.2024, 12:00

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

  • ...dass Content 1 von Opacity 100 auf 0 geht
  • ...dass Content 1 in Minus Y-Richtung 20px bewegt wird
  • ...dass Content 2 von Opacity 0 auf 100 geht
  • ...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>
Animation, Technik, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
JtcXxM
10.04.2024, 09:24

HTML Zufallsgenerator funktioniert nicht/keine Ausgabe?

Ich habe mir von ChatGPT einen Zufallsgenerator coden lassen. Jedoch kommt keine Augabe, bitte hilfe.

Das hier ist der Code btw

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Randomizer</title>

<style>

  body {

    font-family: Arial, sans-serif;

    text-align: center;

  }

  .column {

    float: left;

    width: 20%;

    padding: 10px;

  }

  /* Clear floats after the columns */

  .row:after {

    content: "";

    display: table;

    clear: both;

  }

</style>

</head>

<body>

  <h1>Randomizer</h1>

  <form>

    <div class="row">

      <!-- Column 1 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence1">Sentence 1:</label>

        <input type="text" id="sentence1" name="sentence1"><br><br>

        <label for="sentence6">Sentence 6:</label>

        <input type="text" id="sentence6" name="sentence6"><br><br>

        <label for="sentence11">Sentence 11:</label>

        <input type="text" id="sentence11" name="sentence11"><br><br>

        <label for="sentence16">Sentence 16:</label>

        <input type="text" id="sentence16" name="sentence16"><br><br>

        <label for="sentence21">Sentence 21:</label>

        <input type="text" id="sentence21" name="sentence21"><br><br>

      </div>

      <!-- Column 2 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence2">Sentence 2:</label>

        <input type="text" id="sentence2" name="sentence2"><br><br>

        <label for="sentence7">Sentence 7:</label>

        <input type="text" id="sentence7" name="sentence7"><br><br>

        <label for="sentence12">Sentence 12:</label>

        <input type="text" id="sentence12" name="sentence12"><br><br>

        <label for="sentence17">Sentence 17:</label>

        <input type="text" id="sentence17" name="sentence17"><br><br>

        <label for="sentence22">Sentence 22:</label>

        <input type="text" id="sentence22" name="sentence22"><br><br>

      </div>

      <!-- Column 3 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence3">Sentence 3:</label>

        <input type="text" id="sentence3" name="sentence3"><br><br>

        <label for="sentence8">Sentence 8:</label>

        <input type="text" id="sentence8" name="sentence8"><br><br>

        <label for="sentence13">Sentence 13:</label>

        <input type="text" id="sentence13" name="sentence13"><br><br>

        <label for="sentence18">Sentence 18:</label>

        <input type="text" id="sentence18" name="sentence18"><br><br>

        <label for="sentence23">Sentence 23:</label>

        <input type="text" id="sentence23" name="sentence23"><br><br>

      </div>

      <!-- Column 4 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence4">Sentence 4:</label>

        <input type="text" id="sentence4" name="sentence4"><br><br>

        <label for="sentence9">Sentence 9:</label>

        <input type="text" id="sentence9" name="sentence9"><br><br>

        <label for="sentence14">Sentence 14:</label>

        <input type="text" id="sentence14" name="sentence14"><br><br>

        <label for="sentence19">Sentence 19:</label>

        <input type="text" id="sentence19" name="sentence19"><br><br>

        <label for="sentence24">Sentence 24:</label>

        <input type="text" id="sentence24" name="sentence24"><br><br>

      </div>

      <!-- Column 5 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence5">Sentence 5:</label>

        <input type="text" id="sentence5" name="sentence5"><br><br>

        <label for="sentence10">Sentence 10:</label>

        <input type="text" id="sentence10" name="sentence10"><br><br>

        <label for="sentence15">Sentence 15:</label>

        <input type="text" id="sentence15" name="sentence15"><br><br>

        <label for="sentence20">Sentence 20:</label>

        <input type="text" id="sentence20" name="sentence20"><br><br>

        <label for="sentence25">Sentence 25:</label>

        <input type="text" id="sentence25" name="sentence25"><br><br>

      </div>

    </div>

    <button type="button" onclick="generateRandomSentence()">Generate Random Sentence</button><br><br>

    <label for="result">Random Sentence:</label>

    <input type="text" id="result" readonly>

  </form>

  <script>

    function generateRandomSentence() {

      var sentences = [];

      // Get all sentence inputs and push their values into sentences array

      for (var i = 1; i <= 30; i++) {

        var sentence = document.getElementById("sentence" + i).value.trim();

        if (sentence !== "") {

          sentences.push(sentence);

        }

      }

      // If there are sentences in the array, choose one randomly and display it

      if (sentences.length > 0) {

        var randomIndex = Math.floor(Math.random() * sentences.length);

        document.getElementById("result").value = sentences[randomIndex];

      } else {

        document.getElementById("result").value = "No sentences provided";

      }

    }

  </script>

</body>

</html>

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
2 Antworten
marcus09421
09.04.2024, 09:54

Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Frontend, Python 3, Pycharm, Flask
1 Antwort
marcus09421
08.04.2024, 22:00

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Frontend, Python 3, Flask
1 Antwort
JrDev
08.04.2024, 05:05
Mit Umfrage

Welchen Weg sollte ich als angehender Frontend-Entwickler einschlagen: JavaScript Vanilla oder ein Framework?

Hallo Leute,

ich hoffe, euch geht es gut und ihr habt einen angenehmen Tag.

Ich habe eine Frage an die erfahrenen Frontend-Entwickler unter euch, wie ihr dem Titel unschwer entnehmen könnt :).

Mein Ziel ist es, mich eigenständig so weit zu bilden, dass ich einen Job als Junior/Berufseinsteiger Frontendentwickler bekommen kann.

Bis dato habe ich bereits einen HTML5- und CSS3-Udemy-Kurs durchlaufen und einige Tutorials nachgebaut. Nun fühle ich mich fit genug für den nächsten Schritt.

Hierbei wollte ich wissen, ob ich mit JavaScript Vanilla starten soll und einen Kurs dazu machen soll oder direkt mit einem der bekannten JS-Frameworks wie Angular, React oder Vue.js?

Da ich während meiner Ausbildung bereits mit C# und WinForms gearbeitet habe, sind mir die Programmierungsgrundlagen nicht ganz fremd :D

Ich habe mal gehört, dass man JavaScript Vanilla nur lernen sollte, wenn man keinerlei Programmiererfahrung hat, z.B. über Schleifen, Verzweigungen usw., ansonsten sollte man direkt mit einem Framework starten.

Aktuell würde ich mich für React entscheiden, da man später das Wissen auch super in React Native implementieren kann und somit auch Apps entwickeln kann. Da Web und App meine Interessenbereiche in der Entwicklung sind, würde es sich super anbieten, es sei denn, die Mehrheit sagt nein, auf keinen Fall React. Dann bitte mit einer Begründung und was ich alternativ dazu dann lernen sollte :)

Ach ja, natürlich anhand meines Ziels dürft ihr mir auch alle anderen Tipps geben, was ich noch alles lernen könnte oder draufhaben sollte, damit eben keine Absagen mehr eintreffen als Junior :)

Ich bedanke mich bei allen schon einmal herzlich für die Zeit, die Ihr aufwendet, für das Lesen und Antworten :)

Viele Grüße,

JrDev

JavaScript Vanilla 100%
Framework / Bibliothek (Angular, React, Vue.js) 0%
CSS, JavaScript, HTML5, berufseinsteiger, Frontend, Junior
2 Antworten
MrAmazing2
29.02.2024, 02:35

Welches Backend + Hosting für kleine Webseiten?

Ich möchte eine Webseite für ein kleines Unternehmen erstellen.

Sie wird ziemlich Frontend-lastig sein bis auf ein zwei Besonderheiten:

  • Ein Kontakt-Formular, bei dem man eine Nachricht eingeben kann, die dem Unternehmer dann automatisch per Email zugesandt wird
  • Ein Blog, bei dem der Unternehmer selbst Posts (bestehend aus Text & Bildern) erstellen kann, in einer Art Admin-Panel mit WYSIWYG-Editor, und diese direkt oder zu einem bestimmten Zeitpunkt automatisch veröffentlichen kann

Beim Frontend fällt die Technologie-Auswahl noch relativ leicht, TypeScript und ein gängiges Framework wie z.B. React.
Als Datenbank würde ich MySQL oder PostgreSQL verwenden.

Beim Backend weiß ich nun aber nicht weiter.

Welches Framework würde sich für eine Webseite dieser Größe am besten anbieten?
Es sollte beim Hosting billig sein (z.B. durch niedrigen RAM-Verbrauch), der Code sollte einfach und schnell zu schreiben sein, und es sollte die oben genannten Features möglichst einfach ermöglichen.

Express, Next.js, Laravel, Django, Flask, ASP.Net, Spring, ... ?
Was würdet ihr nehmen und warum?

Und zum Hosting, muss ich die Webseite auf einem vServer hosten, oder reicht auch ein Webspace?

Homepage, HTML, Webseite, programmieren, CSS, WordPress, Java, JavaScript, ASP.NET, Datenbank, Express, Hosting, Informatik, PHP, Programmiersprache, Python, Softwareentwicklung, vServer, Webdesign, Webentwicklung, Webspace, Backend, Frontend, Flask
3 Antworten
MCuser9230
15.02.2024, 17:30

Ab wann beginnt Full-Stack Entwicklung im Webbereich und wie sieht es mit dem Gehalt aus?

Hallo liebe Community,

kurze Einleitung:

Ich bin Junior Webentwickler seit zirka 1 Jahr bei einer (relativ) kleinen Firma. Wir arbeiten viel mit Freelancer zusammen.

Ich bin mit HTML / CSS / JS eingestiegen und programmiere hier jetzt hauptsächlich über Wordpress die Websiten und Plugins.

Dazu wird bekannterweise → php genutzt. Daher geht hier Jquery, PHP, JS, MySQL, Git/hub und das Wissen in vielen bewährten Plugins und derer Programmierung für erweitere Funktionen einher.

Daher mache ich Backend und Frontend Entwicklung gleichermaßen. Das kann ich auch schon relativ gut, ich musste hier mir alles selbst beibringen und hab hauptsächlich mit Udemy und unserer tollen AI ChatGPT Hilfe mir alles beigebracht.
Die Codereviews hab ich mir von der AI machen lassen, Fehler aufzeigen, den Code bewerten und Verbesserungsmöglichkeiten zeigen.

So bin ich nun der Meinung, ein relativ solides Wissen angeeignet zu haben.
Jetzt zu meinen Fragen:

Frage 1:
Ab wann dürfte ich mich Full-Stack-Entwickler nennen? Ich hab großen Respekt vor erfahrenen Full-Stack-Entwicklern, weil da eine Menge zugehört. Aber ist es schon Full-Stack, wenn man Frontend und Backend macht?

Frage 2:
Ich arbeite in MV und bekomme noch 2600 € brutto gezahlt. Es ist noch relativ niedrig, weil ich zu Anfang viel gelernt habe, die ersten Monate, um den Anforderungen gerecht zu werden. 2400 € in den ersten 6 Monaten und bis jetzt (12. Monat) 2600.

Was wäre so eine faire Preisspanne? Die Firma gibts bald seit 10 Jahren und wir sind kein Start-up mehr. Auch läuft es gerade gut und ich konnte alle Aufgaben bewältigen, die mir seither gestellt wurden. Wenn ich auch für manche länger gebraucht habe (aber dafür bin ich ja auch ein Junior). Mich würde interessieren, wo es fair wäre? Ich möchte bald in die Gehaltsverhandlung gehen und wäre sehr dankbar über Ratschläge und eure Meinungen.

Liebe Grüße

Beruf, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Entwicklung, PHP, Programmiersprache, Webdesign, Webentwicklung, Backend, Frontend
2 Antworten
JrDev
07.02.2024, 21:42
Mit Umfrage

Bootcamp Ja oder Nein?

Hallo zusammen,

Ich bin seit dem 08.01.2024 Fachinformatiker für Anwendungsentwicklung, soweit so gut. Leider habe ich erst mit einer Umschulung begonnen, die in die Hose ging, weil das ein Umschulungsunternehmen war, das einen rein gelockt hat, um an den Bildungsgutschein zu kommen, und das war's dann auch. Dadurch bin ich durch meine Abschlussprüfung durchgefallen. Im Anschluss habe ich direkt eine Ausbildung im 3. Lehrjahr begonnen bis zur Wiederholungsprüfung.

Das Ausbildungsunternehmen hat mich netterweise direkt angenommen. Allerdings war ich der einzige Entwickler vor Ort, und mein Ausbilder war jemand, der vor über 10 Jahren eine Umschulung zum FiAe gemacht hat, dann den Ausbilderschein erworben hat und seitdem keine Zeile Code mehr geschrieben hat. Dadurch konnte er nie meine Fragen beantworten, und ich musste mir eigenständig C# und Winforms aneignen, da das Unternehmen die Arbeiten der Mitarbeiter damit automatisieren / vereinfachen wollte. Ein Jahr lang habe ich für das Unternehmen native Desktop-Apps geschrieben und war für das Updaten der Programme zuständig.

In der Ausbildungszeit merkte ich, dass mich die Web-Entwicklung immer mehr interessiert, weshalb ich nach der Abschlussprüfung einen Udemy-Kurs über Web-Entwicklung begonnen habe. Hier habe ich bereits HTML und CSS durchgearbeitet und bin aktuell bei JavaScript.

Jetzt fragt sich der ein oder andere, warum hast du nicht auf der Arbeit gelernt? Nun ja, der Betrieb war der Meinung, solange er nicht 8 Stunden am Stück Code am Tippen ist, macht er Lagertätigkeiten und befüllt die Maschinen.

Jetzt kommt die Frage auf, dann hätte man das nach der Arbeit machen können. Richtig, jedoch musste ich mir hier die Theorie reinprügeln, die für die Abschlussprüfung benötigt wird, da ich in den 2 Jahren Umschulung nichts erklärt bekommen habe. Das heißt, in dem Jahr habe ich auf der Arbeit eigenständig mir C# und Winforms angeeignet und Lager- / Maschinen-Tätigkeiten ausgeübt und nach der Arbeit für die IHK-Prüfung gelernt.

Aus diesem Grund kann ich auch die Unternehmen verstehen, die Absagen schicken, weil die sehen, ich habe nur C# und Winforms gemacht und Daten an MySQL geschickt und abgerufen "woooow".

Da das Unternehmen auch der Meinung war, dass Git "Mist" sei und nur schlechte Programmierer Fehler machen und unprofessionell sind, wenn sie damit arbeiten, durfte ich das auch nicht während der Arbeitszeit lernen. Ergo eigne ich mir das neben dem Web-Entwickler Kurs auch noch an, in dem ich mit Visual Studio Code committe und pushe. Ja, das ist bei weitem nicht das, wofür Git da ist, aber ich bin noch am Lernen. :D

__________________________

Jetzt wurde es doch wieder ein langer Text, aber nun zu meiner Frage. :D

Ich habe demnächst ein Gespräch mit dem Arbeitsamt bezüglich des Bildungsgutscheins. Sehr wahrscheinlich werde ich einen erhalten, wurde mir im letzten Gespräch gesagt. Für den Fall, dass es funktioniert, will ich nicht viel Zeit verlieren, da ich schon 30 bin und immer noch keinen Job habe.

Deshalb kamen Bootcamps für mich in Frage und wollte euch fragen, ob Ihr selbst Erfahrungen mit einem Bootcamp gemacht habt oder vielleicht jemanden kennt und ein bestimmtes Bootcamp empfehlen könnt.

Ich bedanke mich schon mal im voraus für eure Zeit die Ihr mit dem Lesen der Frage und eurer Antwort investiert habt.

Gar kein Bootcamp, weiter eigenständig lernen 100%
Bootcamp Front-End Ja 0%
Bootcamp Full-Stack Ja 0%
HTML, CSS, JavaScript, Bildungsgutschein, Bootcamp, Programmiersprache, Webentwicklung, Backend, Frontend
3 Antworten
MrOsmo
14.12.2023, 19:47
Mit Links

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

Software, App, HTML, IT, Webseite, programmieren, JavaScript, HTML5, Code, Informatik, Programmiersprache, Webentwicklung, Frontend
1 Antwort
GeldGeil457
05.12.2023, 15:38
Beitrag wurde 1 Mal erneut eingestellt
Mit Links

Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

 (Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

HTML, Webseite, CSS, HTML5, Code, PHP, Programmiersprache, Python, Webdesign, Webentwicklung, Frontend, Python 3, Selenium
1 Antwort
MrOsmo
03.12.2023, 22:31

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

LG

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
1 Antwort
MrOsmo
02.12.2023, 22:09
Beitrag wurde 1 Mal erneut eingestellt
Mit Bildern

Wie kann ich die Reihenfolge der Hintergrundfarben ändern?

Hallo zusammen!

ich mache gerade die Hausaufgaben in IT aber ich komme leider nicht weiter.

Wie ihr auf dem Foto bereits seht, habe ich zwei Hintergründe.

Aber das Problem ist, dass der erste Hintergrund unten sein soll und der zweite Hintergrund, der gerade unten ist, soll nach oben kommen. Also einfach gesagt, ich möchte die Reihenfolge der Hintergrundfarben ändern. Ich habe schon wirklich lange daran gesessen.

Ich weiß nicht, wie man es weiter macht. Könnte mir bitte jemand helfen?

P.S. JavaScript passt leider nicht in die Frage hinein. Ihr findet es in den Kommentaren!

Dankeschön im Voraus.

LG!

Übrigens, hier die Codes:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <div class="bodyDiv">
  <header>
    <div class="title">
      <h1>My Tasks</h1>
    </div>
  </header>
  <main>
    <section>
      <div class="inputs">
        <input id="inputOne" type="text" placeholder="Enter your task!">
        <input id="inputTwo" type="date" placeholder="Enter your date!">
        <button id="buttonForInputs">Add task!</button>
      </div>
    </section>
    <section>
      <div class="tasks">
        <div class="date"> 
          <div class="information"></div>
        </div>
      </div>
    </section>    
   <section>
    <div class="buttons">
      <button id="buttonOne">Delete all!</button>
      <button>Change status!</button>
    </div>
   </section>
  </main>
  </div>
</body>
</html>

CSS:

* {
  margin: 0;
  box-sizing: border-box;
}


/*BODY_AND_HTML*/
html {
background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%,rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%),linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%,rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%,rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%),linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%,rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%),linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%,rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%),linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%,rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(90deg, rgb(249, 17, 190),rgb(100, 28, 213));
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}

/*HEADER*/

header .title {
  display: flex;
  justify-content: center;
}


header h1 {
  font-size: 4rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fff;
}

/*MAIN*/

.tasks {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}

.tasks .date .information p {
  margin-top: -210px;
  margin-left: -190px;
  color: #fff;
  font-weight: 100;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.tasks .date {
  background-color: orange;
  width: 20%;
  padding-bottom: 20px;
  border-radius: 9px;
  display: none;  
}

.tasks .date .information {
  background-color: rgb(219, 182, 112);
  padding-top: 220px;
  border-radius: 5px;
  text-align: start;
  display: none;
}

.tasks .date p {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.inputs {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.inputs input {
  width: 30%;
  height: 30px;
  border-radius: 7px;
}

.inputs #inputOne {
  margin-top: 150px;
}

.inputs #inputTwo {
  margin-top: 10px;
}

.inputs button {
  margin-top: 15px;
  width: 8%;
  height: 30px;
  margin-right: 320px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-right: 150px;
  margin-top: 30px;
  gap: 10px;
}

.buttons button {
  width: 11%;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
2 Antworten

Meistgelesene Beiträge zum Thema Frontend
Mehr meistgelesene Fragen zu Frontend