Ankündigung

Einklappen
Keine Ankündigung bisher.

Sudoku mit PHP, HTML und CSS

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Sudoku mit PHP, HTML und CSS

    Ich habe die Aufgabe ein Sudoku mit PHP, HTML und CSS zu programmieren. Bisher habe ich das:

    HTML-Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Sudoku</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
    
    <main>
    
    <!-- Sudoku Raster (9x9) -->
    <section id="sudoku">
    
    <!-- Zeile 1 -->
    <div class="fixed input" contenteditable="false">3</div>
    <div class="fixed input" contenteditable="false">4</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">8</div>
    <div class="fixed input" contenteditable="false">5</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">7</div>
    <div class="fixed input" contenteditable="false">9</div>
    <div class="variable input" contenteditable="true"></div>
    
    <!-- Zeile 2 -->
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">2</div>
    <div class="fixed input" contenteditable="false">6</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">5</div>
    
    <!-- Zeile 3 -->
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">1</div>
    <div class="fixed input" contenteditable="false">2</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">6</div>
    <div class="fixed input" contenteditable="false">4</div>
    
    <!-- Zeile 4 -->
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">7</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">3</div>
    <div class="fixed input" contenteditable="false">9</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    
    <!-- Zeile 5 -->
    <div class="fixed input" contenteditable="false">4</div>
    <div class="fixed input" contenteditable="false">8</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">5</div>
    <div class="fixed input" contenteditable="false">7</div>
    
    <!-- Zeile 6 -->
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">2</div>
    <div class="fixed input" contenteditable="false">7</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">4</div>
    <div class="variable input" contenteditable="true"></div>
    
    <!-- Zeile 7 -->
    <div class="fixed input" contenteditable="false">2</div>
    <div class="fixed input" contenteditable="false">9</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">7</div>
    <div class="fixed input" contenteditable="false">1</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    
    <!-- Zeile 8 -->
    <div class="fixed input" contenteditable="false">6</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">5</div>
    <div class="fixed input" contenteditable="false">2</div>
    <div class="variable input" contenteditable="true"></div>
    
    <!-- Zeile 9 -->
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">3</div>
    <div class="fixed input" contenteditable="false">8</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">6</div>
    <div class="fixed input" contenteditable="false">2</div>
    <div class="variable input" contenteditable="true"></div>
    <div class="fixed input" contenteditable="false">7</div>
    <div class="fixed input" contenteditable="false">1</div>
    </section>
    
    </main>
    
    </body>
    </html>
    Jetzt möchte ich, dass man nur Zahlen von 1-9 in die Felder eintragen kann, ansonsten soll einfach das Feld leer sein.
    Ich freue mich über jede Hilfe!


  • #2
    Schau dir die Grundlagen an, noch hast ja gar nichts bis auf ein paar Div Container. Wenn du dann eine konkrete Frage hast, helfen wir dir gerne weiter. Aber deine Hausaufgaben musst du schon selber erledigen, sonst lernst du ja auch nichts.

    Input Feld für Nummern:
    https://developer.mozilla.org/en-US/...t/input/number

    Kommentar


    • #3
      Zitat von Desto863 Beitrag anzeigen
      Jetzt möchte ich, dass man nur Zahlen von 1-9 in die Felder eintragen kann, ansonsten soll einfach das Feld leer sein.
      verwende doch einfach ein input mit type=number und min/max/step- bzw. pattern-Attribut(en) - eintragen kann man damit aber auch andere Zeichen, wirklich verhindern bzw. wieder löschen kannst du solche Zeichen aber nur mit Javascript.

      PS: falsches Board, mit PHP hat das nichts zu tun.

      Kommentar

      Lädt...
      X