Frontend - Ratgeber & Forum

Wie realistisch ist es, dass man Backend Webevelopment online in 6 Monaten intensiv lernt und dann Job findet?

Frage

von tsama

05.05.2024, 12:00

10 Stunden pro Tag.

Ohne Ausbildung oder Informatikstudium.

Wird HTMX JavaScript nutzlos machen?

Frage

von Tekeli03

02.05.2024, 21:05

Website mit einem Backend und frontend?

Frage

von Lennox10551

24.04.2024, 17:04

Ich möchte gerne eine Website mit backend und frontend weiß aber nicht wie das Geht? wisst ihr es?

Wenn ja bitte meldet euch zurück.

MFG.

Html semibold und bold schauen gleich aus?

Frage

von Thoss

24.04.2024, 14:25

Mit Bildern

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>

HTML, CSS, JavaScript Animation einfügen?

Frage

von Rolajamo

20.04.2024, 12:00

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

...dass Content 1 von Opacity 100 auf 0 geht
...dass Content 1 in Minus Y-Richtung 20px bewegt wird
...dass Content 2 von Opacity 0 auf 100 geht
...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

Warum macht hier html keinen Sinn?

Frage

von raleD

17.04.2024, 18:51

Es gibt in html ja h1 h2 h3 h4 h5 und zu guter letzt h6 für Überschriften

WOZU gibt es so viele?? h1, h2 und h3 verstehe ich vielleicht noch, aber wozu 6? Man kann einfach das p Tag benutzen und es selber mit css so stylen wie auch immer man will, man braucht doch keine extra 6 Tags

HTML Zufallsgenerator funktioniert nicht/keine Ausgabe?

Frage

von JtcXxM

10.04.2024, 09:24

Ich habe mir von ChatGPT einen Zufallsgenerator coden lassen. Jedoch kommt keine Augabe, bitte hilfe.

Das hier ist der Code btw

<!DOCTYPE html>

<head>

<title>Randomizer</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

}

.column {

float: left;

width: 20%;

padding: 10px;

}

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

}

</style>

</head>

<body>

<h1>Randomizer</h1>

<form>

<label for="sentence1">Sentence 1:</label>

<label for="sentence6">Sentence 6:</label>

<label for="sentence11">Sentence 11:</label>

<label for="sentence16">Sentence 16:</label>

<label for="sentence21">Sentence 21:</label>

</div>

<label for="sentence2">Sentence 2:</label>

<label for="sentence7">Sentence 7:</label>

<label for="sentence12">Sentence 12:</label>

<label for="sentence17">Sentence 17:</label>

<label for="sentence22">Sentence 22:</label>

</div>

<label for="sentence3">Sentence 3:</label>

<label for="sentence8">Sentence 8:</label>

<label for="sentence13">Sentence 13:</label>

<label for="sentence18">Sentence 18:</label>

<label for="sentence23">Sentence 23:</label>

</div>

<label for="sentence4">Sentence 4:</label>

<label for="sentence9">Sentence 9:</label>

<label for="sentence14">Sentence 14:</label>

<label for="sentence19">Sentence 19:</label>

<label for="sentence24">Sentence 24:</label>

</div>

<label for="sentence5">Sentence 5:</label>

<label for="sentence10">Sentence 10:</label>

<label for="sentence15">Sentence 15:</label>

<label for="sentence20">Sentence 20:</label>

<label for="sentence25">Sentence 25:</label>

</div>

<button type="button" onclick="generateRandomSentence()">Generate Random Sentence</button><br><br>

<label for="result">Random Sentence:</label>

</form>

function generateRandomSentence() {

var sentences = [];

// Get all sentence inputs and push their values into sentences array

for (var i = 1; i <= 30; i++) {

var sentence = document.getElementById("sentence" + i).value.trim();

if (sentence !== "") {

sentences.push(sentence);

}

// If there are sentences in the array, choose one randomly and display it

if (sentences.length > 0) {

var randomIndex = Math.floor(Math.random() * sentences.length);

document.getElementById("result").value = sentences[randomIndex];

} else {

document.getElementById("result").value = "No sentences provided";

}

</script>

</body>

</html>

Wie finde ich heraus ob Javascript wirklich funktioniert?

Frage

von MaxiDerWolfi

09.04.2024, 16:50

ich habe ein paar dinge in javascript versucht aber bin mir sehr unsicher ob es wirklich und sicher funktioniert, wie könnte ich überprüfen ob es zu 100% funktioniert?

var timeInterval;

        function startUpdatingTime() {
              clearInterval(timeInterval);
            timeInterval = setInterval(updateTime, 120000);
              displayTimeSetting();
        }
        function stopUpdatingTime() {
            clearInterval(timeInterval);
              displayTimeSetting();
        }
        function doubleUpdateTime() {
            clearInterval(timeInterval);
            updateTime();
            timeInterval = setInterval(updateTime, 60000);
              displayTimeSetting();
        }
        function updateTime() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        var age = xhr.responseText;
                        document.getElementById("antwort").textContent = "Antwort: " + antwort;
                    } else {
                        console.error('Es gab ein Problem mit der Anfrage.');
                    }
                }
            };
            xhr.open("GET", "update_time.php", true);
        }
        startUpdatingTime();

Warum wird meine Seite nicht aktualisiert?

Frage

von marcus09421

09.04.2024, 13:23

Hallo,

ich wollte machen, dass, wenn ich in Python etwas sage, ein Div im HTML eingefügt wird. Das funktioniert auch ganz gut, aber, da ich kein Websockets verwende, muss ich die Seite immer manuell aktualisieren, wenn der Div eingefügt wurde, damit es ihn auch anzeigt. Diese Funktion wollte ich automatisieren, doch es funktioniert nicht, wieso?

// FLASK
function detectWakeWord() {
    var detectedWord = 'luna'; 
    
    if (detectedWord === 'luna') {
        if (!document.getElementById('luna_wake_word')) {
            var div = document.createElement('div');
            div.id = 'luna_wake_word';
            document.body.appendChild(div);
            showWakeWord();
            
            setTimeout(function() { 
                location.reload(); 
            }, 1000); 
        }
    }
}

detectWakeWord();

Freundliche Grüsse

Warum funktioniert Flask und Websockets nicht?

Frage

von marcus09421

09.04.2024, 09:54

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Frage

von marcus09421

08.04.2024, 22:00

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

Welchen Weg sollte ich als angehender Frontend-Entwickler einschlagen: JavaScript Vanilla oder ein Framework?

Frage

von JrDev

08.04.2024, 05:05

Mit Umfrage

Hallo Leute,

ich hoffe, euch geht es gut und ihr habt einen angenehmen Tag.

Ich habe eine Frage an die erfahrenen Frontend-Entwickler unter euch, wie ihr dem Titel unschwer entnehmen könnt :).

Mein Ziel ist es, mich eigenständig so weit zu bilden, dass ich einen Job als Junior/Berufseinsteiger Frontendentwickler bekommen kann.

Bis dato habe ich bereits einen HTML5- und CSS3-Udemy-Kurs durchlaufen und einige Tutorials nachgebaut. Nun fühle ich mich fit genug für den nächsten Schritt.

Hierbei wollte ich wissen, ob ich mit JavaScript Vanilla starten soll und einen Kurs dazu machen soll oder direkt mit einem der bekannten JS-Frameworks wie Angular, React oder Vue.js?

Da ich während meiner Ausbildung bereits mit C# und WinForms gearbeitet habe, sind mir die Programmierungsgrundlagen nicht ganz fremd :D

Ich habe mal gehört, dass man JavaScript Vanilla nur lernen sollte, wenn man keinerlei Programmiererfahrung hat, z.B. über Schleifen, Verzweigungen usw., ansonsten sollte man direkt mit einem Framework starten.

Aktuell würde ich mich für React entscheiden, da man später das Wissen auch super in React Native implementieren kann und somit auch Apps entwickeln kann. Da Web und App meine Interessenbereiche in der Entwicklung sind, würde es sich super anbieten, es sei denn, die Mehrheit sagt nein, auf keinen Fall React. Dann bitte mit einer Begründung und was ich alternativ dazu dann lernen sollte :)

Ach ja, natürlich anhand meines Ziels dürft ihr mir auch alle anderen Tipps geben, was ich noch alles lernen könnte oder draufhaben sollte, damit eben keine Absagen mehr eintreffen als Junior :)

Ich bedanke mich bei allen schon einmal herzlich für die Zeit, die Ihr aufwendet, für das Lesen und Antworten :)

Viele Grüße,

JrDev

JavaScript Vanilla 100%

Framework / Bibliothek (Angular, React, Vue.js) 0%

Frage

von Maxim8862

04.04.2024, 22:56

Shop-Code kaufen?

Hallo, ist es möglich ein Script für einen Online Shop zu kaufen der sicher ist, wo man dann nur das Frontend selber machen muss und wenn ja, ist es empfehlenswert?

Frage

von crRaphi

31.03.2024, 16:30

Angular mit SEO?

Liebe ITler,

ich baue gerade eine Website mit angular und stehe vor folgender Frage:

Wie kann ich den Titel ändern
Wie kann ich meta Tags einfügen
Was muss ich bedenken bei SEO mit meta tags in angular?
Was meinen Menschen, wenn sie meinem angular seo freundlich machen?

Danke im voraus

Wie gut sind deine JavaScript-Fähigkeiten?

Frage

von Mirko Marek

30.03.2024, 23:01

Mit Umfrage

In Zukunft werden mehr und mehr Anwendungen ins Web verlagert. Dabei spielt JavaScript eine essentielle Rolle bei der Entwicklung von Webanwendungen. Daher spielt JavaScript eine immer mehr wachsende Rolle. Meine Frage an euch: Wie gut schätzt du deine Kenntnisse und Fähigkeiten in JavaScript ein?

Ich kann professionelle Webanwendungen erstellen 29%

Ich bin sehr sicher im Umgang und vieles damit umsetzen 24%

Ich habe Grundlagen in JavaScript und kann einfache Lösung bauen 18%

Ich kann die Basics von JavaScript 18%

Ich bin Fachexperte 6%

Ich besitze ein fundiertes Fachwisssen 6%

Ich kann JavaScript gut, aber es brauch noch Zeit 0%

7 Antworten

Frage

von Mirko Marek

25.03.2024, 13:31

Welches Libraries nutzt ihr in JavaScript?

Wer bestimmte Funktionen braucht und nicht ein ganzes JavaScript-Framework einbinden möchte, der kann mithilfe von JavaScript libraries arbeiten. Diese haben den Vorteil nicht alles selber zu programmieren und im Gegensatz zu ganzen Frameworks nehmen diese weniger Traffic und Performance in anspruch.

Meine Frage an die Community: Welche JavaScript libraries nutzt ihr und wofür?

Nutz ihr Frameworks in JavaScript und warum?

Frage

von Mirko Marek

24.03.2024, 03:21

Ich habe 2004 mit Frameworks in JavaScript angefangen und viele, viele Jahre mit unterschiedlichen Framework gearbeitet. Seite ca. 5 Jahren arbeite ich bevorzugt ohne Frameworks oder vermeide diese so gut es möglich ist.

Meine Frage an die Community, nutzt ihr JavaScript-Frameworks und wenn ja, welche Frameworks und in welchen Umfang?

Ich freue mich auf euren Antworten und bin gespannt wieviel von euch Frameworks in welchen Umfang ihr nutzt.

6 Antworten

Frage

von WeissBrot965

22.03.2024, 18:42

Mit Links

Würdet ihr dieses Projekt als "fortgeschritten" bezeichnen?

Hi! Seit einigen Jahren "lerne" ich javascript. Hab viele Pausen gehabt und nie wirklich was größeres entwickelt. Das ist mein erstes etwas grösseres Projekt, welches ein mobile game ist:

https://github.com/MyCodeNotWorking/Ballon_game

online testen (wenn ihr auf pc seid: developer tools -> in die Handy ansicht gehen -> Seite refreshen):

https://fly-balloon.netlify.app/ (ist nh absolute early development version).

Notes: ich hab kein einziges framework oder library benutzt. Alles wurde von grund auf geschrieben. Wie würdet ihr meine Kenntnisse anhand dieses githubs bewerten? Ich würde es als Anfänger-javascript einranken. Kann es halt gar nicht einschätzen, da ich noch nie wirklich "professionelles" angeschaut habe und es auch nur als hobby mache.

Mfg Weißbrot

zahl 9999 in der xml als value rauskommt?

Frage

von maetin944

22.03.2024, 08:53

vielleicht kann ja jemand hier helfen:

ich weil, wenn nichts im Feld drin steht, dass die zahl 9999 in der xml als value rauskommt

              <input type="hidden" name="Geburtsjahr_Sorgeberechtigter_1" value="9999">
            <input type="hidden" name="Geburtsjahr_Sorgeberechtigter_2" value="9999">
                    <div class="col-xs-3" style="width: 187px;">Geburtsjahr</div>
                        <div class="col-xs-4"   style="width: 272px;">
                            <div class="form-group">
                                <input type="text" class="form-control" style="width: 125px;" placeholder="JJJJ" name="Geburtsjahr_Sorgeberechtigter_1" id="Geburtsjahr_Sorgeberechtigter_1" value="{if $pdf}{$values.Geburtsjahr_Sorgeberechtigter_1}{/if}" maxlength="4" min="1900" max="2100">
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group">
                                <input type="text" class="form-control" style="width: 125px;" placeholder="JJJJ" name="Geburtsjahr_Sorgeberechtigter_2" id="Geburtsjahr_Sorgeberechtigter_2" value="{if $pdf}{$values.Geburtsjahr_Sorgeberechtigter_2}{/if}" maxlength="4" min="1900" max="2100">
                            </div>
                        </div> 


                        // Geburtsjahr 
            $(document).ready(function(){
                $('#Geburtsjahr_Sorgeberechtigter_1').on('input', function(){
                    var eingabeWert = $(this).val();
                    if(eingabeWert === ''){
                        eingabeWert = '9999';
                    }
                    $('input[name="Geburtsjahr_Sorgeberechtigter_1"]').attr("value", eingabeWert);
                });
            });


            $(document).ready(function(){
                $('#Geburtsjahr_Sorgeberechtigter_2').on('input', function(){
                    var eingabeWert = $(this).val();
                    if(eingabeWert === ''){
                        eingabeWert = '9999';
                    }
                    $('input[name="Geburtsjahr_Sorgeberechtigter_2"]').attr("value", eingabeWert);
                });
            });

Werden front-end devs durch ki ersetzt?

Frage

von WeissBrot965

18.03.2024, 21:12

Viel logisch nachdenken muss man im front-end nicht. Außerdem ist es auch nicht wirklich komplex.

Hab mit chatgpt schon oft websiten erstellt, weil ich schlicht zu faul für das front end bin. Meistens hat das auch echt gut funktioniert und meinen Erwartungen entsprochen.

Ich denke sie werden ersetzt. Seid ihr gleicher Meinung?

Mfg Weißbrot

Wo ist der Fehler im HTML Code?

Frage

von MemberUnknow

14.03.2024, 15:50

Ich habe einen kleinen Fehler im meiner Überschrift entdeckt.

Auf der Seite steht das zwar korrekt da. Aber der Text bei der Maus zeigt einen Teil des html codes. Hier der Code

<li class="pos2" role="presentation">
<a href="/Text/Text-mit-co2-Text/" title="Text mit CO<sub>2</sub> Text" data-urlname="">
<span class="menu-text">Text mit CO<sub>2</sub> Text</span></a>
</li>

Da wo Text steht, steht dann die Überschrift usw.

Das Problem ist jetzt. Dass beim Text bei der Maus auf der Seite steht:

Text mit CO<sub>2</sub> Text

Es soll aber eben das <sub></sub> nicht dabei stehen und die 2 tiefergestellt sein.

Wie gesagt, angezeigt wird es richtig, nur der Text bei der Maus, wenn man auf diesen Link geht, steht dann mit den Code da.

Wie bekommt man das hin?

Frage

von SLIXx7305

11.03.2024, 15:37

Frage wurde 1 Mal erneut gestellt

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

Was ist euer JS Lieblingsframework?

Frage

von MAckermann

10.03.2024, 18:03

Mit Umfrage

Frage

von MrAmazing2

29.02.2024, 02:35

Welches Backend + Hosting für kleine Webseiten?

Ich möchte eine Webseite für ein kleines Unternehmen erstellen.

Sie wird ziemlich Frontend-lastig sein bis auf ein zwei Besonderheiten:

Ein Kontakt-Formular, bei dem man eine Nachricht eingeben kann, die dem Unternehmer dann automatisch per Email zugesandt wird
Ein Blog, bei dem der Unternehmer selbst Posts (bestehend aus Text & Bildern) erstellen kann, in einer Art Admin-Panel mit WYSIWYG-Editor, und diese direkt oder zu einem bestimmten Zeitpunkt automatisch veröffentlichen kann

Beim Frontend fällt die Technologie-Auswahl noch relativ leicht, TypeScript und ein gängiges Framework wie z.B. React.
Als Datenbank würde ich MySQL oder PostgreSQL verwenden.

Beim Backend weiß ich nun aber nicht weiter.

Welches Framework würde sich für eine Webseite dieser Größe am besten anbieten?
Es sollte beim Hosting billig sein (z.B. durch niedrigen RAM-Verbrauch), der Code sollte einfach und schnell zu schreiben sein, und es sollte die oben genannten Features möglichst einfach ermöglichen.

Express, Next.js, Laravel, Django, Flask, ASP.Net, Spring, ... ?
Was würdet ihr nehmen und warum?

Und zum Hosting, muss ich die Webseite auf einem vServer hosten, oder reicht auch ein Webspace?

Klasse in Visual Studio Code finden?

Frage

von RedDevil1982

20.02.2024, 16:09

Mit Bildern

Wie man sieht, wird hier für einen button eine Klasse primary verwendet

<button class="primary" type="button">Search</button>

Wie findet man in VS-Code schnell raus, wo diese Klasse primary liegt?
Bzw. in welcher Datei sie liegt?

was macht ein full stack developer?

Frage

von YaHobby

16.02.2024, 14:30

die ganze zeit stacks programmieren oder was

Ab wann beginnt Full-Stack Entwicklung im Webbereich und wie sieht es mit dem Gehalt aus?

Frage

von MCuser9230

15.02.2024, 17:30

Hallo liebe Community,

kurze Einleitung:

Ich bin Junior Webentwickler seit zirka 1 Jahr bei einer (relativ) kleinen Firma. Wir arbeiten viel mit Freelancer zusammen.

Ich bin mit HTML / CSS / JS eingestiegen und programmiere hier jetzt hauptsächlich über Wordpress die Websiten und Plugins.

Dazu wird bekannterweise → php genutzt. Daher geht hier Jquery, PHP, JS, MySQL, Git/hub und das Wissen in vielen bewährten Plugins und derer Programmierung für erweitere Funktionen einher.

Daher mache ich Backend und Frontend Entwicklung gleichermaßen. Das kann ich auch schon relativ gut, ich musste hier mir alles selbst beibringen und hab hauptsächlich mit Udemy und unserer tollen AI ChatGPT Hilfe mir alles beigebracht.
Die Codereviews hab ich mir von der AI machen lassen, Fehler aufzeigen, den Code bewerten und Verbesserungsmöglichkeiten zeigen.

So bin ich nun der Meinung, ein relativ solides Wissen angeeignet zu haben.
Jetzt zu meinen Fragen:

Frage 1:
Ab wann dürfte ich mich Full-Stack-Entwickler nennen? Ich hab großen Respekt vor erfahrenen Full-Stack-Entwicklern, weil da eine Menge zugehört. Aber ist es schon Full-Stack, wenn man Frontend und Backend macht?

Frage 2:
Ich arbeite in MV und bekomme noch 2600 € brutto gezahlt. Es ist noch relativ niedrig, weil ich zu Anfang viel gelernt habe, die ersten Monate, um den Anforderungen gerecht zu werden. 2400 € in den ersten 6 Monaten und bis jetzt (12. Monat) 2600.

Was wäre so eine faire Preisspanne? Die Firma gibts bald seit 10 Jahren und wir sind kein Start-up mehr. Auch läuft es gerade gut und ich konnte alle Aufgaben bewältigen, die mir seither gestellt wurden. Wenn ich auch für manche länger gebraucht habe (aber dafür bin ich ja auch ein Junior). Mich würde interessieren, wo es fair wäre? Ich möchte bald in die Gehaltsverhandlung gehen und wäre sehr dankbar über Ratschläge und eure Meinungen.

Liebe Grüße

Frage

von Tekeli03

08.02.2024, 12:57

Frage an Programmierer?

In welcher Welcher Richtung arbeitest du (Webentwicklung, Spieleentwickler etc..)? In welchem Bereich(Backend, Frontend)? Welche Sprachen und Frameworks nutzt du? Welche librarys? Welche Datenbanken?

Frage

von Tekeli03

07.02.2024, 22:44

Mit Umfrage

Backend oder Frontend?

Was findest du besser? Ich versuche gerade Backend (Node.js) zu lernen.

Backend 57%

Frontend 43%

Gar kein Bootcamp, weiter eigenständig lernen 100%

Frage

von JrDev

07.02.2024, 21:42

Mit Umfrage

Bootcamp Ja oder Nein?

Hallo zusammen,

Ich bin seit dem 08.01.2024 Fachinformatiker für Anwendungsentwicklung, soweit so gut. Leider habe ich erst mit einer Umschulung begonnen, die in die Hose ging, weil das ein Umschulungsunternehmen war, das einen rein gelockt hat, um an den Bildungsgutschein zu kommen, und das war's dann auch. Dadurch bin ich durch meine Abschlussprüfung durchgefallen. Im Anschluss habe ich direkt eine Ausbildung im 3. Lehrjahr begonnen bis zur Wiederholungsprüfung.

Das Ausbildungsunternehmen hat mich netterweise direkt angenommen. Allerdings war ich der einzige Entwickler vor Ort, und mein Ausbilder war jemand, der vor über 10 Jahren eine Umschulung zum FiAe gemacht hat, dann den Ausbilderschein erworben hat und seitdem keine Zeile Code mehr geschrieben hat. Dadurch konnte er nie meine Fragen beantworten, und ich musste mir eigenständig C# und Winforms aneignen, da das Unternehmen die Arbeiten der Mitarbeiter damit automatisieren / vereinfachen wollte. Ein Jahr lang habe ich für das Unternehmen native Desktop-Apps geschrieben und war für das Updaten der Programme zuständig.

In der Ausbildungszeit merkte ich, dass mich die Web-Entwicklung immer mehr interessiert, weshalb ich nach der Abschlussprüfung einen Udemy-Kurs über Web-Entwicklung begonnen habe. Hier habe ich bereits HTML und CSS durchgearbeitet und bin aktuell bei JavaScript.

Jetzt fragt sich der ein oder andere, warum hast du nicht auf der Arbeit gelernt? Nun ja, der Betrieb war der Meinung, solange er nicht 8 Stunden am Stück Code am Tippen ist, macht er Lagertätigkeiten und befüllt die Maschinen.

Jetzt kommt die Frage auf, dann hätte man das nach der Arbeit machen können. Richtig, jedoch musste ich mir hier die Theorie reinprügeln, die für die Abschlussprüfung benötigt wird, da ich in den 2 Jahren Umschulung nichts erklärt bekommen habe. Das heißt, in dem Jahr habe ich auf der Arbeit eigenständig mir C# und Winforms angeeignet und Lager- / Maschinen-Tätigkeiten ausgeübt und nach der Arbeit für die IHK-Prüfung gelernt.

Aus diesem Grund kann ich auch die Unternehmen verstehen, die Absagen schicken, weil die sehen, ich habe nur C# und Winforms gemacht und Daten an MySQL geschickt und abgerufen "woooow".

Da das Unternehmen auch der Meinung war, dass Git "Mist" sei und nur schlechte Programmierer Fehler machen und unprofessionell sind, wenn sie damit arbeiten, durfte ich das auch nicht während der Arbeitszeit lernen. Ergo eigne ich mir das neben dem Web-Entwickler Kurs auch noch an, in dem ich mit Visual Studio Code committe und pushe. Ja, das ist bei weitem nicht das, wofür Git da ist, aber ich bin noch am Lernen. :D

__________________________

Jetzt wurde es doch wieder ein langer Text, aber nun zu meiner Frage. :D

Ich habe demnächst ein Gespräch mit dem Arbeitsamt bezüglich des Bildungsgutscheins. Sehr wahrscheinlich werde ich einen erhalten, wurde mir im letzten Gespräch gesagt. Für den Fall, dass es funktioniert, will ich nicht viel Zeit verlieren, da ich schon 30 bin und immer noch keinen Job habe.

Deshalb kamen Bootcamps für mich in Frage und wollte euch fragen, ob Ihr selbst Erfahrungen mit einem Bootcamp gemacht habt oder vielleicht jemanden kennt und ein bestimmtes Bootcamp empfehlen könnt.

Ich bedanke mich schon mal im voraus für eure Zeit die Ihr mit dem Lesen der Frage und eurer Antwort investiert habt.

Bootcamp Front-End Ja 0%

Bootcamp Full-Stack Ja 0%

HTML/CSS relative Pfade mit / beginnen oder nicht?

Frage

von Tababab

01.02.2024, 22:35

Hallo,was ist der Unterschied zwischen :

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

und

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

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

Wie kann ich meinen Techstack auf meiner Website anzeigen?

Frage

von nachname1234

01.02.2024, 14:57

Mit Bildern

Ich halte nichts davon meine Skills in Prozenten anzugeben, man kann nicht sagen ich kann 90% PHP oder 100% NextJS, das hat man vor 10 Jahren so gemacht und ich will keine 20 Kacheln einbauen.

Ich hätte eine Idee die mir gefällt aber leider habe ich keine Erfahrung mit ThreeJS und weiß nicht wie schwer umsetzbar das wäre mit React(next). Von 3D Modellierung auch keine Ahnung.
Ich wollte dass so machen das ich ein 360grad spinbares "Stack"/Stapel hätte wo die Stapel realistisch aufeinander Fallen sobald es im Sichtbereich wäre.

Kann mir jemand helfen wie ich da vorgehen sollte oder vielleicht eine andere Schöne Möglichkeit einem Kunden zu sagen das man mit X Framework erfahrung hat ?

Ein Video dafür erstellen lassen und controls ausschalten wäre einfach aber halt nicht interaktiv und nichts besonderes

Wieso versendet dieser PHP Code die Mail nicht?

Frage

von frage7377332

31.01.2024, 15:53

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

Welche Sprache soll ich danach lernen?

Frage

von Tekeli03

29.01.2024, 16:17

Also ich kann JavaScript jetzt gut. Bin dabei Node.js zu lernen. Danach React/React Native.

Ihr entscheidet. Welche Sprache soll ich danach lernen? Python oder C#?

Wie seid ihr an euren Job in der Software entwicklung gekommen?

Frage

von Fxbixn00

29.01.2024, 13:38

Moin. Ich wollte mal hören wie ihr euren Einstieg als Softwareentwickler geschafft habt.

Ich persöhnlich habe mir jetzt viele gedanken gemacht, was der beste Weg sei. Ob Ausbildung, Studium, etc..

Da ich persönlich nicht so viel von diesen quereinsteiger bootcamps halte, suche ich nach alternativen. Vielleicht hat ja jemand Interesse von sich zu berichten.

MFG

CSS Chrome Entwicklertool inaktive Checkbox als CSS verwenden?

Frage

von zimtschale

26.01.2024, 16:55

Mit Bildern

Hallo,

ich würde gerne meine Wordpress Website mit CSS ändern, wie kann ich denn eine nicht angeklickte Checkbox in den Chrome Entwicklertools einfügen?

Ich finde das Design z.B. besser, wenn die Checkbox von margin nicht angeklickt ist. Klar, wenn ich neues CSS hinzufügen möchte, mache ich das so:

#cookie-notice .cn-button:not(.cn-button-custom) {} und füge dann den Code ein.

Aber wie füge ich eine nicht angeklickte Checkbox ein?

Danke für eure Zeit!

Rückgabewert und Parameter?

Frage

von Tekeli03

24.01.2024, 15:13

Ich habe in JavaScript diese Beispiele nicht ganz verstanden:

function xyz(value)

oder

function xyz({value})

Was sind die Unterschiede und könnt ihr eventuell einfach Beispiele machen, damit es anschaulicher wirkt?

Bootstrap 5 Template für persönlivhe Seite?

Frage

von DieEnteMitHut

19.01.2024, 03:50

Moin!

Ich würd gern langsam an einer persönlivhen Website arbeiten. Im Frontend liegt jedoch nicht gerade meine Stärke.

Die Seite würd ich gern im Backend mit dem PHP Framework Laravel umsetzen, also Laravel 10 :)

Hat da jemand Empfehlungen für mich? Danke!

Ansonsten muss ich's wohl oder übel selbst machen :p

Frage

von Julius564

18.01.2024, 14:01

Frage wurde 1 Mal erneut gestellt

Wer verdient besser?

Frontend oder full stack Entwickler

Und wer ist gefragter

Welcher Programmierer sollte ich werden?

Frage

von Moinsen300

08.01.2024, 13:20

Will Programmierer werden und alles geben. Ich kann c++ würde für Job aber noch mehr sprachen lernen und würde gerne Backend machen kenne aber den nicht so ganz den Unterschied zwischen Backend und Frontend dazu noch sollte ich App oder web Entwickler werden also als Programmierer könntet ihr mir weiterhelfen und erklären welche Unterschiede es gibt und was empfehlenswert ist.

Transition bei Link funktioniert nicht html?

Frage

von Dresdenhallo

30.12.2023, 00:01

Mit Bildern

Hallo,

Ich hab einen Code geschrieben, dass wenn ich auf den Link "Kontakt" drüber hover, es größer wird usw. mit einer Transition.

Das gleiche hab ich beim Link "Über uns", der daneben ist gemacht, aber wenn ich über den hover, dann werden plötzlich beide links hoch und spinnen.

Hier paar Bilder:

"Kontakt":

Hier funktioniert alles gut.

"Über uns":

Hier spinnen plötzlich beide links

Hier der ganze CSS Code den ich bis jetzt geschrieben habe:

Danke:)

Frage

von PinguSpeedy

27.12.2023, 10:51

Mit Bildern

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

Was sagt ihr zu dem anfangsprojekt?

Frage

von Gojosatoru383

23.12.2023, 05:43

Frage wurde 1 Mal erneut gestellt

Mit Bildern

Mit Links

Mein Ziel ist es mit html und CSS eine stabile Test Seite zu erstellen (Später kommt Js dazu) um dann eine richtige Seite zu bauen

html:

<!DOCTYPE html>

<head>

<title>Document</title>

<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>

<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>

<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

</div>

</head>

<body>

</Header>

<main>

<h2>Anmeldung</h2>

<h3>Login</h3>

</form>

</div>

<hr>

<a href="#">Impressum</a>

<a href="#">kontakt</a>

</main>

</footer>

</body>

</html>

css:

body {

font-family: Arial, Helvetica, sans-serif;

color: white;

}

body{

background-color: white;

}

.input {

display: flex;

margin: 150px;

margin-top: 3000px;

flex-direction: column;

justify-content: center;

align-items: center;

box-shadow: 1px 1px 3px 3px black;

border-radius: 30px;

height: 30px;

width: 100px;

padding: 100px;

}

h3{

color: black ;

}

)

font-family: Arial, Helvetica, sans-serif;

display: flex;

justify-content: center;

align-items: center;

}

a:hover{

color: green;

text-decoration-line: none;

}

input{

padding: 5px;

border-radius: 10px;

}

input[type="submit"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

background-image: linear-gradient(to top, gainsboro 0%, white 90%);

border-radius: 20px;

}

input[type="reset"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

background-image: linear-gradient(to top, gainsboro 0%, white 90%);

border-radius: 20px;

}

#main {margin: 0 auto; width: 25%;}

.input {margin: 0 auto; width: 25%;}

input:hover {

color: blue;

}

/* Style the navigation bar */

.navbar {

width: 100%;

background-color: #555;

overflow: auto;

}

/* Navbar links */

.navbar a {

float: left;

text-align: center;

padding: 12px;

color: white;

text-decoration: none;

font-size: 17px;

}

/* Navbar links on mouse-over */

.navbar a:hover {

background-color: #000;

}

/* Current/active navbar link */

.active {

background-color: #04AA6D;

}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */

@media screen and (max-width: 500px) {

.navbar a {

float: none;

display: block;

}

Content-Security-Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf xxx blockiert?

Frage

von Justman

22.12.2023, 23:36

Mit Links

Hi, habe oben genannten Fehler, wenn die Regisrtrierungsseite aufgerufen wird! Da die Anwendung jedoch in TypeScript geschrieben ist, weiß ich nciht wie ich <meta> Tags übernehmen soll... Versuche, Fider aufzusetzen...

JavaScript Funktionen etc..?

Frage

von MrOsmo

20.12.2023, 14:49

Hallo!

ich wollte fragen, ob es Unterschiede zwischen High Order Function und Callback Function gibt? Außerdem wollte ich fragen, was eine High Order Function ist? Dankeschön im Voraus!

MrOsmo

Frage

von MrOsmo

19.12.2023, 14:45

Mit Links

Fetch JavaScript Hilfe?

Hallo,

bei mir klappt Folgendes nicht:

Wenn ich bei "Registration Form" alle inputs ausfülle, dann kommt ein sogenanntes "Kärtchen" mit deinem Avatar raus. Jedes "Kärtchen" enthält einen button "Log out", und wenn man auf den button drückt, dann sollte das "Kärtchen" nur aus HTML gelöscht werden (aber nicht aus Backend Server- Api) und der "logged" sollte im Backend Server auf false gesetzt werde.

Wie kann man das machen? Ich habe schon davor mit fetch gearbeitet, aber so ein Problem kommt bei mir zum ersten Mal (Bin ja noch komplett ein Noob in JavaScript).

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration | Form</title>
  <link rel="stylesheet" href="./CSS/settings.css">
  <link rel="stylesheet" href="./CSS/style.css">
  <link rel="stylesheet" href="./CSS/javascriptStyles.css">
  
  <script defer src="./JavaScript/script.js"></script>
</head>
<body>
  <div class="container">
    <div class="container-two">
    <div class="registration-form">
      <h2 id="heading">● Registration Form ●</h2>
      <div class="forms">
        <input id="emailInput" type="text" placeholder="example@gmail.com">
        <input id="userInput" type="text" placeholder="Username">
        <input id="pictureInput" type="text" placeholder="Picture">
        <button id="createButton">Create Account</button>
      </div>
      <p id="signInText">Already have an account? <a href="../PageTwo/index.html" id="aText">Sign in</a></p>
    </div>
    </div>
  </div>


  <div id="registerList">
  </div>
</body>
</html>

JavaScript-Code:

const registerList = document.getElementById("registerList")


const forms = document.getElementById("forms")
const email = document.getElementById("emailInput")
const user = document.getElementById("userInput")
const picture = document.getElementById("pictureInput")


const createButton = document.getElementById("createButton")


const url = "https://crudcrud.com/api/dac4c32dac5c4861a46ad8aee63df14c/todos"



const dataRender = (posts) => {
if (posts === undefined) {
  console.log("Loading...");
}
  else{
    let dataList = posts.map((post) => {
    return `
    <div class="register-container">
    <div class="inner-container">
      <img id="registerPicture" src="${post.picture}" alt="${post.user}"> 
      <h2 id="registerUser">${post.user}</h2>
      <h5 id="registerEmail">${post.email}</h5>
      <button onclick=logOutButton("${post._id}") id="registerButton">Log out</button>
    </div>
  </div>
  `
  })
  registerList.innerHTML = dataList.join("")
}
}


//GET METHOD
fetch (url)
.then(response => response.json())
.then (data => dataRender(data))


//POST METHOD
createButton.addEventListener("click", () => {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      user: user.value,
      email: email.value,
      registered: true,
      logged: true
    })
  })
  .then(response => response.json())
  .then(data => {
    const dataArray = []
    dataArray.push(data)
    dataRender(dataArray)
    
    email.value = ""
    user.value = ""
    picture.value = ""


    console.log(`User ${user.value} registered successful!`)
  })
})


//PUT METHOD
const logOutButton = (id) => {
  const data = {
    user: user.value,
    email: email.value,
    registered: true,
    logged: false
  }
  fetch(`${url}/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => { 
    
  })


}

Bitte helft mir! Ich weiss wirklich nicht wie das geht und möchte jetzt auch nicht den ganzen Tag dazu verschwenden! Denn ich habe noch andere Hausaufgaben.. Dankeschön im Voraus!

MrOsmo

JavaScript Server API Hilfe?

Frage

von MrOsmo

15.12.2023, 08:38

Hallo,

meine Aufgabe:

wenn ich zum Beispiel bei login: babyshark2 schreibe und bei password: 123, und dann auf "send" drücke, dann werden ja diese Daten und zusätzlich noch isLogin: false auf Backend Server geschickt. Wenn ich aber beim zweiten Mal nochmal diese inputs mit den gleichen Daten ausfülle (babyshark2, 12) und dann aber auf "login" drücke, dann sollte das Programm zwischen alle Loginnamen genau diesen Loginname (babyshark2) finden, und falls das Passwort auch richtig ist, dann sollte das isLogin: auf true gesetzt werden. Aber ich verstehe gar nicht wie ich das weitermachen soll. Bitte helft mir!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <form class="form">
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button id="sendButton">Send</button>
    <button id="loginButton">Login</button>
    <p class="p">If you want to delete an Item press the button "Delete" twice to confirm it!</p>


    <div id="userTable"></div>
  </form>
</body>
</html>

JAVASCRIPT IST IN DEN KOMMENTAREN; DA ES HIER NICHT PASST!

MfG

MrOsmo

Frage

von MrOsmo

14.12.2023, 19:47

Mit Links

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

"textarea" html Feld mitwachsen?

Frage

von maetin944

14.12.2023, 09:51

<textarea class="form-control" name="Adresse">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Kann man dieses Feld so schreiben, dass es mitwächst. Das KEIN Scrollbalken kommt, sondern wie schon gesagt mitwächst

programmieren wie weiter machen?

Frage

von hansKoenig

13.12.2023, 21:31

Hallo, ich habe jetzt seit einigen monaten an einer "App" in python gearbeited. Das Programm funktioniert soweit, aber halt leider nur in der Console. Ich hätte gerne eine GUI, ich kann auch ein bisschen JS, HTML und CSS. Ich weiß aber nicht wie man den code dann verbindet, also den JS code mit dem python code und bin mir auch nicht sicher ob JS die beste option ist.

Ich freue mich auf eure Antworten und bin dankbar für jede Hilfe.

JavaScript: Wie kann ich die zwei "items" in dem div "movieDivs" entfernen?

Frage

von MrOsmo

12.12.2023, 21:46

Hallo,

ich mache gerade die Hausaufgaben in IT und ich habe leider ein Problem. Das ist das letzte Problem, bevor meine Aufgabe erledigt ist. Also bitte, ich flehe euch an, helft mir.

Meine Codes:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My favourite movies</title>
  <script defer src="./script.js"></script>
</head>
<body>
</body>
</html>

JavaScript findet ihr in den Kommentaren, der Code ist zu lang!

MEIN PROBLEM:

Mein Problem ist, dass wenn ich auf das Button "Delete Last" drücke, dann sollten zwei "items" in dem div "movieDivs" entfernt werden. Warum zwei? Weil ich mein Code von Anfang an unstrukturiert geschrieben habe, und deshalb gehören, das Bild und der Text zusammen. Aus diesem Grund, sollen auch der "Titel der Movie" und selbst das Movie (also img) zusammen gelöscht werden!

Ich habe schon alles ausprobiert, sodass ich jetzt gar keine Ideen mehr habe. Sogar diese KI - ChatGPT hat mir nicht geholfen! Ihr seid meine einzige Hoffnung!

Ich hoffe auf eure hilfreiche Antworten!

MfG

MrOsmo

React Fullstack mit welchem Backend?

Frage

von Verdana

08.12.2023, 14:07

Frage wurde 1 Mal erneut gestellt

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

Wie klicke ich auf diese Elemente mit Python und Selenium?

Frage

von GeldGeil457

05.12.2023, 15:38

Frage wurde 1 Mal erneut gestellt

Mit Links

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

(Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

wie kann man das beheben?

Frage

von SusgUY446

05.12.2023, 10:32

Mit Bildern

sidebar.css.sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #333;
    transition: right 0.3s ease; 
  }
  
  .sidebar-open {
    right: 0;
  }

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: relative;
}


.sidebar li {
    float: left;
  }

.sidebar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
.sidebar li a:hover {
    background-color: #111;
}

private.php

<?php
session_start();
if(!isset($_SESSION["username"])){
  header("Location: index.php");
  exit;
}
$username = $_SESSION["username"];
 ?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    
    <!-- Import Styles -->
    <link rel="stylesheet" href="cnd/css/loader.css">
    <link rel="stylesheet" href="cnd/css/container.css">
    <link rel="stylesheet" href="cnd/css/color-changer.css">
    <link rel="stylesheet" href="cnd/css/background.css">
    <link rel="stylesheet" href="cnd/css/navbar.css">
    <link rel="stylesheet" href="cnd/css/sidebar.css">
    
    <title>Your Personal Site</title>

    <!-- import scripts -->
    <script src="cnd/js/sidebar.js"></script>
    <script src="cnd/js/loader.js"></script>

    <script>
        
        const imageFiles = [
            'baldur.jpg',
            'baldur2.jpg',
            'baldur3.jpg',
            
        ];

        
        function setRandomImage() {
            const randomIndex = Math.floor(Math.random() * imageFiles.length);
            const randomImage = imageFiles[randomIndex];
            const imgElement = document.querySelector('.random-img');
            imgElement.src = `/personal-site/images/${randomImage}`; 
        }

        
       
    </script>
    <script>
        

        function setColor(color) {
            document.body.style.backgroundColor = color;
        }

        
    </script>


  </head>
  <body>
    
  <div class="loader"></div>
  
  <div class="container">
      <h1>Hallo <?php echo $username?></h1>
      <img src="" alt="random image of my dog" width="900px" height="900px" class="random-img">
      
    <script>
      setRandomImage();
    </script>
    <style>
      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
      }

      .dropdown:hover .dropdown-content {
          display: block;
      }

    </style>
    

  </div>
  
  <div class="dropdown">
    <span>Change Color</span>
    <div class="dropdown-content">
      <div class="color-changer">
        <button onclick="setColor('green')" class="button-green">Green</button>
        <button onclick="setColor('red')" class="button-red">Red</button>
        <button onclick="setColor('blue')" class="button-blue">Blue</button>
      </div>
    </div>
    </div>
    
    <div class="navbar">
      <ul>
        <li>
          <a href="index.php">Home</a>
        </li>
        <li>
          <a href="games.php">Games</a>
        </li>
        <li class="account-dropdown">
          <a href="">Account
      </li> 
      </ul>
    </div>

    <div class="sidebar" id="sidebar">
      <ul>


        <li>
          <a href="">Home</a><br>
        </li>

        <li>
          <a href="">Pricing</a><br>
        </li>

        <li>
          <a href="">Settings</a><br>
        </li>
      </ul>
    </div>

  </body>
</html>

javascript hilfe dringendd?

Frage

von MrOsmo

03.12.2023, 22:31

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

Wie kann ich die Reihenfolge der Hintergrundfarben ändern?

Frage

von MrOsmo

02.12.2023, 22:09

Frage wurde 1 Mal erneut gestellt

Mit Bildern

Hallo zusammen!

ich mache gerade die Hausaufgaben in IT aber ich komme leider nicht weiter.

Wie ihr auf dem Foto bereits seht, habe ich zwei Hintergründe.

Aber das Problem ist, dass der erste Hintergrund unten sein soll und der zweite Hintergrund, der gerade unten ist, soll nach oben kommen. Also einfach gesagt, ich möchte die Reihenfolge der Hintergrundfarben ändern. Ich habe schon wirklich lange daran gesessen.

Ich weiß nicht, wie man es weiter macht. Könnte mir bitte jemand helfen?

P.S. JavaScript passt leider nicht in die Frage hinein. Ihr findet es in den Kommentaren!

Dankeschön im Voraus.

LG!

Übrigens, hier die Codes:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <div class="bodyDiv">
  <header>
    <div class="title">
      <h1>My Tasks</h1>
    </div>
  </header>
  <main>
    <section>
      <div class="inputs">
        <input id="inputOne" type="text" placeholder="Enter your task!">
        <input id="inputTwo" type="date" placeholder="Enter your date!">
        <button id="buttonForInputs">Add task!</button>
      </div>
    </section>
    <section>
      <div class="tasks">
        <div class="date"> 
          <div class="information"></div>
        </div>
      </div>
    </section>    
   <section>
    <div class="buttons">
      <button id="buttonOne">Delete all!</button>
      <button>Change status!</button>
    </div>
   </section>
  </main>
  </div>
</body>
</html>

CSS:

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


/*BODY_AND_HTML*/
html {
background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%,rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%),linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%,rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%,rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%),linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%,rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%),linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%,rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%),linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%,rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(90deg, rgb(249, 17, 190),rgb(100, 28, 213));
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}

/*HEADER*/

header .title {
  display: flex;
  justify-content: center;
}


header h1 {
  font-size: 4rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fff;
}

/*MAIN*/

.tasks {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}

.tasks .date .information p {
  margin-top: -210px;
  margin-left: -190px;
  color: #fff;
  font-weight: 100;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.tasks .date {
  background-color: orange;
  width: 20%;
  padding-bottom: 20px;
  border-radius: 9px;
  display: none;  
}

.tasks .date .information {
  background-color: rgb(219, 182, 112);
  padding-top: 220px;
  border-radius: 5px;
  text-align: start;
  display: none;
}

.tasks .date p {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.inputs {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.inputs input {
  width: 30%;
  height: 30px;
  border-radius: 7px;
}

.inputs #inputOne {
  margin-top: 150px;
}

.inputs #inputTwo {
  margin-top: 10px;
}

.inputs button {
  margin-top: 15px;
  width: 8%;
  height: 30px;
  margin-right: 320px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-right: 150px;
  margin-top: 30px;
  gap: 10px;
}

.buttons button {
  width: 11%;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

Ist es noch sinnvoll, NextJS zu lernen?

Frage

von TypeScript

02.12.2023, 13:23

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

brauche schnelle hilfe beim html code(abgabe ist um 0uhr)?

Frage

von flicks21

30.11.2023, 17:41

Mit Bildern

was kann ich als alternative für den div benutzen (

Frage

von WeissBrot965

29.11.2023, 17:20

javascript Fehler, wtf?

Hab in meinem ganzen 5 Jahren als js dev noch nie so einen Fehler gehabt.

Code:

<!DOCTYPE html>

<head>

</head>

<body>

<button id="login" onclick="save()">login</button>

var name = document.getElementById("name")

var password = document.getElementById("password")

function save() {

alert(name.value, password.value)

}

</script>

</body>

</html>

ich experimentiere in letzter Zeit wieder etwas mit firebase. Hab als test projekt mal zwei inputs mit login button erstellt. So und jetzt gibt diesen html code mal in eine html file ein und führt es aus. Aus irgendeinem Grund wird bei name undefined alerted und der value von password wird wie erwartet alerted. Warum funktioniert das bei password, aber nicht bei name?? Hab schon mehrere code editoren ausprobiert und überall das gleiche Problem. Weiß jmd wo der Fehler ist?

Mfg Weißbrot

Erkennt jemand den Fehler, warum es nicht als "class", sondern als Text angezeigt wird?

Frage

von Laraismyname

29.11.2023, 13:14

Mit Bildern

Quellcode mit einem Platzierungsfehler?

Frage

von NilsApps

28.11.2023, 13:15

Mit Links

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CatPhotoApp</title>
</head>
<body>
  <main>
    <h1>CatPhotoApp</h1>
    
    <section>
      <h2>Cat Photos</h2>
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
      <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </section>
    
    <section>
      <h2>Cat Lists</h2>
      
      <h3>Things cats love:</h3>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
        <figcaption>Cats <em>love</em> lasagna.</figcaption>
      </figure>
      
      <h3>Top 3 things cats hate:</h3>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
        <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
      </figure>
    </section>
    <section>
      <h2>Cat Form</h2>
      <form action="https://freecatphotoapp.com/submit-cat-photo" method="post">
        <!-- Erstes fieldset -->
        <fieldset>
          <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input type="radio" name="indoor-outdoor" id="indoor" value="indoor"> Indoor</label>
          <label><input type="radio" name="outdoor-indoor" id="outdoor" value="outdoor"> Outdoor</label>
        </fieldset>
        <fieldset> 
          <!-- Direkt unter dem legend-Tag können weitere Inhalte hinzugefügt werden -->
          <legend>Additional Information</legend>
          
          <label for="catName">Cat's Name:</label>
          <input type="text" id="catName" name="catName" placeholder="Enter your cat's name" required>
          <label for="catAge">Cat's Age:</label>
          <input type="number" id="catAge" name="catAge" placeholder="Enter your cat's age" required>
          <label for="catColor">Cat's Color:</label>
          <input type="text" id="catColor" name="catColor" placeholder="Enter your cat's color" required>
          <label for="catPhotoURL">Cat's Photo URL:</label>
          <input type="text" id="catPhotoURL" name="catPhotoURL" placeholder="Enter cat photo URL" required>
          <button type="submit">Submit</button>
       
</fieldset>
      </form>
    </section>
  </main>
</body>
</html>

Könntet ihr mir bitte helfen das <fieldset> richtig zu platzieren.

Ist es möglich ein Angular-Projekt mit einer niedrigeren Version zu verwenden und eine Bibliothek zu erstellen, die eine Version höher ist?

Frage

von JTnmeister414

27.11.2023, 17:12

Guten Tag alle zusammen!

Eventuell ist das das falsche Forum. Ich werde es aber dennoch hier probieren.

Und zwar ist es so, das ich eine Bibliothek geschrieben habe, die auf Angular 16 beruht.

Allerdings sind die SDKs die ich benutzen möchte auf maximal Angular 15 angesetzt.

Besteht die Möglichkeit ein neues Projekt zu erstellen, dass die Version 15 trägt, alle SDKs und Styles dort zu installieren und die Library (v16) dort einzubinden?

Tech Stack Frontend und Backend für Webseite gesucht?

Frage

von DotNetCreep

21.11.2023, 23:32

Also möchte ich mein Frontend mit Typescript + Next Js und mein Backend mit C# schreiben. Meine Datenbank sollte Prisma + Postgresql sein.

Aber wie setze ich es um bzw gibt es alternativen als AWS und wenn AWS ist die "Konfig so gut"?

Frontend: Vercel (Next js).

C#-Backend: AWS Elastic Beanstalk oder AWS Lambda?

Die PostgreSQL-Datenbank kann auf AWS RDS gehostet werden.

Prisma müsste dann auf Frontend und Backend laufen, sowie die Daten beim request und response, warum macht man nicht einfach eins für alles ... Möchte c# wegen jobmarkt

Funktioniert das so oder ist es zu kompliziert (Neuling in diesem Bereich)?

Ich bedanke mich aufjedenfall schonmal denjenigen der mich aufklärt.

Angular: Änderungen am Server?

Frage

von crRaphi

16.11.2023, 17:52

Hallo ITler.

Ich habe mir überlegt meine Website zu überarbeiten und das mit Angular zu tun. Ich habe sie momentan mit PHP und einer SQLite DB umgesetzt. (Ich habe noch nie mit Angular gearbeitet - bitte verständliche Anfängerfreundliche Antworten)

Meine Fragen:

Kann ich eine DB ansteuern?
Gibt es eine Alternative Daten am Server über Angular zu ändern zb. DB / JSON

Was möchte ich machen:

Ich habe eine Seite auf der ich alle Lektionen aufliste und klickt man auf ein Listenelement so kommt man zur Lektion. Die Daten werden aus der DB abgefragt. Ich möchte von meiner Applikation neue Lektionen erstellen (+ Bilder hochladen) und Änderungen vornehmen.

Danke im voraus

Frage

von Rollo489

16.11.2023, 08:08

Mit Bildern

Angular: File fehlt?

Hallo! Ich bin mehr oder weniger Anfänger was Angular betrifft, deshalb mache ich gerade die „Tour Of Heroes“ von Angular.

Dabei sollte ich das FormsModule in app.module.ts importieren. App.Module.ts existiert bei mir aber nicht, weiß jemand warum? Wurde das bei neueren Versionen umbenannt oder so?

Frage

von Ramazan79

11.11.2023, 16:40

Frontend vs Backend?

Was findest du schwerer?

HTML, CSS, Javascript EventHandler und .innerText?

Frage

von RedDevil1982

11.11.2023, 15:49

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

Frage

von Ramazan79

11.11.2023, 11:53

Mit Umfrage

Verwendet ihr Bootstrap?

Ja 50%

Nein 50%

Top 1 Programmiersprache Front-end?

Frage

von MrOsmo

08.11.2023, 20:32

Hi,

was ist Top 1 Programmiersprache in Front End und welche kommen danach?

Hosting bei Auftragsprogrammierung von Webseiten?

Frage

von Orthos32

07.11.2023, 14:17

Hallo,

ich spiele mit dem Gedanken überein Kleingewerbe oder Freelancertätigkeit Webseiten für Privat- oder Geschäftskunden zu programmieren.

Also das reine Frontend.

Wie läuft sowas in der Regel mit dem Hosting der Webseite.

Könnte ich verlangen, dass sich der Kunde selber um Domain, Webspace, Impressum , Darenschutz usw. (ggf. Backend) selber kümmert.

oder ist das direkt unprofessionell und von Erfolglosigkeit gekrönt?

Also weil der Kunde so gar keine Ahnung hat, ich aber ja nur 'ein wenig', weil ich ja hauptsächlich nur das Frontend bieten möchte? Aber er möchte vielleicht alles aus einer Hand, obwohl Frontend ja gar nichts unbedingt für Backend zuständig ist.

Ich meine, ich kenne ja die Grenzen und Zuständigkeiten unter Umständen besser als der Kunde, kann aber nur das bieten womit ich mich am besten auskenne.

Hoffe ihr versteht was ich meine😉

font-awesome werden nicht gelanden?

Frage

von SusgUY446

06.11.2023, 15:34

Mit Bildern

Mit Links

mein code:

<a href="https://github.com">
<button class="github"><i class="fa-brands fa-github"></i> Github</button>
</a>

Quellübergreifende (Cross-Origin) Anfrage blockiert - was tun?

Frage

von HaltMalKurz

05.11.2023, 15:57

Mit Links

Hallo zusammen, seit kurzem bekomme ich diesen Fehler...

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://open.spotify.com/playlist/3RKBgf

(Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Weitere Infos

...wenn ich auf einen Link auf meiner Homepage klicke. Ich bin mir nicht sicher, ob ich das Problem richtig verstanden habe. Ist es so, dass Spotify verhindert, dass der Link quasi über Umwege (beispielsweise über eine Verlinkung eines images) aufgerufen werden kann? Wenn dem so ist, habe ich dann eine Chance den Link trotzdem auf meiner Homepage einzubinden? Oder missverstehe ich die Fehlermeldung vielleicht auch? Vor einigen Tagen hat der Link noch funktioniert, aber seit dem habe ich auch schon wieder viel an der Homepage geschraubt, ohne nun im Detail zu wissen, ab wann es nicht mehr funktioniert hat.

Mein Link sieht wie folgt aus:

<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="d-flex align-items-center">
    <a href="https://open.spotify.com/playlist/3RKBgfISwD(...)" style="margin-right: 15px;"><img height="35px" width="35px" src="img/spotify-icon.png" alt="spotify" id="spotify_logo">
    </a>
   </div>  
(...)
</nav>

Ich wäre euch sehr dankbar, wenn ihr mir helfen könntet.

Frage

von RedDevil1982

03.11.2023, 10:34

HTML, CSS @media query?

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DarkModeTest</title>

    <style>

        :root {
            --textColor: black ;
            --backgroundColor: white;
            --accentlighter1: blue;

        }

        @media (prefers-color-scheme: dark) {

            /* Anpassungen im Dunkelmodus */
            --textColor: white;
            --backgroundColor: black;
            --accentlighter1: orange;

            body {
                background-color: var(--backgroundColor);

            }

            a {
                color: var(--accentlighter1);;
            }

            h1, h2, h3 {
                color: var(--textColor);
            }
        }

        @media (prefers-color-scheme: light) {
            body {
                /* Anpassungen im Dunkelmodus */
                background-color: var(--backgroundColor);
            }

            a {
                color: var(--accentlighter1);
            }

            h1, h2, h3 {
                color: var(--textColor);
            }

        }
    </style>

</head>
<body>
<h1>Überschrift 1</h1>
<p>Das ist ein Beispieltext. <br> <a href="#">Hier ist ein Link.</a></p>
</body>
</html>

Ich führe die Datei aus. Befinde mich im prefers-color-scheme: light

passt alles.

Nun wechsle ich über Einstellungen, Personalisierung, Modus auswählen zu Dunkel.

Die @media (prefers-color-scheme: dark) wird nicht ausgelöst.

Warum? Die Schrift bleibt wie bei prefers-color-scheme: light?

Dart für Frontend und was für Backend?

Frage

von Ramazan79

02.11.2023, 16:40

Flutter und Dart sind ja für frontend, was ist für backend gut geeignet?

Was ist eure Lieblibgsprogrammiersprache?

Frage

von Ramazan79

31.10.2023, 11:27

Meine ist JavaScript.

Welche Sprache soll ich nach JavaScript lernen?

Frage

von Ramazan79

30.10.2023, 20:06

Ich interessiere mich für backend, aber mit Javascript kann man auch backend programmieren.

Sonst interessiere ich mich für Spiele? Wäre C# was für mich?

Warum funktioniert dieser code nicht?

Frage

von SusgUY446

30.10.2023, 10:58

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

text in input form centern?

Frage

von SusgUY446

28.10.2023, 19:22

Mit Bildern

Wie kann man denn text centern?

<div class="input-field">
   <input type="text"name="username"placeholder="Username"class="username-input" required>
</div>
<div class="input-field">
   <input type="password" name="pw" placeholder="Password" class="password-input" required>
</div>

Frage

von MrOsmo

25.10.2023, 01:20

Frage wurde 1 Mal erneut gestellt

Mit Bildern

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>

<head>

<title>Flexbox</title>

</head>

<body>

<nav>

<ul>

<li>

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

</li>

</ul>

</div>

</nav>

</div>

</header>

<main>

</div>

</section>

</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;

}

Frage

von MrOsmo

24.10.2023, 17:22

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

Frage

von MrOsmo

24.10.2023, 15:52

Mit Bildern

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

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Frage

von ErstelleProfil1

21.10.2023, 05:19

Frage wurde 1 Mal erneut gestellt

Mit Links

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

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


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

Frage

von MrOsmo

17.10.2023, 16:51

Mit Bildern

Abstand in CSS/Html?

Hallo,

ich möchte Abstand zwischen diesen Wörtern nach unten machen. Wie soll ich das machen?

Hier sind meine Tags:

HTML-CODES:

<h1 class="firstheading">PEAKSOFT</h1>

<li><a class="liststyleone" href="">My courses</a></li>

<li><a class="liststyle" href="">Announcements</a></li>

<li><a class="liststyle" href="">Trash</a></li>

<li><a class="liststyle" href="">Schedule</a></li>

</ul>

</header>

CSS-CODES:

.layout {

display: flex;

justify-content: space-between;

}

.liststyle {

list-style-type: none;

}

.liststyleone {

color: rgb(31, 110, 212);;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

font-weight: 600;

}

.liststyle {

color: black;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

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

Wie kann ich das beheben?

Frage

von SusgUY446

17.10.2023, 08:47

Mit Bildern

Mit Links

<!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>SusgUY446's Homepage</title>
 <style>
   body {

     align-items: center;
     background-color: lightgreen;
   }

   .account-container {
     align-content: center;
     background-color: white;
     padding: 10px;
     border-radius: 4px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
     text-align: center;

   }

   .header-1 {
     align-self: center;
     text-align: center;

   }
 </style>
</head>
<body>
 <h1 class="header-1">My Homepage</h1>
 <br>
 <br>
 <br>

 <div class="account-container">
   <h3>My Accounts</h3>
   <a href="https://www.youtube.com/@susguy446" class="yt-link">My YouTube Channel</a><br>
   <a href="https://discord.gg/Ghx5QSaft2" class="dc-link">My Discord Server</a>
   <a href="https://www.roblox.com/users/3559739399/profile">My Roblox Account</a>
 </div>

</body>
</html>

XHR nutzt GET anstatt POST?

Frage

von RANGObro

19.09.2023, 17:37

Mit folgendem code versuche ich zweck logins auf meinen Server zuzugreifen

var r = new XMLHttpRequest();

r.open("POST", "/user/login", true);
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

r.onreadystatechange = function () {

    if (r.readyState != 4 || r.status != 200) return;

    console.log(r.responseText);
            
    if (r.responseText == '?incorrect') {

        console.log('wrong password');

    }
    else if (r.responseText == 'correct') window.location.replace('/user/');

};

r.send('pwd=' + document.querySelector('#pwd-input').value);

Wenn ich den Code ausführe, steht in der Console der Seitenquelltext als Ergebnis. Der Server (Express) registriert eine GET request und auch im Netzwerktab von Chrome wird die request Methode mit GET angegeben. Hat jemand eine Idee warum und was ich versuchen könnte, außer Alternativen zur XHR zu nutzen?

value in ein anders value übertragen mit jqeury?

Frage

von maetin944

19.09.2023, 16:59

Kann man zwei verschiedene Value verbinden

das das eine und das andere den gleichen wert haben

am besten als jqeruy

<Was_besucht_ihr_Kind></Was_besucht_ihr_Kind>

<Kindergarten_Kita>2</Kindergarten_Kita>

es soll in Kindergarten_Kita der gleiche Wert wie in Was_besucht_ihr_Kind stehen

Grid mit Tailwind CSS und 1fr?

Frage

von Babelfish

16.09.2023, 13:22

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

Erster Job nach dem IT-Master als Junior Backend Developer, Angst davor sich zu sehr zu spezialisieren?

Frage

von doedel0815

16.09.2023, 09:04

Ich trete wahrscheinlich bald meine erste Stelle an und habe im Studium sowohl Frontend- als auch Backend gelernt.

Hab nach 15 Bewerbung ein Angebot für eine Backend-Stelle erhalten. Hab nur Angst davor mich zu früh zu spezialisieren, aber ich finde auch tbh keine Fullstack Stellen für Einsteiger. Zumindest lehnen die mich ab.

Frage

von crRaphi

14.09.2023, 22:30

React in laravel - wie?

Hallo.

Ich versuche react in laravel zu benutzen. Ich installiere react in laravel. Jetzt kann ich laravel und react starten und beides geht.

Ich kann aber react Komponenten nicht in den blade Dateien benutzen.

Ich habe alles versucht was im Internet steht, aus irgendeinem Grund findet er die js datei beim ausliefern des laravel server nicht.

Ich bin am verzweifeln und für jede Hilfe dankbar.

Welches Gerüst empfehlt ihr mir?

Frage

von ToteSeele540

10.09.2023, 18:18

Ich kann gut mit JavaScript umgehen und es nutzen. Welches Gerüst würdet ihr mir empfehlen? React, jQuery, ...?

Carrd.co Button zu neue seite?

Frage

von Sxrxus77

25.08.2023, 12:37

Mit Bildern

Man kann ja bei carrd.co solche Button erstellen und wenn man darauf drückt kommt man zu einer anderen Seite.

Ich habe allerdings sehr oft bei anderen Webseiten gesehen das sie auch solche Button hatten, allerdings führte es zwar zu einer anderen Seite aber trotzdem war es irgendwie die selbe webseite.

Das was ich habe... ich muss bei den Button ein Link eingeben.

Aber muss man wirklich immer wieder eine neue Webseite Seite erstellen oder geht es auch anders? Wenn ja wie?

Checkboxen die Pflicht sein soll?

Frage

von maetin944

22.08.2023, 13:52

Mit Bildern

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

Frage

von DrMalteB

13.08.2023, 16:22

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

HTML Console Tabelleninhalt Eingabe über Console ändern?

Frage

von BlackHawk9101

08.08.2023, 08:37

Mit Bildern

Hallo,

ich habe eine lange HTML liste bei der die Preise manuell in HTML in einer Tabelle geändert werden müssen.

Ist es möglich über die Inspect Console von Chrome die Inhalte der Tabelle in einem Batch zu ändern?

So sehen die Felder aus die in der Tabelle geändert werden sollen:

(gespeichert werden dann alle Werte dann mit der Enter Taste in einem der Felder)

Die Tabelle hat folgenden Code:

<td id="LAYOUT_DONNEES_PRIX-2-16-cell" class="z_c1_bpslay2stdData" style="text-align: right;"><input name="LAYOUT_DONNEES_PRIX-2-16" size="4 " maxlength="70 " class="z_c1_bpslay2Edf" style="text-align: right;" value="0,00"></td>

Die neuen Zeilen hätten dann folgende ID:

id="LAYOUT_DONNEES_PRIX-2-16-cell"

id="LAYOUT_DONNEES_PRIX-3-16-cell"

id="LAYOUT_DONNEES_PRIX-4-16-cell"

und geändert werden müsste jeweils nur die Value:

value="0,00"

Falls ihr mir sagen könnt, was Ich in der Console eingeben muss um einen Inhalt zu ändern wäre mir sehr geholfen.

Ich bin ein absoluter noob in diesem Gebiet und einfach

change <id="LAYOUT_DONNEES_PRIX-2-16-cell" value="1,00">

eingeben funktioniert leider nicht :D

Ich hoffe ihr habt verstanden was ich brauche :)

Vielen Dank und viele Grüße

Jens

Frage

von crRaphi

05.08.2023, 11:12

Frage wurde 1 Mal erneut gestellt

Mit Umfrage

Framework für laravel?

Hallo.

Erstmal ich kann noch kein framwork und kenne mich in php und einigermaßen in js aus.

Weil ich gehört habe, dass laravel ein gutes framework ist ,möchte ich es lernen.

Jetzt die Frage welches framwork am besten für das frontend in laravel ist?
Ich würde als erstes das frontend framwork lernen und dann laravel, ist das eine gute Idee?

Bitte auch mit Begründung.

Danke im voraus

Ps.: Ich nutze immer SCSS, bitte berücksichtigen.

Vue, weil.. 100%

React, weil.. 0%

Angular, weil.. 0%

Ein anders, weil.. 0%

Best Practice React Funktion exportieren?

Frage

von FritzboxCable

05.08.2023, 20:32

Es gibt soweit ich weiß drei Möglichkeiten.

Als normale Funktion exportieren:

export const test = ()=> {
  return (
    <div>Test</div>
  )
}

Als Arrow-Funktion default exportieren:

export function test() {
  return (
    <div>Test</div>
  )
}

oder so am Ende von der Datei mit default, wenn man nichts anderes mehr exportieren will.

function test() {
  return (
    <div>Test</div>
  )
}
  
export default test;

Mit default und ohne default unterscheidet sich dann ja auch die Import-Art.

Bei den ersten beiden:

import { test } from ""…

Beim letzten kann man es nennen wie man will, aber nur diese Funktion

import TestComponent from ""

Welche von den drei ist am effizientesten?

Ich habe irgendwie gehört, das import { } mehr Speicher verbraucht, aber weiß nicht mehr, warum.

Kann ich guten Gewissens alles mit Arrow-Funktionen machen oder je nach Datei unterscheiden? Es ist nicht schön, wenn es gemischt wird.

jquery code, damit man im Feld nur Jahre von 1900 bis 2100 eintippen kann?

Frage

von maetin944

28.07.2023, 16:03

                                                        <div class="col-xs-5"><input type="text" class="form-control" style="width: 127px;" maxlength="4" placeholder="JJJJ" name="Geburtsjahr_Sorgeberechtigter_1" value="{if $pdf}{$values.Geburtsjahr_Sorgeberechtigter_1}{/if}"></div>

HTML / CSS: Mein div wird oben abgeschnitten?

Frage

von kaceye3003

27.07.2023, 14:43

Mit Bildern

Mit Links

https://jsfiddle.net/qkw45jne/1/

Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.

Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?

In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:

Value auf "2" setzen, sonst auf "1"?

Frage

von maetin944

26.07.2023, 12:24

Wenn man die Checkbox auswählt, soll ein value "2" kommen, sonst wenn es nicht ausgewählt wird, dann value "1"

                                                                                  <div class="col-xs-4">{if $pdf}<span class="span-checkbox{if isset($values.Krank_0)} span-checkbox-checked{/if}"></span> Masern{else}<label class="checkbox-inline"><input type="checkbox" name="Masern" id="Masern" value="1"> Masern</label>{/if}</div>