generated from maqalaqil/marvel-game
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4f88fab
commit 4b9434d
Showing
2 changed files
with
123 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,91 +1,128 @@ | ||
// all the magic will happen now ! | ||
document.addEventListener("DOMContentLoaded", (event) => { | ||
//the event occurred | ||
|
||
class Character { | ||
constructor(id, name, align, power, year) { | ||
this.id = id; | ||
this.name = name; | ||
this.align = align; | ||
this.power = power; | ||
this.year = year; | ||
} | ||
checkCharacter() { | ||
if (this.align.includes("good")) { | ||
return "good"; | ||
} else if (this.align.includes("bad")) { | ||
return "bad"; | ||
} else { | ||
return "natural"; | ||
class Character { | ||
constructor(id, name, align, power, year) { | ||
this.id = id; | ||
this.name = name; | ||
this.align = align; | ||
this.power = power; | ||
this.year = year; | ||
} | ||
checkCharacter() { | ||
if (this.align.includes("good")) { | ||
return "good"; | ||
} else if (this.align.includes("bad")) { | ||
return "bad"; | ||
} else { | ||
return "natural"; | ||
} | ||
} | ||
} | ||
} | ||
|
||
class Characters { | ||
constructor() { | ||
this.arrayOfCharacters = []; | ||
} | ||
class Characters { | ||
constructor() { | ||
this.arrayOfCharacters = []; | ||
} | ||
|
||
loadData(id, name, align, power, year) { | ||
const newCharacter = new Character(id, name, align, power, year); | ||
this.arrayOfCharacters.push(newCharacter); | ||
} | ||
loadData(id, name, align, power, year) { | ||
const newCharacter = new Character(id, name, align, power, year); | ||
// console.log(newCharacter); | ||
this.arrayOfCharacters.push(newCharacter); | ||
} | ||
|
||
getData() { | ||
return this.arrayOfCharacters; | ||
} | ||
searchByName(name) { | ||
return this.arrayOfCharacters.find((item) => { | ||
if (item.name.includes(name)) return item; | ||
}); | ||
getData() { | ||
return this.arrayOfCharacters; | ||
} | ||
|
||
searchByName(name) { | ||
return this.getData().filter((person) => | ||
person.name.toLowerCase().includes(name.toLowerCase()) | ||
); | ||
} | ||
searchByStatus(status) { | ||
return this.getData().filter((person) => person.align == status); | ||
} | ||
searchByBoth(name, status) { | ||
return this.getData().filter((person) => { | ||
if ( | ||
person.align == status && | ||
person.name.toLowerCase().includes(name.toLowerCase()) | ||
) { | ||
return person; | ||
} | ||
}); | ||
} | ||
} | ||
} | ||
const characters = new Characters(); | ||
fetch("../marvel.json") | ||
.then((response) => response.json()) | ||
.then((json) => loadDataToCharacters(json)) | ||
.catch((err) => console.log(err)); | ||
|
||
function loadDataToCharacters(json) { | ||
json.forEach((element) => { | ||
characters.loadData( | ||
element.id, | ||
element.name, | ||
element.align, | ||
element.power, | ||
element.year | ||
); | ||
}); | ||
} | ||
const characters = new Characters(); | ||
|
||
const btn1 = document.getElementById("search"); | ||
const btn2 = document.getElementById("check-align"); | ||
const nameInput = document.getElementById("name"); | ||
const body = document.querySelector("body"); | ||
const data = characters.getData(); | ||
function loadDataToCharacters(json) { | ||
json.forEach((element) => { | ||
characters.loadData( | ||
element.id, | ||
element.name, | ||
element.align, | ||
element.power, | ||
element.year | ||
); | ||
}); | ||
} | ||
|
||
btn1.addEventListener("click", (e) => { | ||
e.preventDefault(); | ||
const nameTxt = nameInput.value; | ||
fetch("../marvel.json") | ||
.then((response) => response.json()) | ||
.then((json) => loadDataToCharacters(json)) | ||
.catch((err) => console.log(err)); | ||
|
||
if (nameTxt === "") return; | ||
const foundObject = searchByName(data, nameTxt); | ||
console.log(foundObject); | ||
body.innerHTML += `<p><strong>${foundObject.name}</strong></p>`; | ||
}); | ||
const form = document.getElementById("form"); | ||
let filter = document.querySelector("#filter"); | ||
let totalResult = document.querySelector("#totalResult"); | ||
let searchText = document.getElementById("name"); | ||
const resultDiv = document.querySelector("#result"); | ||
|
||
btn2.addEventListener("click", (e) => { | ||
e.preventDefault(); | ||
if (nameInput.value === "") { | ||
alert("please enter a character name!"); | ||
return; | ||
function renderHtml(data) { | ||
resultDiv.innerHTML = ""; | ||
totalResult.parentElement.style.display = "block"; | ||
totalResult.innerHTML = data.length; | ||
data.forEach((person, index) => { | ||
resultDiv.innerHTML += `<div> | ||
<p>${index + 1}</p> | ||
<div><label for="">Name: </label><strong>${person.name}</strong> </div> | ||
<div><label for="">Power: </label><strong> ${person.power}</strong></div> | ||
<div><label for="">align: </label><strong> ${person.align}</strong></div> | ||
<div><label for="">year: </label><strong> ${person.year}</strong></div> | ||
<hr/> | ||
</div>`; | ||
}); | ||
} | ||
const foundObject = searchByName(data, nameInput.value); | ||
body.innerHTML += `<p><strong>${ | ||
foundObject.name | ||
}</strong> <em>${foundObject.checkCharacter()}</em></p>`; | ||
}); | ||
|
||
function searchByName(data, name) { | ||
return data.find((element) => { | ||
if (element.name.toLowerCase().includes(name.toLowerCase())) return element; | ||
//search event | ||
form.addEventListener("submit", (e) => { | ||
e.preventDefault(); | ||
|
||
//filter by status | ||
if (searchText.value == "" && filter.value != "") { | ||
let filterRes = characters.searchByStatus(filter.value); | ||
renderHtml(filterRes); | ||
filter.value = ""; | ||
return; | ||
} | ||
//filter by search text | ||
else if (searchText.value !== "" && filter.value == "") { | ||
let searchRes = characters.searchByName(searchText.value); | ||
renderHtml(searchRes); | ||
searchText.value = ""; | ||
return; | ||
} | ||
//search by both | ||
else if (searchText.value !== "" && filter.value !== "") { | ||
let searchRes = characters.searchByBoth(searchText.value, filter.value); | ||
renderHtml(searchRes); | ||
searchText.value = ""; | ||
filter.value = ""; | ||
return; | ||
} | ||
alert("try again!"); | ||
}); | ||
} | ||
}); |