JavaScript – die neusten Beiträge

Verwandte Themen
eduard908
11.08.2024, 20:53

Zu dumm für Programmierprojekt?

Ich habe die letzten Tage für das Unternehmen meiner Mutter eine Website programmiert (alles per code), jedoch nur im Frontend...

Jetzt gilt es, mehr oder weniger das Backend zu machen und ich bin komplett am verzweifeln...

So habe ich vor allem das Problem, dass ich Daten eines Formulars der Website an ActiveCampaign senden will (falls ihr das kennt), um sie zu speichern, jedoch bekomme ich es nicht hin, die API mit meiner Seit zu verbinden, sodass diese die Daten richtig einfügen kann.

Php kann ich gar nicht und Javascript begrenzt, ich habe versucht mithilfe von ChatGPT zu arbeiten, was bei den visuellen Designs auch super funktioniert hat, allerdings gibt chatgpt jetzt auch den Geist auf. Nichts funktioniert, was er mir gibt

und es gibt keine Tutorials im Internet, wie ich es richtig einfinde, Activecampaign hat dazu kein Tutorial und aus der Dokumentation bin ich dahingehend auch nicht schlau geworden.

Ich weiß nicht mehr weiter, wo ich noch suchen soll, allerdings kann ich auch nicht einfach so jetzt aufgeben. Ich habe sehr viel Zeit in diese Website gesteckt und meine Mutter ist nun quasi darauf angewiesen, dass ich sie fertig stelle.

Ich gehe auch nicht davon aus, dass Grundlagen von Javascript oder PHP mir in dem Zeitraum weiterhelfen werden, schließlich sind es ja eigentlich nur 10 Zeilen Code, die ich brauche, damit alles funktioniert.

Habt ihr Ahnung, an wen ich mich wenden kann, um das Problem zu lösen? ich möchte es halt unbedingt hinbekommen.

HTML, Webseite, JavaScript, PHP, Programmiersprache, Webentwicklung
5 Antworten
xXxNightmarexXx
31.07.2024, 20:54
Mit Links

Javascript Variablen ein/ersetzen - Matomo - Domain?

Moinsen,

ich bin dabei, mir ein Script für Multidomain Tracking zu bauen.
Also Cookies auf mehreren Domains setzen usw.
Das meiste funktioniert soweit wie erwartet.
Das Script soll dynamisch über Cloudflare Zaraz geladen werden.

Jetzt fehlt mir bis jetzt soweit nur noch das einsetzen der Session ID, die ich generiere und die Domain, die aktuell aufgerufen wurde.

In dem Code möchte ich gerne die Variable sessionID sowie die Variable Domain einsetzten lassen.
Wie kann ich das bewerkstelligen?

Ich bin leider nicht ganz so erfahren in Javascript.
Ich habe schon einiges getestet aber es will einfach nicht.

Die Sache ist die, dass es mit Vanilla JS laufen müsste. Also ohne extras usw.

Es soll halt nur JS per Cloudflare Zaraz eingebunden werden.

Der/Die beiden Code Bestandteile sind folgende:

Einmal der Matomo Tag Manager      

<!-- Matomo Tag Manager -->
<script>
  var _mtm = window._mtm = window._mtm || [];
  _mtm.push({'uid':+sessionID });
  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
  (function() {
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src='https://xyz.de/js/container_12345.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Tag Manager -->


Sowie der JS Tracker Code

var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
  _paq.push(["setCookieDomain" +DomainX]);
  _paq.push(["setDomains", ["*xyz.de"]]);
  _paq.push(["enableCrossDomainLinking"]);
  _paq.push(['setUserId', sessionID]);
  _paq.push(['enableHeartBeatTimer', 20]);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  _paq.push(['trackVisibleContentImpressions', true, 750]);
  (function() {
    var u="https://xyz.de/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'X']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="https://xyz.de/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
Linux, HTML, Webseite, JavaScript, HTML5, Code, PHP, Programmiersprache, Script, Webentwicklung, Variablen, cloudflare
1 Antwort
SmartWatchAsker
31.07.2024, 11:48
Mit Bildern

Webdesign: Einfache Website erstellen (WordPress) - ohne Programmierkenntnisse möglich?

Hallo Community,

für unser Unternehmen möchte ich gerne eine einfache Website selbst erstellen.

.

Folgende Tabs möchte ich haben: Start - Über uns - Leistungen - Wissenswertes - Kontakt

Auf der Startseite möchte ich eine Slideshow von Bildern unserer Firma einfügen, bei Über uns Bilder von unserem Team, bei Leistungen eine Auflistung unsere Leistungen, bei Kontakt eben Kontaktmöglichkeiten inklusive Google Maps Location.

Und in der Fußzeile (die auf allen Seiten zu sehen ist) sollten nochmal allgemeine Informationen wie Kontakt, Adresse, Öffnungszeiten, google Maps, Impressum, Datenschutzerklärung zu sehen sein.

.

Alles in allem also eine sehr einfache basic Website. Trotzdem eine Herausforderung für mich, da ich kein Webdesigner bin. Ich möchte die Seite trotzdem selbst erstellen und sie nicht in Auftrag geben.

.

Ich frage mich deshalb, bzw frage euch Webdesign-Community, ob es einfach möglich ist, den Quellcode einer Muster-Website (oder den einer schon vorhandenen Website) zu nehmen und an den relevanten Stellen die eigenen Inhalte einzufügen.

Wenn ja, woher bekomme ich solche Muster und/oder wo sind Herausforderungen, wenn ich einfach eine vorhandene Website kopieren und die relvanten Inhalte (Namen, Texte, Bilder) austauschen möchte?

.

Bild zum Beitrag
Homepage, App, Online-Shop, HTML, Webseite, CSS, WordPress, JavaScript, Webdesign, Webentwicklung
5 Antworten
Cringosaurusrex
28.07.2024, 20:11

Modernes Webdesign - Gut oder Schlecht

Liebe GF-Gemeinde,

ich möchte eine Diskussion über modernes Webdesign anstoßen und eure Meinungen dazu hören. Ist es gut oder schlecht? Mir persönlich kommt das heutige Webdesign ineffizient und unübersichtlich vor, insbesondere im Vergleich zu den Jahren 2012 bis 2016, als Websites noch mäßig bis kaum JavaScript verwendet haben.

Mittlerweile scheint es notwendig zu sein, für jede Kleinigkeit eine JavaScript-Animation zu integrieren. Ein dickes, fettes Button-Design öffnet oft animierte Menüpunkte, was die Rechenleistung des Geräts unnötig beansprucht. Früher war das Webdesign simpler und fokussierter auf die Benutzerfreundlichkeit, ohne übermäßige Effekte und Animationen.

Hier sind ein paar Punkte, die ich zur Diskussion stellen möchte:

1. Performance und Effizienz:

- Viele moderne Websites belasten die Rechenleistung und Akkulaufzeit von Geräten stark. Vor allem bei älteren Geräten oder schwächerer Hardware kann dies zu einem langsamen und frustrierenden Benutzererlebnis führen.

- Ist die zunehmende Nutzung von Animationen und dynamischen Inhalten wirklich notwendig oder geht sie auf Kosten der Effizienz?

2. Benutzerfreundlichkeit:

- Durch die Vielzahl an Animationen und Effekten kann die Benutzerfreundlichkeit leiden. Nutzer müssen oft mehr klicken und warten, um zu den gewünschten Informationen zu gelangen.

- War die Benutzerfreundlichkeit früher besser, weil die Seiten einfacher strukturiert waren?

3. Designtrends und Ästhetik:

- Natürlich spielt auch der ästhetische Aspekt eine Rolle. Moderne Websites sehen oft beeindruckend aus und bieten eine ansprechende visuelle Erfahrung.

- Ist dieser ästhetische Fortschritt die zusätzliche Rechenleistung und mögliche Unübersichtlichkeit wert?

Ich bin gespannt auf eure Meinungen!

Internet, Webseite, Design, JavaScript, Webdesign
4 Antworten
johndont
19.07.2024, 17:22
Mit Bildern

Bash Script um DNS umzustellen?

Habe einmal ein Bash Script und eine .Desktop Verknüpfungen auf meinem Arch KDE und wollte bei Doppelklick auf die Verknüpfungen zb Updaten oder DNS auf 8.8.8.8 oderr Automatisch Umstellen.

(Ich kann auch via KDE Connect das ganze Starten und ohne EIngabe abschließen mit sudo pacman -Syu --noconfirm && yay -Syu --noconfirm)

Aber bei toggle_dns funktioniert das leider nicht mit dem gelieferten Code von ChatGPT (siehe Unten) und ich kann garkein Bash, nur "normale" programmiersprachen wie JavaScript oder PHP. Mit Python würde ich es vielleicht hinkriegen aber das ist doch viel aufwendiger jetzt die IDE erneut zu installieren als mit Bash.

Wenn es das gibt wollte ich eine KDE eigene Benachrichtigung in welchen Modus es jetzt gewechselt ist zb : DNS auf Automatisch umgestellt oder DNS auf 8.8.8.8 Umgestellt statt ein Terminal was ich dann noch per hand schließen muss.
Kann mir jemand weiterhelfen den Code zu reparieren ?

toggle_dns.sh :

#!/bin/bash

# Datei und Schnittstelle für die DNS-Konfiguration
RESOLV_CONF="/etc/resolv.conf"
INTERFACE="Netzwerkschnittstelle_von_euch"

# Funktion zum Setzen des DNS-Servers auf 8.8.8.8
set_dns() {
  echo -e "nameserver 8.8.8.8\noptions edns0" | sudo tee $RESOLV_CONF > /dev/null
  sudo systemctl restart NetworkManager
  notify "DNS wurde auf 8.8.8.8 gesetzt."
}

# Funktion zum Zurücksetzen des DNS-Servers auf automatisch
reset_dns() {
  sudo rm -f $RESOLV_CONF
  sudo systemctl restart NetworkManager
  notify "DNS wurde auf automatisch gesetzt."
}

# Funktion zum Senden einer KDE-Benachrichtigung
notify() {
  message=$1
  kdialog --passivepopup "$message" 5
}

# Überprüfen, ob der DNS-Server bereits auf 8.8.8.8 gesetzt ist
if grep -q "8.8.8.8" $RESOLV_CONF; then
  echo "DNS ist derzeit auf 8.8.8.8 gesetzt. Umschalten auf automatisch."
  reset_dns
else
  echo "DNS ist derzeit automatisch konfiguriert. Umschalten auf 8.8.8.8."
  set_dns
fi

Bild zum Beitrag
PC, Server, Computer, Internet, Windows, WLAN, Technik, Linux, IT, programmieren, Java, JavaScript, Ubuntu, Cplusplus, Bash, C Sharp, DNS, Gnome, Informatik, KDE, Programmiersprache, Python, Script, Shell, Arch Linux, Rust, Debian, PowerShell, KDE Plasma, node
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
jovetrojo
10.07.2024, 16:55

JavaScript Preis Calculator?

document.addEventListener('DOMContentLoaded', function() {
    const slider = document.getElementById('diskspace');
    const hiddenValue = document.getElementById('initialDiskspace');
    const demo = document.getElementById('demo');
    const selectedValue = document.getElementById('diskspaceOutput');
    const selectedPrice = document.getElementById('priceOutput');
    const initialDiskspaceValue = parseInt(new URLSearchParams(window.location.search).get('value')) || 0;

    // Setze den initialen Speicherplatz
    hiddenValue.value = initialDiskspaceValue;

    // Variable für den aktuellen Preis
    let currentPrice = 10; // Startpreis

    // Funktion zur Berechnung des Preises
    const calculatePrice = (value) => {
        // Grundpreise
        const basePrice = 10; // Grundpreis für den Server
        const pricePerGB = 1; // Preis pro GB Speicher
        const pricePerCPU = 1; // Preis pro CPU-Kern

        // Eingabewerte holen
        const diskspace = parseInt(value); // Speicherplatz in GB
        const cpuCores = parseInt(document.getElementById('cpu').value); // Anzahl der CPU-Kerne
        const os = document.getElementById('os').value; // Betriebssystem

        // Betriebssystem-Aufschläge (hier Beispiel, wie man unterschiedliche Preise je nach Betriebssystem anwenden könnte)
        let osPrice = 0;
        if (os === 'windows') {
            osPrice = 5; // Beispiel: Windows ist teurer
        } else if (os === 'macos') {
            osPrice = 10; // Beispiel: macOS ist noch teurer
        }

        // Berechne den Gesamtpreis
        const totalPrice = basePrice + (diskspace * pricePerGB) + (cpuCores * pricePerCPU) + osPrice;

        // Aktualisiere den angezeigten Preis
        selectedPrice.innerText = `Gesamtpreis: ${totalPrice.toFixed(2)} €`;

        return totalPrice;
    };

    // Setze den initialen Wert und Preis
    selectedValue.innerText = slider.value;
    calculatePrice(parseInt(slider.value));

    // Event Listener für Änderungen am Slider
    slider.oninput = function() {
        selectedValue.innerText = this.value;
        calculatePrice(parseInt(this.value));
    };

    // Formularabsenden mit verstecktem Wert und Preis
    const form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        hiddenValue.value = slider.value;
        this.submit();
    });
});

Hey das ist der Code uns er funktioniet nicht also nicht ganz richtig. Die rechnung ist falsch undzwar klappt nicht das 1GB Festplatte = 1€, 1GB Ram = 1€ und 1 Kern = 1€. und das dann einfach addiert wird das funktioniert nicht kann wer helfen? Es ust eine Website

Webseite, JavaScript, Programmiersprache
1 Antwort
Nadine0006
09.07.2024, 13:53

PHP/Passwortvergleich: Warum kommt immer wieder eine Fehlermeldung?

Hallo!

Ich will ein Passwort, das eingegeben wird, vergleichen. Doch es kommt immer wieder diese Fehlermeldung:

Eingegebenes Passwort: n1234
admin:238 Benutzername: nadine
admin:242 Uncaught ReferenceError: form is not defined
  at validatePassword (admin:242:18)
  at HTMLButtonElement.onclick (admin:161:100)

Der Code im AdminController sieht so aus:

public function validatePassword(Request $request, $userName) {
  try {
    $password = $request->input('password');

    // Benutzer anhand des Benutzernamens finden
    $user = User::where('username', $userName)->first();

    // Debugging-Informationen in das Log schreiben
    \Log::info('Benutzername: ' . $userName);
    \Log::info('Benutzer gefunden: ' . ($user ? 'Ja' : 'Nein'));

    if (!$user) {
      return response()->json(['valid' => false, 'message' => 'Benutzer nicht gefunden']);
    }

    // Überprüfen, ob das gespeicherte Passwort im Bcrypt-Format ist
    $passwordInfo = password_get_info($user->password);
    \Log::info('Passwort-Algorithmus: ' . $passwordInfo['algoName']);

    if ($passwordInfo['algoName'] !== 'bcrypt') {
      return response()->json(['valid' => false, 'message' => 'Das gespeicherte Passwort verwendet nicht den Bcrypt-Algorithmus.']);
    }

    // Passwortüberprüfung
    $passwordCheck = Hash::check($password, $user->password);
    \Log::info('Passwort korrekt: ' . ($passwordCheck ? 'Ja' : 'Nein'));

    if ($passwordCheck) {
      return response()->json(['valid' => true]);
    }
    else {
      return response()->json(['valid' => false, 'message' => 'Ungültiges Passwort']);
    }
  }
  catch (\Exception $e) {
    \Log::error('Fehler bei der Passwortvalidierung: ' . $e->getMessage());
    return response()->json(['valid' => false, 'message' => 'Serverfehler. Bitte versuchen Sie es später erneut.'], 500);
  }
}

Und im admin blade so:

function showPasswordModal(route, userName) {
  console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
  $('#passwordModal').modal('show');
  $('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
  $('#passwordForm').data('userName', userName);
  console.log(userName);
}

function validatePassword() {
  console.log('validatePassword() wurde aufgerufen');
  var enteredPassword = document.getElementById('passwordInput').value;
  var userName = $('#passwordForm').data('userName');
  console.log('Eingegebenes Passwort:', enteredPassword);
  console.log('Benutzername:', userName);

  $.ajax({
    type: 'POST',
    url: form.action,//$('#passwordForm').attr('action'), // Stellen Sie sicher, dass dies die richtige Route ist
    data: {
      '_token': '{{ csrf_token() }}',
      'password': enteredPassword
    },
    success: function(response) {
      console.log('Server-Antwort:', response);

      if (response.valid) {
        $('#payForm').submit();
      }
      else {
        alert(response.message || 'Falsches Passwort! Bitte versuche es erneut.');
      }
    },
    error: function(xhr, status, error) {
      console.error('AJAX-Fehler:', error);
      alert('Fehler beim Validieren des Passworts. Bitte versuche es später erneut.');
    }
  });

Warum kommt immer wieder eine Fehlermeldung? Ich habe schon alles probiert und das schon seit Stunden! Danke.

HTML, JavaScript, Code, PHP, Programmiersprache
1 Antwort
Nadine0006
09.07.2024, 08:58

Code funktioniert leider nicht?

Hallo!

Mein Code bekommt immer wieder eine Fehlermeldung, oder er funktioniert einfach nicht.

function showPasswordModal(route, userName) {
console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
$('#passwordModal').modal('show');
$('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
$('#passwordForm').data('userName', userName);
}
function validatePassword() {
console.log('validatePassword() wurde aufgerufen');
var enteredPassword = document.getElementById('passwordInput').value;
var userName = $('#passwordForm').data('userName');
var form = document.createElement('form');
form.method = 'POST';
form.action = "{{ route('admin.validatePassword', ['userName' => ':userName']) }}".replace(':userName', userName);
var csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = '_token';
csrfInput.value = '{{ csrf_token() }}';
form.appendChild(csrfInput);
var passwordInput = document.createElement('input');
passwordInput.type = 'hidden';
passwordInput.name = 'password';
passwordInput.value = enteredPassword;
form.appendChild(passwordInput);
document.body.appendChild(form);
form.submit();

wenn auf den pay-button gedrückt wird, erscheint ein passwortfeld indem ein benutzerdefiniertes Passwort eingegeben werden soll. Diese Passwörter sind in einer Tabelle gespeichert. überprüft wird in diesen zwei methoden doch debuggen funktioniert irgendwie nicht und die variablen sind normalerweise richtig befüllt.? Weiß vllt irgendwer eine Lösung????? Danke im Vorraus.

HTML, JavaScript, PHP
1 Antwort
MrNobody212
07.07.2024, 14:27

Wie kann ich meinen Fehler beheben?

Hallo,

ich habe ein Problem mit meinem Code. Meine Simulation eines kleinen Roulette Spiels funktioniert nicht . Wenn man zwei mal auf eine Farbe wettet gewinnt man ab dem zweiten mal immer auch wenn man verlieren müsste. Man bekomt drotzdem Geld zugeschrieben die erste Runde funktioniert aber.

Ich bin noch am Anfang mit dem Programmieren und arbeite mit studio.code.org.

Der Code:

onEvent("btn_Roulette_drehen", "click", function() {
 var wettbetrag_roulette = getText("tinput_wettbetrag");
 if (wettbetrag_roulette > points || 0 >= wettbetrag_roulette) {
  wettbetrag_roulette = -1;
  setText("lbl_status_r.", "Du hast zu viel oder garnichst gewettet!");
  setText("tinput_wettbetrag", "");
 } else if ((points >= wettbetrag_roulette)) {
  if (getText("dr_user_game_color") !== "Keine" || getText("dr_user_game_number") !== "Keine") {
   if (getText("dr_user_game_color") != "Keine" && getText("dr_user_game_number") != "Keine") {
    setText("lbl_status_r.", "Nur eine Sache Wetten!");
   } else {
    setText("lbl_status_r.", "Dreht");
    user_number_game_input = getText("dr_user_game_number");
    user_color_game_input = getText("dr_user_game_color");
    var roulette_gewinnzahl = randomNumber(1, 36);
    var rote_zahlen = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36];
    var ist_rot = false;
    for (var i = 1; i < rote_zahlen.length; i++) {
     if (roulette_gewinnzahl === rote_zahlen[i]) {
      ist_rot = true;
      roulette_gewinnfarbe = "rot";
      break;
     }
    }
    if (ist_rot) {
     setText("lbl_status_r.", "Es gewinnt rot und die Zahl " + roulette_gewinnzahl);
    } else {
     setText("lbl_status_r.", "Es gewinnt schwarz und die Zahl " + roulette_gewinnzahl);
    }
    if (roulette_gewinnfarbe != "rot") {
     roulette_gewinnfarbe = "schwarz";
    }
    if (roulette_gewinnzahl == user_number_game_input) {
     money = money +wettbetrag_roulette*36;
     points = points-wettbetrag_roulette;
      
      
      
      
      
     setText("lbl_status_r.", "Du hast gewonnen!!!!(" + roulette_gewinnzahl + roulette_gewinnfarbe +")");
     setText("lbl_money_counter", "Money:" + money);
     setText("lbl_score_counter", "Score" + points);
      
    } else if ((roulette_gewinnfarbe == user_color_game_input)) {
     points = points-wettbetrag_roulette;
     money = money + wettbetrag_roulette*2;
     setText("lbl_money_counter", "Money:" + money);
     setText("lbl_score_counter", "Score:" + points);
    } else {
     points = points-wettbetrag_roulette;
     setText("lbl_score_counter", "Score:" + points);
    }
   }
    
  } else {
   setText("lbl_status_r.", "Nichts ausgewählt!");
  }
 }
});
Fehler, Programm, JavaScript, Bug, Code
1 Antwort
kaysiebke
06.07.2024, 03:59
Mit Bildern

wie bekomme ich in google Docks Tabelle zwei button mit abstand nebneinander?

Hallo in die Runde und schon mal vielen Dank im Voraus in die Runde!

Ich bin noch blutiger Anfänger und fange gerade an mich mit dem HTML zu beschäftigen. Wie schon im Fragetitel beschrieben versuche ich zwei Buttons mit Abstand nebeneinander zu bekommen, aber es gelingt mir nicht so recht. Daher setze ich mal das, was ich habe, hier rein. Ich würde mich über jeden lehrreichen Tipp sehr freuen, um meinen Horizont in diesem Bereich zu erweitern

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
form {
    background-color: #fff;
    width: 250px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 0px rgba(1,2,0.1);
    margin
    width:auto !important;
}
    label {
    font-weight: bold;
    text-transform: uppercase;
}
    input[type="text"] {
    width: 250px;
    padding: 20px;
    margin-bottom: 9px;
    border: 1px outset #FF0000;
    border-radius: 10px;
    box-sizing: border-box;
}
    input[type="button"] {
    display: block;
    margin: 0 auto 12px auto;
    cursor: pointer;
    width: 190px;
    padding: 20px 2px;
    background-color: #FF0000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 1px solid #FF0000;
    border-radius: 7px;
 
    transition: background 0.2s ease-out;
 
}
    input[type="button1"] {
    display: block;
    margin: 0 auto 7px auto;
    cursor: pointer;
    width: 140px;
    padding: 20px 2px;
    background-color: #FF0000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 1px solid #FF0000;
    border-radius: 7px;
 
    transition: background 0.2s ease-out;
 
}
    input[type="button1"]:hover {
    background-color: #19911b;
}
 
    input[type="button"]:hover {
    background-color: #19911b;
}
 
</style>
</head>
<body>
<form id="itemForm">
<label for="sku">SKU:</label><br>
<input type="text" id="sku" name="sku"><br>
<label for="color">Color:</label><br>
<input type="text" id="color" name="color"><br>
<label for="size">Size:</label><br>
<input type="text" id="size" name="size"><br>
<label for="description">Description:</label><br>
<input type="text" id="description" name="description"><br><br>
<input type="button" value="Submit" onclick="submitForm()">
<input type="button1" value="Reset" onclick="form.reset()">
</form>
<script>
function submitForm() {
var form = document.getElementById('itemForm');
var formData = {
'sku': form.sku.value,
'color': form.color.value,
'size': form.size.value,
'description': form.description.value
};
google.script.run.processForm(formData);
}
</script>
</body>

</html>

Bild zum Beitrag
HTML, CSS, JavaScript, HTML5, Code, Programmiersprache
1 Antwort
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
melisax795
03.07.2024, 11:19
Mit Bildern

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Bild zum Beitrag
HTML, Webseite, JavaScript, Webentwicklung, React, node.js
2 Antworten
Dungeoneer
01.07.2024, 15:23

CSS Klassen mit Javascript ändern?

Hallo!

Obwohl ich schon etwas Erfahrung mit CSS und Javascirpt habe, bin ich gerade das erste mal auf folgendes Problem gestoßen:

Ich habe für eine Website im Kopf in einem <style> - Bereich einige Klassen definiert.
(z.B.:
.header { border:1px outset gray; margin:.5em; padding:.5em; border-radius: 50%; height: 8%; width: 90%; }
und unten im body dann:
 <div class="header">)
Den Stil dieser Klassen will ich durch Javascript dynamisch ändern.
Javascript soll also nicht den style von einzelnen HTML-Elementen ändern, und auch nicht HTML-Elementen neue Klassen zuweisen. Vielmehr soll der Stil der Klasse direkt geändert werden, so daß sich die Änderung auf alle Elemente dieser Klasse auswirkt.

Konkret möchte ich das Layout dynamisch an die Größe des Browserfensters anpassen. Ein onResize Eventhandler im Body löst eine Javascript-Funktion aus, die entsprechende Änderungen im Layout vornimmt. Dabei wäre es natürlich praktisch, wenn man ähnlich aussehende Elemente (= gleiche class = gleicher CSS-style) auch zusammen anpassen könnte, und zwar auch mit errechneten Werten (z.B. Math.floor(clientHeight / 2)).

Habe lange gegoogelt und auf den üblichen Plattformen gesucht, habe aber immer nur Anleitungen gefunden, wie man Elementen neue Klassen zuweist.

Im Moment löse ich das Problem mit einer for-Schleife:
const AllHeaders = document.getElementsByClassName("header");
for (let i = 0; i < AllHeaders.length; i++) {
var Radius = Math.floor(AllHeaders[i].clientHeight / 2)
AllHeaders[i].style.borderRadius = Radius.toString() + "px";
}
und so weiter, für alle Klassen einzeln.
Das kann irgendwie doch nicht die beste Lösung sein...
Es muß doch eine Möglichkeit geben, auf die Klassen-Definitionen im Stylesheet mit Javascript zuizugreifen. Ansonsten wäre die Funktionalität von CSS doch stark eingeschränkt.

Hoffe, jemand kennt sich aus...

HTML, CSS, JavaScript, Webentwicklung
4 Antworten
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
Moni98799
26.06.2024, 03:10
Mit Links

FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung, Visual Studio Code
3 Antworten
JakeKlint
18.06.2024, 08:22
Mit Umfrage

Welche Methode zur Umsetzung einer Website?

Hallo ihr Lieben!

Ich habe einen Verein gegründet und wir brauchen eine ordentliche Website. Das Team der ITler besteht aus 3 Personen (inkl. mir). Einer davon kann Frontend (Design, CSS), einer kann Backend (Datenbanken, HTML, JS, Serverkonfiguration). Ich kann alles davon nur so ein bisschen und koordiniere das Projekt. Bisher haben wir eher provisorisch eine WordPress Seite, sind damit aber aus folgenden Gründen nicht zufrieden:

  1. Unübersichtlich mit den vielen Plugins usw. - es ist nicht einheitlich und wirkt zugemüllt und umständlich
  2. Der Code ist schwer zu lesen und nachzuvollziehen
  3. Man kann den Code (soweit ich weiß) nicht vollständig anpassen und ist daher in Hinblick auf Design und Funktionalität eingeschränkt (in unserem Theme „Astra“ kann man Designfarben einstellen, sieht aber nicht, wo sie verwendet werden)

Jetzt suchen wir nach einer Alternative. Man könnte versuchen, die Website ohne CMS o. Ä. auf die Beine zu stellen, man könnte ein anderes, anpassbareres CMS verwenden oder bloß ein CMF, wobei ich nicht sicher bin, ob das viel besser ist.

Wir können im Moment nicht genau einschätzen, ob es realistisch ist, die Webseite ohne CMS o. Ä. sicher, ordentlich und schön aufzubauen. Allerdings wissen wir auch nicht, ob es ein CMS gibt, das so viel Anpassbarkeit bietet, dass man (mit genug Programmierkenntnissen) theoretisch ALLES umsetzen kann. Funktionen, die wir brauchen, wären:

  • Beiträge (Blog, News)
  • Normale Inhaltsseiten
  • Eingebundene Mediendateien
  • Kleine eingebettete Online-Spiele
  • Kontakt/Anmeldeformulare
  • Suchfunktion
  • Design exakt, wie der Designer es sich vorstellt
  • evtl. ungewöhnliche Seitennavigation (Nicht nur mit Standard Menüs, wie bei WordPress von Anfang an drin)

Denkt ihr, WordPress oder Drupal ist durch Themes, Plugins/Modulen etc. doch anpassbar genug und wir müssten uns nur mal genauer hineindenken oder sollte man in unserem Fall lieber ganz auf Content-Management Optionen verzichten?

Vielen Dank schon mal für eure Antworten!

Benutzt Wordpress und verwendet vorhandene Themes und Plugins 56%
Baut die Seite von 0 auf selbst 44%
Benutzt Wordpress und programmiert Themes und Plugins selbst 0%
Benutzt Drupal und programmiert selbst 0%
Benutzt Drupal und verwendet vorhandenes 0%
Nutzt ein anderes CMS oder CMF 0%
Homepage, HTML, Webseite, CSS, WordPress, JavaScript, HTML5, CMS, Content-Management, Drupal, PHP, Typo3, Webdesign, Webentwicklung, Webhosting, Webserver, Website Design
6 Antworten
Moni98799
18.06.2024, 04:01

Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung
1 Antwort

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