Binary Tree auf Website visualisieren (HTML, CSS, JS)?

Hallo, ich muss für den Softwareentwicklungsunterricht einen Binärbaum mit JavaScript programmieren und diesen anschließen mit HTML und CSS visualisieren. Der Lehrer meinte explizit, dass KI oder andere Hilfe verwendet werden sollte, da die Aufgabe sonst zu umfangreich wäre. Nun, ich habe ChatGPT 4o für eine Visualisierung davon gefragt und nur fehlerhaften Code bekommen. Andere Klassenkameraden haben ChatGPT mit Canvas (Premiumversion) verwendet und da gab es aber richtige Ergebnisse.

Nun zu meiner Frage: Wo bekomme ich den Code her? Ich habe bereits das halbe Internet durchforstet, aber es entspricht fast nichts meinen Anforderungen:

Es soll Textfelder zum Hinzufügen, Löschen und Suchen geben
Bei Hinzufügen tippt man eine Zahl ein und diese wird hinzugefügt
Bei Löschen wird die Zahl aus dem Binärbaum gelöscht
Beim Suchen wird die Zahl im Binärbaum besonders dargestellt wie z.B. leuchtet der Node dann auf
Keine Librarys dürfen verwendet werden (!)

Wäre dankbar für bereits fertigen Code. Ich bekomme den Binärbaum selbst her, aber an der Visualisierung scheiterts.

1 Antwort

iQa1x

16.10.2024, 18:47

Warum nimmst du nicht einfach eine "normale" Suchmaschine? "binary tree canvas" liefert als 3. Treffer bei DuckDuckGo https://dev.to/foqc/plotting-a-binary-tree-in-javascript-47hc , der Code ist nicht sehr komplex, den kannst du als Ausgangsbasis zur Visualisierung nehmen und deine Funktionen von oben dann noch ergänzen.

GuteFrageXY13

Beitragsersteller

17.10.2024, 19:08

Habe ich schon. Leider konnte ich nichts finden, was wirklich zu meinen wünschen passt. Außerdem werden oft noch veraltete Standards verwendet, was auch nicht wirklich optimal ist.

Ähnliche Beiträge

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zum Beitrag

Mehrere Html seiten mit einer css Datei?

Kann man mit mehreren Html Dateien auf eine Css datei zugreifen um nicht alles von neu zu kopieren usw. Wenn man für alles eigene classes bzw. ids verwendet zB

...zum Beitrag

CMS in eigene HTML/CSS Webseite einbinden?

Hallo,

folgendes:

Ich habe eine Webseite für eine kleine Firma mittels HTML/CSS erstellt. Einen Baukasten habe ich nicht verwendet, da die Webseite ziemlich komplex war und der Inhaber sie lieber nach eigenen Vorstellungen erstellt haben wollte und nicht einfach durch eine Copy/Paste-Vorlage.

Die Webseite ist soweit fertig, nun möchte der Inhaber aber selbst Inhalte einfügen und aktualisieren können. Kann ich meine HTML-Seite nachträglich zum Beispiel mit einem CMS einbinden? Ich habe sie in VS Code erstellt.

Die Idee mit dem CMS kam daher, dass der Inhaber mit dem Code nicht zurechtkommt und ich Angst habe, dass er die ganze Webseite zerstört, falls er den Code falsch ändert.

Gibt es auch noch andere bessere Varianten als CMS?

Danke schonmal.

...zum Beitrag

Webseite sicherer machen?

Hallo, ich gabe mit einfachem HTML und CSS eine Webseite für mein Unternehmen programmiert, denn ich brauche eigentlich nur eine einfache Seite. Nun zur Frage: Wie kann ich diese Webseite sicherer machen? Verwendet habe ich nur Html und Css und ich will das Service von Google Cloud benutzen

...zum Beitrag

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

Ideen Programmieren?

Bin ein Anfänger im Programmieren und kenne die Grundlagen von HTML, CSS und Javascript. Ich hab grad lust was zu Programmieren habe nur keine Ideen.

Danke schonmal für die Antworten:)

...zum Beitrag

HTML/JS/CSS. Währungsrechner code von USD zu EUR?

Hallöchen 👋

Bin gaaanz neu in der Thematik programmieren, und zwar ich würde gerne bei meinem aktuell Projekt (Währungsrechner) noch die Funktion hinzufügen das man von USD zu Euro umrechnen kann.

Ich habe selbst probiert eine "Funktion" hinzuzufügen allerdings funktioniert diese wohl nicht. Wäre um Hilfe und eine kleine erklärung sehr sehr dankbar. (Benutze VS)

...zum Beitrag

Wieso funktioniert die CSS-Datei nicht?

Ich muss bis nächste Woche eine HTML-Website erstellen, und wollte meinem HTML-Dokument ein Stylesheet hinzufügen, jedoch wird das Stylesheet nicht übernommen, was ist der Grund dafür?

Hier sind Screenshots vom Code:

HTML:

CSS:

Kann mir bitte jemand sagen, woran der Fehler liegt?

...zum Beitrag

Kann man mit HTML und CSS auch Apps schreiben?

Ich habe mal gelesen das das geht ChatGPT sagt aber nein. Nur Webapps.

Ich meine aber richtige apps die man dann im playstore / appstore insatlieren kann.

LG Lisa

...zum Beitrag

Search Bar mir HTML, CSS; Java?

Wie kann ich eine Search Bar mit HTML, CSS und Java Code machen? Ich möchte, dass wenn man was eingibt, eine neue Seite geöffnet wird und auf dieser dann die Suchergebnisse angezeigt werden.

...zum Beitrag

Live ticker in html?

Wie kann ich einen live ticker erstellen mir einer Website für den Autor und für eine Website für den Leser weil mit ChatGPTs Hilfe kommt da nur irgendein quatsch raus aber wenn ich das dann so umsetze funktioniert halt mit der Datenbank nicht kann html und css aber das mit den Datenbanken ist halt noch bisschen trikky

...zum Beitrag

Hintergrund mit button ändern?

Beim folgenden Code ändert sich die Farbe von Hintergrund, Schrift.außerdem die Beschriftung vom Button auf die Farbe die als nächstes kommt.

Ich würde aber gerne noch eine dritte Farbe hinzufügen aber auch nach lagen googlen leider nicht fündig geworden des halb Versuche ich es nochmal hier.

...zum Beitrag

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen