Single Page App med endast javascript (och html/css)?

Permalänk

Single Page App med endast javascript (och html/css)?

Jag vill försöka få till en sida med där jag byter ut innehållet på sidan när man trycker på en knapp. Låt säga att jag har tio olika sidor som ligger i linjär ordning. Dvs är du på sidan 1 och trycker på knappen så kommer du till sidan 2. Från sidan 2 kan du bara ta dig vidare till sidan 3. Från sida 3 kan du bara ta dig vidare till sida 4 osv. Det ska inte vara någon Navigation, utan endast EN knapp på mitten av sidan.

FRÅGAN jag har är, hur bör jag logiskt sett skriva koden om jag INTE vill ha tio olika html sidor som laddas vid knapptryck? Så vid knapptryck så skall alltså innehållet i HTML-sidan bytas ut till innehållet i "Sida 2". Och trycker man på knappen när man är i innehållet på "Sida 2" så byts innehållet ut till "Sida 3" osv osv.. Det ska alltså inte länka till en annan html-sida utan bara innehållet i EN html sida ska ändra skepnad.. Än så länge har jag bara gjort basic html/css och är redo att börja med javascripten och allt annat som kommer behövas. Jag kör i VSC..

Många dumma frågor kommer komma i den här tråden, men ska jag ha olika .js mappar (gameEngine, controller osv), behöver jag använda mig av fler verktyg som node.js, ajax osv.. men framförallt, hur ska jag tänka rent systematiskt med att bygga upp sidan..

Permalänk
Medlem

@busta_rhyme:

Läs på om Angular, React eller vue.js

Permalänk
Medlem

Spontant kan man göra på flera sätt. Ramverk som personen ovan skriver är en väg, vill du köra vanilla JS funkar templates eller web components bra. Även hederlig visa/göm med CSS kan ge resultatet du vill ha.

Skickades från m.sweclockers.com

Permalänk
Medlem

Uj, men du... Angular, vue.js och React kanske är på tok overkill om det bara är en så enkel sida du ska göra Något i stil med följande rader html + js räcker:

<!doctype html> <html> <head> <style> .showing { display: block } .notShowing { display: none } </style> </head> <div id="page-1" class="showing"> </div> <div id="page-2" class="notShowing"> </div> <button onclick="nextPage">Nästa sida</button> <script> function nextPage() { let currentPage = document.querySelector('.showing'); currentPage.classList.toggle('showing'); currentPage.classList.toggle('notShowing'); let pageNum = parseInt(currentPage.id.split('-')[1]); pageNum++; if (pageNum > 2) { pageNum = 1; } let nextPage = document.querySelector(`#page-${pageNum}`); nextPage.classList.toggle('notShowing'); nextPage.classList.toggle('showing'); } </script>

Så... Men ta inte det här som ett rätt svar. Ville bara visa att det går att få samma funktionalitet på några få rader js istället för att dra in tusentals rader kod bara för att byta en sida

OBS! Har inte testat koden och skrivit den på min telefon så jag hoppas den funkar som det är tänkt!

Skickades från m.sweclockers.com

Visa signatur

/Jeppe

Permalänk
Medlem
Skrivet av Sirjeppe:

Uj, men du... Angular, vue.js och React kanske är på tok overkill om det bara är en så enkel sida du ska göra Något i stil med följande rader html + js räcker:
<!doctype html>
<html>
<head>
<style>
.showing {
display: block
}
.notShowing {
display: none
}
</style>
</head>
<div id="sida-1" class="showing">
</div>
<div id="sida-2" class="notShowing">
</div>
<button click="next Page">Nästa sida</button>
<script>
function nextPage() {
let currentPage = document.querySelector('.showing');
currentPage.classList.toggle('showing');
currentPage.classList.toggle('notShowing');
let pageNum = parseInt(current Page.id);
pageNum++;
if (pageNum > 2) {
pageNum = 1;
}
let nextPage = document.querySelector(`sida-${pageNum}`);
nextPage.classList.toggle('notShowing');
nextPage.classList.toggle('showing');
}
</script>

Så... Men ta inte det här som ett rätt svar. Ville bara visa att det går att få samma funktionalitet på några få rader js istället för att dra in tusentals rader kod bara för att byta en sida

OBS! Har inte testat koden och skrivit den på min telefon så jag hoppas den funkar som det är tänkt!

Skickades från m.sweclockers.com

<html> </html>

Ett kod-block gör det lättare att läsa

Permalänk
Medlem

Den enklaste varianten måste ju vara att skapa en DIV för varje "sida" och sedan visa/dölja respektive DIV. Dvs du har bara ett HTML-dokument.

Edit: som Sirjeppe också var inne på

Skickades från m.sweclockers.com

Visa signatur

Windows 11 Pro | Intel i7 8700 | ASUS Prime Z370-P | Corsair 16GB 3000MHz | ASUS GTX 1080 | Fractal Design Define S | Corsair RM750x | Hyper 212 EVO

Permalänk

Bra! Diskussionen är helt rätt.. Precis det jag behöver.. Göra varje sida som en div är ju en idé som Joppis skrev, och jag föredrar så lite kod som möjligt som SirJeppe skrev. Ramverk känns lite overkill. Jag kör helst Vanillastyle eftersom jag vill träna på kodskrivande, och dessutom så antar jag att ramverk kanske även ger mig mer kod än det som verkligen är nödvändigt för små enstaka saker?

Sen vill jag kunna bygga på idéen med mer innehåll och möjligheter.. Tanken är att det kanske ska mynna ut i ett enkelt spel (inget avancerat för allmänheten, utan mest för eget intresse att lära mig programmering med något jag tycker är roligt). Tanken med spelet är väl lite att "Du står i ett rum, du får typ en eller två val, vilket väljer du. Och det alternativet man väljer tar en vidare till en annan del av spelet. Jag är också kompositör så jag tänkte lägga på spännande bakgrundsmusik för varje sida och en dialogruta beroende på i vilket rum man hamnar i osv...