Frontend – die besten Beiträge

Hallo,

suche nach einem Template/Beispiel-Anwendung oder ähnliches wo erklärt wird wie man eine Sidebar (links) Implementiert die auch ein und aus geblendet werden kann.

Vorzugsweise:

• Bootstrap 5
• Blazor Server
• Kein JS
• Basic, nichts Komplexes, es sollte eine einfache Sidebar sein die ein und ausklappbar ist.

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

<div id="story">
		<p id="grid1">1</p>
		<p id="grid2">2</p>
		<p id="grid3">3</p>
		<p id="grid4">4</p>
		<p id="grid5">5</p>
		<p id="grid6">6</p>
	</div>

#grid1{
	grid-area: "eins";
	border: 1px solid black;
}
#grid2{
	grid-area: "zwei";
	border: 1px solid black;
}
#grid3{
	grid-area: "drei";
	border: 1px solid black;
}
#grid4{
	grid-area: "vier";
	border: 1px solid black;
}
#grid5{
	grid-area: "fünf";
	border: 1px solid black;
}
#grid6{
	grid-area: "sechs";
	border: 1px solid black;
}


#story{
	padding: 15px;
	color:  white;
	background-color: rgb(0, 0, 255);
	display: grid;
	grid-template-columns: 200px 200px 200px;
	grid-template-rows: 200px 200px 200px;
	gap: 16px;
	grid-template-areas:
	"eins" "eins" "zwei"
	"drei" "vier" "zwei"
	"fünf" "vier" "sechs";
}

Es wird bei mir Quasi nur 1 2 3 nächste Zeile 4 5 6 angezeigt. Bild in der Ergänzung meiner letzten Frage. Ich will aber dass es so aussieht wie in grid template areas nur halt dass nicht zum Beispiel 1 1 dasteht sondern nur ein großes Feld mit der Zahl 1 drinnen.

Hallo liebe Com !

Ich habe vor als Front End Web Developer zu arbeiten, und lerne die dazu benötigten Technologien.

HTML, CSS und JavaScript verstehe ich genug, und nun stellt sich mir die Frage ob ich jQuery lernen soll, vereinfacht JavaScript, oder soll ich sofort mit React beginnen, weil React immer populärer wird. Ich glaube jQuery zu lernen nicht notwendig ist und ich auch sofort React lernen kann, oder gibt es Sachen aus jQuery die jeder Web-Developer kennen muss ? Sowie die Basics aus html, css oder JS ?

Ich habe jetzt mit

 npm run build

einen Ordner namens "build", wenn ich den über den FTP Zugang hochlade und die URL aufrufe erscheint nur eine Leere Weiße Seite.

Jedoch wenn ich es über andere Anbieter Deploye die das für mich übernehmen dann funktioniert alles einwandfrei.

Wie genau kriege ich das auch hin ?
Nutze All Inkl.

Ich habe als Beispiel folgenden HTML-Aufbau, welchen ich leichter nicht ändern kann.

Ziel später ist es wenn man auf eine category klickt, dass alle sub-category´s aus- oder eingeblendet werden.

Wie bekomme ich nur die Elemente unter der category ohne dabei auch alle sub-categorys der anderen categorys mit auszuwählen? (Die Anzahl der sub-category´s ist nicht immer gleich)

<div class="container">

<div class="category"> Kleidung </div>

<div class="sub-category"> Hose </div>

<div class="sub-category"> Pulli </div>

<div class="category"> Essen </div>

<div class="sub-category"> Bananen </div>

<div class="sub-category"> Äpfel </div>

<div class="sub-category"> Birnen </div>

<div class="category"> Getränke </div>

<div class="sub-category"> Cola </div>

<div class="sub-category"> Fanta </div>

<div class="sub-category"> Bier </div>

<div class="sub-category"> Wasser</div>

</div>

Hallo,

ich arbeite mich gerade in MudBlazor ein. Es ist wirklich ein sehr gutes Framework, mit einer überragenden Dokumentation.

Allerdings stoße ich auf ein Problem, auf das ich einfach keine Lösung finden kann.

Wie kann ich die Hintergrundfarbe im MainLayout ändern?

Ich könnte das auch für jede Seite machen, was ja aber irgendwie sinnfrei wäre, wenn alle dieselbe Hintergrundfarbe haben sollen.

Meine MainLayout.cs sieht momentan so aus.

Ich habe es auch schon mit style Background-color probiert, leider ohne Erfolg.

Hat jemand eine Idee?

Hi,

ich bin gerade dabei in Angular eine kleine Webseite zu erstellen. Einfach Just for Fun.

Kurz meine Components + Quellcode.

app-component.html

<app-toolbar></app-toolbar>


<router-outlet></router-outlet>

toolbar.component.html

<div class="head" style="background-color: darkgreen;">
    <div class="box">
            <button class="selectionButton" routerLink="/startseite">
                <div class="menuButton"></div>
                <div class="menuButton"></div>
                <div class="menuButton"></div>
            </button>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">TypeScript</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Java</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton" routerLink="/htmluebersicht">
            <font size="5">HTML</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Cypress</font>
        </button>
    </div>
</div>

html-page.component.html

<p>html-page works!</p>

Wenn ich jetzt auf den Button HTML ("/htmluebersicht") klicke, kommt der Text "html-page works!" .... Alles gut, so solls.
Wenn ich jetzt aber wieder auf den Menü Button ("/startseite") klicke wird meine toolbar.component.html irgendwie zweimal auf der Webseite angezeigt.

Weis jemand wieso die toolbar dann zweimal angezeigt wird?

Ich hoffe es ist verständlich was ich meine.

Einfache Frage... Ich weiß, dass man mit HTML nichts hacken kann. Ich weiß auch, dass man die Website so temporär bearbeiten kann... Manche würden dies als Hacking bezeichnen.. Doch was hat das mit der NASA zu tun?

Was wird man da vermutlich tun? Flexibel steht da auch wahrscheinlich muss man viel reisen?

LG

Hallo,

gibt es eine Möglichkeit Webseiten Online in einem art Editor zu erstellen. Also nur das Frontend. 

Das Backend => Controller Datenbank etc dann selber daran anbinden ?

Hallo,

ich bin noch Anfänger in javascript und wollte fragen wie ich eine Funktion in javascript auslöse nachdem meine HTML Seite geladen hat, ohne explizit einen button mit einer onclick zu schreiben der diese Funktion aufruft. Die Funktion kriegt ein Parameter im HTML Teil übergeben, was dann in etwa so aussieht:

<button id="drücken" onclick="Funktion({{result}})"></button>

• ich kriege das nur durch diesen button im html teil hin.

<tbody id="Eintrag"></tbody>

• der Parameter wird iteriert und in eine Tabelle gehängt

Javascript:

function Funktion(result){

for(var key in result)

key an Eintrag anhängen.

}

Das funktioniert auch alles gut, nur wird das alles nur ausgeführt wenn ich explizit auf den button drücke. verstehe auch nicht wie das sonst gehen würde. Ich kann ja nicht beispielsweise ein window.onload auf der javascript-Datei schreiben weil ich ja noch den result parameter in der HTML Datei übergeben muss.

Gibt es eventuell eine Möglichkeit innerhalb des HTML Datei dann sowas zu schreiben?:

window.onload = Funktion({{result}});

Bei mir kennt er dann nicht Funktion weil es auf der externen Javascript-Datei liegt.

Künstliche Intelligenz? Data Mining? ERP Systeme? Data warehouses? Business intelligence? Oder andere?

LG

Hallo, ich kriege folgende Fehlermeldung bei meinem Code: "Uncaught SyntaxError: Unexpected identifier" und weiß nicht wie ich mein dict meine onclick so übergebe, dass ich anschließend damit weiterarbeiten und iterieren kann. Als Beispiel für mein Problem habe ich folgende kleine anwendung geschrieben:

script.js:

function geklickt(dictionary){
$('#Entries').text(dictionary);
}


var dict =
{'lizens':
    {'Apache License 2.0':
        {'value': 23,
         'paths': ['Bernd', 'Hans'],
         'id': '342345'}},
'rechte':
        {'Copyright (c) 2013-2020 the original author or authors': 3},
'authoren':
        {'Bexter': 6, 'senior': 6},
'fileTypes': [0, 21, 0, 0, 0, 0, 0, 0, 44],
}


 $("#buttons").append(`<button href="#"onclick="geklickt(${dict})">drücken</a></button>`);



test.html:
<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
</head>
<body >

<ul id="buttons"></ul>
<p id="Entries"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='assets/js/scripts.js') }}"></script>
</body>
</html>

Also meine Frage ist wie ich jetzt mein dict der onclick übergebe damit es am ende ausgegeben werden kann. In meiner eigentlichen Anwendung will ich damit natürlich noch weiterarbeiten, also vlt auch so dass ich es anschließend noch iterieren kann. Ich bin recht neu und kenne den Zusammenhang zwischen String und Dictionary noch nicht richtig, kann ich bei einem Dictionary iterieren wenn es als string vorliegt oder ist Dictionary eine art eigene Datenstruktur?
Danke schonmal im Voraus.

Hallo,

Es geht um folgendes. Eingeloggte Benutzer im Frontend sollen Dateien in verschiedene Ordner, welche sie vorher auswählen können, hochladen. Dann soll es ebenso noch eine Seite geben wo es eben wie ne Art Dateimanager gibt, wo man zwischen den Ordnern navigieren kann und sich die Dateien anschauen / runterladen kann. Also das erste wie ne Art Uploadseite, und das zweite dann das richtige Frontend, eben mit dem Dateiexplorer.

Wie lässt sich das Realisieren?

LG,

Nycrofox

Ich bin seit einer Weile am überlegen ob ich mein Studium in der Informatik weiterführen soll (4.tes Semester, FH München) weil ich die komplexen Probleme und nicht ansatzweise ausreichende Hilfe von anderen sowie das ständige Gefühl nicht genug zu sein stellenweise echt schlimm finde.

Ich habe mich ursprünglich für Informatik beworben weil ich besser mit Computer umgehen wollte und in das Design vom Front-End einwirken wollte. Ich finde schön geschriebene Websiten und Programme sind super. Generell empfinde ich es als viel angenehmer etwas graphisches zu sehen als tagelang nur in Logik zu denken. Ich habe letztens zum Spaß eine Website gemacht mit HTML und CSS und habe dabei zum ersten Mal seit 4 Semestern richtig Ehrgeiz gehabt die Website optisch zu verschönern.

Jetzt stellt sich für mich eine wichtige Frage. Habe ich als Informatiker gute Chancen im UX-Design und wie ist in etwa das Gehalt (ich bin ehrlich, mir ist das wichtig das ich gut vergütet werde). Ich würde wirklich gerne mein Praxissemester im UX-Design machen weil ich das Gefühl habe das es meinen Ehrgeiz und meine Talente am besten fördert. Wisst ihr ob das geht? Hat da jemand Erfahrung?

Für jede Antwort bin ich dankbar^^

Wenn ich mir jetzt einen Server miete für meine Website, kann ich dann das Backend selbst hochladen?

Bzw wie genau funktioniert das? Auf den Server dann einfach die PHP oder die anderen Datein hochladen?

Ich suche zur Zeit nach einer guten Programmiersprache mit der man Desktop-Software machen kann und UI entspannt programmieren kann. Ich hatte mir mal C++ angeschaut aber ich finde, eine UI in C++ zu programmieren ist absoluter Müll, ebenso Python oder Rust. Ich suche nach sowas in Richtung Electron, wo man halt Frontend und Backend getrennt macht. Electron war für mich jedoch keine Lösung, denn ich hasse JavaScript. Das Backend ist ja gar nicht das Problem, die meisten Sprachen bieten da ja sehr gute Lösungen. Aber eine Lösung für die UI... gibt es da was nices? Oder lieg ich generell komplett falsch?

Hallo,

meine Frage ist, was der ,,Unterschied zwischen dem Frontend und dem UI / Ux Design“ ist?

Wenn man liest das eine App oder eine Website mit mehreren Sprachen geschrieben wurde, wie kann man sich das vorstellen...

Beispiel: Firma XY nutze für seine App im Bereich Backend Python und Frontend HTML/JavaScript/CSS

Wie wurden diese beiden Bereiche nun kombiniert bzw. verbunden?

vielen Dank im voraus :)