Skip to content

Commit 5a3f75e

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1677 from mohammadshahjahan/main
added beyblade card catalog project with resolving the error in projects.js file
2 parents 5d59ec0 + e212cb1 commit 5a3f75e

6 files changed

Lines changed: 301 additions & 0 deletions

File tree

‎Projects/Beyblade-Card-Catalog/beyblade.json‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
[
2+
{
3+
"id": 1,
4+
"name": "Gingka Hagane",
5+
"description": "Gingka Hagane is the main protagonist of Beyblade Metal Fusion. He is a skilled Blader and the owner of the Storm Pegasus 105RF Beyblade. Gingka is determined, brave, and passionate about Beyblade. He seeks to become the number one Blader in the world and protect it from evil forces.",
6+
"beyblade": "Storm Pegasus 105RF",
7+
"imageURL": "https://cdn.wallpapersafari.com/24/68/d7ULbn.png"
8+
},
9+
{
10+
"id": 2,
11+
"name": "Kyoya Tategami",
12+
"description": "Kyoya Tategami is a fierce and competitive Blader. He is known for his strong and aggressive Beyblade, Rock Leone 145WB. Kyoya initially clashes with Gingka but later becomes one of his closest allies. He is determined to prove his strength and be recognized as a top Blader.",
13+
"beyblade": "Rock Leone 145WB",
14+
"imageURL": "https://images4.fanpop.com/image/photos/18300000/Kyouya-Tategami-kyouya-tategami-18343205-967-544.jpg"
15+
},
16+
{
17+
"id": 3,
18+
"name": "Ryuga",
19+
"description": "Ryuga is the primary antagonist of Beyblade Metal Fusion. He is a powerful Blader and the owner of the Lightning L-Drago 100HF Beyblade. Ryuga is known for his ruthless and aggressive style, as well as his desire for power. He aims to dominate the Beyblade world and will do whatever it takes to achieve his goals.",
20+
"beyblade": "Lightning L-Drago 100HF",
21+
"imageURL": "https://qph.cf2.quoracdn.net/main-qimg-237c5e086743b2f055356a4a5412499f-lq"
22+
},
23+
{
24+
"id": 4,
25+
"name": "Kenta Yumiya",
26+
"description": "Kenta Yumiya is a kind-hearted and enthusiastic Blader. He owns the Flame Sagittario C145S Beyblade. Kenta is initially a weaker Blader but gains confidence and strength through his friendship with Gingka and the others. He values friendship and always strives to improve his skills.",
27+
"beyblade": "Flame Sagittario C145S",
28+
"imageURL": "https://i.pinimg.com/originals/f0/00/7f/f0007f20bb60a408cd73126f4d6e7337.jpg"
29+
},
30+
{
31+
"id": 5,
32+
"name": "Benkei Hanawa",
33+
"description": "Benkei Hanawa is a loyal and passionate Blader who becomes one of Kyoya's most trusted friends. He wields the Dark Bull H145SD Beyblade. Benkei is known for his loud personality and fierce battling style. Despite his tough exterior, he cares deeply for his friends and is always ready to support them.",
34+
"beyblade": "Dark Bull H145SD",
35+
"imageURL": "https://e1.pxfuel.com/desktop-wallpaper/129/225/desktop-wallpaper-trololo-blogg-fusion-beyblade-metal-fusion.jpg"
36+
},
37+
{
38+
"id": 6,
39+
"name": "Tsubasa Otori",
40+
"description": "Tsubasa Otori is a skilled and mysterious Blader who initially joins the Dark Nebula organization. He later becomes a loyal ally of Gingka and the others. Tsubasa uses the Earth Eagle 145WD Beyblade and is known for his strategic approach to battles. He seeks redemption for his past actions.",
41+
"beyblade": "Earth Eagle 145WD",
42+
"imageURL": "https://i.pinimg.com/550x/2f/cc/d9/2fccd92c6d1d283b21f87f183c8d9cdf.jpg"
43+
},
44+
{
45+
"id": 7,
46+
"name": "Yu Tendo",
47+
"description": "Yu Tendo is a cheerful and energetic Blader who loves to perform for his fans. He owns the Flame Libra T125ES Beyblade. Yu is known for his showmanship and ability to entertain the crowd. He is a good friend and supports Gingka in his battles against evil forces.",
48+
"beyblade": "Flame Libra T125ES",
49+
"imageURL": "https://pbs.twimg.com/media/BlYLCnKCMAE8LrO.jpg:large"
50+
},
51+
{
52+
"id": 8,
53+
"name": "Masamune Kadoya",
54+
"description": "Masamune Kadoya is a determined Blader from the African branch of the Beyblade training camp. He wields the Ray Striker D125CS Beyblade. Masamune is confident and competitive, aiming to surpass Gingka as the top Blader.",
55+
"beyblade": "Ray Striker D125CS",
56+
"imageURL": "https://e1.pxfuel.com/desktop-wallpaper/680/397/desktop-wallpaper-masamune-kadoya.jpg"
57+
},
58+
{
59+
"id": 9,
60+
"name": "Ryo Hagane",
61+
"description": "Ryo Hagane is Gingka's father and a legendary Blader. He is the original owner of the Storm Pegasus Beyblade. Ryo has a calm and wise demeanor and is always there to offer guidance and support to Gingka and his friends.",
62+
"beyblade": "Storm Pegasus",
63+
"imageURL": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNEMHz3oxM1LMY0KqXk-_uPMTN3c_F8j1CqA&usqp=CAU"
64+
},
65+
{
66+
"id": 10,
67+
"name": "Hikaru Hasama",
68+
"description": "Hikaru Hasama is a talented Blader and a member of Team GanGan Galaxy. She wields the Cyber Pegasus 105F Beyblade. Hikaru is determined and focused on improving her skills. She forms a strong bond with Gingka and the team as they strive for victory.",
69+
"beyblade": "Cyber Pegasus 105F",
70+
"imageURL": "https://pm1.aminoapps.com/7270/78801b57ec4dee26b66f5517e1428236ccd32365r1-720-404v2_uhq.jpg"
71+
},
72+
{
73+
"id": 11,
74+
"name": "Ryutaro Fukami",
75+
"description": "Ryutaro Fukami is a member of Team GanGan Galaxy and a close friend of Gingka. He uses the Flame Sagittario C145S Beyblade. Ryutaro is cheerful and energetic, always bringing a positive atmosphere to the team. He is a reliable and supportive teammate.",
76+
"beyblade": "Flame Sagittario C145S",
77+
"imageURL": "https://64.media.tumblr.com/736e4603d20ba2db61073f6cb8b2e901/tumblr_o5n9pgiCM31ro33voo2_540.png"
78+
},
79+
{
80+
"id": 12,
81+
"name": "Damian Hart",
82+
"description": "Damian Hart is a member of Team Excalibur, an elite Beyblade team. He wields the Phantom Orion B:D Beyblade. Damian is calm, strategic, and confident in his abilities. He seeks to prove the superiority of Team Excalibur and aims to defeat Gingka and his friends.",
83+
"beyblade": "Phantom Orion B:D",
84+
"imageURL": "https://i.pinimg.com/originals/5b/41/13/5b4113b835694f87ee06446786434eaa.jpg"
85+
},
86+
{
87+
"id": 13,
88+
"name": "Julian Konzern",
89+
"description": "Julian Konzern is a former member of Team Excalibur and a skilled Blader. He owns the Gravity Destroyer AD145WD Beyblade. Julian is arrogant and believes in the power of money. However, he undergoes character development and learns the importance of friendship and true strength.",
90+
"beyblade": "Gravity Destroyer AD145WD",
91+
"imageURL": "https://i.pinimg.com/736x/3b/1f/2d/3b1f2d8e365a7f0cba6dc1f4684e869d.jpg"
92+
},
93+
{
94+
"id": 14,
95+
"name": "Aguma",
96+
"description": "Aguma is a powerful Blader and a member of the African Beyblade team. He owns the Scythe Kronos T125EDS Beyblade. Aguma is serious and focused, always aiming for victory. He possesses great skill and is a formidable opponent in battles.",
97+
"beyblade": "Scythe Kronos T125EDS",
98+
"imageURL": "https://pbs.twimg.com/media/E_CWMFHWYAAq9Ol.png"
99+
},
100+
{
101+
"id": 15,
102+
"name": "Bao",
103+
"description": "Bao is a young Blader and a member of the Chinese Beyblade team. He wields the Archer Griffin C145S Beyblade. Bao is enthusiastic and eager to prove himself in battles. He possesses natural talent and seeks to improve his skills through experience.",
104+
"beyblade": "Archer Griffin C145S",
105+
"imageURL": "https://i.pinimg.com/originals/a1/27/32/a12732a1be258ead443bb494424e3625.jpg"
106+
},
107+
{
108+
"id": 16,
109+
"name": "Chao Xin",
110+
"description": "Chao Xin is a skilled Blader and a member of the Chinese Beyblade team. He uses the Phantom Fenrir T125JB Beyblade. Chao Xin is calm and analytical, always strategizing his moves in battles. He values teamwork and supports his teammates in their pursuit of victory.",
111+
"beyblade": "Phantom Fenrir T125JB",
112+
"imageURL": "https://64.media.tumblr.com/48d45b71a118f4be22f0032535f5df2c/254a7505a483a275-de/s400x600/582a87be3d84e4a949f22add50b3257ee3370768.jpg"
113+
}
114+
]

‎Projects/Beyblade-Card-Catalog/index.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
* {
2+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
3+
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4+
text-align: center;
5+
}
6+
body {
7+
padding: 10px;
8+
background: #67e9bf;
9+
}
10+
.title {
11+
margin-top: 50px;
12+
margin-bottom: 50px;
13+
font-size: 76px;
14+
color: #32579a;
15+
font-family: "Bigelow Rules";
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
}
20+
#characters {
21+
display: grid;
22+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
23+
column-gap: 10px;
24+
padding: 10px;
25+
}
26+
.character-card {
27+
display: flex;
28+
background: #74b89d;
29+
flex-direction: column;
30+
align-items: center;
31+
margin-bottom: 20px;
32+
padding: 20px;
33+
border-radius: 20px;
34+
}
35+
.character-card h2 {
36+
color: #4e3c34;
37+
}
38+
39+
.character-card img {
40+
width: 180px;
41+
height: 180px;
42+
object-fit: cover;
43+
border-radius: 50%;
44+
margin-bottom: 10px;
45+
}
46+
.bey {
47+
display: flex;
48+
justify-content: space-between;
49+
column-gap: 10px;
50+
}
51+
.input {
52+
display: flex;
53+
justify-content: center;
54+
align-items: center;
55+
margin: 15px;
56+
margin-bottom: 20px;
57+
padding: 5px;
58+
}
59+
input {
60+
border-radius: 10px;
61+
border: 0;
62+
height: 30px;
63+
width: 33%;
64+
outline: none;
65+
}

‎Projects/Beyblade-Card-Catalog/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Beyblade Characters</title>
5+
<link rel="stylesheet" href="index.css" />
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Bigelow+Rules&display=swap"
8+
rel="stylesheet"
9+
/>
10+
</head>
11+
<body>
12+
<div class="title">BEY BLADE</div>
13+
<div class="input">
14+
<input
15+
type="text"
16+
placeholder="search for characters ..."
17+
id="input-box"
18+
/>
19+
</div>
20+
<div id="characters"></div>
21+
22+
<script src="index.js"></script>
23+
</body>
24+
</html>

‎Projects/Beyblade-Card-Catalog/index.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
var startingCharacters = [];
2+
var filterCharacters = [];
3+
fetch("beyblade.json")
4+
.then((response) => response.json())
5+
.then((data) => {
6+
const charactersContainer = document.getElementById("characters");
7+
8+
data.forEach((character) => {
9+
const characterCard = document.createElement("div");
10+
characterCard.classList.add("character-card");
11+
12+
const characterImage = document.createElement("img");
13+
characterImage.src = character.imageURL;
14+
15+
const characterName = document.createElement("h2");
16+
characterName.textContent = character.name;
17+
18+
const characterDescription = document.createElement("p");
19+
characterDescription.textContent = character.description;
20+
21+
const characterBeyblade = document.createElement("p");
22+
const Beyblade = document.createElement("strong");
23+
Beyblade.textContent = "Beyblade";
24+
const charBeyblade = document.createElement("span");
25+
charBeyblade.textContent = character.beyblade;
26+
characterBeyblade.appendChild(Beyblade);
27+
characterBeyblade.appendChild(charBeyblade);
28+
characterBeyblade.classList.add("bey");
29+
30+
characterCard.appendChild(characterImage);
31+
characterCard.appendChild(characterName);
32+
characterCard.appendChild(characterDescription);
33+
characterCard.appendChild(characterBeyblade);
34+
35+
charactersContainer.appendChild(characterCard);
36+
});
37+
})
38+
.catch((error) => console.error("Error fetching JSON:", error));
39+
async function getCharacters() {
40+
const ch = await fetch("beyblade.json");
41+
startingCharacters = await ch.json();
42+
console.log(startingCharacters);
43+
}
44+
getCharacters();
45+
function newTemplate(filterCharacters) {
46+
const charactersContainer = document.getElementById("characters");
47+
48+
filterCharacters.forEach((character) => {
49+
const characterCard = document.createElement("div");
50+
characterCard.classList.add("character-card");
51+
52+
const characterImage = document.createElement("img");
53+
characterImage.src = character.imageURL;
54+
55+
const characterName = document.createElement("h2");
56+
characterName.textContent = character.name;
57+
58+
const characterDescription = document.createElement("p");
59+
characterDescription.textContent = character.description;
60+
61+
const characterBeyblade = document.createElement("p");
62+
const Beyblade = document.createElement("strong");
63+
Beyblade.textContent = "Beyblade";
64+
const charBeyblade = document.createElement("span");
65+
charBeyblade.textContent = character.beyblade;
66+
characterBeyblade.appendChild(Beyblade);
67+
characterBeyblade.appendChild(charBeyblade);
68+
characterBeyblade.classList.add("bey");
69+
70+
characterCard.appendChild(characterImage);
71+
characterCard.appendChild(characterName);
72+
characterCard.appendChild(characterDescription);
73+
characterCard.appendChild(characterBeyblade);
74+
75+
charactersContainer.appendChild(characterCard);
76+
});
77+
}
78+
79+
document
80+
.getElementById("input-box")
81+
.addEventListener("input", function getFilterCharacter() {
82+
const letters = document.getElementById("input-box").value.toLowerCase();
83+
filterCharacters = startingCharacters.filter((e) => {
84+
return e.name.toLowerCase().includes(letters);
85+
});
86+
const charactersContainer = document.getElementById("characters");
87+
charactersContainer.innerHTML = "";
88+
newTemplate(filterCharacters);
89+
});

‎img/projects/Beyblade_Card_Catalog.png‎

271 KB
Loading

‎projects.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,14 @@ const projects = [
7171
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/beautyzone",
7272
"project-link":"Projects/beautyzone/index.html"
7373
},
74+
{
75+
"title":"Beyblade Card Catalog",
76+
"tags":["HTML","CSS","JavaScript"],
77+
"img":"img/projects/Beyblade_Card_Catalog.png",
78+
"description":"Beyblade Card Catalog will showcase Beyblade cards. The project will leverage a JSON file containing data for various Beyblade cards. This data will be dynamically fetched and utilized to populate the card catalog. The frontend page will incorporate a filtering mechanism to allow users to narrow down their card search.",
79+
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Beyblade-Card-Catalog",
80+
"project-link":"Projects/Beyblade-Card-Catalog/index.html"
81+
},
7482
{
7583
"title":"Bill Tip Calculator",
7684
"tags":["HTML","CSS","JavaScript"],
@@ -1023,6 +1031,7 @@ const projects = [
10231031
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Playable_Piano",
10241032
"project-link":"Projects/Playable_Piano/index.html"
10251033
},
1034+
10261035
{
10271036
"title":"Sound Equalizer",
10281037
"tags":["HTML","CSS","JavaScript"],

0 commit comments

Comments
 (0)