Webbutvecklingsdagbok (Webbutveckling, 120 hp)

/* Lösning till Uppgift 3.2 (Moment 3.2 i DT084G) Av WebbkodsLärlingen, 2022 */
'use strict';
// Variabler som används regelbundet
let addTodoItemEl = document.getElementById('newtodo'); // För att läsa av input-värdet senare
let addTodoBtnEl = document.getElementById('newtodobutton'); // För att lägga till ny Att göra
let todoListEl = document.getElementById('todolist'); // Här hamnar alla inlästa & tillagda Att göra-articles
let errorMsgEl = document.getElementById('message'); // För att visa felmeddelande vid för kort sträng
let clearAllBtnEl = document.getElementById('clearbutton'); // För att kunna rensa hela Att göra-listan
let i; // Iteratorvariabel för regelbundna loopar

// Händelsehanterare som används regelbundet
addTodoItemEl.addEventListener('keyup', checkTextLength, false); // Kontrollera inmatningslängd
addTodoBtnEl.addEventListener('click' || '', addTodo, false); // Lägga till i Att göra-listan
clearAllBtnEl.addEventListener('click', clearTodos, false); // Rensa alla Att göra-articles från sidan
window.onload = init; // När sidan laddats fram, anropa funktionen init()

// Initering
function init() {
	console.log('Initierar massa...');

	// Töm inmatningsfält och inaktivera Lägg till-knapp (lämpligt när sidan startas om med F5)
	addTodoItemEl.value = '';
	addTodoBtnEl.disabled = true;

	// Ladda sedan in nuvarande Att göra-articles som finns
	loadTodos();
}

// Funktion: Kontrollera textlängd
function checkTextLength() {
	console.log('Kontrollerar textlängden för inmatningsfältet...');

	// Lagra värdet från inmatningsfältet
	let input = addTodoItemEl.value;

	// Kontrollera om längden är minst fem tecken lång
	if (input.length > 4) {
		errorMsgEl.innerHTML = ''; // Visa INGET felmeddelande
		addTodoBtnEl.disabled = false; // Aktivera Lägg till-knapp
	} else {
		// Om färre än 5 tecken så visa felmeddelande
		errorMsgEl.innerHTML = 'Ange minst fem tecken först!';
		addTodoBtnEl.disabled = true; // Inaktivera Lägg till-knapp
	}
}

// Funtkion: Lägga till i Att göra-listan
function addTodo() {
	console.log('Lägger till i Att göra-listan...');

	// Lagra värdet från inmatningsfältet
	let input = addTodoItemEl.value;

	// Skapa ett article-element och sen text till den (textnod)
	let newArticleEl = document.createElement('article');
	let newArticleTextNode = document.createTextNode(input); // textnoden är inmatningsfältets lagrade värde
	newArticleEl.appendChild(newArticleTextNode); // Slå samman HTML-element och dess innehåll

	// Lägg till det skapta article-elementet och dess textnod under <section>-elementet
	todoListEl.appendChild(newArticleEl);
	// Händelsehanterare till skapad <article>som tar bort ur DOM och
	// sparar det som finns kvar i DOM. På så vis kan valfritt element
	// tas bort med ett enkelt knapptryck medan resten sparas!
	newArticleEl.addEventListener('click', function (e) {
		e.target.remove();
		console.log('Tar bort ett element!');
		saveTodos();
	});

	// Töm inmatningsfält och inaktivera Lägg till-knapp
	addTodoItemEl.value = '';
	addTodoBtnEl.disabled = true;
	// Anropar lagringsfunktionen som använder localStorage() för att spara lokalt
	saveTodos();
}

// Funktion: Spara nuvarande <article>-Att göra till localStorage()
function saveTodos() {
	console.log('Sparar nuvarande Att göra-articles som finns...');
	// Läs in nuvarande Att göra-articles
	let todos = document.getElementsByTagName('article');

	// Skapa temporär arrayvariabel
	let tempArr = [];

	// Loopar igenom listan och lagrar till den temporära arrayvariabeln
	for (i = 0; i < todos.length; i++) {
		tempArr.push(todos[i].innerHTML);
	}
	// Omvandla den genomloopade arrayen till en JSON-sträng
	// Lagra sedan i lokalt Web Storage
	let jsonStr = JSON.stringify(tempArr);
	localStorage.setItem('todos', jsonStr);
}

// Funktion: Läser in nuvarande Att göra-articles
function loadTodos() {
	console.log('Försöker läsa in lagrade Att göra-articles...');

	// Hämtar localStorage-textsträng och omvandlar till JSON
	let todos = JSON.parse(localStorage.getItem('todos'));

	// Loopar igenom den inlästa arrayen todos och skapar article-element
	// och dess textnode[i] så länge localStorage INTE är tom (null)
	if (todos != null) {
		console.log('localStorage innehåller något. Läser in: [' + todos + ']');
		for (i = 0; i < todos.length; i++) {
			let newArticleEl = document.createElement('article');
			let newArticleTextNode = document.createTextNode(todos[i]);
			newArticleEl.appendChild(newArticleTextNode);
			todoListEl.appendChild(newArticleEl);

			// Händelsehanterare som tar bort ur DOM och sparar det
			// som finns kvar i DOM. På så vis kan valfritt element
			// tas bort med ett enkelt knapptryck medan resten sparas!
			newArticleEl.addEventListener('click', function (e) {
				e.target.remove();
				console.log('Tar bort ett element!');
				saveTodos();
			});
		}
	} else {
		// Annars om localStorage är tomt vid inläsningen av den
		console.log('localStorage är tomt. Finns inget att läsa in!');
	}
}
// Funktion: Rensa localStorage OCH i DOM
function clearTodos() {
	console.log('Rensar alla Att göra-articles och laddar om...');
	localStorage.clear(); // Rensar localStorage
	document.getElementById('todolist').innerHTML = '';
	init(); // Anropa init (inaktivera knapp+töm inmatningsfält)
}

/* Lösning till Uppgift 4.1 Av WebbkodsLärlingen, 2022 */
'use strict';

// JS-FilmObjekt1 med egenskaperna title, category, playtime och metoden getInformation
let movie1 = {
	title: 'Jurassic Park',
	category: 'Science Fiction',
	playtime: 127,
	getInformation: function () {
		return `${this.title}, ${this.category}, ${this.playtime}, minuter` + '\n';
	},
};

// JS-FilmObjekt2 med egenskaperna title, category, playtime och metoden getInformation
let movie2 = {
	title: 'Jurassic Park II',
	category: 'Science Fiction',
	playtime: 129,
	getInformation: function () {
		return `${this.title}, ${this.category}, ${this.playtime} minuter` + '\n';
	},
};

// JS-FilmObjekt3 med egenskaperna title, category, playtime och metoden getInformation
let movie3 = {
	title: 'Jurassic Park III',
	category: 'Science Fiction',
	playtime: 92,
	getInformation: function () {
		return `${this.title}, ${this.category}, ${this.playtime} minuter` + '\n';
	},
};

// JS-FilmObjekt4 med egenskaperna title, category, playtime och metoden getInformation
let movie4 = new Object();
movie4.title = 'Jurassic World: Dominion Extended Edition';
movie4.category = 'Science Fiction';
movie4.playtime = 146;
movie4.getInformation = function () {
	return `${this.title}, ${this.category}, ${this.playtime} minuter` + '\n';
};

// JS-objekt med referenser till vardera objekts metod
let movies = {
	a: movie1.getInformation(),
	b: movie2.getInformation(),
	c: movie3.getInformation(),
	d: movie4.getInformation(),
};

// Töm inmatningsfältet först
document.getElementById('output').value = '';

// Mata ut varje JS-filmobjekt i inmatningsfältet med hjälp av value-metoden
document.getElementById('output').value += movies.a;
document.getElementById('output').value += movies.b;
document.getElementById('output').value += movies.c;
document.getElementById('output').value += movies.d;

{
    "student": {
        "information": {
            "name": "WebbkodsLärlingen",
            "email": "WebbkodsLärlingen@student.miun.se",
            "city": "Sundsvall",
            "website": "http://studenter.miun.se/~WebbkodsLärlingen/"
        },
        "websites": [{
            "sitename": "Mittuniversitetet",
            "siteurl": "https://www.miun.se/",
            "description": "Detta är hemsidan där jag studerade Projektledning med inriktning i Folkhälsovetenskap och där jag för närvarande studerar - på distans - Webbutvecklingsprogrammet."
        }, 
        
        {
            "sitename": "Bio Drakstaden",
            "siteurl": "https://www.biodrakstaden.se/",
            "description": "När du vill boka in för kommande filmer i staden Sundsvall. Tidigare var det Filmstaden som bedrev det."
        }, 
        
        {
            "sitename": "Systembolaget",
            "siteurl": "https://www.systembolaget.se/",
            "description": "Här går det att köpa alkohol på nätet. Kanske det bästa eller sämsta som någonsin har gjorts?"
        }, 
        
        {
            "sitename": "Data Structures: Objects and Arrays :: Eloquent JavaScript",
            "siteurl": "https://eloquentjavascript.net/04_data.html",
            "description": "Kapitlet om objekt och arrayer vilket inkluderar JSON vilket denna fil är. Upplev meta av det hela!"
        },
        
        {
            "sitename": "stackoverflow - What is JSONP, and why was it created?",
            "siteurl": "https://stackoverflow.com/questions/2067472/what-is-jsonp-and...",
            "description": "En direktlänk till en fråga om vad JSONP är för något och varför det skapades. Observera att det INTE är samma sak som JSON, tydligen."
        }]
    }
        
}

/* Lösning till Uppgift 5.1 Av WebbkodsLärlingen, 2022 */
'use strict';

// Skapa nytt AJAX-objekt
let xhttp = new XMLHttpRequest();

// Objektet väntar på Utförd Förfrågan (Request Finished) med färdigt svar (Response),
// dvs., 4 OCH samtidigt som dess statusmeddelande från servern ska vara OK (200)
xhttp.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
		// Omvandla JSON-filens mottagna text (alltså från this.responseText) till hanterbart JS-objekt
		let jsonStr = JSON.parse(this.responseText);

		// 'Positionera' sig vid info-Div inuti HTML-filen för DOM-manipulering
		let infoDiv = document.getElementById('info');

		// Skriv ut studentnamn, studente-post & studentwebbplats från student.json med lämpliga radbrytningar
		infoDiv.innerHTML += `<strong style="font-weight: bold;">Namn:</strong> ${jsonStr.student.information.name} <br>
		<strong style="font-weight: bold;">E-post:</strong> <a href="mailto:${jsonStr.student.information.email}">${jsonStr.student.information.email}</a><br>
		<strong style="font-weight: bold;">Webbplats:</strong> <a href="${jsonStr.student.information.website}" target="_blank">${jsonStr.student.information.website}</a><br>`;

		// 'Positionera' sig vid sites-ul-listan inuti HTML-filen för DOM-manipulering
		let sitesUl = document.getElementById('sites');

		// Skriv ut följande med hjälp av loop: webbplatsens fullständiga adress (href), beskrivning (title) och webbsidans namn <ahref="">här</a>
		for (let i = 0; i < jsonStr.student.websites.length; i++) {
			sitesUl.innerHTML += `<li><a href="${jsonStr.student.websites[i].siteurl}" target="_blank" title="${jsonStr.student.websites[i].description}">${jsonStr.student.websites[i].sitename}</a></li>`;
		}
	}
};
xhttp.open('GET', 'student.json', true);
xhttp.send();

/* Lösning till Uppgift 5.2 Av WebbkodsLärlingen, 2022 */
'use strict';

// Hämta data från lokal student.json-fil
fetch('student.json')
	// Om det lyckas så omvandla all response-data till JSON-data med hjälp av .json()-metoden
	.then((response) => response.json())
	// Om även det lyckas så använd sedan denna JSON-data (lagrad i jsonStr) för att köra följande pilfunktion:
	.then((jsonStr) => {
		// Exakt samma DOM-manipulering som från XMLHttpRequest-momentet kan tillämpas härifrån!
		// 'Positionera' sig vid info-Div inuti HTML-filen för DOM-manipulering |
		let infoDiv = document.getElementById('info');
		// Skriv ut studentnamn, studente-post & studentwebbplats från student.json med lämpliga radbrytningar
		infoDiv.innerHTML += `<strong style="font-weight: bold;">Namn:</strong> ${jsonStr.student.information.name} <br>
		<strong style="font-weight: bold;">E-post:</strong> <a href="mailto:${jsonStr.student.information.email}">${jsonStr.student.information.email}</a><br>
		<strong style="font-weight: bold;">Webbplats:</strong> <a href="${jsonStr.student.information.website}" target="_blank">${jsonStr.student.information.website}</a><br>`;

		// 'Positionera' sig vid sites-ul-listan <ul>-elementet inuti HTML-filen för DOM-manipulering
		let sitesUl = document.getElementById('sites');

		// Skriv ut följande med hjälp av loop: webbplatsens fullständiga adress (href), beskrivning (title) och webbsidans namn <ahref="">här</a>
		for (let i = 0; i < jsonStr.student.websites.length; i++) {
			sitesUl.innerHTML += `<li><a href="${jsonStr.student.websites[i].siteurl}" target="_blank" title="${jsonStr.student.websites[i].description}">${jsonStr.student.websites[i].sitename}</a></li>`;
		}
	});

/* Lösning till Uppgift 3.2 (Moment 3.2 i DT084G) Av WebbkodsLärlingen, 2022 */
'use strict';
// Variabler som används regelbundet
let addTodoItemEl = document.getElementById('newtodo'); // För att läsa av input-värdet senare
let addTodoBtnEl = document.getElementById('newtodobutton'); // För att lägga till ny Att göra
let todoListEl = document.getElementById('todolist'); // Här hamnar alla inlästa & tillagda Att göra-articles
let errorMsgEl = document.getElementById('message'); // För att visa felmeddelande vid för kort sträng
let clearAllBtnEl = document.getElementById('clearbutton'); // För att kunna rensa hela Att göra-listan
let i; // Iteratorvariabel för regelbundna loopar

// Händelsehanterare som används regelbundet
addTodoItemEl.addEventListener('keyup', checkTextLength, false); // Kontrollera inmatningslängd
addTodoBtnEl.addEventListener('click' || '', addTodo, false); // Lägga till i Att göra-listan
clearAllBtnEl.addEventListener('click', clearTodos, false); // Rensa alla Att göra-articles från sidan
window.onload = init; // När sidan laddats fram, anropa funktionen init()

// Initering
function init() {
	console.log('Initierar massa...');

	// Töm inmatningsfält och inaktivera Lägg till-knapp (lämpligt när sidan startas om med F5)
	addTodoItemEl.value = '';
	addTodoBtnEl.disabled = true;

	// Ladda sedan in nuvarande Att göra-articles som finns
	loadTodos();
}

// Funktion: Kontrollera textlängd
function checkTextLength() {
	console.log('Kontrollerar textlängden för inmatningsfältet...');

	// Lagra värdet från inmatningsfältet
	let input = addTodoItemEl.value;

	// Kontrollera om längden är minst fem tecken lång
	if (input.length > 4) {
		errorMsgEl.innerHTML = ''; // Visa INGET felmeddelande
		addTodoBtnEl.disabled = false; // Aktivera Lägg till-knapp
	} else {
		// Om färre än 5 tecken så visa felmeddelande
		errorMsgEl.innerHTML = 'Ange minst fem tecken först!';
		addTodoBtnEl.disabled = true; // Inaktivera Lägg till-knapp
	}
}

// Funtkion: Lägga till i Att göra-listan
function addTodo() {
	console.log('Lägger till i Att göra-listan...');

	// Lagra värdet från inmatningsfältet
	let input = addTodoItemEl.value;

	// Skapa ett article-element och sen text till den (textnod)
	let newArticleEl = document.createElement('article');
	let newArticleTextNode = document.createTextNode(input); // textnoden är inmatningsfältets lagrade värde
	newArticleEl.appendChild(newArticleTextNode); // Slå samman HTML-element och dess innehåll

	// Lägg till det skapta article-elementet och dess textnod under <section>-elementet
	todoListEl.appendChild(newArticleEl);
	// Händelsehanterare till skapad <article>som tar bort ur DOM och
	// sparar det som finns kvar i DOM. På så vis kan valfritt element
	// tas bort med ett enkelt knapptryck medan resten sparas!
	newArticleEl.addEventListener('click', function (e) {
		e.target.remove();
		console.log('Tar bort ett element!');
		saveTodos();
	});

	// Töm inmatningsfält och inaktivera Lägg till-knapp
	addTodoItemEl.value = '';
	addTodoBtnEl.disabled = true;
	// Anropar lagringsfunktionen som använder localStorage() för att spara lokalt
	saveTodos();
}

// Funktion: Spara nuvarande <article>-Att göra till localStorage()
function saveTodos() {
	console.log('Sparar nuvarande Att göra-articles som finns...');
	// Läs in nuvarande Att göra-articles
	let todos = document.getElementsByTagName('article');

	// Skapa temporär arrayvariabel
	let tempArr = [];

	// Loopar igenom listan och lagrar till den temporära arrayvariabeln
	for (i = 0; i < todos.length; i++) {
		tempArr.push(todos[i].innerHTML);
	}
	// Omvandla den genomloopade arrayen till en JSON-sträng
	// Lagra sedan i lokalt Web Storage
	let jsonStr = JSON.stringify(tempArr);
	localStorage.setItem('todos', jsonStr);
}

// Funktion: Läser in nuvarande Att göra-articles
function loadTodos() {
	console.log('Försöker läsa in lagrade Att göra-articles...');

	// Hämtar localStorage-textsträng och omvandlar till JSON
	let todos = JSON.parse(localStorage.getItem('todos'));

	// Loopar igenom den inlästa arrayen todos och skapar article-element
	// och dess textnode[i] så länge localStorage INTE är tom (null)
	if (todos != null) {
		console.log('localStorage innehåller något. Läser in: [' + todos + ']');
		for (i = 0; i < todos.length; i++) {
			let newArticleEl = document.createElement('article');
			let newArticleTextNode = document.createTextNode(todos[i]);
			newArticleEl.appendChild(newArticleTextNode);
			todoListEl.appendChild(newArticleEl);

			// Händelsehanterare som tar bort ur DOM och sparar det
			// som finns kvar i DOM. På så vis kan valfritt element
			// tas bort med ett enkelt knapptryck medan resten sparas!
			newArticleEl.addEventListener('click', function (e) {
				e.target.remove();
				console.log('Tar bort ett element!');
				saveTodos();
			});
		}
	} else {
		// Annars om localStorage är tomt vid inläsningen av den
		console.log('localStorage är tomt. Finns inget att läsa in!');
	}
}
// Funktion: Rensa localStorage OCH i DOM
function clearTodos() {
	console.log('Rensar alla Att göra-articles och laddar om...');
	localStorage.clear(); // Rensar localStorage
	document.getElementById('todolist').innerHTML = '';
	init(); // Anropa init (inaktivera knapp+töm inmatningsfält)
}

/* Lösning till Uppgift 4.1 Av WebbkodsLärlingen, 2022 */
'use strict';

// JS-FilmObjekt1 med egenskaperna title, category, playtime och metoden getInformation
let movie1 = {
	title: 'Jurassic Park',
	category: 'Science Fiction',
	playtime: 127,
	getInformation: function () {
		return `${this.title}, ${this.category}, ${this.playtime}, minuter` + '\n';
	},
};

// JS-FilmObjekt2 med egenskaperna title, category, playtime och metoden getInformation
let movie2 = {
	title: 'Jurassic Park II',
	category: 'Science Fiction',
	playtime: 129,
	getInformation: function () {
		return `${this.title}, ${this.category}, ${this.playtime} minuter` + '\n';
	},
};

// JS-FilmObjekt3 med egenskaperna title, category, playtime och metoden getInformation
let movie3 = {
	title: 'Jurassic Park III',
	category: 'Science Fiction',
	playtime: 92,
	getInformation: function () {
		return `${this.title}, ${this.category}, ${this.playtime} minuter` + '\n';
	},
};

// JS-FilmObjekt4 med egenskaperna title, category, playtime och metoden getInformation
let movie4 = new Object();
movie4.title = 'Jurassic World: Dominion Extended Edition';
movie4.category = 'Science Fiction';
movie4.playtime = 146;
movie4.getInformation = function () {
	return `${this.title}, ${this.category}, ${this.playtime} minuter` + '\n';
};

// JS-objekt med referenser till vardera objekts metod
let movies = {
	a: movie1.getInformation(),
	b: movie2.getInformation(),
	c: movie3.getInformation(),
	d: movie4.getInformation(),
};

// Töm inmatningsfältet först
document.getElementById('output').value = '';

// Mata ut varje JS-filmobjekt i inmatningsfältet med hjälp av value-metoden
document.getElementById('output').value += movies.a;
document.getElementById('output').value += movies.b;
document.getElementById('output').value += movies.c;
document.getElementById('output').value += movies.d;

{
    "student": {
        "information": {
            "name": "WebbkodsLärlingen",
            "email": "WebbkodsLärlingen@student.miun.se",
            "city": "Sundsvall",
            "website": "http://studenter.miun.se/~WebbkodsLärlingen/"
        },
        "websites": [{
            "sitename": "Mittuniversitetet",
            "siteurl": "https://www.miun.se/",
            "description": "Detta är hemsidan där jag studerade Projektledning med inriktning i Folkhälsovetenskap och där jag för närvarande studerar - på distans - Webbutvecklingsprogrammet."
        }, 
        
        {
            "sitename": "Bio Drakstaden",
            "siteurl": "https://www.biodrakstaden.se/",
            "description": "När du vill boka in för kommande filmer i staden Sundsvall. Tidigare var det Filmstaden som bedrev det."
        }, 
        
        {
            "sitename": "Systembolaget",
            "siteurl": "https://www.systembolaget.se/",
            "description": "Här går det att köpa alkohol på nätet. Kanske det bästa eller sämsta som någonsin har gjorts?"
        }, 
        
        {
            "sitename": "Data Structures: Objects and Arrays :: Eloquent JavaScript",
            "siteurl": "https://eloquentjavascript.net/04_data.html",
            "description": "Kapitlet om objekt och arrayer vilket inkluderar JSON vilket denna fil är. Upplev meta av det hela!"
        },
        
        {
            "sitename": "stackoverflow - What is JSONP, and why was it created?",
            "siteurl": "https://stackoverflow.com/questions/2067472/what-is-jsonp-and...",
            "description": "En direktlänk till en fråga om vad JSONP är för något och varför det skapades. Observera att det INTE är samma sak som JSON, tydligen."
        }]
    }
        
}

/* Lösning till Uppgift 5.1 Av WebbkodsLärlingen, 2022 */
'use strict';

// Skapa nytt AJAX-objekt
let xhttp = new XMLHttpRequest();

// Objektet väntar på Utförd Förfrågan (Request Finished) med färdigt svar (Response),
// dvs., 4 OCH samtidigt som dess statusmeddelande från servern ska vara OK (200)
xhttp.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
		// Omvandla JSON-filens mottagna text (alltså från this.responseText) till hanterbart JS-objekt
		let jsonStr = JSON.parse(this.responseText);

		// 'Positionera' sig vid info-Div inuti HTML-filen för DOM-manipulering
		let infoDiv = document.getElementById('info');

		// Skriv ut studentnamn, studente-post & studentwebbplats från student.json med lämpliga radbrytningar
		infoDiv.innerHTML += `<strong style="font-weight: bold;">Namn:</strong> ${jsonStr.student.information.name} <br>
		<strong style="font-weight: bold;">E-post:</strong> <a href="mailto:${jsonStr.student.information.email}">${jsonStr.student.information.email}</a><br>
		<strong style="font-weight: bold;">Webbplats:</strong> <a href="${jsonStr.student.information.website}" target="_blank">${jsonStr.student.information.website}</a><br>`;

		// 'Positionera' sig vid sites-ul-listan inuti HTML-filen för DOM-manipulering
		let sitesUl = document.getElementById('sites');

		// Skriv ut följande med hjälp av loop: webbplatsens fullständiga adress (href), beskrivning (title) och webbsidans namn <ahref="">här</a>
		for (let i = 0; i < jsonStr.student.websites.length; i++) {
			sitesUl.innerHTML += `<li><a href="${jsonStr.student.websites[i].siteurl}" target="_blank" title="${jsonStr.student.websites[i].description}">${jsonStr.student.websites[i].sitename}</a></li>`;
		}
	}
};
xhttp.open('GET', 'student.json', true);
xhttp.send();

/* Lösning till Uppgift 5.2 Av WebbkodsLärlingen, 2022 */
'use strict';

// Hämta data från lokal student.json-fil
fetch('student.json')
	// Om det lyckas så omvandla all response-data till JSON-data med hjälp av .json()-metoden
	.then((response) => response.json())
	// Om även det lyckas så använd sedan denna JSON-data (lagrad i jsonStr) för att köra följande pilfunktion:
	.then((jsonStr) => {
		// Exakt samma DOM-manipulering som från XMLHttpRequest-momentet kan tillämpas härifrån!
		// 'Positionera' sig vid info-Div inuti HTML-filen för DOM-manipulering |
		let infoDiv = document.getElementById('info');
		// Skriv ut studentnamn, studente-post & studentwebbplats från student.json med lämpliga radbrytningar
		infoDiv.innerHTML += `<strong style="font-weight: bold;">Namn:</strong> ${jsonStr.student.information.name} <br>
		<strong style="font-weight: bold;">E-post:</strong> <a href="mailto:${jsonStr.student.information.email}">${jsonStr.student.information.email}</a><br>
		<strong style="font-weight: bold;">Webbplats:</strong> <a href="${jsonStr.student.information.website}" target="_blank">${jsonStr.student.information.website}</a><br>`;

		// 'Positionera' sig vid sites-ul-listan <ul>-elementet inuti HTML-filen för DOM-manipulering
		let sitesUl = document.getElementById('sites');

		// Skriv ut följande med hjälp av loop: webbplatsens fullständiga adress (href), beskrivning (title) och webbsidans namn <ahref="">här</a>
		for (let i = 0; i < jsonStr.student.websites.length; i++) {
			sitesUl.innerHTML += `<li><a href="${jsonStr.student.websites[i].siteurl}" target="_blank" title="${jsonStr.student.websites[i].description}">${jsonStr.student.websites[i].sitename}</a></li>`;
		}
	});