Webseite – die neusten Beiträge

Verwandte Themen
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
dieTrolle
05.07.2024, 11:15

Dropdown auf iMac funktioniert nicht, wasmuss ich ändern?

Ich habe ein Dropdown-Menü erstellt, welches auch auf allen von mir getesteten Browsern funktioniert ( Firefox, Chrome, Edge, Opera, Vivaldi, Tor). Nun bekam ich die Rückmeldung: Funzt NICHT auf Safari. Habe mir die URALT Version von Safari für Windows heruntergeladen; Das Ergebnis ist katastrophal null Reaktion auf Auswahl!

Habe den Quelltext aus dem Internet und nur meinen Bedürfnissen angepasst.

css

#menu,#menu ul{list-style:none;padding:0;}
#menu li{margin:5px 10px;}
#menu a{text-decoration:none;outline:none;display:block;color:#777;padding:5px 14px}
#menu a:hover,#menu a:focus{color:black; background:orange;}
#menu .hider{overflow:hidden}
#menu .sub ul{margin-top:-200%;transition:.5s;-webkit-transition:.5s}
#menu .sub a:focus ~ .hider > ul,#menu ul:hover{margin-top:0;}

ul {
   max-width: 12em;
}

ul ul {
   max-width: 12em;
   border: 2px solid orange;
}

ul ul ul{
   max-width: 12em;
   border: 2px solid green;
}
//ul ul ul:hover {background-color:white;}

ul ul li {
   background-color: Gainsboro;
   margin: 2px;
   z-index:1;
}

php

<ul id="menu">
   <li class="sub"><a href="#">Select Order by</a>
      <div class="hider">
         <ul>
            <li><a href="image_1.php";>Listing</a></li>
            <li><a href="image_self.php";>Own Selection</a></li>
            <li class="sub"><a href="#">Inventory No.</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php";>Numerical</a></li>
                     <li><a href="image_from.php">from - to</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Title</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Title">Alphabetical</a></li>
                     <li><a href="title_from.php">Letter Selection</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Art Typ</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=ArtTyp">Alphabetical</a></li>
                     <li><a href="art_from.php">Selected</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Art Series</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Category">Alphabetical</a></li>
                     <li><a href="cat_from.php">Selected<br>Search in all Entries</a></li>
                     <li><a href="series_from.php">  Selected<br>Search in Art Series Menu<a><li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Media</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Medium">Alphabetical</a></li>
                     <li><a href="media_from.php">Selected</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Dimension</a>
               <div class="hider">
                  <ul>
                     <li><a href="dim_from.php?dim=height">height<br>from - to</a></li>
                     <li><a href="dim_from.php?dim=width">width<br>from - to</a></li>                           
                 </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Exhibition</a>
               <div class="hider">
                  <ul>
                     <li><a href="exhibition.php?Time=now">Currently on Display</a></li>
                     <li><a href="exhibition.php?Time=all">All Artworks<br>Order by Exhibitors</a></li>
                     <li><a href="aussteller.php">Selected<br>by Exhibitor</a></li>                           
                  </ul>
               </div>
            </li>
         </ul>
      </div>
   </li>
   <li class="sub"><a href="#">Image Info</a>
      <div class="hider">
         <ul>
            <li><a href="image_info.php">all</a></li>
            <li><a href="image_infrom.php">from - to</a></li>                  
         </ul>
      </div>
   </li>
</ul>

Was muss ich wie ändern oder ergänzen damit es auch auf dem iMac / Safari läuft? Wie oben gesagt alle anderen Browser einwandfrei!

HTML, Webseite, CSS
1 Antwort
Zortah123
04.07.2024, 13:45

Problem mit PHP-Composer: Was ist schief gelaufen?

Versuche hier grade auf meinem Server 2 verschiedene Librarys mithilfe von Composer zu installieren.

Leider ist wohl irgendwas bei der Installation von Composer gehörig schief gelaufen: Ich konnte zwar zunächst eine Library erfolgreich installieren aber es fing damit an, dass ich alle Composerdateien im /root Verzeichnis hatte. Diese wollte ich dann via Terminal nach /var/www/html verschieben (dabei muss aus irgendwelchen Gründen eine dazugehörige autoload.php verloren gegangen sein) also den kompletten Composerordner gelöscht und alles versucht neu zu installieren und aus der noch vorhandenen composer.phar versucht die Dateien neu zu extrahieren und dabei laut Terminal sogar auf die neueste Composer Version upgegradet: Dies hat zum Teil geklappt, nur eine extrem wichtige "composer.json" wurde dabei nicht erstellt. Also zunächst mal mit mehreren verschiedenen Anleitungen versucht diese manuell zu erstellen (was ja anscheinend in 5 Minuten problemlos möglich ist).

Naja das Problem ist nun, dass ich irgendwo festsitze. Ich habe die Anleitungen im Netz befolgt, aber bisher hab ich weder genau kapiert wieso diese extrem wichtige Datei nach erneuter Installation fehlt, noch was genau in diese Datei reingeschrieben werden muss oder per Script reingeschrieben wird (Name des Projekts? die Pfade (Namespaces?) der Packages, die ich installieren möchte?), noch wie ich folgenden Fehler beheben kann:

In ArrayLoader.php line 44:

Unknown package has no name defined ([]).

Diesen Fehler bekomme ich nun seit Stunden, egal was ich mit Composer versuche, auch wenn ich einfach versuche zu debuggen oder eine erneute Installation probiere...

Irgendwelche Ideen oder Ahnungen was hier falsch gelaufen ist?

Internet, Linux, IT, Webseite, programmieren, PHP, Putty, Script, ssh, Terminal, Composer, Kommandozeile, Debian 10
2 Antworten
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

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