Frage zu Array in ein Model schreiben?

Ich möchte gerne ein array

array(1) { [0]=> object(App\Content\ContentModel)#24 (17) { ["id"]=> int(1) ["title"]=> string(7) "Healing" ["sub_title"]=> string(0) "" ["content"]=> string(0) "" ["sub_content"]=> string(0) "" ["offer1_time"]=> string(0) "" ["offer1_price"]=> string(0) "" ["offer2_time"]=> string(0) "" ["offer2_price"]=> string(0) "" ["offer_extension_time"]=> string(0) "" ["offer_extension_price"]=> string(0) "" ["image"]=> string(35) "pexels-arina-krasnikova-6997996.jpg" ["parent"]=> int(1) ["sequence"]=> int(1) ["link"]=> string(2) "15" ["button_text"]=> string(11) "Zum Angebot" ["module"]=> string(0) "" } }

das ich aus der Datenbank erhalte über ein repository in ein model speichern damit ich mehrere datensätze zu einem Modul hinzufügen kann, nun wirft es mir aber eine fehlermeldung an und ich komm einfach nicht weiter.

Hier das repository:

    public function fetchModulesForPage(int $pageId): array
    {
        $stmt = $this->pdo->prepare('SELECT modules.* FROM modules JOIN pages ON modules.parent = pages.id WHERE pages.id = :pageId');
        $stmt->bindValue(':pageId', $pageId);
        $stmt->fetchAll(PDO::FETCH_CLASS, ModulesModel::class);
        $stmt->execute();
        $modules = $stmt->fetch();



        $contentRepository = new ContentRepository($this->pdo);


        foreach ($modules as $module) {


        $moduleContent = $contentRepository->fetchContentForModule($module);
        $module->setContent($moduleContent);
        }
            return $modules;
        }

und hier das Model:

<?php


namespace App\Modules;


class ModulesModel
{


    public int $id;
    public string $title;
    public int $parent;
    public string $module;
    public int $sequence;
    public array $content = [];


    public function setContent(array $content): void
    {
        $this->content = $content;
    }
}

die fehlermeldung ist:

Fatal error: Uncaught Error: Call to a member function setContent() on int in C:\xampp\htdocs\test\src\Modules\ModulesRepository.php:29 Stack trace: #0 C:\xampp\htdocs\test\src\Controller\PagesController.php(61): App\Modules\ModulesRepository->fetchModulesForPage(6) #1 C:\xampp\htdocs\test\index.php(73): App\Controller\PagesController->getAllContentFromModules(6) #2 {main} thrown in C:\xampp\htdocs\test\src\Modules\ModulesRepository.php on line 29

die line 29 ist folgende:

$module->setContent($moduleContent);
Array, Code, MySQL, PHP, Programmiersprache
html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

Bild zu Frage
HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
Html und JavaScript Code?

Hallo zusammen,

ich möchte für eine Webseite ein Widget erstellen, das die nächsten Veranstaltungen anzeigen soll. Diese werden in dem Code dann hinzugefügt. Auf dem Widget welches auf der Webseite angezeigt wird dürfen aber immer nur zwei Veranstaltungen gleichzeitig dargestellt werden. Das Datum der Veranstaltungen soll immer mit dem aktuellen Datum verglichen werden. Ist das Datum der ganz oben also an erster Stelle stehenden Veranstaltung seit einem Tag überschritten soll diese gesamte Veranstaltung ausgeblendet werden. Die darunter stehende also an zweiter Stelle befindliche Veranstaltung rückt dann an erste Stelle und an Zweite Stelle rückt dann eine bisher noch nicht angezeigt Veranstaltung. Immer so das halt nur zwei Veranstaltungen gleichzeitig angezeigt werden. Das Datum vergleichen und ein/ausblenden und neu ordnen der Veranstaltungen funktioniert bei meinem Code noch nicht so ganz. Kann mir dabei bitte jemand helfen. Wenn das möglich ist am besten den Code so anpassen damit diese Funktionen so funktionieren.

Mit freundlichen Grüßen

Tim

Hier ist mein aktueller Code davon:

<!DOCTYPE html>

<html>

<head>

  <style>

    /* Stil für das Widget */

    .event-widget {

      border: 1px solid #ccc;

      padding: 6px;

      max-width: 215px; /* Breiteres Widget */

      background-color: #f7f7f7;

    }

    /* Stil für die Hellschwarze Hauptüberschrift */

    .event-widget h3 {

      color: #454545; /* Hellschwarz */

      font-size: 18px; /* Kleinere Schriftgröße für die Hauptüberschrift */

      text-align: center; /* Zentriert den Text */

      margin: 0; /* Entfernt den oberen und unteren Abstand der Überschrift */

    }

    /* Stil für die einzelnen Veranstaltungen */

    .event-widget ul li {

      margin-bottom: 10px; /* Fügt einen Abstand zwischen den Veranstaltungen hinzu */

      padding-bottom: 5px; /* Fügt zusätzlichen Abstand zwischen dem Trennungsstrich und dem Text hinzu */

    }

    /* Fügt einen Trennungsstrich zwischen den Veranstaltungen hinzu */

    .event-item + .event-item {

      border-top: 1px solid #ccc;

      margin-top: 10px;

      padding-top: 5px;

    }

    /* Stil für die übrigen Texte */

    .event-title {

      color: #8B0000; /* Weinrot */

      font-size: 15px; /* Kleinere Schriftgröße für den übrigen Text */

    }

    /* Stil für die Uhrzeit */

    .event-time {

      font-weight: bold;

      font-size: 12px; /* Kleinere Schriftgröße */

    }

  </style>

</head>

<body>

  <div class="event-widget">

    <h3>Nächste Veranstaltungen</h3>

    <ul id="event-list">

      <!-- Hier kannst du Veranstaltungen hinzufügen -->

      <li class="event-item">

        <strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>

        <br>

        Datum: 2023-11-09

        <br>

        Zeit: 14:30 - 16:00 Uhr

        <br>

        Ort: Feuerwehrhaus

      </li>

      <li class="event-item">

        <strong class="event-title">Volkstrauertag:</strong>

        <br>

        Datum: 2023-11-19

        <br>

        Zeit: 15:00 - 16:00 Uhr

        <br>

        Ort: Am Ehrenmal Ahrenshöft

      </li>

      <li class="event-item">

        <strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>

        <br>

        Datum: 2023-12-14

        <br>

        Zeit: 14:30 - 16:00 Uhr

        <br>

        Ort: Feuerwehrhaus

      </li>

      <!-- Weitere Veranstaltungen hier hinzufügen -->

    </ul>

  </div>

  <script>

    function updateEvents() {

      const eventList = document.getElementById("event-list");

      const events = eventList.getElementsByClassName("event-item");

      const currentDate = new Date();

      const displayedEvents = 2;

      for (let i = 0; i < events.length; i++) {

        const eventDateString = events[i].querySelector("br:nth-child(2)").textContent.replace("Datum: ", "");

        const eventDate = new Date(eventDateString);

        // Überprüfe, ob das Datum um einen Tag überschritten ist

        if (eventDate < currentDate) {

          events[i].style.display = "none"; // Verstecke vergangene Veranstaltungen

        } else {

          events[i].style.display = "block"; // Zeige zukünftige Veranstaltungen

        }

        // Überprüfe, ob die maximale Anzahl von angezeigten Veranstaltungen erreicht ist

        if (i >= displayedEvents) {

          events[i].style.display = "none";

        }

      }

    }

    // Aktualisiere die Veranstaltungen beim Laden der Seite

    document.addEventListener("DOMContentLoaded", updateEvents);

  </script>

</body>

</html>

HTML, Webseite, JavaScript, Code, Programmiersprache, Webentwicklung
Ubuntu: Wie mache ich das?

Ich nutze Ubuntu seit einer Woche(keine Programmierkenntnisse)
Ich möchte mit Python ein Programm entwickeln, das mir das leben etwas erleichtert. Ich möchte gerne als erstes meinen Yubikey als Passwortersatz auf meinem Computer installieren. Das Problem ist das ich ja um Änderungen am system vornehmen möchte mich im terminal befinden muss. Wie kann ich trotzdem eine GUI programmieren die mich durch den installationsprozess führt? Es muss doch möglich sein das man ein Programm entwickeln kann das eine GUI hat und trotzdem Zugriff auf das system hat oder nicht?

Zum Beispiel kann man einstellen ob der Yubikey als Passwortersatz oder als zweiter Faktor dienen soll. Das will ich halt wie bei einer .exe Datei schön nach einander in einem installationsguide haben. Ich habe das zu einem gewissen grad auch geschafft und zwar mit einem shellskript uund zenity. Aber sobald es ums eingemachte geht funktioniert es nicht mehr. Und zwar sobald ich den Pin für den Yubikey eingeben soll schlließt sich das Zenityfenster und ich bin im Terminal wo ich dann den Pin dort eingeben soll. Das Passwort vorher das hat funktioniert aber beim Pin eben nicht mehr. Dann kam ich auf die Idee ok machste das eben in Python. Python bietet aber nicht die zugriffsrechte wie ein shellskript. Was nun? Ich möchte auch andere Programme dann in den Installer einfügen so dass ich im prinzip sowas habe wie bei der Einrichtung des Systems am anfang wo man schritt für schritt das system konfiguriert.

Hier ist die Anleitung zu der ich das Programm schreiben möchte: https://wiki.ubuntuusers.de/Howto/Yubikey_anstelle_von_Passw%C3%B6rtern_verwenden/

App, Linux, Webseite, Ubuntu, Code, Programmiersprache, Python, Python 3
Wie stelle ich die div height so ein, das die innere HTML-Seite komplett angezeig wird?

Ich möchte eine Seite erstellen, wo ich alle Seiten, welche ich im Informatik-Unterricht erstellt habe in einen Div-Container lade. Jedoch wenn ich das tue, füllt bei mir die innere HTML-Seite nicht den kompletten Container sondern bekommt eine eigene Scrollbar. Ich hätte aber gerne , dass sich die komplette innere HTML-Seite auf den Container angezeigt wird und stattdessen mit der Scrollbar der Haupt Seite scrolle. Wie bekomme ich das hin?

Haupt-Seite

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../CSS/main.css" type="text/css" rel="stylesheet">
    <title>Informatik</title>
</head>
<body id="index_body">
<div id="main_container">
    <div id="header">
        <h1 align="middle">Informatikunterricht</h1>
    </div>
    <div id="menu_container">
        <ol style="line-height: 200%;">
            <li class="menu_button"><a href="#" onclick="loadPage('Kommentar')" >Seite</a></li>          
        </ol>
    </div>
    <div id="page_container">
        page
    </div>
</div>
</body>
<script>
    function loadPage(path){
        const object = '<object type="text/html" data="' + `${path}` + '.html" id="content"></object>';
        document.getElementById("page_container").innerHTML=object;
    }
</script>
</html>


Css-Datei (gilt auch für die innere HTML-Seite)

#main_container{

    display:grid;

    grid-template-columns: 20% 80%;

    grid-template-rows: 10%, auto;

    width:auto;

    background-color: #121212;

}

#header{

    grid-column: 1 / span 2;

    grid-row: 1;

    height: fit-content;

    background-color: #181818;

}

#page_container{

    display: flex;

    flex-direction: column;

    /* background-color: #282828; */

    background-color: blue;

    grid-row: 2;

    min-height: 100%;

}

#menu_container{

    background-color: #181818;

    grid-row: 2;

}

#content{

    flex: 1;

    width: 100%;    

}

span{

    background-color: gray;

    border: 1px solid white;

    padding: 0px 2px;

    border-radius: 5px;

}

body{  

    color: #FFFFFF;

    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    font-size: 15pt;  

}

#index_body{

    background-color: #121212;

}

/* body:not(#index_body){

    overflow:hidden;

} */


HTML, Webseite, CSS, JavaScript, HTML5, Code, Webentwicklung
HTML Text nach Hintergrundbild?

Hallo,

ich muss gerade eine einfache Website als Hausaufgabe programmieren und stoße auf einige Schwierigkeiten.

Aktuell hab ich 4 Hauprprobleme:

  1. Meine Navigationslieste im header ist trotz text-align: center, nicht mittig
  2. Ich habe im footer "2023", "Impressum" und "Alex" stehen. Impressum ist dabei ein relativer Link zu einer extra Seite und die 2 anderen Wörter sind einfach nur Wörter. Ich habe es geschafft "2023" links und "Alex" rechts zu positionieren, aber ich kriege das Wort "Impressum" mit dem Link nicht verschoben. Es ist zwar einigermaßen mittig, aber ist im footer selbst zu weit oben und ich krieg es nicht nach unten verschoben
  3. Ich habe in css ein Hintergrundbild eingestellt (damit der ganze Bildschirm abgedeckt ist). Nun möchte ich es aber so gestalten, dass anfangs das Hintergrundbild zu sehen ist und erst wenn man runter scrollt, soll der Text nach dem Bild kommen, anstatt auf dem Bild selbst
  4. Mein footer bleibt fest in einer Position, nämlich kurz vor Ennde des Hintergrundbildes, heißt sobald ich scrollen würde, wäre mein footer mitten drin, anstatt ganz am Ende der Seite. Ich habe alle möglichen position tags versucht, aber irgendwie scheint es nicht zu funktionieren

Kennt sich hier jemand gut damit aus und kann mir dabei weiterhelfen?

Ich bedanke mich schonmal sehr im vorraus.

Grüße Alex

Bild zu Frage
Homepage, HTML, Webseite, programmieren, CSS, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

  • Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
  • Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
  • Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
  • Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
  • Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
  • Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

Bild zu Frage
HTML, Webseite, programmieren, CSS, HTML5, Code, Informatik, Programmiersprache, Webdesign, Webentwicklung, Website Design
HTML und CSS Frage?

Hallo,

ich möchte die Grüne und gelbe Kärtchen im zweiten <section> nach oben in die MITTE schieben. Jedoch hakt es bisschen bei mir. Zudem müssen wir nur Flexbox benutzen das heisst kein margin oder position etc....

HTML_CODE:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>Flexbox</title>

  <link rel="stylesheet" href="../CSS/style.css">

</head>

<body>

  <header>

    <div class="layout2">

 <nav>

    <div class="container">

      <ul>

        <li>

          <a class="item1" href="#">LOGO</a>

          <a class="item" href="#">Menu 1</a>

          <a class="item" href="#">Menu 2</a>

          <a class="item" href="#">Menu 3</a>

          <a class="item2" href="#">Button</a>

        </li>

      </ul>

    </div>

  </nav>

 

</div>

</header>

<main>

  <div class="layout4">

  <section>

   

 

    <div class="laayout2">

     

      <div class="brownhelp"><div class="brownbox"></div></div>

      <div class="sectionone">

        <div class="content1">

          <div class="border"></div>

    <div class="border1"></div>

    <div class="border2"></div>

    <div class="border3"></div>

    <div class="border4"></div>

        </div>

  </div>

</div>

</section>

<section>

    <div class="laayout3">

  <div class="sectiontwo">

      <div class="content2">

        <div class="box"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

       

      </div>

    </div>

    </div>

</section>

</div>

</main>

</body>

</html>

CSS_CODE:

*{

  margin: 0;

  box-sizing: border-box;

}

header {

  background-color: #cae1fc;;

}

.layout2 {

  display: flex;

  align-items: center;

  justify-content: space-around;

  flex-direction: column;

}

.container {

  height: 150px;

  width: 1425px;

  background-color:rgb(80, 98, 104);

  display: flex;

  justify-content: space-around;

  align-items: center;

}

div ul {

  width: 100%;

}

div li {

  display: flex;

   justify-content: space-around;

   align-items:center;

  list-style: none;

}

.item {

  background-color: rgb(39, 185, 171);

  width: 120px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

 

}

.item1 {

  background-color: rgb(193, 67, 67);

  width: 115px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

}

.item2 {

  background-color: rgb(112, 29, 189);

  width: 80px;

  height: 90px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: small;

  display: flex;

  text-align: center;

  justify-content: center;

  flex-direction: column;

  text-decoration: none;

}

.layout2 > nav {

  height: 100vh;

}

nav {

  display: flex;

  align-items: flex-end;

  max-height: 170px;

}

/**/

.layout4 {

  background-color: #cae1fc;

}

.laayout2 {

  height: 1000px;

  display: flex;

  justify-content:space-around;

}

.sectionone {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  max-height: 345px;

  width: 270px;

 

}

.content1 {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 20px;

  background-color: #cae1fc;;

}

.border {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border1 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.border2 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border3 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border4 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.brownhelp {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  max-height: 345px;

  width: 1200px;

}

.brownbox {

  background-color: burlywood;

  width: 1150px;

  height: 305px;

 

}

/*YELLOW*/

.laayout3 {

  display: flex;

  justify-content: space-around;

  align-items: flex-start;

  height: auto;

 

}

.sectiontwo {

  display: flex;

  width: 800px;

  justify-content: space-around;

  align-items: center;

}

.content2 {

  display: flex;

  justify-content: space-around;

  gap: 200px;

}

.box {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box2 {

  background-color: green;

  width: 200px;

  height: 190px;

}

.box3 {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box4 {

  background-color: green;

  width: 200px;

  height: 190px;

}

Bild zu Frage
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
HTML/CSS?

Hallo,

ich möchte das container (das graue Box) ganz nach unten schieben. Aber es funktioniert nicht. ich habe schon align-items ausprobiert, justify-content aber es geht nicht(((((((. Vielleicht findet ihr einen Fehler in meinem Code. Bitte helft mir.

P.S Wir dürfen nicht margin, position etc. benutzen da diese Hausaufgaben nur mit Flexbox gemacht werden sollen (Unser aktuelles Thema).

CSS-CODE:

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


.layout2 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
}


.container {
    height: 150px;
    width: 1425px;
    background-color: rgb(80, 98, 104);
}


.item {
    background-color: rgb(39, 185, 171);
    width: 120px;
    height: 50px;
    color: #fff;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


.item1 {
    background-color: rgb(193, 67, 67);
    width: 115px;
    height: 50px;
    color: #fff;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


.item2 {
    background-color: rgb(112, 29, 189);
    width: 80px;
    height: 90px;
    color: #fff;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: small;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}


.item3 {
    background-color: rgba(112, 29, 189, 0);
    width: 80px;
    height: 110px;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}


.box1 {
    background-color: burlywood;
    height: 150px;
    width: 900px;
    display: flex;
    justify-content: flex-start;
}

HTML-CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
    <link rel="stylesheet" href="../CSS/style.css">
  </head>
  <body>
    <header>
      <div class="layout2">
        <nav>
          <div class="container">
            <ul>
              <li>
                <a class="item1" href="#">LOGO</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
  </body>
</html>

DAnkeschön LG

HTML, Webseite, CSS, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
HTML/CSS?

Hallo,

ich möchte Abstand nach unten, rechts, links beim header, aber ich darf nicht margin, position, gap etc. benutzen also nur flexbox (das ist ja auch unser aktuelles thema).

P.S. Es sollte am Ende wie auf Bild 2 aussehen

CSS-Code:

*{
 margin: 0;
 box-sizing: border-box;
}
.main {
 display: flex;
 justify-content: center;
}
.layout {
 display: flex;
 justify-content: center;
}
.container {
 height: 130px;
 width: 100%;
 background-color:rgb(80, 98, 104);
 display: flex;
 justify-content: space-around;
 align-items: center;
}
.item {
 background-color: rgb(39, 185, 171);
 width: 120px;
 height: 50px;
 color: #fff;
 font-weight: bold;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 font-size: large;
 display: flex;
 justify-content: center;
 flex-direction: column;
 text-align: center;
}
.item1 {
 background-color: rgb(193, 67, 67);
 width: 115px;
 height: 50px;
 color: #fff;
 font-weight: bold;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 font-size: large;
 display: flex;
 justify-content: center;
 flex-direction: column;
 text-align: center;
}
.item2 {
 background-color: rgb(112, 29, 189);
 width: 80px;
 height: 90px;
 color: #fff;
 font-weight: bold;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 font-size: small;
 display: flex;
 text-align: center;
 justify-content: center;
 flex-direction: column;
}
.item3 {
 background-color: rgba(112, 29, 189, 0);
 width: 80px;
 height: 110px;
 display: flex;
 text-align: center;
 justify-content: center;
 flex-direction: column;
}
.box1 {
 background-color: burlywood;
 height: 150px;
 width: 900px;
 display: inline;
 justify-content: flex-start;
 align-items: center;
 flex-direction: column;
 
}

Würde mich für schnelle Antworten freuen. Danke im Voraus!
LG

Bild zu Frage
HTML, Webseite, CSS, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
Verstehs nicht.. -> ModuleNotFoundError: No module named 'sys.main'; 'sys' is not a package? (PYTHON)?

Vielleicht kann mir jemand von hier helfen. Ich hatte das Problem noch nie und Lösungen gibt es offenbar auch keine hilfreichen.

Das Projekt besteht aus dem Hauptordner, in diesem die Struktur:

Projektordner/

├── main.py

├── sys/

│ ├── __init__.py

│ ├── main.py

├── web/

│ ├── __init__.py

│ ├── flask_app.py

│ ├── static/

│ │ ├── style.css

│ ├── templates/

│ │ ├── index.html

trotzdem erhalte ich ständig diese Meldung: (PS, der Ordner wurde als Package und nicht Directory in Pycahrm erstellt.)

*:\****\****\****\****\bots\testert\dfgdfg\****\Scripts\python.exe "D:/PyCharm/PyCharm Community Edition 2022.2.3/PyCharm Community Edition 2023.1.4/plugins/python-ce/helpers/pydev/pydevd.py" --multiprocess --qt-support=auto --client **** --port **** --file "*:\****\****\****\****\****\Projekte\****\main.py" 
Connected to pydev debugger (build ****)
Traceback (most recent call last):
  File "<frozen importlib._bootstrap>", line 1007, in _find_and_load
  File "<frozen importlib._bootstrap>", line 981, in _find_and_load_unlocked
ModuleNotFoundError: No module named 'sys.main'; 'sys' is not a package


Process finished with exit code 1     

Gerade wo ich diese Frage formuliere, frage ich mich, warum es über eine andere Ordnerstruktur gestartet wird, als in der in der sich das Projekt befindet????

Verstehe halt nicht warum PyCharm diesen Weg wählt, was einfach nur dumm wäre aber gut, das tut es halt:
*:\****\****\****\****\bots\testert\dfgdfg\****\Scripts\python.exe



Code, Python, Python 3, Pycharm
Java Input/Output Tests Junit?

Hallo, 

Ich habe folgendes Problem: Ich habe eine Klasse, die die Benutzerinteraktion (Input/Output) handhabt und ich muss Junit4 Tests dafür schreiben. 

Die Klasse, die ich testen möchte, sieht in etwa so aus:

package program;
// imports
public class UserInteraction {
    private Program program;


    private UserInteraction(){
        program = new Program();
    }


    // Menu display
    private void start() {
        while (!program.getProgramStarted) {
            String input = readInput();
            switch (input) {
            case "1":
                addUser();
                break;
            case "2":
                deleteUser();
                break;
            case "3":
                // ...
            default:
                System.err.println("Unknown option");
                break;
            }
        }
    }


    private void addUser() {
        // Output
        String username = readInput();
        program.addUser(username);
        System.out.println("User " + username + "added");
    }


    private void deleteUser() {
        // Output
        String username = readInput();
        program.deleteUser(username);
        System.out.println("User " + username + "deleted");
    }


    @SuppressWarnings("resource")
    private String readInput() {
        return (new Scanner(System.in)).nextLine();
    }


    public void main(String[] args) {
        UserInteraction ui = new UserInteraction();
        ui.start();
    }


}

Die Program Klasse so:

package program;
// imports
public class Program {
    // fields
    private User currentUser;
    private List<User> user = new ArrayList<User>();
    // constructor


    public void addUser(String name) throws Exception {
        if (user.size() >= 6) {
            throw new Exception();
        }
        int newID = user.size() + 1;
        user.add(new User(name, newID));
    }


    public String[] getALlUser() {
        int counter = 0;
        String[] userArray = new String[user.size()];


        for (User s : user) {
            userArray[counter++] = s.toString();
        }
        return userArray;
    }
}

Nun möchte ich zum Beispiel testen, ob die folgende Eingabe korrekt verarbeitet wird:

1
John
=> Benutzer John hinzugefügt

Zu diesem Zweck habe ich einen Junit-Test geschrieben, der wie folgt aussieht:

package tests;


import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.io.PrintStream;


import org.junit.After;
import org.junit.Test;


import program.*;


public class UserInteractionTest {


    private final InputStream originalIn = System.in;
    private final PrintStream originalOut = System.out;
    private Program program;


    @After
    public void restoreStreams() {
        System.setIn(originalIn);
        System.setOut(originalOut);
    }


    @Test
    public void testCreateUser() throws Exception {
        String input = "1\nJohn\n";
        ByteArrayInputStream in = new ByteArrayInputStream(input.getBytes());
        System.setIn(in);
        ByteArrayOutputStream outContent = new ByteArrayOutputStream();
        System.setOut(new PrintStream(outContent)); // Leitet System.out um


        program = new Program();
        try {
            program.main(null);
        } finally {
            System.setIn(originalIn);
        }
        String expectedOutput = "User John added";
        assertTrue("Output not found", outContent.toString().contains(expectedOutput));
    }


}

Die Eingabe ("1\n") wird gemacht, aber danach wird keine Eingabe eingefügt, so dass der Test hängen bleibt.

Weiß jemand, wie man dieses Problem lösen kann? Oder gibt es vielleicht eine bessere Möglichkeit, die Eingabe/Ausgabe meines Java-Programms zu testen/zu überprüfen?

Vielen Dank im Voraus!

Java, Code, Eclipse, Programmiersprache
WEBSTORM erkennt .send Funktion nicht?

Bei folgendem Code sind die Methoden .send und .awaitReaction unterstrichen.

"Unresolved function or method send()"

Ich habe discord.js und so schon installiert. Muss man da sonst noch etwas importieren, damit .send usw. funktionieren?

const { Client, MessageEmbed, Intents } = require('discord.js');
const client = new Client({ intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });

const TOKEN = 'Mein Token';
const channelId = 'ChannelID'; // Die ID des Textkanals, in dem die Nachrichten erstellt werden sollen

const userGroup = []; // Die Liste der Benutzer, die aufgelistet werden sollen
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']; // Die Auswahlmöglichkeiten

let currentIndex = 0; // Aktueller Index der Benutzergruppe

client.on('ready', () => {
    console.log(`Eingeloggt als ${client.user.tag}`);
});

client.on('messageCreate', async (message) => {
    console.log("P - Start des Event-Handlers");
    if (message.author.bot) return;

    if (message.content.startsWith('!start')) {
        console.log("P - !start erkannt");
        if (currentIndex < userGroup.length) {
            const user = await client.users.fetch(userGroup[currentIndex]);

            // Erstelle eine Nachricht mit den Auswahlmöglichkeiten
            const embed = new MessageEmbed() // Hier MessageEmbed verwenden
                .setTitle('Wähle eine Option:')
                .setDescription(options.join('\n'));
            const sentMessage = message.guild.channels.cache.get(channelId);
            await sentMessage.send(embed);
            console.log("P - Nachricht gesendet");
            // Füge Reaktionen hinzu
            for (let i = 0; i < options.length; i++) {
                await sentMessage.react(String(i + 1) + '\u20E3'); // Emoji-Reaktionen (1️⃣, 2️⃣, usw.)
            }

            // Warte auf eine Reaktion des aktuellen Benutzers
            const filter = (reaction, user) => user.id === userGroup[currentIndex];
            const collected = await sentMessage.awaitReactions(filter, { max: 1, time: 60000 }); // 60 Sekunden Zeit zum Reagieren

            if (collected.size === 0) {
                message.guild.channels.cache.get(channelId).send(`${user.tag} hat keine Option ausgewählt.`);
            } else {
                const chosenOption = options[parseInt(collected.first().emoji.name) - 1];

                message.guild.channels.cache.get(channelId).send(`${user.tag} hat "${chosenOption}" ausgewählt.`);
                // Hier kannst du die gewünschte Aktion ausführen, basierend auf der ausgewählten Option
            }

            // Lösche die ursprüngliche Nachricht und die Auswahl-Nachricht
            await message.delete();
            sentMessage.delete();

            currentIndex++; // Zum nächsten Benutzer in der Gruppe wechseln
        } else {
            message.channel.send('Alle Benutzer aus der Gruppe wurden aufgelistet.');
        }
    }
});
console.log('Bot starting');

client.login(TOKEN);
JavaScript, Code, node.js, Discord, Discord Bot, Discord.js
Wechselgeld Rechner in C?

Ich habe den folgenden Code:

#include <stdio.h>

int main(void)
{
    /* declarate variables */
    float price, paid, change;
    int cents;
    int rest;
    int cent1;
    int cent2;
    int cent5;
    int cent10;
    int cent20;
    int cent50;
    int eur1;
    int eur2;

    /* print out price and paid amount */
    printf("Rechnungsbetrag: ");
    scanf("%f", &price);

    printf("Erhaltener Betrag: ");
    scanf("%f", &paid);

    /* calculate the change as float */
    change = paid - price;

    printf("======================\n");
    printf("Rückgeld: %.2f EUR\n", change);
    printf("======================\n");

    /* calculate the change in cents */
    cents = change * 100;


    eur2   = cents / 200;
    rest = cents % 200;

    eur1   = rest / 100;
    rest = cents % 100;

    cent50 = rest / 50;
    rest = cents % 50;

    cent20 = rest / 20;
    rest = cents % 20;

    cent10 = rest / 10;
    rest = cents % 10;

    cent5  = rest / 5;
    rest = cents % 5;

    cent2  = rest / 2;
    rest = cents % 2;

    cent1  = rest / 1;


    printf("1 Cent:  %d\n", cent1);
    printf("2 Cent:  %d\n", cent2);
    printf("5 Cent:  %d\n", cent5);
    printf("10 Cent: %d\n", cent10);
    printf("20 Cent: %d\n", cent20);
    printf("50 Cent: %d\n", cent50);
    printf("1 EUR:   %d\n", eur1);
    printf("2 EUR:   %d\n", eur2);


    return 0;
}

Es werden zwei Werte Eingeben, einmal den Rechnungspreis und den erhaltenen Betrag, dann wird das Wechselgeld ausgerechnet. Danach soll die Anzahl der jeweiligen Münzen errechnet werden, die es benötigt um den Betrag des Wechselgeldes zu erreichen.

Wenn ich, zum Beispiel, als Rechnungsbetrag 1.50 habe, und als Erhaltenen Betrag 2.00, dann gibt es mir 1 50 Cent münze und eine 10 cent münze aus.

Ich habe verschiedene Beträge ausprobiert und es kommt immer diese extra 10 Cent Münze raus.

Wie kann ich das beheben?

Computer, Linux, Code, Programmiersprache, Algorithmus, C (Programmiersprache)
WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

<body class="backgroundimage">

  <div class="card">

    <div class="search">

      <button><img src="/images/SuchIcon.png"></button>

     <input type="text" placeholder="Search" spellcheck="false"/>

      

    

     

    </div>

  </div>

    

    

  

  <div class="weather"> 

    <div class="center margin-top">

    <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />

    </div>

    <div>

      <h1 class="temp">22°c</h1>

    </div>

     

     

    <div class="center">

      <h2 class="city center margin-top">New York</h2>

    </div>

      <hr class="hr1 line1" />

      <div id="imagesMain">

        <img src="/images/image1.png" width="75" height="75" class="imageline "

        <img src="/images/image1.png" width="75" height="75" class="imageline "

        <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

        <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

        <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

      </div>

      <div>

       

        <p style="color:black;"class="line0 title margin-left ">Monday</p>

        <p style="color:black;"class="line0 title margin-left ">Tuesday</p>

        <p style="color:black;"class="line0 title margin-left ">Wednesday</p>

        <p style="color:black;"class="line0 title margin-left ">Thursday</p>

        <p style="color: black;"class="line0 title margin-left ">Friday</p>

        

        

      </div>

      <hr class="hr1 line" />

    <div class ="details">

      <div class="col">

        <img src="images/humidity.png"/>

        <div>

          <p class="speed">Humidity</p>

          <p class="humidity">50%</p>

           

        </div>

      </div>

      <div class="col">

        <img src="images/wind.png" />

        <div>

          <p class="speed">Wind Speed</p>

          <p class="wind">15 km/h </p>

          

        </div>

      </div>

    </div>

  </div>

   

 

</body>

hier mein Css code:

.backgroundimage {

  background-image: url('../images/sun_background.png');

  background-attachment: fixed;

  background-repeat: no-repeat;

  background-size: cover;

}

.cloud-background {

  background-image: url('../images/cloud.png');

  /* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

  width: 90%;

  max-width: 470px;

  color: #fff;

  margin: 10px auto 0;

  border-radius: 20px;

   

   

}

.search{ 

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.search input{

  border: 0;

  outline: 0;

  background: #ebfffc;

  color: #555;

  padding: 10px 25px;

  height: 60px;

  border-radius: 30px;

  flex: 1;

  margin-right: 16px;

  font-size: 18px;

}

.search button{

  border: 0;

  outline: 0;

  background: #ebfffc;

  border-radius: 60%;

  width: 60px;

  height: 60px;

  cursor: pointer;

}

.weather-icon{

   

  margin-bottom: -30px;

}

.weather h1 {

  font-size: 80px;

  font-weight: 500;

  color: floralwhite;

}

.weather h2 {

  font-size: 40px;

  font-weight: 400;

  margin-top: -10px;

  color: floralwhite;

}

.details {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 20px;

  margin-top: 50px;

  

}

.col {

  display: flex;

  align-items: center;

  text-align: left;

  margin-top: 150px;

  

}

  .col img {

    width: 20px;

    margin-right: 20px;

    margin-bottom: 70px

  }

.humidity, .wind{

  font-size: 28px;

  margin-top: -6px;

  color: floralwhite;

}

.speed{

  font-weight: bold;

}

.temp {

  margin-bottom: 20px;

  display: flex;

  justify-content: center;

}

.search button img{

  width: 55%;

}

.center {

  display: flex;

  justify-content: center;

  

}

.top-left{

  display: flex;

  justify-content:left 

}

.top-left

{

  margin-left: 10px;

}

.margin-top{

  margin-top: 20px;

}

.hr1 {

  width: 390px;

  height: 2px;

  color: black;

}

.line{

  margin-bottom: -100px;

  margin-top: 10px;

}

.line1{

  margin-top: 30px;

  margin-bottom: -20px;

}

.line0{

  margin-top: 70px;

  margin-bottom: -90px;

  font-size: 14px;

  font-weight: bold;

  color: black;

}

.imageline {

  margin-top: 5px;

  margin-bottom: -90px;

   

}

.imagesMain {

  padding: 0;

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  text-align: center;

}

  .imagesMain img {

    height: 400px;

    width: 300px;

    vertical-align: middle;

  }

.title {

  display: inline-block;

  color: lightgray;

}

.margin-left{

  margin-left: 14px;

}

Internet, App, HTML, CSS, Code, Programmiersprache, Webentwicklung

Meistgelesene Fragen zum Thema Code