Verwandte Themen

eduard908
14.08.2024, 16:19
Website API Problem lösen?

Ich habe die letzten Tage sehr lange an einer Website im Frontend gearbeitet, die ich für das Unternehmen meiner Mutter machen wollte.

Die Website ist auch sogut wie fertig, das Frontend funktioniert und ich weiß auch, wie ich die Website hochladen kann.
Jedoch habe ich an einem Punkt noch massive Probleme:

An einer Stelle der Website soll der Besuche in ein Formular seinen Namen und seine Email Adresse eingeben, um weitergeleitet zu werden. Das funktioniert auch soweit, jedoch sollen die Daten gleichzeitig in dem Dienst activecampaign gespeichert werden.

Leider habe ich es mit meinen Javascript Kenntnissen und auch mit ChatGPTs, sowie der Hilfe des Supports von Activecampaign nicht geschafft, dies zum laufen zu bringen.

Nach erneuter Recherche habe ich dann herausgefunden, dass ich wohl aufgrund der Fehler, die die Konsole ausgibt mit einem Backend arbeiten sollte, um die Daten an die API von Activecampaign weiterzuleiten. Allerdings bin ich kompletter Amateur und habe 0 Ahnung von Backend Programmierung und gehe auch nicht davon aus, dass wenn ich mich damit nun eine Weile intensiv beschäftigen würde, das Problem in nächster Zukunft immernoch nicht beheben kann.

Allerdings ist es in meinem Kopf auch nicht mehr unbedingt viel Arbeit, um das ganze dann fertig zu stellen oder? Immerhin geht es ja nur noch um das Übermitteln von Daten.

Ich frage mich nun, wie ich das gelöst bekomme. Ich habe jetzt nicht unbedingt jemanden in meinem Umfeld, der sich damit auskennt und mir helfen könnte oder so und alles an Dienstleistungen, was ich zum Beispiel auf Fiverr finden konnte, dreht sich nur um die gesamte Programmierung eines Backends oder einer ganzen Website. Jedoch ist das ja so gesehen viel zu viel, was ich buchen würde, wenn es nur darum geht, ein Formular mit der API zu verbinden.

Ich will halt auch wenn dann einen seriösen Auftragnehmer haben, da es ja um Kundendaten geht, jedoch weiß ich nicht, wie ich das alles umsetzen kann...

Ich bin so kurz vorm Ziel und komme jetzt einfach nicht weiter, es ist so deprimierend, vor allem nach der ganzen Arbeit, die da schon drin steckt...

Wie löse ich das Problem?

Früher oder später will ich aber auch den Skill haben, genau dieser Art zu programmieren, allerdings gehe ich derzeit noch hauptsächlich in die Schule...

Wo taucht man dahingehend so in das Thema ein, dass man das lernt? (am besten von Zu Hause aus)

HTML, Webseite, CSS, JavaScript, Programmiersprache, Webdesign, Webentwicklung
3 Antworten
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
4 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
1 Antwort
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

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