wiensschlechtester Geschrieben August 15, 2023 Geschrieben August 15, 2023 (bearbeitet) Da ich zum x-ten mal wieder neu mit Programmieren anfange, ein kleines Geschenk für die Allgemeinheit. Wie man sieht bin ich erst am Anfang. In der stillen Hoffnung es kommt immer wieder von wem eine Ergänzung dazu. Es geht derzeit um einfache Permanenzeingabe mittels eines Modal-Tableau-Fensters. Endziel ist ein typisches Roulette-Buchungs/Statistikprogramm. Mal sehen wieviel ich hier reinstellen werde. Hatte einmal mit einm Forummitglied mit etwas ähnlichem begonnen, nur kamen wir nie wirklich weiter. Er hatte einen ganz anderen Ansatz, und ich stelle halt für die Allgemeinheit meinen einfacheren rein. bearbeitet August 16, 2023 von wiensschlechtester Unnötiges gelöscht
wiensschlechtester Geschrieben August 15, 2023 Autor Geschrieben August 15, 2023 (bearbeitet) / bearbeitet August 16, 2023 von wiensschlechtester veraltet
wiensschlechtester Geschrieben August 15, 2023 Autor Geschrieben August 15, 2023 /* Stile für das Modalfenster */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 10% auto; padding: 10px; border: 1px solid #888; width: 90%; } table { border-collapse: collapse; width: 100%; } td { text-align: center; font-weight: bold; } td.green { background-color: #008000; color: #ffffff; } td.red { background-color: #ff0000; color: #ffffff; } td.black { background-color: #000000; color: #ffffff; }
sachse Geschrieben August 15, 2023 Geschrieben August 15, 2023 Alters- und bequemlichkeitsbedingt gucke ich da rein, "wie das Schwein ins Uhrwerk".
wiensschlechtester Geschrieben August 16, 2023 Autor Geschrieben August 16, 2023 darauf hatte ich ja gewartet
wiensschlechtester Geschrieben August 16, 2023 Autor Geschrieben August 16, 2023 (bearbeitet) Aktualisierte Dateien folgen. Seltsam ist nur, dass sich die 35 selten anklicken läßt........wen wer einen guten Ratschlag hat - nur her damit bearbeitet August 16, 2023 von wiensschlechtester
wiensschlechtester Geschrieben August 16, 2023 Autor Geschrieben August 16, 2023 <!-- index.html --> <!DOCTYPE html> <html> <head> <title>Roulette Permanenz Eingabe</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="menu"> <button onclick="openFile()">Dateien</button> <button onclick="openSettings()">Einstellungen</button> <button id="open-modal">Eingabe öffnen</button> </div> <div id="statistics"> <!-- Hier werden die Statistiken angezeigt --> </div> <div id="modal" class="modal"> <div class="modal-content"> <table id="roulette-table"> <tr> <td class="green" colspan="3">0</td> </tr> <tr> <td class="red">1</td> <td class="black">2</td> <td class="red">3</td> </tr> <tr> <td class="black">4</td> <td class="red">5</td> <td class="black">6</td> </tr> <tr> <td class="red">7</td> <td class="black">8</td> <td class="red">9</td> </tr> <tr> <td class="black">10</td> <td class="black">11</td> <td class="red">12</td> </tr> <tr> <td class="black">13</td> <td class="red">14</td> <td class="black">15</td> </tr> <tr> <td class="red">16</td> <td class="black">17</td> <td class="red">18</td> </tr> <tr> <td class="red">19</td> <td class="black">20</td> <td class="red">21</td> </tr> <tr> <td class="black">22</td> <td class="red">23</td> <td class="black">24</td> </tr> <tr> <td class="red">25</td> <td class="black">26</td> <td class="red">27</td> </tr> <tr> <td class="black">28</td> <td class="black">29</td> <td class="red">30</td> </tr> <tr> <td class="black">31</td> <td class="red">32</td> <td class="black">33</td> </tr> <tr> <td class="red">34</td> <td class="black">35</td> <td class="red">36</td> </tr> </table> <button id="close-modal">Schließen</button> </div> </div> <div id="selected-numbers-container"></div> <!-- Container für die ausgewählten Zahlen --> <stopp! src="main.js"></stopp!> </body> </html>
wiensschlechtester Geschrieben August 16, 2023 Autor Geschrieben August 16, 2023 // main.js const modal = document.getElementById('modal'); const openModalButton = document.getElementById('open-modal'); const closeModalButton = document.getElementById('close-modal'); const rouletteCells = document.querySelectorAll('#roulette-table td'); const selectedNumbersContainer = document.getElementById('selected-numbers-container'); let selectedNumbers = []; // Array zur Speicherung der ausgewählten Zahlen openModalButton.addEventListener('click', function() { modal.style.display = 'block'; }); // Öffne das Modalfenster, wenn Enter oder Plus gedrückt wird document.addEventListener('keydown', function(event) { if (event.key === '+' || event.key === 'Enter') { modal.style.display = 'block'; } else if (event.key === '-') { const removedNumber = selectedNumbers.pop(); if (removedNumber !== undefined) { const removedCell = rouletteCells[removedNumber]; if (removedCell) { removedCell.classList.remove('selected-number'); } updateSelectedNumbersContainer(); } } }); closeModalButton.addEventListener('click', function() { modal.style.display = 'none'; }); //................................................................. rouletteCells.forEach(function(cell) { cell.addEventListener('click', function() { const number = parseInt(cell.textContent); if (!selectedNumbers.includes(number)) { selectedNumbers.push(number); cell.classList.add('selected-number'); updateSelectedNumbersContainer(); modal.style.display = 'none'; // Schließe das Modalfenster nach dem Klicken } }); }); function updateSelectedNumbersContainer() { selectedNumbersContainer.textContent = selectedNumbers.join(', '); } //................................................................ function openFile() { const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = '.csv'; fileInput.addEventListener('change', handleFile, false); fileInput.click(); } function handleFile(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = function(e) { const contents = e.target.result; // Hier kannst du die CSV-Daten verarbeiten und in die Statistiken einfügen }; reader.readAsText(file); } // Passe die Höhen der Zellen im Tableau an function adjustCellHeights() { const screenHeight = window.innerHeight; const maxCellHeight = (screenHeight * 0.75) / 12; // 12 Zellen im Tableau rouletteCells.forEach(cell => { cell.style.height = `${maxCellHeight}px`; }); } // Führe die Funktion zur Anpassung der Zellenhöhen aus adjustCellHeights(); // Reagiere auf Fenstergrößenänderungen, um die Zellenhöhen anzupassen window.addEventListener('resize', adjustCellHeights);
wiensschlechtester Geschrieben August 16, 2023 Autor Geschrieben August 16, 2023 /*styles.css*/ /* Stile für das Modalfenster */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 1% auto; padding: 0%; border: 1px solid #888; width: 80%; } table { border-collapse: collapse; width: 100%; } td { text-align: center; font-weight: bold; } td.green { background-color: #008000; color: #ffffff; } td.red { background-color: #ff0000; color: #ffffff; } td.black { background-color: #000000; color: #ffffff; } .selected-number { background-color: #ffcc00; } /*.............................................................*/ #menu { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #f0f0f0; padding: 10px; }
Kibitz Geschrieben August 16, 2023 Geschrieben August 16, 2023 Hallo wiensschlechtester, hast Du Dein Projekt online gestellt zum Ausprobieren ? Link ? K.
wiensschlechtester Geschrieben August 16, 2023 Autor Geschrieben August 16, 2023 vor einer Stunde schrieb Kibitz: Hallo wiensschlechtester, hast Du Dein Projekt online gestellt zum Ausprobieren ? Link ? K. Hallo Herr K, alles was ich bis jetzt habe sind die obigen drei Dateien, GitHub oder geheime Unterlagen im Zimmer 5c gibt es nicht. Das Modal-Fenster öffnet sich mit "+" oder "Enter" oder Button. Servus
Kibitz Geschrieben August 16, 2023 Geschrieben August 16, 2023 (bearbeitet) Ich meinte nicht geheim sondern online: Deine index.html könnte Startseite mit Link sein. Über diesen Link könnten wir online Deine Seite testen. Falls Du erlaubst stell ich Deine Seite mal (bis auf Widerruf) auf meiner Testhomepage online. Seawas bearbeitet August 16, 2023 von Kibitz
wiensschlechtester Geschrieben August 17, 2023 Autor Geschrieben August 17, 2023 vor 15 Stunden schrieb Kibitz: Ich meinte nicht geheim sondern online: Deine index.html könnte Startseite mit Link sein. Über diesen Link könnten wir online Deine Seite testen. Falls Du erlaubst stell ich Deine Seite mal (bis auf Widerruf) auf meiner Testhomepage online. Seawas mach nur
cmg Geschrieben August 17, 2023 Geschrieben August 17, 2023 Die 3 stopp!e kann ich auch offline speichern:
cmg Geschrieben August 17, 2023 Geschrieben August 17, 2023 Und mit zweifelhaftem Erfolg interpretieren : Online mit Webserver ist schon besser
wiensschlechtester Geschrieben August 17, 2023 Autor Geschrieben August 17, 2023 vor 1 Stunde schrieb cmg: Und mit zweifelhaftem Erfolg interpretieren : hm, auf dem heimischen PC funkt´s, da ist auch das Tableau bunter.
Kibitz Geschrieben August 17, 2023 Geschrieben August 17, 2023 Hallo wiener, hab dir den Link per PM geschickt. Das Ergebnis ist bunter, aber sicher anders als von dir erwartet. Um deinen Ruhm und Ehre nicht zu schmälern also Link per PM.
wiensschlechtester Geschrieben August 17, 2023 Autor Geschrieben August 17, 2023 vor 7 Minuten schrieb Kibitz: Hallo wiener, hab dir den Link per PM geschickt. Das Ergebnis ist bunter, aber sicher anders als von dir erwartet. Um deinen Ruhm und Ehre nicht zu schmälern also Link per PM. Danke, bis auf ein paar Buchstabendreher passt es bis jetzt....weiter bin ich noch nicht. Derzeit schaffe ich das Kunststück am Tag mehr Zeilen zu löschen als ich schrieb. Das Modalfenster funkt....und darum ging es mir im ersten Schritt.
wiensschlechtester Geschrieben August 17, 2023 Autor Geschrieben August 17, 2023 vor 12 Minuten schrieb Kibitz: Wenn man mehrere Zahlen eingibt bockt irgendwann die unterste Zeile des Tableau - hast du einen Lösungsvorschlag?
Kibitz Geschrieben August 17, 2023 Geschrieben August 17, 2023 vor 14 Minuten schrieb wiensschlechtester: Danke, bis auf ein paar Buchstabendreher passt es bis jetzt....weiter bin ich noch nicht. Die Buchstabendreher (Umlaute, scharfes ß) erscheinen erst online , im Visual Studio Code gibts keine Dreher
Kibitz Geschrieben August 17, 2023 Geschrieben August 17, 2023 vor 2 Stunden schrieb wiensschlechtester: Wenn man mehrere Zahlen eingibt bockt irgendwann die unterste Zeile des Tableau - hast du einen Lösungsvorschlag? Schnell sehe ich das auch nicht, ich würde nicht benötige Funktionen aus vergiss-es rauswerfen oder auskommentieren und schrittweise wieder zusammensetzen. (waun i de zeit hätt)
Kibitz Geschrieben August 18, 2023 Geschrieben August 18, 2023 (bearbeitet) vor 19 Stunden schrieb Kibitz: Schnell sehe ich das auch nicht, ich würde nicht benötige Funktionen aus vergiss-es rauswerfen oder auskommentieren und schrittweise wieder zusammensetzen. (waun i de zeit hätt) Welches Wort wurde von der Autokorrekturfunktion des Forums zu vergiss-es umgewandelt: vergiss-es vielleicht ? bearbeitet August 18, 2023 von Kibitz
wiensschlechtester Geschrieben August 18, 2023 Autor Geschrieben August 18, 2023 (bearbeitet) vor 3 Stunden schrieb Kibitz: Welches Wort wurde von der Autokorrekturfunktion des Forums zu vergiss-es umgewandelt: vergiss-es vielleicht ? J a v a S c r i p t bearbeitet August 18, 2023 von wiensschlechtester
Feuerstein Geschrieben August 18, 2023 Geschrieben August 18, 2023 vor 34 Minuten schrieb wiensschlechtester: J a v a S c r i p t ...ah, die Sprache also...
wiensschlechtester Geschrieben September 17, 2023 Autor Geschrieben September 17, 2023 (bearbeitet) So ich habe einmal einen weiteren Teil fertiggeschrieben, aber als eigenständiges Projekt, da ich J S erst lerne, wollt ich mich in Ruhe mit dem Thema Klassen beschäftigen (Chancenbestimmung erfolgt in einer Klasse). Die Funktionalität der ersten Dateien, siehe weiter oben, muß ich auch noch einbinden, und die Tabelle fertigstellen. Falls wer an den derzeitigen Code interessiert ist, stelle ich ihn gerne rein. Die eigenwillige Darstellung ist Absicht, und kostete mir sehr viel Zeit . bearbeitet September 17, 2023 von wiensschlechtester
Recommended Posts
Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren
Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können
Benutzerkonto erstellen
Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!
Neues Benutzerkonto erstellenAnmelden
Du hast bereits ein Benutzerkonto? Melde dich hier an.
Jetzt anmelden