Inlägg

Clear och exit känns överflödigt, ctrl+d och ctrl+l gör jobbet

https://gpu.userbenchmark.com/Compare/Nvidia-RTX-4070-Laptop-...

De flesta kör nog helt enkelt med Bitwarden numera, jag har själv varit i Keepass-träsket för en massa år sedan, men jag säger bara vilken lättnad när jag slapp alla synkroniseringsproblem som det slutade i med kdbx-dubbletter som jag behövde slå samman manuellt titt som tätt.

Men jag kan ju förstå problematiken när man inte har någon egen NAS där man kan husera sin instans på, och inte vågar lita på att ens master-lösenord ska hålla för eventuell brute force om databasen från Bitwarden-servern mot förmodan skulle läcka ut.

Farsan min körde också Keepass under längre tid och var nöjd med det, men även han ledsnade tillslut på synkproblem mellan dator och hans mobila enheter så han har också gått över. x-D

Bitwardens app för android har en inställning att rensa "urklipp" automatiskt, inställningen man kan göra är "Aldrig" eller ett tidsspann mellan 10 sekunder upp till 5 minuter.

Nu kan jag inte ens nå SVT.se uppkopplad via OVPNs Stockholmsnod, måste verkligen ta mig tid att byta till något som funkar för detta håller inte längre

Access Denied
You don't have permission to access "http://www.svt.se/" on this server.

Mycket fint jobbat! Jag hade faktiskt tänkt som "bonus-utmaning" att inkludera just förmågan att kunna radera enskild Todo men det lade du till helt själv! Jag är inte "Kejsaren av JavaScript" så ta allt jag säger som "hur den där personen förstår sig på JS just då". Det jag lärt mig hittills inom webbutveckling är att du har två huvudsakliga övergripande frågor när du ska koda:

1. Vad är det egentligen som ska lösas? Vad ska kunna göras? Vad ska hända? Vad ska inte kunna göras? Vad ska inte kunna hända? Vad är säkerhetskraven? Vad är övriga ställda krav? Osv.

2. Och för vem eller vilka ska allt detta göras/lösas åt? Vem är egentligen slutanvändaren bakom allt detta? En lärare? Ett företag/en kund? Andra slags slutanvändare?

Om du hade gjort exakt samma lösning åt ett företag så hade säkerligen mycket mer begärts. Nu gör du inte det, så då är den nuvarande lösningen bra som den är tycker iaf jag. Möjligen lägg till så att när en todo lyckas lägga till så ska även inmatningsfältet bli tomt igen. Här finns då ett attribut som alla input-element har som JS kan komma åt:"value" alltså <inputElement>.value på något vis som sedan i sin tur borde kunna bli tomt (""). Hm?

Du får gärna berätta hur du tänkte när du gjorde lösningen och varför (=resonerande/motiverande till valda kodbeslut) du gjorde de val du gjorde. Och detta är endast för att reflektera tillbaka på ditt eget problemlösande för att kanske göra det annorlunda nästa gång! Förresten så vill jag bjussa på ett mycket "sexigt" koncept inom JS:

JavaScript Template Literals:

// JS STRING & VARIABLE CONCATENATING
list_item.innerHTML = '<p>' + count + ' ' + text + '</p>';

// JS TEMPLATE LITERAL
list_item.innerHTML = `<p>${count} ${text}</p>`;

Se hur sexigt simpelt det blir med att slippa alla extra + och citattecken överallt! 🥰

Du inleder med två så kallade "backticks" (``) - dessa får du genom att först hålla ned valfri SHIFT-tangent och sedan klicka på vänstra tangenten om den långa raderingstangenten (den precis ovanför ENTER/RETUR) på tangentbordet - och inuti så kan du skriva i princip vanlig löptext. De sexiga "${}" är sättet du får in variabeler precis som du annars får in dem genom att _inte_ ha dem med enkelfnuttar ('') eller dubbelfnuttar ("").

Som du ser så kan vi då använda variablerna "count" och "text" precis som vanligt. Detta färgmarkeras också starkt inuti din utvecklingsmiljö som exempelvis VSCode så du ser skillnad på vad som är vanlig strängtext och vad som är variabler. Och ja! Du kan till och med (därför de är så sexiga!) anropa funktioner där som returnerar dig ett returvärde att använda där inuti istället vilket ger upphov till mer dynamiskt utskrivande (vi närmar oss då nästan "frontend-ramverksbeteende"):

// Output current value of count inside of p element 
// and also the return value from the function numbers()
list_item.innerHTML = `<p>${count} ${numbers()}</p>`;

// Function that simply returns string "694201337"
function numbers() {
  return "694201337";
}

Om du skulle vilja ha ett nästa steg i Todo-appen så vore det att kika på något som heter "document.localStorage()" då den låter dig spara lokala data ("localStorage.setItem()") för din givna webbläsare på din givna surfenhet och sedan så skulle du kunna läsa in dessa lokallagrade data ("localStorage.getItem()") när sidan laddas om. Mer här: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Observera att "localStorage.setItem()" kommer att spara som "key value pair" och då behöver du använda JSON:s metoder "JSON.parse()" när du läser in data från localStorage och "JSON.stringify()" när du ska lagra via localStorage: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer...

Och eftersom du läser in massa data så bör ju dessa också läsas in & skrivas ut när sidan laddas om? Då går det att använda sig av en for-loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer... som då ska loopa igenom JSON.parse-localStorage data. Men du kmr stöta på ett antal problem nu vilket delvis ska kunna lösas med hjälp av en tom array ([]) och array-metoden "push".

GL HF! ^_^

Mvh,
WKL.

Det klassiska är ju CRUD-appar (Create, Read, Update, Delete). Men innan det så kan du ju prova på klassiska Todo-appen bara för att lyckas hantera data i webbläsaren som sedan med hjälp av JavaScript uppdaterar på sidan?

Här har du startkoden i HTML:

<html>
	<head>
	<script defer src='index.js'></script>
	</head>
	<body>
	<p>Write your todo below:</p>
	<input type='text' id='todoInput'/>
	<button onclick='addTodo(event)' id='addTodo'>Add Todo</button>
	<p>Your todos are shown here:</p>
	<div id="todos"></div>
	</body>
</html>

Du har alltså id-värdena "todoInput", "addTodo" och "todos" (som kan "lagras/markeras" med hjälp av "document.getElementById()"). Utmaningen nu med enbart JavaScript (för all nödvändig HTML finns redan) är att hämta data från inmatningsfältet (id=todoInput) när du klickat på knappen Add Todo (id=addTodo) vilket då skriver ut den i <div>-elementet (id=todos). Tack vare att alla har id:n så kan du lätt komma åt/manipulera dessa hur du vill!

Startkoden för JS (funktionen körs när du klickar på Add Todo-knappen och förhindrar sidan att laddas om, resten får du experimentera fram en lösning för):

// Starting code for index.js
function addTodo(event) 
{
     event.preventDefault(); // Don't reload page!
    // Write the rest of your Todo solution here!
}

Tips är att "innerHTML = " _ersätter_ allt inuti HTML även alla nästlade HTML (t.ex. <p>Här var det ingen nästlad text. Men innerHTML på mig skulle ta bort mig. <b>Jag är nästlad, jag försvinner också av innerHTML = om det används på p-elementet!</b> Här är det inte nästlat igen!</p>).

Så du vill kanske använda innerHTML += som då lägger till istället för att ta bort. Men experimentera gärna med båda bara för att få en "känsla" för vad som händer med det ena eller andra. Plus vore också om du kan kontrollera att något faktiskt har skrivits i inmatningsfältet (id=todoInput) innan det skrivs ut i div-elementet (id=todos) för du vill väl inte lägga till något som är tomt?

GL HF! ^_^

Mvh,
WKL.