cdv-poznan · Gerwix · Feb 13, 2022 · Feb 13, 2022 · Feb 13, 2022 · Feb 13, 2022
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+## The final project of writing a web application that can additionally communicate with an external API via the HTTP protocol.
+### Project website: https://gerwix.github.io/javascript-project-2022/
+### Happy testing :) - Mateusz.
diff --git a/image/logo-tibia.png b/image/logo-tibia.png
diff --git a/image/main_tibia.png b/image/main_tibia.png
diff --git a/image/monster_tibia.png b/image/monster_tibia.png
diff --git a/image/tibia_drag.png b/image/tibia_drag.png
diff --git a/image/tibia_map_800.png b/image/tibia_map_800.png
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- tech mono font-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Tibia News Main Page</title>
+</head>
+
+<body>
+    <section id="main_page_section1">
+        <p class="main_para">Welcome to the website dedicated to the online game Tibia.Tibia is a 1997 massively
+            multiplayer online role-playing game (MMORPG) developed and published by CipSoft. It is one of the earliest
+            and longest-running MMORPGs, with its popularity peaking in 2007. It is a free game to download and play,
+            though players may pay to upgrade to a premium account, granting substantial in-game benefits. Tibia is a
+            two-dimensional tile-based game set in a fantasy world with pixel art graphics and a top-down perspective.
+        </p>
+        <h1 id="main_header">CHOOSE A SECTION</h1>
+        <div id="main_div">
+            <div class="main_page_div">
+                <a href="index_2_tibia.html"><img src="image/logo-tibia.png" class="main_image"
+                        alt="main image of Tibia informations">TIBIA INFORMATIONS</a>
+            </div>
+            <div class="main_page_div">
+                <a href="index_3_tibia.html"><img src="image/tibia_drag.png" class="main_image"
+                        alt=" main image of Tibia fansites">TIBIA FANSITES</a>
+            </div>
+            <div class="main_page_div">
+                <a href="index_4_tibia.html"><img src="image/tibia_map_800.png" class="main_image"
+                        alt="main image of Tibia worlds">TIBIA WORLDS</a>
+            </div>
+            <div class="main_page_div">
+                <a href="index_5_tibia.html"><img src="image/monster_tibia.png" class="main_image"
+                        alt="main image of Tibia monster">TIBIA CREATURES</a>
+            </div>
+            <div class="main_page_div">
+                <a href="index_6_tibia.html"><img src="image/main_tibia.png" class="main_image"
+                        alt=" main image of Tibia spells">TIBIA LIST OF SPELLS</a>
+            </div>
+        </div>
+    </section>
+    <footer>Created in 2022 by <a href="https://github.com/Gerwix" target="_blank" id="myFooter">Mateusz Gerwazik</a></footer>
+</body>
+
+</html>
diff --git a/index_2_tibia.html b/index_2_tibia.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Tibia News - Informations</title>
+</head>
+
+<body>
+    <section class="main_section">
+        <a href="index.html" id="back">Back to main</a>
+        <h1 id="page2_h1">Tibia news and information websites</h1>
+        <div id="main_news"></div>
+    </section>
+    <footer>Created in 2022 by <a href="https://github.com/Gerwix" target="_blank" id="myFooter">Mateusz Gerwazik</a></footer>
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/index_3_tibia.html b/index_3_tibia.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Tibia News - Fansites</title>
+</head>
+
+<body>
+    <section class="main_section">
+
+        <a href="index.html" id="back">Back to main</a>
+        <h1 id="page3_h1">Tibia fan pages</h1>
+        <div id="main"></div>
+    </section>
+    <footer>Created in 2022 by <a href="https://github.com/Gerwix" target="_blank" id="myFooter">Mateusz Gerwazik</a></footer>
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="main_3_tibia.js"></script>
+</body>
+
+</html>
diff --git a/index_4_tibia.html b/index_4_tibia.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Tibia News - Worlds</title>
+</head>
+
+<body>
+    <section class="main_section">
+
+        <a href="index.html" id="back">Back to main</a>
+        <h1 id="page4_h1">Worlds of Tibia</h1>
+        <div id="world"></div>
+    </section>
+    <footer>Created in 2022 by <a href="https://github.com/Gerwix" target="_blank" id="myFooter">Mateusz Gerwazik</a></footer>
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="main_4_tibia.js"></script>
+</body>
+
+</html>
diff --git a/index_5_tibia.html b/index_5_tibia.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Tibia News - Creatures</title>
+</head>
+
+<body>
+    <section class="main_section">
+        <a href="index.html" id="back">Back to main</a>
+        <h1 id="page5_h1">Creatures of Tibia</h1>
+        <div id="monsterBox"></div>
+    </section>
+    <footer>Created in 2022 by <a href="https://github.com/Gerwix" target="_blank" id="myFooter">Mateusz Gerwazik</a></footer>
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="main_5_tibia.js"></script>
+</body>
+
+</html>
diff --git a/index_6_tibia.html b/index_6_tibia.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Tibia News - Spells</title>
+</head>
+
+<body>
+    <section class="main_section">
+
+        <a href="index.html" id="back">Back to main</a>
+        <h1 id="page6_h1">Spell list in Tibia</h1>
+        <div id="spellBox"></div>
+    </section>
+    <footer>Created in 2022 by <a href="https://github.com/Gerwix" target="_blank" id="myFooter">Mateusz Gerwazik</a></footer>
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="main_6_tibia.js"></script>
+
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,36 @@
+async function tibiaNews() {
+  const response = await fetch('https://api.tibiadata.com/v3/news/latest');
+  const json = await response.json();
+
+  const tibiaNews = document.getElementById('main_news');
+
+  for (const news of (json.news)) {
+    // adding element div
+    const newsdiv = document.createElement('div');
+    newsdiv.classList.add('news-list');
+
+    // adding paragraph
+    const date = document.createElement('p');
+    date.innerText = "News date: " + news.date;
+    newsdiv.appendChild(date);
+
+    // adding paragraph
+    const title = document.createElement('p');
+    title.innerText = "Title: " + news.news;
+    newsdiv.appendChild(title);
+
+    // adding link
+    const link = document.createElement('a');
+    link.href = news.url;
+    link.target = '_blank';
+    link.innerText = "Read more on: " + news.news;
+
+    newsdiv.appendChild(link);
+
+    tibiaNews.appendChild(newsdiv);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  tibiaNews();
+});
diff --git a/main_3_tibia.js b/main_3_tibia.js
@@ -0,0 +1,77 @@
+// https://api.tibiadata.com/v3/fansites
+
+async function funSide() {
+    const response = await fetch('https://api.tibiadata.com/v3/fansites');
+    const json = await response.json();
+    const part1 = json.fansites;
+
+    const main = document.getElementById('main');
+
+    for (const data of part1.supported) {
+        // adding element div
+        const element = document.createElement("div");
+        element.classList.add('site-list');
+
+        // adding logo
+        const logo = document.createElement('img');
+        logo.src = data.logo_url;
+
+
+        // adding link
+        const link = document.createElement('a');
+        link.href = data.homepage;
+        link.target = "_blank";
+        link.innerText = "Homepage: " + data.name;
+
+        // adding author
+        const author = document.createElement('p');
+        author.innerText = "Author: " + data.contact;
+
+        // adding paragraph for logo
+        const post = document.createElement('p');
+        post.id = 'para';
+
+        post.appendChild(link);
+        element.appendChild(logo);
+        element.appendChild(post);
+        element.appendChild(author);
+
+        main.appendChild(element);
+    }
+
+    for (const data2 of part1.promoted) {
+        // adding element div
+        const element = document.createElement("div");
+        element.classList.add('site-list');
+
+        // adding logo
+        const logo = document.createElement('img');
+        logo.src = data2.logo_url;
+
+        // adding link
+        const link = document.createElement('a');
+        link.href = data2.homepage;
+        link.target = "_blank";
+        link.innerText = "Homepage: " + data2.name;
+
+        // adding author
+        const author = document.createElement('p');
+        author.innerText = "Author: " + data2.contact;
+
+        // adding paragraph for logo
+        const post = document.createElement('p');
+        post.id = 'para';
+
+        post.appendChild(link);
+        element.appendChild(logo);
+        element.appendChild(post);
+        element.appendChild(author);
+
+
+        main.appendChild(element);
+    }
+
+}
+document.addEventListener("DOMContentLoaded", async () => {
+    funSide();
+});
diff --git a/main_4_tibia.js b/main_4_tibia.js
@@ -0,0 +1,38 @@
+// https://api.tibiadata.com/v3/worlds
+
+async function tibiaWorld () {
+    const response = await fetch('https://api.tibiadata.com/v3/worlds');
+    const json = await response.json();
+
+    const worlds = document.getElementById('world');
+
+    for (const newWorld of json.worlds.regular_worlds) {
+
+        const createWorld = document.createElement('div');
+        createWorld.classList.add('world-list');
+        worlds.appendChild(createWorld);
+
+        const worldName = document.createElement('p');
+        worldName.innerText = 'World name: ' + newWorld.name;
+
+        const location = document.createElement('p');
+        location.innerText = 'Location: ' + newWorld.location;
+
+        const online = document.createElement('p');
+        online.innerText = 'Players online: ' + newWorld.players_online;
+
+        const type = document.createElement('p');
+        type.innerText = 'Type of world: ' + newWorld.pvp_type;
+
+        createWorld.appendChild(worldName);
+        createWorld.appendChild(location);
+        createWorld.appendChild(online);
+        createWorld.appendChild(type);
+
+    }
+}
+
+
+document.addEventListener('DOMContentLoaded', async () => {
+    tibiaWorld();
+});
diff --git a/main_5_tibia.js b/main_5_tibia.js
@@ -0,0 +1,35 @@
+async function tibiaMonster() {
+    const response = await fetch('https://api.tibiadata.com/v3/creatures');
+    const json = await response.json();
+
+    const creature = document.getElementById('monsterBox');
+
+    for (const monster of json.creatures.creature_list) {
+        const newMonster = document.createElement('div');
+        newMonster.classList.add("monster-list");
+        creature.appendChild(newMonster);
+
+        const monsterName = document.createElement('p');
+        monsterName.innerText = 'The name of the creation: ' + monster.name;
+
+        const para = document.createElement('p');
+        para.classList.add('imgPara');
+
+        const monsterImg = document.createElement('img');
+        monsterImg.src = monster.image_url;
+
+        const monsterRace = document.createElement('p');
+        monsterRace.innerText = 'Monster race: ' + monster.race
+
+        newMonster.appendChild(monsterName);
+        newMonster.appendChild(para);
+        para.appendChild(monsterImg);
+        newMonster.appendChild(monsterRace);
+
+    }
+
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    tibiaMonster();
+})