ardenn/starwars.html

## starwars.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Star Wars</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
            crossorigin="anonymous">
    </head>

    <body>
        <div class="row">
            <div class="seven columns" id="list">
                <h2>Character List</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Character</th>
                            <th>Open</th>
                            <th>Height</th>
                            <th>Mass</th>
                            <th>Hair Color</th>
                            <th>Favourite</th>
                        </tr>
                    </thead>
                    <tbody id="tbody1">

                    </tbody>
                </table>
            </div>
            <div class="five columns" id="details">
                <h2>Detail View</h2>
                <button id='fav-button' class="hidden" data-num="" onclick='makeFavourite(event)'>Make Favourite</button>
                <table>
                    <thead>
                        <tr>
                            <th>Property</th>
                            <th>Detail</th>
                        </tr>
                    </thead>
                    <tbody id="tbody2">

                    </tbody>
                </table>
            </div>
        </div>
        <style>
            .names {
                cursor: pointer;
                color: blue;
                text-decoration: underline;
            }

            .hidden {
                display: none;
            }

            th {
                text-align: left;
            }

        </style>
        <script>
            let tbody1 = document.querySelector("#tbody1");
            let tbody2 = document.querySelector("#tbody2");
            let favBtn = document.getElementById("fav-button");
            let favourites = 0;

            let people;
            document.addEventListener('DOMContentLoaded', function () {
                fetch("https://swapi.co/api/people/")
                    .then(response => {
                        return response.json();
                    })
                    .then(jsonData => {
                        people = jsonData["results"];
                        people.forEach((person, index) => {
                            let row = document.createElement("tr");
                            let name = document.createElement("td");
                            let open = document.createElement("td");
                            let height = document.createElement("td");
                            let mass = document.createElement("td");
                            let hairColor = document.createElement("td");
                            let fav = document.createElement("td");
                            name.innerText = person.name;
                            name.id = index;
                            name.classList.add("names");
                            name.addEventListener("click", function () {
                                tbody2.childNodes.forEach(child => child.remove());
                                const id = name.id;
                                let details = people[id];
                                console.log(id, details["isFav"]);
                                favBtn.dataset.num = id;
                                favBtn.classList.remove("hidden");
                                if (details["isFav"]) {
                                    favBtn.innerText = "Remove Favourite";
                                } else {
                                    favBtn.innerText = "Make Favourite";
                                }

                                Object.keys(details).forEach(field => {
                                    let row = document.createElement("tr");
                                    let m = document.createElement("td");
                                    let n = document.createElement("td");

                                    m.innerText = field;
                                    n.innerText = details[field];

                                    row.append(...[m, n]);
                                    tbody2.append(row);
                                })
                            })
                            mass.innerText = person.mass;
                            open.innerHTML = `<button onclick='openNewTab(event)'>New Tab</button>`;
                            hairColor.innerText = person.hair_color;
                            height.innerText = person.height;
                            row.append(...[name, open, height, mass, hairColor, fav]);
                            tbody1.append(row);
                        });
                    })
            });
            function makeFavourite(event) {
                const id = event.target.dataset.num;
                const favSpot = document.getElementById(id);
                if (people[id]["isFav"]) {
                    people[id]["isFav"] = false;
                    favSpot.parentElement.lastChild.innerText = "";
                    favBtn.innerText = "Make Favourite";
                    favourites--;
                } else {
                    if (favourites < 5) {
                        people[id]["isFav"] = true;
                        favSpot.parentElement.lastChild.innerText = "🖤";
                        favBtn.innerText = "Remove Favourite";
                        favourites++;
                    } else {
                        alert("You have reached maximum favourites!");
                    }

                }

            }
            function openNewTab(event) {
                event.target.parentElement.previousElementSibling.click();
                const details = document.getElementById("details");
                let newTab = window.open("", "_blank");
                newTab.document.write(details.innerHTML);
                newTab.focus();
            }

        </script>
    </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Star Wars</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
	crossorigin="anonymous">
	</head>

	<body>
	<div class="row">
	<div class="seven columns" id="list">
	<h2>Character List</h2>
	<table>
	<thead>
	<tr>
	<th>Character</th>
	<th>Open</th>
	<th>Height</th>
	<th>Mass</th>
	<th>Hair Color</th>
	<th>Favourite</th>
	</tr>
	</thead>
	<tbody id="tbody1">

	</tbody>
	</table>
	</div>
	<div class="five columns" id="details">
	<h2>Detail View</h2>
	<button id='fav-button' class="hidden" data-num="" onclick='makeFavourite(event)'>Make Favourite</button>
	<table>
	<thead>
	<tr>
	<th>Property</th>
	<th>Detail</th>
	</tr>
	</thead>
	<tbody id="tbody2">

	</tbody>
	</table>
	</div>
	</div>
	<style>
	.names {
	cursor: pointer;
	color: blue;
	text-decoration: underline;
	}

	.hidden {
	display: none;
	}

	th {
	text-align: left;
	}

	</style>
	<script>
	let tbody1 = document.querySelector("#tbody1");
	let tbody2 = document.querySelector("#tbody2");
	let favBtn = document.getElementById("fav-button");
	let favourites = 0;

	let people;
	document.addEventListener('DOMContentLoaded', function () {
	fetch("https://swapi.co/api/people/")
	.then(response => {
	return response.json();
	})
	.then(jsonData => {
	people = jsonData["results"];
	people.forEach((person, index) => {
	let row = document.createElement("tr");
	let name = document.createElement("td");
	let open = document.createElement("td");
	let height = document.createElement("td");
	let mass = document.createElement("td");
	let hairColor = document.createElement("td");
	let fav = document.createElement("td");
	name.innerText = person.name;
	name.id = index;
	name.classList.add("names");
	name.addEventListener("click", function () {
	tbody2.childNodes.forEach(child => child.remove());
	const id = name.id;
	let details = people[id];
	console.log(id, details["isFav"]);
	favBtn.dataset.num = id;
	favBtn.classList.remove("hidden");
	if (details["isFav"]) {
	favBtn.innerText = "Remove Favourite";
	} else {
	favBtn.innerText = "Make Favourite";
	}

	Object.keys(details).forEach(field => {
	let row = document.createElement("tr");
	let m = document.createElement("td");
	let n = document.createElement("td");

	m.innerText = field;
	n.innerText = details[field];

	row.append(...[m, n]);
	tbody2.append(row);
	})
	})
	mass.innerText = person.mass;
	open.innerHTML = `<button onclick='openNewTab(event)'>New Tab</button>`;
	hairColor.innerText = person.hair_color;
	height.innerText = person.height;
	row.append(...[name, open, height, mass, hairColor, fav]);
	tbody1.append(row);
	});
	})
	});
	function makeFavourite(event) {
	const id = event.target.dataset.num;
	const favSpot = document.getElementById(id);
	if (people[id]["isFav"]) {
	people[id]["isFav"] = false;
	favSpot.parentElement.lastChild.innerText = "";
	favBtn.innerText = "Make Favourite";
	favourites--;
	} else {
	if (favourites < 5) {
	people[id]["isFav"] = true;
	favSpot.parentElement.lastChild.innerText = "🖤";
	favBtn.innerText = "Remove Favourite";
	favourites++;
	} else {
	alert("You have reached maximum favourites!");
	}

	}

	}
	function openNewTab(event) {
	event.target.parentElement.previousElementSibling.click();
	const details = document.getElementById("details");
	let newTab = window.open("", "_blank");
	newTab.document.write(details.innerHTML);
	newTab.focus();
	}

	</script>
	</body>

	</html>