Webentwicklung – die besten Beiträge

Code optimieren?

Huhu ich hab's endlich geschafft meinen eigenen Code zu schreiben so dass er funktioniert und ich diesen auch verstehe. Jetzt ist meine nächstes "Problem" die optimierung kann man diesen in kürzerer Form schreiben?

```js

const array = ["3","4","5","6","7"];

for (let i= 0; i<=15; i++){

 console.log(array[0].repeat(20-i)+array[1].repeat(i));

}

for (let i= 16; i<=20; i++){

 console.log(array[0].repeat(20-i)+array[1].repeat(i));

 console.log(array[0].repeat(20-i)+array[1].repeat(i));

}

for (let i= 21; i<=35; i++){

 console.log(array[1].repeat(40-i)+array[2].repeat(i-20));

}

for (let i= 36; i<=40; i++){

 console.log(array[1].repeat(40-i)+array[2].repeat(i-20));

 console.log(array[1].repeat(40-i)+array[2].repeat(i-20));

}

for (let i= 41; i<=55; i++){

 console.log(array[2].repeat(60-i)+array[3].repeat(i-40));

}

for (let i= 56; i<=60; i++){

 console.log(array[2].repeat(60-i)+array[3].repeat(i-40));

 console.log(array[2].repeat(60-i)+array[3].repeat(i-40));

}

for (let i= 61; i<=75; i++){

 console.log(array[3].repeat(80-i)+array[4].repeat(i-60));

}

for (let i= 76; i<=80; i++){

 console.log(array[3].repeat(80-i)+array[4].repeat(i-60));

 console.log(array[3].repeat(80-i)+array[4].repeat(i-60));

}

```

sry hab kein plan wie man hier code formatiert rein haut^^ und danke für die geduld und fürs erklären. PS ich hoffe das kürzere ergebnis wird nicht zu kryptisch weil ich es dann wenn ich das in 6 wochen nochmal anschaue nicht mehr lesen kann. Dankö und habt einen schönen Start in die Woche🌞✌🏼

Computer, IT, programmieren, JavaScript, Array, optimierung, Webentwicklung, For-Schleife

Richtige Formatierung bei HTML und CSS?

Ich habe eine Frage. Ich arbeite gerade als Anfänger an einer Website und habe folgendes Problem.

So sieht die Website eigentlich aus :

So sieht sie aus nach der ersten Skalierung mit responsive Webdesign (wo nach alles richtig ist.):

Doch wenn ich ein weiteres mal skalieren möchte passiert folgender Fehler (Es soll so wie auf dem zweiten Bild aussehen nur kleiner):

HTML: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" type="text/css">
  <title>ToDo List</title>
</head>
<body>
  <header class="site-header">
    <form action="action_page.php" method="post">
      <input type="text" id="todo-box" name="box-input" placeholder="Aufgabe eingeben" required maxlength="50" class="todo-input">
      <input type="reset" class="todo-reset todo-reset-submit">
      <input type="submit" class="todo-submit" class="todo-reset-submit">
    </form>
  </header>
  <nav class="site-nav">
  </nav>
  <main class="site-main">
    <h2>ToDo</h2>
    <p class="todo-point">Müll rausbringen</p>
    <p class="todo-point">Zimmer aufräumen</p>
    <p class="todo-point">12345678901234567890123456789012345678901234567890</p>
  </main>
  <footer class="site-footer">
  </footer>
</body>
</html>
CSS: .site-header
{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 20px;
}
.todo-input
{
  font-size: 20px;
  width: 180px;
  padding-left: 5px;
}
.todo-input::placeholder
{
  color: black;
}
.todo-reset, .todo-submit
{
  width: 150px;
  font-size: 20px;
  border: none;
  cursor: pointer;
}
.todo-input, .todo-reset, .todo-submit
{
  border-radius: 5px;
  background-color: rgb(251, 255, 0);
  border: none;
  height: 45px;
  transition: background-color 0.3s;
}
.todo-input:hover, .todo-reset:hover, .todo-submit:hover
{
  background-color: rgb(213, 216, 13);
}
.site-main
{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
}
.site-footer
{
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
p.todo-point
{
  margin: 3px 0;
  padding: 2px;
  border: 1mm solid black;
  border-radius: 10px;
}
@media (max-width: 520px)
{
  .todo-input
  {
    width: 480px;
    margin: 0 5px 5px 5px;
  }
  .todo-reset, .todo-submit
  {
    width: 240px;
    margin: 0 0 4px 4px;
  }
  p.todo-point
  {
    font-size: 19px;
  }
}
@media (max-width: 500px)
{
  .site-header
  {
    justify-self: unset;
  }
  .todo-input
  {
    display: flex;
    justify-content: center;
    width: 400px;
    margin: 0 5px 5px 5px;
  }
  .todo-reset-sumbit
  {
    display: flex;
    justify-content: center;
    width: 200px;
    margin: 0 0 4px 4px;
  }
}
Bild zum Beitrag
HTML, Webseite, CSS, Webdesign, Webentwicklung, Visual Studio Code

Meistgelesene Beiträge zum Thema Webentwicklung