Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

proghodet skrev (2 minutter siden):

Forsåvidt, men når du har et bilde som avviker fra standardbildet vil den vel sortere på url'en til bildet. Kanskje vi kan se på å ignorere HTML-tag'er mens den sorterer, på sikt

Enig! 😁

Høres ut som løsningen 👍

Da kaster jeg inn alle håndklærne for i aften. Tusen takk for all bistand

[proghodet]

Da har jeg lagt inn støtte for linker i tabellen. La til en tekst i toppen som forklarer litt.

Legger den igjen i en spoiler siden det blir så møe javascript, atte

Spoiler

/**
 *  Scriptet lytter til når HTML-dokumentet er lastet inn
 *  Den finner så en gitt tabell basert på klassenavn. Hvis tabellen finnes
 *  lytter vi etter klikk på header-raden av tabellen.
 *  Når det blir klikket på header-raden kaller vi en sorteringsfunksjonen
 *  hvor vi sender inn tabell-elementet, og hvilket element som ble klikket på
 */
document.addEventListener('DOMContentLoaded', () => {
  // Duplier de seks linjene under her hvis du skal ha en tabell til (fra 'let personellTable')
  let personellTable = document.querySelector('.personellTable')
  if (personellTable) {
    personellTable.querySelector('thead').addEventListener('click', ev => {
      getClickedHeaderAndSort(personellTable, ev.target);
    })
  }
  // til hit
 
  // Utkommentert eksempel for din neste tabell:
  // let spacecraftTable = document.querySelector('.spacecraftTable')
  // if (spacecraftTable) {
  // spacecraftTable.querySelector('thead').addEventListener('click', ev => {
  //    getClickedHeaderAndSort(spacecraftTable, ev.target);
  //  })
  // }

})

// dette er en nye funksjon som tar seg av det som den switch / case saken gjorde tidligere
function getClickedHeaderAndSort(table, target) {
  let column = 0;
  let columns = table.querySelectorAll('th');
  for (let i = 0; i < columns.length; i++) {
    if (columns[i] === target) {
      column = i;
      break
    }
  }
  sortTable(column)
}

// Selve sorteringen av tabellen
function sortTable(column) {
  let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.querySelector("table");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[column];
      y = rows[i + 1].getElementsByTagName("TD")[column];
      if (dir == "asc") {
        if (x.innerText.toLowerCase() > y.innerText.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerText.toLowerCase() < y.innerText.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

 

Endret 2. juni 2022 av proghodet

[Zenobia]

proghodet skrev (3 timer siden):

Da har jeg lagt inn støtte for linker i tabellen. La inn litt en tekst i toppen også som forklarer litt.

Legger den igjen i en spoiler siden det blir så møe javascript, atte

  Vis skjult innhold

/**
 *  Scriptet lytter til når HTML-dokumentet er lastet inn,
 *  og så finner den en gitt tabell. Hvis tabellen finnes
 *  lytter vi etter klikk på header-raden av tabellen.
 *  Når det blir klikket på header-raden kaller vi en sorteringsfunksjonen
 *  hvor vi sender inn tabell-elementet, og hva som ble klikket på
 */
document.addEventListener('DOMContentLoaded', () => {
  // Duplier de seks linjene under her hvis du skal ha en tabell til (fra 'let personellTable')
  let personellTable = document.querySelector('.personellTable')
  if (personellTable) {
    personellTable.querySelector('thead').addEventListener('click', ev => {
      getClickedHeaderAndSort(personellTable, ev.target);
    })
  }
  // til hit
 
  // Utkommentert eksempel for din neste tabell:
  // let spacecraftTable = document.querySelector('.spacecraftTable')
  // if (spacecraftTable) {
  // spacecraftTable.querySelector('thead').addEventListener('click', ev => {
  //    getClickedHeaderAndSort(spacecraftTable, ev.target);
  //  })
  // }

})

// dette er en nye funksjon som tar seg av det som den switch / case saken gjorde tidligere
function getClickedHeaderAndSort(table, target) {
  let column = 0;
  let columns = table.querySelectorAll('th');
  for (let i = 0; i < columns.length; i++) {
    if (columns[i] === target) {
      column = i;
      break
    }
  }
  sortTable(column)
}

// Selve sorteringen av tabellen
function sortTable(column) {
  let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.querySelector("table");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[column];
      y = rows[i + 1].getElementsByTagName("TD")[column];
      if (dir == "asc") {
        if (x.innerText.toLowerCase() > y.innerText.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerText.toLowerCase() < y.innerText.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

 

Er bare på mobil nå, men takker og bukker Setter igang når jeg er på PC

[Zenobia]

Tar en liten økt nå. Har erstattet scriptet. Går inn og lenker alle navnene til en generell presentasjonsfil ...

 

[proghodet]

2 minutter siden, Zenobia said:

Tar en liten økt nå. Har erstattet scriptet. Går inn og lenker alle navnene til en generell presentasjonsfil ...

 

GL HF!

[Zenobia]

proghodet skrev (19 minutter siden):

GL HF!

Good Luck Have Fun?

Puh, jeg skal huske, neste gang jeg er inne i den personellfila, att h1-farven skal endres. Eller gikk jeg over til stilark ...

Er forresten ordet stylesheet noe fast man må bruke, eller kan jeg kalle det stilark eller noe?

Venter på resultatet nå.

Har forøvrig (ja, i ett ord!!) lastet ned (trur eg?) visual studio code, men da jeg skulle til å installere, kom det så mange spørsmål at jeg bare avbrøt.

Og så har jeg vært på en nettside og fått en MEGASKUMMEL advarsel om at Defender stoppet en trojan og jeg burde kontakte microsoft

Etter å ha tenkt meg litt om, lukket jeg fanen. Har ikke merket noe merkelig. Har kjørt virusskann (Defender, og det har ikke funnet noen nye trusler ??

Jeg stikker hodet i sanden, og håper på det beste.

Har skrevet ut 200 sider med manus bare i tilfelle rottefelle ...

[proghodet]

13 minutter siden, Zenobia said:

Er forresten ordet stylesheet noe fast man må bruke, eller kan jeg kalle det stilark eller noe?

Stilark er en helt fin oversettelse

13 minutter siden, Zenobia said:

Har forøvrig (ja, i ett ord!!) lastet ned (trur eg?) visual studio code, men da jeg skulle til å installere, kom det så mange spørsmål at jeg bare avbrøt

Spørsmål er ikke farlig 😅 det er forøvrig Microsoft som utvikler vscode.

13 minutter siden, Zenobia said:

Etter å ha tenkt meg litt om, lukket jeg fanen. Har ikke merket noe merkelig.

Dette er det riktige å gjøre. Meldingen er nok bogus, og de vil oftest at du skal laste ned noe og installere det på maskinen - først da er du i trøbbel En nettside vet ingenting om du har en trojaner.

13 minutter siden, Zenobia said:

Har skrevet ut 200 sider med manus bare i tilfelle rottefelle ...

Jojo, skulle harddisken ryke så er det vel greit å ha fysisk 😁

Endret 2. juni 2022 av proghodet

[proghodet]

14 minutter siden, Zenobia said:

kom det så mange spørsmål at jeg bare avbrøt.

Vet ikke om det trygger noe, men: https://progging.no/verktoy/installasjonsveiledninger/visual-studio-code/

Endret 2. juni 2022 av proghodet

[Zenobia]

proghodet skrev (2 minutter siden):

Stilark er en helt fin oversettelse

Spørsmål er ikke farlig 😅 det er forøvrig Microsoft som utvikler vscode.

Dette er det riktige å gjøre. Meldingen er nok bogus, og de vil oftest at du skal laste ned noe og installere det på maskinen - først da er du i trøbbel En nettside vet ingenting om du har en trojaner.

Jojo, skulle harddisken ryke så er det vel greit å ha fysisk 😁

Puh!

Skal se på installasjonsveiledningen. Det var noe om PATH, og jeg tenkte nei nei nei

Var ikke full panikk; manus-utskriften har vært a long time coming; jeg bare har utsatt det til ... tja, nå fikk jeg ihvertfall en grei grunn. Har jo dropbox, men vet ikke hvordan trojan & sånt gjør noe greier – at det ikke hadde vært nok.

( Jeg ringte microsoft også men jeg kom aldri til et menneske, så da ga jeg bare opp)

[AnonymBruker]

Du kan jo alltids vente på at Microsoft ringer deg. De ringer meg stadig vekk fra callsenteret sitt i India. 😁

Anonymkode: 60850...4ad

[AnonymBruker]

Zenobia skrev (2 minutter siden):

Puh!

Skal se på installasjonsveiledningen. Det var noe om PATH, og jeg tenkte nei nei nei

Var ikke full panikk; manus-utskriften har vært a long time coming; jeg bare har utsatt det til ... tja, nå fikk jeg ihvertfall en grei grunn. Har jo dropbox, men vet ikke hvordan trojan & sånt gjør noe greier – at det ikke hadde vært nok.

( Jeg ringte microsoft også men jeg kom aldri til et menneske, så da ga jeg bare opp)

Har ikke brukt det til et helt prosjekt selv, men mener det skal fungere ganske greit å kode online med https://codesandbox.io/s/

Anonymkode: f4397...f21

[proghodet]

1 hour ago, Zenobia said:

Det var noe om PATH

Til info så definerer PATH alle programmer som kan kjøres fra kommandolinja ved bare å skrive navnet på programmet ("code") istedenfor å skrive hele stien til programmet "C:\Program Files\Visual Studio Code\code.exe".

Endret 2. juni 2022 av proghodet

[Zenobia]

AnonymBruker skrev (21 minutter siden):

Du kan jo alltids vente på at Microsoft ringer deg. De ringer meg stadig vekk fra callsenteret sitt i India. 😁

Anonymkode: 60850...4ad

  Lenge siden de har plaget meg.

AnonymBruker skrev (21 minutter siden):

Har ikke brukt det til et helt prosjekt selv, men mener det skal fungere ganske greit å kode online med https://codesandbox.io/s/

Anonymkode: f4397...f21

Takk for lenke. Tar vare på sånt som folk har prøvd selv.

Takk for  info om PATH @proghodet 👍

Sorteringen på navn virker, og 00-trikset fikset første kolonne

Men lenkene jeg la inn, virker ikke   Kanskje jeg må ta med hele adressen. Det er ikke så nøye; det er bare en tulletekstfil uansett. Jeg tar det etter hvert, når jeg faktisk har skrevet omtale av vedkommende.

- - -

Har glemt = etter href på alle tilføyde lenker. *inn å fikse*

Tar meg en is.

Korrekturavdelingen i arbeid ...

 

Endret 2. juni 2022 av Zenobia
Sa jeg noe om å lære syntaks?

[Zenobia]

Ser ut til at det blir installasjon i morgen.

Jeg skal prøve meg på en romskipstabell senere i aften. Så får jeg se hvordan det er å bruke samme stilark på flere tabeller. Skumle greier! Og jeg aner ikke hva scriptet gjør; jeg konser om å lære HTML - og CSS-syntaks nå, så jeg finner frem i dem.

[Zenobia]

Jeg greide jo selvsagt å glemme et anførselstegn til lenken til bildet på personomtalen

Nå er det andre ting en stund, så er det på'an igjen

[proghodet]

2 minutter siden, Zenobia said:

Jeg greide jo selvsagt å glemme et anførselstegn til lenken til bildet på personomtalen

Som jeg nevnte ganske tidlig i tråden så er det heeelt vanlig i starten. Man blir flinkere til å huske alle tegn etterhvert - kall det mengdetrening 😂

[Zenobia]

proghodet skrev (2 timer siden):

Som jeg nevnte ganske tidlig i tråden så er det heeelt vanlig i starten. Man blir flinkere til å huske alle tegn etterhvert - kall det mengdetrening 😂

Jeg styrer med å huske når det er  = og når det er : Godt å høre at mengdetrening hjelper.

Så var det å få orden på de derre romskipene  

[proghodet]

1 hour ago, Zenobia said:

Jeg styrer med å huske når det er  = og når det er :

Vet ikke om det er til hjelp, men likhetstegn i HTML, kolon i CSS

[Zenobia]

proghodet skrev (39 minutter siden):

Vet ikke om det er til hjelp, men likhetstegn i HTML, kolon i CSS

Åjoda, skal skrive det meg bak øret.

Nå har jeg plundret sammen en tabell. Er ikke ferdig, og fortsetter i morgen.

Huskeliste:

Kopiere de derre linjene i scriptet med spacecraftTable (ja, jeg kalte class det )

Finne ut om td kan ha attributt? Som gjennomstrekning? (På grunn av havari) Lage klasse? Oppdatere CSS?

Kan jeg ha en rad over thead (der sorteringen defineres) som bare har fire kolonner? Men som går over hele tabellvidden. Med lenke til de fire romskipstypene

Altså:

Øverste rad: Fire like store kolonner med 'Kroneskip' 'IP-skip' 'Stjerneskip' 'Galakseklasse' og lenker derfra til beskrivelser
Neste rad: 9 kolonner med tabelloverskrift
De neste radene inneholder celler med data.

Denne tabellen ønsker jeg linear-collapse (eller hva det heter)

Nok moro for i dag

 

[proghodet]

7 hours ago, Zenobia said:

Finne ut om td kan ha attributt? Som gjennomstrekning? (På grunn av havari) Lage klasse? Oppdatere CSS?

Du er på sporet Lag en klasse som heter strike (f.eks) som du setter på alle td'ene som har havarert.
I css'en blir det slik
.strike {
  text-decoration: line-through;
}

7 hours ago, Zenobia said:

Kan jeg ha en rad over thead (der sorteringen defineres) som bare har fire kolonner? Men som går over hele tabellvidden. Med lenke til de fire romskipstypene

Jeg tror jeg vil argumentere for at disse ikke egentlig tilhører tabellen, men er tilleggsinformasjon? Kanskje heller legge en rad med listeelementer mellom h1 og table-elementene dine?
Noe sånt som
<ul class="spacecraft-ships">
  <li><a href="#">Kroneskip</a></li>
  <li><a href="#">IP-skip</a></li>
  <li><a href="#">Stjerneskip</a></li>
  <li><a href="#">Galakseklasse</a></li>
</ul>

Med css som dette:
.spacecraft-ships {
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  padding-left: 0;
}

Du kan jo teste det ut. Hvis ikke det ser ut som du hadde tenkt det, så tror jeg uansett det blir vanskelig å integrere inn i tabellen på en god måte 🤔