+ // `;
+
+
+
+
+ }
+ else{
+ console.log(pokemon[2])
+ }
+
+
+
+
+ let pokemonDetailsEl = document.getElementById("pokemon-details");
+ pokemonDetailsEl.innerHTML = `
+
+
+ `;
+
+ const desiredLanguage = "en";
+ let overview = "Sorry, no description available.";
+ let genus = "Sorry, no description available.";
+
+ for (const entry of pokemon[1].flavor_text_entries) {
+ if (entry.language.name === desiredLanguage) {
+ // Replace "\f" with a space in the flavor text
+ overview = entry.flavor_text.replace("\f", " ");
+ break; // Stop the loop once we find the English flavor text
+ }
+ }
+ for (const entry of pokemon[1].genera) {
+ if (entry.language.name === desiredLanguage) {
+ genus = entry.genus;
+ break;
+ }
+ }
+
+ const height = pokemon[0].height / 10 + "m";
+ const weight = pokemon[0].weight / 10 + "kg";
+
+ const genderRate = pokemon[1].gender_rate;
+ let male = "";
+ let female = "";
+ if (genderRate === -1) {
+ male = "??";
+ female = "??";
+ } else if (genderRate === 0) {
+ male = "100%";
+ female = "0%";
+ } else if (genderRate === 8) {
+ male = "0%";
+ female = "100%";
+ } else {
+ female = (genderRate / 8) * 100 + "%";
+ male = 100 - (genderRate / 8) * 100 + "%";
+ }
+ const friendship = pokemon[1].base_happiness;
+ const catchRate = pokemon[1].capture_rate;
+
+ let tab1 = document.getElementById("tab_1");
+ tab1.innerHTML = `
+
+
+
${genus}
+
+ Height:${height}
+ Weight:${weight}
+
+
+
+ ${poke_types
+ .map(
+ (type) => `
+
+
+
+ `
+ )
+ .join("")}
+
+
+
+
+
Id: #${id}
+
Gender:
+
Abilities: ${abilities.join(", ")}
+
Catch Rate: ${catchRate} (${((catchRate / 255) * 100).toFixed(
+ 2
+ )}% chance)
+
Base Friendship: ${friendship} (${
+ friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher"
+ })
+
Base Exp: ${pokemon[0].base_experience}
+
Growth Rate: ${pokemon[1].growth_rate.name}
+
Egg Groups: ${eggGroups.join(", ")}
+
+
+
+
+`;
+};
+
+const tabs = document.querySelectorAll("[data-tab-value]");
+const tabsContainer = document.querySelector(".tabs");
+const tabInfos = document.querySelectorAll("[data-tab-info]");
+
+tabs.forEach((tab) => {
+ tab.addEventListener("click", () => {
+ const target = document.querySelector(tab.dataset.tabValue);
+
+ tabInfos.forEach((tabInfo) => {
+ tabInfo.classList.remove("active");
+ });
+ target.classList.add("active");
+ target.scrollIntoView({ behavior: "smooth" });
+ });
+});
+const nextPokemon = (e) => {
+ window.location.href = `details.html?id=${id + 1}`;
+ e.preventDefault();
+};
+const backButton = (e) => {
+ window.history.back();
+ e.preventDefault();
+};
+
+fetchPokemonDetails();
+
+//preloader
+window.addEventListener("load", function () {
+ document.querySelector("body").classList.add("loaded");
+});
+
diff --git a/pokedex/style.css b/pokedex/style.css
new file mode 100644
index 0000000..9ec4623
--- /dev/null
+++ b/pokedex/style.css
@@ -0,0 +1,644 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:300,400&display=swap");
+
+@font-face {
+ font-family: pocketMonk;
+ src: url(./Fonts/PocketMonk.ttf);
+}
+@font-face {
+ font-family: slumbersWeight;
+ src: url(./Fonts/SlumbersWeight.ttf);
+}
+@font-face {
+ font-family: moltors;
+ src: url(./Fonts/Moltors.ttf);
+}
+
+* {
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --grass: #5fbd58;
+ --bug: #92bc2c;
+ --dark: #595761;
+ --dragon: #0c69c8;
+ --electric: #f2d94e;
+ --fairy: #ee90e6;
+ --fighting: #d3425f;
+ --fire: #dc872f;
+ --flying: #a1bbec;
+ --ghost: #5f6dbc;
+ --ground: #da7c4d;
+ --ice: #75d0c1;
+ --normal: #a0a29f;
+ --poison: #b763cf;
+ --psychic: #ff2ca8;
+ --rock: #a38c21;
+ --steel: #5695a3;
+ --water: #539ddf;
+}
+
+body {
+ background: #efefbb;
+ /* background: linear-gradient(to right, #ffffff, #827eff); */
+ background-color: whitesmoke;
+}
+
+h1 {
+ letter-spacing: 3px;
+ font-weight: 800;
+ font-size: 2.5em;
+
+ padding: 20px;
+ color: black;
+}
+
+.poke-container {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto;
+ max-width: 1200px;
+}
+
+.cardContainer {
+ margin: 10px;
+}
+
+.card {
+ background-color: #eee;
+ border-radius: 10px;
+ box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
+ padding: 20px;
+ align-items: center;
+ text-align: center;
+ transform-style: preserve-3d;
+ transition: 0.25s ease-in;
+ max-width: 210px;
+ min-width: 210px;
+ min-height: 330px;
+ max-height: 330px;
+ color: #202020;
+ perspective: 150rem;
+ position: relative;
+}
+
+@media screen and (max-width: 600px) {
+ .card {
+ min-width: 45vw !important;
+ max-width: 45vw !important;
+ }
+}
+
+.cardContainer:hover .card {
+ transform: rotateY(180deg);
+ cursor: pointer;
+ transition: 0.25s ease-in-out;
+ transition-delay: .2s;
+}
+
+/* Handle card flip behavior on touch-screen */
+@media(hover: none) {
+ .cardContainer:hover .card {
+ transform: none;
+ transition: none;
+ }
+
+ .back {
+ visibility: hidden;
+ }
+}
+
+.types {
+ display: flex;
+}
+
+.front,
+.back {
+ backface-visibility: hidden;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform-style: preserve-3d;
+}
+
+.back {
+ transform: rotateY(-180deg);
+}
+
+.back .background {
+ width: 150px;
+ position: absolute;
+ left: 0;
+ z-index: -10;
+ opacity: 0.4;
+ animation: rotate 5s linear infinite;
+}
+.side {
+ width: 80%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between !important;
+ align-items: center;
+}
+.image-container {
+ position: relative;
+}
+.image {
+ width: 150px;
+ top: 10px;
+ position: relative;
+ aspect-ratio: 1/1;
+ z-index: 10;
+ image-rendering: pixelated;
+}
+.background {
+ width: 150px;
+ position: absolute;
+ z-index: -10;
+ opacity: 0.4;
+ animation: rotate 5s linear infinite;
+}
+@keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+.number {
+ background-color: rgba(0, 0, 0, 0.1);
+ padding: 10px 10px;
+ margin-top: 10px;
+ border-radius: 10px;
+ font-size: 1em;
+ font-family: moltors, sans-serif;
+}
+.name {
+ padding: 10px;
+ letter-spacing: 5px;
+ font-family: "pocketMonk", sans-serif;
+ font-size: 1.5em;
+ white-space: nowrap;
+ text-overflow: clip;
+}
+.stats {
+ display: flex;
+ justify-content: space-evenly;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ padding: 0;
+ font-family: "slumbersWeight", sans-serif;
+ font-size: 1.5em;
+ font-style: italic;
+ letter-spacing: 2px;
+}
+
+.select-wrapper .regions {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ scroll-behavior: smooth;
+
+}
+
+.nav.github,
+a:hover {
+ color: #310d15;
+ transform: scale(1.2);
+ transition: color 0.2s, transform 0.2s;
+}
+
+.header {
+ position: sticky;
+ top: 0;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ height: 5em;
+ width: 100%;
+ margin-bottom: 20px;
+ z-index: 100;
+ background-color: #e0e0e0;
+}
+
+.header .logo img {
+ border-radius: 50%;
+ width: 50px;
+ cursor: pointer;
+}
+
+.logo {
+ display: inline-block;
+ transition: transform 0.6s;
+}
+
+.logo:hover {
+ transform: rotate(360deg);
+}
+
+.nav .github,
+a {
+ color: #202020;
+ font-size: 1.5em;
+ width: 10%;
+}
+
+#scrollToTopBtn {
+ width: 40px;
+ height: 40px;
+ display: none;
+ position: fixed;
+ bottom: 30px;
+ right: 20px;
+ z-index: 99999;
+ border: none;
+ outline: none;
+ background-color: #202020;
+ color: white;
+ cursor: pointer;
+ border-radius: 50%;
+}
+#scrollToDownBtn {
+ width: 40px;
+ height: 40px;
+ display: none;
+ position: fixed;
+ bottom: 30px;
+ left: 20px;
+ z-index: 99999;
+ border: none;
+ outline: none;
+ background-color: #202020;
+ color: white;
+ cursor: pointer;
+ border-radius: 50%;
+}
+
+#searchbar{
+ border-radius: 15px;
+ color: black;
+ box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+ border: 2px solid rgb(32, 32, 32);
+}
+::placeholder{
+ font-weight: 400;
+ color: #121212;
+}
+#searchbar:hover{
+ color: rgb(28, 28, 18);
+
+ background-color:#f1eeee;
+
+
+}
+
+#searchbar:focus::placeholder {
+ opacity: 0.1;
+}
+
+.box input {
+ width: 100%;
+ height: 50px;
+ border-radius: 10px;
+ border: none;
+ outline: none;
+ font-size: 1.7em;
+ background-color: rgba(0, 0, 0, 0.1);
+ font-weight: 300;
+ letter-spacing: 5px;
+ font-family: "slumbersWeight", sans-serif;
+ text-align: center;
+}
+
+.box input:focus {
+ border: 2px solid #202020;
+}
+
+.poke__type__bg > img {
+ width: 20px;
+ height: 20px;
+ transition: all 0.3s ease; /* Add a smooth transition effect */
+}
+
+.poke__type__bg:hover > img {
+ transform: scale(1.2); /* Enlarge the type on hover */
+}
+
+.poke__type__bg {
+ width: 40px;
+ height: 40px;
+ border-radius: 100%;
+ margin: 0px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.grass {
+ background: var(--grass);
+ box-shadow: 0 0 20px var(--grass);
+}
+
+.bug {
+ background: var(--bug);
+ box-shadow: 0 0 20px var(--bug);
+}
+
+.dark {
+ background: var(--dark);
+ box-shadow: 0 0 20px var(--dark);
+}
+
+.dragon {
+ background: var(--dragon);
+ box-shadow: 0 0 20px var(--dragon);
+}
+
+.electric {
+ background: var(--electric);
+ box-shadow: 0 0 20px #796d26;
+}
+
+.fairy {
+ background: var(--fairy);
+ box-shadow: 0 0 20px var(--fairy);
+}
+
+.fighting {
+ background: var(--fighting);
+ box-shadow: 0 0 20px var(--fighting);
+}
+
+.flying {
+ background: var(--flying);
+ box-shadow: 0 0 20px var(--flying);
+}
+
+.ghost {
+ background: var(--ghost);
+ box-shadow: 0 0 20px var(--ghost);
+}
+
+.ground {
+ background: var(--ground);
+ box-shadow: 0 0 20px var(--ground);
+}
+
+.ice {
+ background: var(--ice);
+ box-shadow: 0 0 20px var(--ice);
+}
+
+.normal {
+ background: var(--normal);
+ box-shadow: 0 0 20px var(--normal);
+}
+
+.poison {
+ background: var(--poison);
+ box-shadow: 0 0 20px var(--poison);
+}
+
+.psychic {
+ background: var(--psychic);
+ box-shadow: 0 0 20px var(--psychic);
+}
+
+.rock {
+ background: var(--rock);
+ box-shadow: 0 0 20px var(--rock);
+}
+
+.steel {
+ background: var(--steel);
+ box-shadow: 0 0 20px var(--steel);
+}
+
+.water {
+ background: var(--water);
+ box-shadow: 0 0 20px var(--water);
+}
+
+.fire {
+ background: var(--fire);
+ box-shadow: 0 0 20px var(--fire);
+}
+
+.select-wrapper {
+ overflow: hidden;
+ max-width: 95%;
+ width: max-content;
+ margin: auto;
+ margin-bottom: 20px;
+ font-family: "slumbersWeight", sans-serif;
+ font-size: 1.5em;
+ font-style: italic;
+ letter-spacing: 2px;
+ text-align: center;
+ position: relative;
+}
+
+#regionSelect{
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 10px;
+ overflow-x: scroll;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ scroll-behavior: smooth;
+}
+
+#regionSelect::-webkit-scrollbar {
+ display: none;
+}
+#regionSelect::-moz-scrollbar {
+ display: none;
+}
+
+#regionSelect span {
+ background-color: rgba(46, 46, 46, 0.1);
+
+ padding: 5px 15px;
+ border-radius: 10px;
+
+ border: 2px solid #202020;
+ outline: none;
+ cursor: pointer;
+ box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+}
+
+#regionSelect span:hover{
+ background-color: #bbbbbb;
+ outline: none;
+ cursor: pointer;
+ transition: border-color 0.25s ease-in-out;
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+ background-color: rgba(46, 46, 46, 0.1);
+ border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+ background-color: #202020;
+ border-radius: 10px;
+}
+
+.active {
+ background-color: black !important;
+ color: white !important;
+}
+
+.lds-ring {
+ margin-top: 30vh;
+ display: none;
+ position: relative;
+ width: 80px;
+ height: 80px;
+ margin-inline: auto;
+}
+.lds-ring div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
+ border: 8px solid #fff;
+ border-radius: 50%;
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: cornflowerblue transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+ animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+ animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+ animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.ring-active {
+ display: block;
+}
+
+
+.features{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+}
+
+#dark:hover {
+ cursor: pointer;
+}
+
+.darkmode-container{
+ margin-right: 2.5em;
+}
+
+.darkmode-content{
+ position: relative;
+ left: 15%;
+ z-index: 999;
+ font-size: 1.5em;
+ font-family: pocketMonk;
+ display: flex;
+}
+
+
+.darkmode-text{
+ margin-right: 0.3em;
+}
+
+.github {
+ min-height: 2rem;
+ min-width: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.dark-mode {
+ background-color: #333;
+ color: #fff;
+}
+.dark-mode .header {
+ background-color: #222;
+ color: #fff;
+}
+.dark-mode .darkmode-button-icon {
+ color: #fff;
+}
+
+.dark-mode .github-icon {
+ color: #fff;
+}
+
+.dark-mode .box input {
+ background-color: #787878;
+ color: #ab0101;
+}
+
+.dark-mode #regionSelect span {
+ border: 1px solid #ccc;
+}
+relative
+.dark-mode #regionSelect span:hover{
+ color: black;
+ background-color: #ead51d;
+ outline: none;
+ cursor: pointer;
+ transition: border-color 0.25s ease-in-out;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 924px) {
+ .header {
+ height: 6em;
+ padding-top: 35px;
+ }
+ .logo {
+ position: absolute;
+ left: 10px;
+ }
+
+ .features {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 10px;
+ top: 0;
+ width: 100%;
+ height: 25px;
+ }
+
+ .darkmode-content {
+ left: 0;
+ }
+}
\ No newline at end of file
diff --git a/pokedex/style2.css b/pokedex/style2.css
new file mode 100644
index 0000000..c70fdd9
--- /dev/null
+++ b/pokedex/style2.css
@@ -0,0 +1,687 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+@font-face {
+ font-family: pocketMonk;
+ src: url(./Fonts/PocketMonk.ttf);
+}
+
+@font-face {
+ font-family: slumbersWeight;
+ src: url(./Fonts/SlumbersWeight.ttf);
+}
+
+@font-face {
+ font-family: moltors;
+ src: url(./Fonts/Moltors.ttf);
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --grass: #5FBD58;
+ --bug: #92BC2C;
+ --dark: #595761;
+ --dragon: #0C69C8;
+ --electric: #F2D94E;
+ --fairy: #EE90E6;
+ --fighting: #D3425F;
+ --fire: #dc872f;
+ --flying: #A1BBEC;
+ --ghost: #5F6DBC;
+ --ground: #DA7C4D;
+ --ice: #75D0C1;
+ --normal: #A0A29F;
+ --poison: #B763CF;
+ --psychic: #ff2ca8;
+ --rock: #a38c21;
+ --steel: #5695A3;
+ --water: #539DDF;
+}
+.grass {
+ background: var(--grass);
+ box-shadow: 0 0 20px var(--grass);
+}
+
+.bug {
+ background: var(--bug);
+ box-shadow: 0 0 20px var(--bug);
+}
+
+.dark {
+ background: var(--dark);
+ box-shadow: 0 0 20px var(--dark);
+}
+
+.dragon {
+ background: var(--dragon);
+ box-shadow: 0 0 20px var(--dragon);
+}
+
+.electric {
+ background: var(--electric);
+ box-shadow: 0 0 20px #796d26;
+}
+
+.fairy {
+ background: var(--fairy);
+ box-shadow: 0 0 20px var(--fairy);
+}
+
+.fighting {
+ background: var(--fighting);
+ box-shadow: 0 0 20px var(--fighting);
+}
+
+.flying {
+ background: var(--flying);
+ box-shadow: 0 0 20px var(--flying);
+}
+
+.ghost {
+ background: var(--ghost);
+ box-shadow: 0 0 20px var(--ghost);
+}
+
+.ground {
+ background: var(--ground);
+ box-shadow: 0 0 20px var(--ground);
+}
+
+.ice {
+ background: var(--ice);
+ box-shadow: 0 0 20px var(--ice);
+}
+
+.normal {
+ background: var(--normal);
+ box-shadow: 0 0 20px var(--normal);
+}
+
+.poison {
+ background: var(--poison);
+ box-shadow: 0 0 20px var(--poison);
+}
+
+.psychic {
+ background: var(--psychic);
+ box-shadow: 0 0 20px var(--psychic);
+}
+
+.rock {
+ background: var(--rock);
+ box-shadow: 0 0 20px var(--rock);
+}
+
+.steel {
+ background: var(--steel);
+ box-shadow: 0 0 20px var(--steel);
+}
+
+.water {
+ background: var(--water);
+ box-shadow: 0 0 20px var(--water);
+}
+
+.fire {
+ background: var(--fire);
+ box-shadow: 0 0 20px var(--fire);
+}
+/* ::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+ background-color: rgba(46, 46, 46, 0.1);
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #202020;
+ border-radius: 10px;
+} */
+
+.image {
+ position: relative;
+}
+.image .imgFront{
+ width: 30vh;
+ height: 30vh;
+ top: 7vh;
+ position: relative;
+ aspect-ratio: 1/1;
+ z-index: 10;
+}
+.imgBack{
+ position: absolute;
+ width: 30vh;
+ z-index: -10;
+ top: 3vh;
+ opacity: 0.5;
+ animation: rotate 5s linear infinite;
+ right: 0px;
+}
+.names{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ top: 2vh;
+}
+.name{
+ font-size: 3em;
+ font-weight: 800;
+ letter-spacing: 5px;
+ font-family: 'pocketMonk', sans-serif;
+ top: 5vh;
+ text-align: center;
+ z-index: 99;
+}
+.japaneseName{
+ font-size: 2em;
+ font-weight: 800;
+ letter-spacing: 5px;
+ font-family: 'pocketMonk', sans-serif;
+ top: 5vh;
+ text-align: center;
+ z-index: 99;
+ color: rgba(255, 255, 255, 0.253);
+}
+
+
+@keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* .image img:hover{
+ filter: contrast(1);
+ transition: 0.5s;
+} */
+
+.top{
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* background-color: white;
+ border-bottom-left-radius: 50px;
+ border-bottom-right-radius: 50px; */
+
+
+}
+
+
+.top .name{
+ font-size: 2.5em;
+ font-weight: 800;
+ letter-spacing: 5px;
+ font-family: 'pocketMonk', sans-serif;
+ margin-top: 10px;
+ margin-bottom: 5px;
+
+}
+.id{
+ background-color: rgba(0, 0, 0, 0.151);
+ border-radius: 10px;
+ padding: 5px;
+}
+
+[data-tab-info] {
+ display: none;
+}
+
+.active[data-tab-info] {
+ display: block;
+}
+
+.tab-content {
+ font-size: 1em;
+ font-weight: bold;
+ color: rgb(82, 75, 75);
+}
+
+.tabs {
+ font-size: 1em;
+ justify-content:space-evenly;
+ color: black;
+ font-family: 'Montserrat', sans-serif;
+ letter-spacing: 5px;
+ display: flex;
+ border-bottom: 2px solid rgba(207, 207, 207, 0.26);
+ align-items: center;
+ margin-top: 20px;
+ padding-top: 40px;
+ position: relative;
+}
+
+
+.tabs span {
+ padding: 10px;
+ transform: scale(0.9);
+}
+
+.tabs span:hover {
+ transform: scale(1.1);
+ transition: 0.5s;
+ cursor: pointer;
+ font-weight: bolder;
+}
+
+.listWrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px;
+ font-size: 1.25em;
+ font-style: oblique;
+
+}
+
+.listItem{
+ font-size: 1.25em;
+ font-family: 'Montserrat', sans-serif;
+ margin: auto;
+ padding: 1.5rem;
+}
+
+.stats{
+ display: flex;
+ flex-direction: column;
+ font-size: 1em;
+ font-weight: 900;
+ font-family: 'Montserrat', sans-serif;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+.stats hr{
+ width: 100%;
+ margin: 5px, 10px;
+ padding: 5px, 10px;
+ border: none;
+ border-bottom: 2px solid rgba(255, 255, 255, 0.6);
+}
+.stats .stat{
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+}
+.stat div{
+ text-align: left;
+ margin-top: 5px;
+ width: 35%;
+ padding: 7px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.stats meter{
+ width: 60%;
+ height: 1.5em;
+ border-radius: 10px;
+ border: none;
+ position: relative;
+ top: 8px;
+ padding-right: 5px;
+}
+
+meter::-webkit-meter-optimum-value{
+ background-color: #23dd48be;
+}
+meter::-webkit-meter-suboptimum-value{
+ background-color: #fdc945e6;
+}
+meter::-webkit-meter-even-less-good-value{
+ background-color: #ff4545e2;
+}
+.stats meter::-webkit-meter-bar{
+ background-color: rgba(183, 183, 183, 0.3);
+ border: none;
+}
+.statTypes{
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 1%;
+}
+.statTypes .statTypeText{
+
+
+ width: 35%;
+ margin-bottom: 1%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+}
+
+.statTypes img{
+ height: 35px;
+ border-radius: 15px;
+ margin: 10px;
+}
+.statTypes .statIconHolder{
+ font-size: 14px;
+}
+
+
+.poke__type__bg img {
+ width: 20px;
+ height: 20px;
+ margin: 10px;
+ overflow: visible;
+ border-radius: 100%;
+
+}
+
+.poke__type__bg {
+ width: 40px;
+ height: 40px;
+ margin: 10px;
+ overflow: visible;
+ border-radius: 100%;
+}
+
+
+
+.details{
+ background-color: rgb(245, 245, 245);
+ box-shadow: 10px 10px 50px 10px rgba(0, 0, 0, 0.6);
+ border-radius: 40px 40px 0px 0px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ margin-top: 20px;
+}
+
+.overview p{
+ font-size: 1em;
+ font-weight: 600;
+ padding: 25px 20px;
+ text-align: justify;
+ font-family: 'Montserrat', sans-serif;
+}
+.genus{
+ font-size: 1em;
+ font-weight: lighter;
+ font-family: 'moltors', sans-serif;
+}
+.types{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.heightWeight{
+ display: flex;
+ font-family: 'Montserrat', sans-serif;
+ background-color: rgba(255, 255, 255, 0.329);
+ box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);
+ border-radius: 20px;
+ padding: 10px 50px;
+ font-size: 1.25em;
+ width: max-content;
+ margin: 20px auto;
+ text-align: center;
+}
+.about{
+ font-size: 1em;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 20px;
+ text-transform: capitalize;
+ padding: 25px 20px;
+ text-align: justify;
+ letter-spacing: 2px;
+ font-family: 'Montserrat', sans-serif;
+}
+
+.previousBtn{
+ width: 40px;
+ height: 40px;
+ position: fixed;
+ top: 10px;
+ left: 10px;
+ z-index: 99999;
+ border: none;
+ outline: none;
+ background-color: #202020;
+ color: white;
+ cursor: pointer;
+ border-radius: 50%;
+}
+.nextBtn {
+ width: 40px;
+ height: 40px;
+ top: 10px;
+ right: 10px;
+ position: fixed;
+ z-index: 99999;
+ border: none;
+ outline: none;
+ background-color: #202020;
+ color: white;
+ cursor: pointer;
+ border-radius: 50%;
+}
+.btn{
+ display: flex;
+ justify-content: space-between;
+}
+
+
+.evolution {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ align-items: center !important;
+ overflow: scroll;
+ gap: 20px;
+ margin-top: 20px;
+ padding: 30px;
+ font-size: 0.5em;
+ font-weight: 600;
+ text-align: center;
+ letter-spacing: 2px;
+ text-transform: capitalize;
+ border-bottom: 2px solid rgba(207, 207, 207, 0.26);
+}
+::-webkit-scrollbar{
+ display: none;
+}
+
+.evolution__pokemon {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+}
+
+.evolution__pokemon img {
+ width: 200px;
+ height: 200px;
+ cursor: pointer;
+ filter: contrast(1.5) brightness(0.8) saturate(1.2) drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.37));
+}
+.evolution__pokemon h1{
+ text-align: center;
+ margin-bottom: 30px;
+ font-family: 'moltors', sans-serif;
+
+}
+
+.varieties__pokemon img{
+ width: 300px;
+ height: 300px;
+ filter: contrast(1.5) brightness(0.8) saturate(1.2) drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.37));
+}
+.varieties__pokemon h1{
+ text-align: center;
+ margin-bottom: 30px;
+ font-family: 'moltors', sans-serif;
+}
+.varieties{
+ display: grid;
+ grid-template-columns: repeat(1, 2fr);
+ align-items: center !important;
+ overflow: scroll;
+ gap: 20px;
+ margin-top: 20px;
+ padding: 30px;
+ font-size: 0.5em;
+ font-weight: 600;
+ text-align: center;
+ letter-spacing: 2px;
+ text-transform: capitalize;
+
+}
+
+/* preloader css*/
+/* General Styling */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ padding: 1rem;
+ }
+
+ @media (max-width: 567px) {
+ h1 {
+ font-size: 7vw;
+ text-align: center;
+ }
+ }
+
+
+ /* Loader Styles start here */
+ .loader-wrapper {
+ --line-width: 5px;
+ --curtain-color: #f1faee;
+ --outer-line-color: #a8dadc;
+ --middle-line-color: #457b9d;
+ --inner-line-color: #1d3557;
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ z-index:1000;
+ }
+
+ .loader {
+ display:block;
+ position: relative;
+ top:50%;
+ left:50%;
+ /* transform: translate(-50%, -50%); */
+ width:150px;
+ height:150px;
+ margin:-75px 0 0 -75px;
+ border:var(--line-width) solid transparent;
+ border-top-color: var(--outer-line-color);
+ border-radius:100%;
+ -webkit-animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
+ z-index:1001;
+ }
+
+ .loader:before {
+ content:"";
+ position: absolute;
+ top:4px;
+ left:4px;
+ right:4px;
+ bottom:4px;
+ border:var(--line-width) solid transparent;
+ border-top-color: var(--inner-line-color);
+ border-radius:100%;
+ -webkit-animation: spin 3s linear infinite;
+ animation: spin 3s linear infinite;
+ }
+
+ .loader:after {
+ content:"";
+ position: absolute;
+ top:14px;
+ left:14px;
+ right:14px;
+ bottom:14px;
+ border:var(--line-width) solid transparent;
+ border-top-color: var(--middle-line-color);
+ border-radius:100%;
+ -webkit-animation: spin 1.5s linear infinite;
+ animation: spin 1.5s linear infinite;
+ }
+
+ @-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+
+ .loader-wrapper .loader-section {
+ position:fixed;
+ top:0;
+ background:var(--curtain-color);
+ width:51%;
+ height:100%;
+ z-index:1000;
+ }
+
+ .loader-wrapper .loader-section.section-left {
+ left:0
+ }
+ .loader-wrapper .loader-section.section-right {
+ right:0;
+ }
+
+ /* Loaded Styles */
+ .loaded .loader-wrapper .loader-section.section-left {
+ transform: translateX(-100%);
+ transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
+ }
+ .loaded .loader-wrapper .loader-section.section-right {
+ transform: translateX(100%);
+ transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
+ }
+ .loaded .loader {
+ opacity: 0;
+ transition: all 0.3s ease-out;
+ }
+ .loaded .loader-wrapper {
+ visibility: hidden;
+ transform:translateY(-100%);
+ transition: all .3s 1s ease-out;
+ }
+ .statIconHolder{
+
+
+
+ }
\ No newline at end of file
diff --git a/pokedex_database.sql b/pokedex_database.sql
new file mode 100644
index 0000000..b1fec94
--- /dev/null
+++ b/pokedex_database.sql
@@ -0,0 +1,99 @@
+CREATE DATABASE IF NOT EXISTS pokedex;
+USE pokedex;
+
+-- Table to store Pokémon details
+CREATE TABLE IF NOT EXISTS pokemon (
+ id INT PRIMARY KEY,
+ name VARCHAR(100) NOT NULL,
+ height INT,
+ weight INT,
+ base_experience INT,
+ species_url VARCHAR(255),
+ image_url VARCHAR(255)
+);
+
+-- Table to store Pokémon types
+CREATE TABLE IF NOT EXISTS types (
+ id INT PRIMARY KEY AUTO_INCREMENT,
+ name VARCHAR(50) NOT NULL UNIQUE
+);
+
+-- Table to store Pokémon abilities
+CREATE TABLE IF NOT EXISTS abilities (
+ id INT PRIMARY KEY AUTO_INCREMENT,
+ name VARCHAR(100) NOT NULL
+);
+
+-- Table to store Pokémon stats
+CREATE TABLE IF NOT EXISTS stats (
+ id INT PRIMARY KEY AUTO_INCREMENT,
+ pokemon_id INT,
+ hp INT,
+ attack INT,
+ defense INT,
+ sp_attack INT,
+ sp_defense INT,
+ speed INT,
+ FOREIGN KEY (pokemon_id) REFERENCES pokemon(id)
+);
+
+-- Table to store Pokémon type relationships
+CREATE TABLE IF NOT EXISTS pokemon_types (
+ pokemon_id INT,
+ type_id INT,
+ PRIMARY KEY (pokemon_id, type_id),
+ FOREIGN KEY (pokemon_id) REFERENCES pokemon(id),
+ FOREIGN KEY (type_id) REFERENCES types(id)
+);
+
+-- Table to store Pokémon ability relationships
+CREATE TABLE IF NOT EXISTS pokemon_abilities (
+ pokemon_id INT,
+ ability_id INT,
+ PRIMARY KEY (pokemon_id, ability_id),
+ FOREIGN KEY (pokemon_id) REFERENCES pokemon(id),
+ FOREIGN KEY (ability_id) REFERENCES abilities(id)
+);
+
+-- Table to store Pokémon evolution chains
+CREATE TABLE IF NOT EXISTS evolution_chains (
+ id INT PRIMARY KEY AUTO_INCREMENT,
+ chain_url VARCHAR(255) NOT NULL
+);
+
+-- Table to store Pokémon varieties
+CREATE TABLE IF NOT EXISTS varieties (
+ id INT PRIMARY KEY AUTO_INCREMENT,
+ pokemon_id INT,
+ variety_name VARCHAR(100),
+ image_url VARCHAR(255),
+ FOREIGN KEY (pokemon_id) REFERENCES pokemon(id)
+);
+
+-- Table to store Pokémon species details
+CREATE TABLE IF NOT EXISTS species (
+ id INT PRIMARY KEY AUTO_INCREMENT,
+ pokemon_id INT,
+ genus VARCHAR(100),
+ flavor_text TEXT,
+ growth_rate VARCHAR(100),
+ base_happiness INT,
+ capture_rate INT,
+ gender_rate INT,
+ FOREIGN KEY (pokemon_id) REFERENCES pokemon(id)
+);
+
+-- Table to store Pokémon egg groups
+CREATE TABLE IF NOT EXISTS egg_groups (
+ id INT PRIMARY KEY AUTO_INCREMENT,
+ name VARCHAR(100) NOT NULL
+);
+
+-- Table to store Pokémon egg group relationships
+CREATE TABLE IF NOT EXISTS pokemon_egg_groups (
+ pokemon_id INT,
+ egg_group_id INT,
+ PRIMARY KEY (pokemon_id, egg_group_id),
+ FOREIGN KEY (pokemon_id) REFERENCES pokemon(id),
+ FOREIGN KEY (egg_group_id) REFERENCES egg_groups(id)
+);
diff --git a/school-pokedex/admin-script.js b/school-pokedex/admin-script.js
deleted file mode 100644
index 11a9710..0000000
--- a/school-pokedex/admin-script.js
+++ /dev/null
@@ -1,114 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
- const form = document.getElementById('pokemon-form');
- const pokemonList = document.getElementById('admin-pokemon-list');
-
- const fetchPokemons = () => {
- fetch('/school-pokedex/school-pokedex/api.php')
- .then(response => {
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
- return response.text().then(text => {
- try {
- return JSON.parse(text);
- } catch (error) {
- console.error('JSON parse error:', error, text);
- throw error;
- }
- });
- })
- .then(pokemons => {
- pokemonList.innerHTML = '';
- pokemons.forEach(pokemon => {
- const card = document.createElement('div');
- card.className = 'pokemon-card';
- card.innerHTML = `
-
-
${pokemon.name}
-
Type: ${pokemon.type}
-
Stats: ${JSON.stringify(pokemon.stats)}
-
Info: ${pokemon.info}
-
Edit
-
Delete
- `;
- pokemonList.appendChild(card);
- });
- })
- .catch(error => console.error('Fetch error:', error));
- };
-
- form.addEventListener('submit', (e) => {
- e.preventDefault();
- const id = document.getElementById('pokemon-id').value;
- const name = document.getElementById('name').value;
- const type = document.getElementById('type').value;
- const image = document.getElementById('image').value;
- const stats = JSON.parse(document.getElementById('stats').value);
- const info = document.getElementById('info').value;
-
- const method = id ? 'PUT' : 'POST';
- const url = id ? `/school-pokedex/school-pokedex/api.php/${id}` : '/school-pokedex/school-pokedex/api.php';
-
- fetch(url, {
- method: method,
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({ name, type, image, stats, info })
- }).then(response => {
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
- return response.text().then(text => {
- try {
- return JSON.parse(text);
- } catch (error) {
- console.error('JSON parse error:', error, text);
- throw error;
- }
- });
- }).then(() => {
- form.reset();
- fetchPokemons();
- }).catch(error => console.error('Fetch error:', error));
- });
-
- window.editPokemon = (id) => {
- fetch(`/school-pokedex/school-pokedex/api.php/${id}`)
- .then(response => {
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
- return response.text().then(text => {
- try {
- return JSON.parse(text);
- } catch (error) {
- console.error('JSON parse error:', error, text);
- throw error;
- }
- });
- })
- .then(pokemon => {
- document.getElementById('pokemon-id').value = pokemon.id;
- document.getElementById('name').value = pokemon.name;
- document.getElementById('type').value = pokemon.type;
- document.getElementById('image').value = pokemon.image;
- document.getElementById('stats').value = JSON.stringify(pokemon.stats);
- document.getElementById('info').value = pokemon.info;
- })
- .catch(error => console.error('Fetch error:', error));
- };
-
- window.deletePokemon = (id) => {
- fetch(`/school-pokedex/school-pokedex/api.php/${id}`, { method: 'DELETE' })
- .then(response => {
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
- fetchPokemons();
- })
- .catch(error => console.error('Fetch error:', error));
- };
-
- fetchPokemons();
-});
diff --git a/school-pokedex/admin.html b/school-pokedex/admin.html
deleted file mode 100644
index ccff0a5..0000000
--- a/school-pokedex/admin.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
-
-
Admin - Pokédex
-
-
-
-
-
Admin - Pokédex
-
-
-
-
-
diff --git a/school-pokedex/api.php b/school-pokedex/api.php
deleted file mode 100644
index 4f5548a..0000000
--- a/school-pokedex/api.php
+++ /dev/null
@@ -1,155 +0,0 @@
-connect_error) {
- error_log("Connection failed: " . $conn->connect_error);
- die(json_encode(['error' => "Connection failed: " . $conn->connect_error]));
-}
-
-header('Content-Type: application/json');
-
-// Ensure the request is using JSON
-if ($_SERVER['CONTENT_TYPE'] !== 'application/json') {
- echo json_encode(['error' => 'Content-Type must be application/json']);
- exit;
-}
-
-$method = $_SERVER['REQUEST_METHOD'];
-$request = explode('/', trim($_SERVER['PATH_INFO'], '/'));
-
-switch ($method) {
- case 'GET':
- if (isset($request[0]) && is_numeric($request[0])) {
- $id = $request[0];
- $stmt = $conn->prepare("SELECT * FROM pokemons WHERE id = ?");
- $stmt->bind_param("i", $id);
- $stmt->execute();
- $result = $stmt->get_result();
- if ($result->num_rows > 0) {
- echo json_encode($result->fetch_assoc());
- } else {
- echo json_encode(['error' => 'No record found']);
- }
- $stmt->close();
- } else {
- $sql = "SELECT * FROM pokemons";
- $result = $conn->query($sql);
- $pokemons = [];
- while ($row = $result->fetch_assoc()) {
- $pokemons[] = $row;
- }
- echo json_encode($pokemons);
- }
- break;
-
- case 'POST':
- $data = json_decode(file_get_contents('php://input'), true);
- if (!isset($data['name'], $data['type'], $data['image'], $data['stats'], $data['info'])) {
- echo json_encode(['error' => 'Missing required fields']);
- exit;
- }
-
- $name = $data['name'];
- $type = $data['type'];
- $image = $data['image'];
- $stats = json_encode($data['stats']);
- $info = $data['info'];
-
- // Prepared statement to prevent SQL injection
- $stmt = $conn->prepare("INSERT INTO pokemons (name, type, image, stats, info) VALUES (?, ?, ?, ?, ?)");
- $stmt->bind_param("sssss", $name, $type, $image, $stats, $info);
-
- if ($stmt->execute()) {
- echo json_encode([
- 'id' => $conn->insert_id,
- 'name' => $name,
- 'type' => $type,
- 'image' => $image,
- 'stats' => $stats,
- 'info' => $info
- ]);
- } else {
- error_log("Insert error: " . $conn->error);
- echo json_encode(['error' => 'Failed to insert record']);
- }
-
- $stmt->close();
- break;
-
- case 'PUT':
- if (!isset($request[0]) || !is_numeric($request[0])) {
- echo json_encode(['error' => 'ID is required']);
- exit;
- }
-
- $id = $request[0];
- $data = json_decode(file_get_contents('php://input'), true);
-
- if (!isset($data['name'], $data['type'], $data['image'], $data['stats'], $data['info'])) {
- echo json_encode(['error' => 'Missing required fields']);
- exit;
- }
-
- $name = $data['name'];
- $type = $data['type'];
- $image = $data['image'];
- $stats = json_encode($data['stats']);
- $info = $data['info'];
-
- // Prepared statement to prevent SQL injection
- $stmt = $conn->prepare("UPDATE pokemons SET name=?, type=?, image=?, stats=?, info=? WHERE id=?");
- $stmt->bind_param("sssssi", $name, $type, $image, $stats, $info, $id);
-
- if ($stmt->execute()) {
- echo json_encode([
- 'id' => $id,
- 'name' => $name,
- 'type' => $type,
- 'image' => $image,
- 'stats' => $stats,
- 'info' => $info
- ]);
- } else {
- error_log("Update error: " . $conn->error);
- echo json_encode(['error' => 'Failed to update record']);
- }
-
- $stmt->close();
- break;
-
- case 'DELETE':
- if (!isset($request[0]) || !is_numeric($request[0])) {
- echo json_encode(['error' => 'ID is required']);
- exit;
- }
-
- $id = $request[0];
-
- // Prepared statement to prevent SQL injection
- $stmt = $conn->prepare("DELETE FROM pokemons WHERE id = ?");
- $stmt->bind_param("i", $id);
-
- if ($stmt->execute()) {
- echo json_encode(['id' => $id]);
- } else {
- error_log("Delete error: " . $conn->error);
- echo json_encode(['error' => 'Failed to delete record']);
- }
-
- $stmt->close();
- break;
-
- default:
- echo json_encode(['error' => 'Invalid request method']);
- break;
-}
-
-$conn->close();
-?>
diff --git a/school-pokedex/create_database.sql b/school-pokedex/create_database.sql
deleted file mode 100644
index 2b1dd37..0000000
--- a/school-pokedex/create_database.sql
+++ /dev/null
@@ -1,33 +0,0 @@
-CREATE DATABASE IF NOT EXISTS pokedex;
-
-USE pokedex;
-
-CREATE TABLE IF NOT EXISTS pokemons (
- id INT AUTO_INCREMENT PRIMARY KEY,
- name VARCHAR(255) NOT NULL,
- type VARCHAR(255) NOT NULL,
- image VARCHAR(255) NOT NULL,
- stats JSON NOT NULL,
- info TEXT NOT NULL
-);
-
-CREATE TABLE IF NOT EXISTS abilities (
- id INT AUTO_INCREMENT PRIMARY KEY,
- pokemon_id INT NOT NULL,
- ability VARCHAR(255) NOT NULL,
- FOREIGN KEY (pokemon_id) REFERENCES pokemons(id) ON DELETE CASCADE
-);
-
-CREATE TABLE IF NOT EXISTS moves (
- id INT AUTO_INCREMENT PRIMARY KEY,
- pokemon_id INT NOT NULL,
- move VARCHAR(255) NOT NULL,
- FOREIGN KEY (pokemon_id) REFERENCES pokemons(id) ON DELETE CASCADE
-);
-
-CREATE TABLE IF NOT EXISTS evolutions (
- id INT AUTO_INCREMENT PRIMARY KEY,
- pokemon_id INT NOT NULL,
- evolves_to VARCHAR(255) NOT NULL,
- FOREIGN KEY (pokemon_id) REFERENCES pokemons(id) ON DELETE CASCADE
-);
diff --git a/school-pokedex/images/favicon.ico b/school-pokedex/images/favicon.ico
deleted file mode 100644
index 06a7a43..0000000
Binary files a/school-pokedex/images/favicon.ico and /dev/null differ
diff --git a/school-pokedex/index.html b/school-pokedex/index.html
deleted file mode 100644
index 3d705c2..0000000
--- a/school-pokedex/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
Pokédex
-
-
-
-
-
Pokédex
-
-
-
-
diff --git a/school-pokedex/script.js b/school-pokedex/script.js
deleted file mode 100644
index 9cd1121..0000000
--- a/school-pokedex/script.js
+++ /dev/null
@@ -1,33 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
- fetch('/school-pokedex/school-pokedex/api.php')
- .then(response => {
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
- return response.text().then(text => {
- try {
- return JSON.parse(text);
- } catch (error) {
- console.error('JSON parse error:', error, text);
- throw error;
- }
- });
- })
- .then(pokemons => {
- const pokemonList = document.getElementById('pokemon-list');
- pokemonList.innerHTML = '';
- pokemons.forEach(pokemon => {
- const card = document.createElement('div');
- card.className = 'pokemon-card';
- card.innerHTML = `
-
-
${pokemon.name}
-
Type: ${pokemon.type}
-
Stats: ${JSON.stringify(pokemon.stats)}
-
Info: ${pokemon.info}
- `;
- pokemonList.appendChild(card);
- });
- })
- .catch(error => console.error('Fetch error:', error));
-});
diff --git a/school-pokedex/server.js b/school-pokedex/server.js
deleted file mode 100644
index c3ace1e..0000000
--- a/school-pokedex/server.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const express = require('express');
-const bodyParser = require('body-parser');
-const app = express();
-const port = 3000;
-
-let pokemons = [
- { id: 1, name: 'Bulbasaur', type: 'Grass/Poison', image: 'https://img.pokemondb.net/artwork/bulbasaur.jpg' },
- // ...add more initial Pokémon data here...
-];
-
-app.use(bodyParser.json());
-app.use(express.static('school-pokedex'));
-
-app.get('/api/pokemons', (req, res) => {
- res.json(pokemons);
-});
-
-app.get('/api/pokemons/:id', (req, res) => {
- const pokemon = pokemons.find(p => p.id == req.params.id);
- res.json(pokemon);
-});
-
-app.post('/api/pokemons', (req, res) => {
- const newPokemon = { id: Date.now(), ...req.body };
- pokemons.push(newPokemon);
- res.status(201).json(newPokemon);
-});
-
-app.put('/api/pokemons/:id', (req, res) => {
- const index = pokemons.findIndex(p => p.id == req.params.id);
- pokemons[index] = { id: parseInt(req.params.id), ...req.body };
- res.json(pokemons[index]);
-});
-
-app.delete('/api/pokemons/:id', (req, res) => {
- pokemons = pokemons.filter(p => p.id != req.params.id);
- res.status(204).end();
-});
-
-app.listen(port, () => {
- console.log(`Server running at http://localhost:${port}`);
-});
diff --git a/school-pokedex/styles.css b/school-pokedex/styles.css
deleted file mode 100644
index 25b6f39..0000000
--- a/school-pokedex/styles.css
+++ /dev/null
@@ -1,32 +0,0 @@
-body {
- font-family: Arial, sans-serif;
- margin: 0;
- padding: 20px;
- background-color: #f0f0f0;
-}
-
-h1 {
- text-align: center;
-}
-
-#pokemon-list, #admin-pokemon-list {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.pokemon-card {
- background-color: white;
- border: 1px solid #ccc;
- border-radius: 8px;
- margin: 10px;
- padding: 10px;
- width: 200px;
- text-align: center;
-}
-
-.pokemon-card img {
- max-width: 100%;
- height: auto;
- border-radius: 8px;
-}
diff --git a/school-pokedex/tutorial.md b/school-pokedex/tutorial.md
deleted file mode 100644
index 8b648c7..0000000
--- a/school-pokedex/tutorial.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Pokémon Website Setup Tutorial
-
-Deze tutorial begeleidt je bij het opzetten en uitvoeren van de Pokémon-website en database.
-
-## Stap 1: Stel de MySQL-database in
-
-1. **Installeer XAMPP:**
- - Download en installeer XAMPP van de officiële website: https://www.apachefriends.org/index.html
- - Volg de installatie-instructies.
-
-2. **Start MySQL:**
- - Open het XAMPP Configuratiescherm.
- - Start de MySQL-module door op de knop "Start" naast MySQL te klikken.
-
-3. **Maak de database en tabellen aan:**
- - Open phpMyAdmin door op de knop "Admin" naast MySQL in het XAMPP Configuratiescherm te klikken.
- - Klik in phpMyAdmin op het tabblad "SQL".
- - Voer het SQL-script uit om de database en tabellen aan te maken.
-
-## Stap 2: Stel de PHP-backend in
-
-1. **Installeer PHP (indien niet al geïnstalleerd met XAMPP):**
- - PHP is inbegrepen bij XAMPP, dus je hoeft het niet apart te installeren.
-
-2. **Maak het PHP API-bestand:**
- - Maak een bestand genaamd `api.php` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`.
- - Voeg de benodigde code toe om de API te maken die communiceert met de MySQL-database.
-
-## Stap 3: Stel de frontend in
-
-1. **Maak de HTML-bestanden:**
- - Maak `index.html` en `admin.html` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`.
- - Voeg de benodigde HTML-code toe om de hoofdpagina en de beheerderspagina te maken.
-
-2. **Maak het CSS-bestand:**
- - Maak een bestand genaamd `styles.css` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`.
- - Voeg de benodigde CSS-code toe om de pagina's op te maken.
-
-3. **Maak de JavaScript-bestanden:**
- - Maak `script.js` en `admin-script.js` in de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`.
- - Voeg de benodigde JavaScript-code toe om de frontend te verbinden met de backend API.
-
-## Stap 4: Start de PHP-server
-
-1. **Start de ingebouwde PHP-server:**
- - Open een terminal of opdrachtprompt.
- - Navigeer naar de map `/c:/xampp/htdocs/school-pokedex/school-pokedex`.
- - Voer het volgende commando uit om de ingebouwde PHP-server te starten:
- ```sh
- php -S localhost:8000
- ```
-
-## Stap 5: Open de website
-
-1. **Open de hoofdpagina:**
- - Open een webbrowser en ga naar `http://localhost:8000/index.html` om de hoofdpagina van de Pokédex te bekijken.
-
-2. **Open de beheerderspagina:**
- - Open een webbrowser en ga naar `http://localhost:8000/admin.html` om de Pokémon te beheren.
-
-Je kunt nu Pokémon bekijken en beheren met de opgegeven frontend- en backend-setup.
\ No newline at end of file
+ 
+ 
+ 
`
+ })]
+
+ // var weakTypesString='';
+ for(let i in weakTypes){
+ weakTypesString += weakTypes[i];
+ }
+
+ let strongTypes=[res.damage_relations.double_damage_to.map((type)=>{
+ return `