Frontend - die besten Fragen

Verwandte Themen

DotNetCreep

21.11.2023, 23:32

Tech Stack Frontend und Backend für Webseite gesucht?

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.

1 Antwort

crRaphi

16.11.2023, 17:52

Angular: Änderungen am Server?

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

2 Antworten

Ramazan79

11.11.2023, 16:40

Frontend vs Backend?

Was findest du schwerer?

3 Antworten

RedDevil1982

11.11.2023, 15:49

HTML, CSS, Javascript EventHandler und .innerText?

<!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

1 Antwort

Ramazan79

11.11.2023, 11:53

Mit Umfrage

Verwendet ihr Bootstrap?

Ja 50%

Nein 50%

3 Antworten

MrOsmo

08.11.2023, 20:32

Top 1 Programmiersprache Front-end?

Hi,

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

4 Antworten

SusgUY446

06.11.2023, 15:34

Mit Bildern

Mit Links

font-awesome werden nicht gelanden?

mein code:

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

1 Antwort

HaltMalKurz

05.11.2023, 15:57

Mit Links

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

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.

2 Antworten

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?

1 Antwort

Ramazan79

02.11.2023, 16:40

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

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

2 Antworten

Ramazan79

30.10.2023, 20:06

Welche Sprache soll ich nach JavaScript lernen?

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?

1 Antwort

SusgUY446

30.10.2023, 10:58

Warum funktioniert dieser code nicht?

<!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>

3 Antworten

SusgUY446

28.10.2023, 19:22

Mit Bildern

text in input form centern?

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>

1 Antwort

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

1 Antwort

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

1 Antwort

ErstelleProfil1

21.10.2023, 05:19

Beitrag wurde 1 Mal erneut eingestellt

Mit Links

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

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>

1 Antwort

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

1 Antwort

SusgUY446

17.10.2023, 08:47

Mit Bildern

Mit Links

Wie kann ich das beheben?

<!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>

1 Antwort

RANGObro

19.09.2023, 17:37

XHR nutzt GET anstatt POST?

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?

1 Antwort