Skip to content

Commit

Permalink
challenge 1 done!
Browse files Browse the repository at this point in the history
  • Loading branch information
Abdulmajeed98 committed Apr 26, 2021
1 parent 4f88fab commit 4b9434d
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 77 deletions.
13 changes: 11 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,18 @@
id="name"
placeholder="enter a character name"
/>
<button id="search">search</button>
<button id="check-align">Check character</button>

<select id="filter">
<option value="">Select Status</option>
<option value="good characters">Good</option>
<option value="bad characters">Bad</option>
<option value="neutral characters">Natural</option>
</select>
<button type="submit">search</button>
</form>

<h3 style="display: none">total result : <span id="totalResult"></span></h3>
<div id="result"></div>
</body>
<script src="script/script.js"></script>
</html>
187 changes: 112 additions & 75 deletions script/script.js
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!");
});
}
});

0 comments on commit 4b9434d

Please sign in to comment.