jemanden, der mir eine kleine Sache erledigt (HTML, JS, CSS)

Natsu Dragneel · 08/16/2023, 12:10

Servus,

ich gebe euch mal einen kleinen Ausschnitt aus dem Gespräch:

Quote:

hallo , ich habe eine frage, es geht um diese seite: um diesen balken da unten wie im bild, ich muss das etwas umprogrammieren, so dass ich css anwenden kann bei dem slider, der soll farbig anders aussehen und der USB Stecker das Bild muss flüssiger ablaufen. also folgendes:

Ich würde das Ding hier bitte umprogrammieren lassen, oder was ich schon habe, einfach umprogrammieren. Die Funktion ist eigentlich drin und funktioniert super, nur das Design kann ich irgendwie nicht genau einstellen. Der Schieberegler (das Ding zum regulieren - also drücken) muss etwas größer sein, in blauer Farbe (#36a9e1), die Linie sollte in weiß bleiben (das muss auf allen Geräten gleich aussehen), auf der mobilen Ansicht möchte ich gerne, dass diese 3 Buttons (in blau und die Tage, Stunden, Minuten), dass sie auch nebeneinander sind und die Schriftarten zu den Buttons (sind halt keine Buttons, aber ich nenne sie jetzt so) sollten auch unter den Buttons sein.

1. der Übergang der Schieberegler im USB-Anschluss muss fließender sein, nicht wie jetzt in Abschnitten (wenn man den Controller bewegt), sondern in einem schönen Übergang
2. die Farbe des Punktes zum Bewegen des Schiebers muss #36a9e1 und etwas größer sein
3. der Strich für den Schieberegler muss die Farbe weiß haben
4. die 3 blauen Punkte müssen auch in der mobilen Ansicht nebeneinander liegen

Bei Fragen oder Problemen könnt ihr euch bei mir melden.

ENGLISH VERSION:

Spoiler

Actually code, form AI generated, edited 2-3 times, but its not the code, what i want:

Spoiler

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preisrechner mit Schieberegler</title>
<style>
  body {
    background-color: grey;
  }

  #slider-container {
    text-align: center;
    padding: 20px;
  }
  #price {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
  }
  #duration {
    font-size: 18px;
  }
  
  #priceSlider.active, #priceSlider.hover {
    color: red;
  } 
</style>
</head>
<body>
<div id="slider-container">
  <img id="image" src="" alt="Bild">
  <input type="range" id="priceSlider" min="0" max="100" step="1">
  <div id="price">Preis: 0 €</div>
  <div id="duration">Dauer: 0 Tage 0 Stunden 0 Minuten</div>
</div>
<script>
  const pricePerHour = 2;
  const maxDayPrice = 5;
  const maxDayDuration = 3;
  const maxTotalPrice = 15;
  const images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png'];
  const priceSlider = document.getElementById('priceSlider');
  const priceDisplay = document.getElementById('price');
  const durationDisplay = document.getElementById('duration');
  const image = document.getElementById('image');

  priceSlider.addEventListener('input', updatePriceAndDuration);

  function updatePriceAndDuration() {
    const selectedValue = parseInt(priceSlider.value);
    const hours = Math.floor(selectedValue);
    const days = Math.floor(hours / 24);
    const remainingHours = hours % 24;
    const minutes = (selectedValue - hours) * 60;

    let price;
    if (days >= maxDayDuration) {
      price = maxTotalPrice;
    } else if (hours >= maxDayDuration * 24) {
      price = maxDayPrice;
    } else {
      price = (hours * pricePerHour) + ((days < maxDayDuration) ? (maxDayDuration - days) * maxDayPrice : 0);
    }

    priceDisplay.textContent = `Preis: ${price} €`;
    durationDisplay.textContent = `Dauer: ${days} Tage ${remainingHours} Stunden ${minutes} Minuten`;
    updateImage(selectedValue);
  }

  function updateImage(selectedValue) {
    const imageIndex = Math.floor(selectedValue / 20); // 20% pro Bild
    image.src = images[imageIndex];
  }

  updatePriceAndDuration(); // Initialisierung
</script>
</body>
</html>

The images should be changed by changing the controller, these are the images:

Spoiler