diff --git a/README.md b/README.md new file mode 100644 index 00000000..398b9d76 --- /dev/null +++ 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 new file mode 100644 index 00000000..71a41b5a Binary files /dev/null and b/image/logo-tibia.png differ diff --git a/image/main_tibia.png b/image/main_tibia.png new file mode 100644 index 00000000..e659eb25 Binary files /dev/null and b/image/main_tibia.png differ diff --git a/image/monster_tibia.png b/image/monster_tibia.png new file mode 100644 index 00000000..29ee6bb2 Binary files /dev/null and b/image/monster_tibia.png differ diff --git a/image/tibia_drag.png b/image/tibia_drag.png new file mode 100644 index 00000000..0824c05b Binary files /dev/null and b/image/tibia_drag.png differ diff --git a/image/tibia_map_800.png b/image/tibia_map_800.png new file mode 100644 index 00000000..a673fb95 Binary files /dev/null and b/image/tibia_map_800.png differ diff --git a/index.html b/index.html index e69de29b..9b8fad51 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + Tibia News Main Page + + + +
+

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. +

+

CHOOSE A SECTION

+
+
+ main image of Tibia informationsTIBIA INFORMATIONS +
+
+ main image of Tibia fansitesTIBIA FANSITES +
+
+ main image of Tibia worldsTIBIA WORLDS +
+
+ main image of Tibia monsterTIBIA CREATURES +
+
+ main image of Tibia spellsTIBIA LIST OF SPELLS +
+
+
+ + + + \ No newline at end of file diff --git a/index_2_tibia.html b/index_2_tibia.html new file mode 100644 index 00000000..dfaeead6 --- /dev/null +++ b/index_2_tibia.html @@ -0,0 +1,23 @@ + + + + + + + + + Tibia News - Informations + + + +
+ Back to main +

Tibia news and information websites

+
+
+ + + + + + \ No newline at end of file diff --git a/index_3_tibia.html b/index_3_tibia.html new file mode 100644 index 00000000..8ff76d1a --- /dev/null +++ b/index_3_tibia.html @@ -0,0 +1,24 @@ + + + + + + + + + Tibia News - Fansites + + + +
+ + Back to main +

Tibia fan pages

+
+
+ + + + + + \ No newline at end of file diff --git a/index_4_tibia.html b/index_4_tibia.html new file mode 100644 index 00000000..235634a1 --- /dev/null +++ b/index_4_tibia.html @@ -0,0 +1,24 @@ + + + + + + + + + Tibia News - Worlds + + + +
+ + Back to main +

Worlds of Tibia

+
+
+ + + + + + \ No newline at end of file diff --git a/index_5_tibia.html b/index_5_tibia.html new file mode 100644 index 00000000..5a944cad --- /dev/null +++ b/index_5_tibia.html @@ -0,0 +1,23 @@ + + + + + + + + + Tibia News - Creatures + + + +
+ Back to main +

Creatures of Tibia

+
+
+ + + + + + \ No newline at end of file diff --git a/index_6_tibia.html b/index_6_tibia.html new file mode 100644 index 00000000..5c34fd32 --- /dev/null +++ b/index_6_tibia.html @@ -0,0 +1,25 @@ + + + + + + + + + Tibia News - Spells + + + +
+ + Back to main +

Spell list in Tibia

+
+
+ + + + + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29b..90eb9cb4 100644 --- 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(); +}); \ No newline at end of file diff --git a/main_3_tibia.js b/main_3_tibia.js new file mode 100644 index 00000000..e07ceb2d --- /dev/null +++ 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(); +}); \ No newline at end of file diff --git a/main_4_tibia.js b/main_4_tibia.js new file mode 100644 index 00000000..069e6117 --- /dev/null +++ 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 new file mode 100644 index 00000000..6ab3d58a --- /dev/null +++ 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(); +}) \ No newline at end of file diff --git a/main_6_tibia.js b/main_6_tibia.js new file mode 100644 index 00000000..96874803 --- /dev/null +++ b/main_6_tibia.js @@ -0,0 +1,36 @@ +async function tibiaData() { + const response = await fetch('https://api.tibiadata.com/v3/spells'); + const json_tibia = await response.json(); + + const box = document.getElementById('spellBox'); + for (const spell of (json_tibia.spells.spell_list)) { + + const info = document.createElement('div'); + info.classList.add('spell_list'); + + box.appendChild(info); + const spell_name = document.createElement('p'); + spell_name.innerText = "Name of spell: " + spell.name; + + const spell_level = document.createElement('p'); + spell_level.innerText = "The level required to use a spell: " + spell.level; + + const mana_spell = document.createElement('p'); + mana_spell.innerText = "Cost of mana: " + spell.mana; + + const price_spell = document.createElement('p'); + price_spell.innerText = "Price for spell: " + spell.price; + + + info.appendChild(spell_name); + info.appendChild(spell_level); + info.appendChild(mana_spell); + info.appendChild(price_spell); + + } +} + + +document.addEventListener('DOMContentLoaded', async () => { + tibiaData(); +}); \ No newline at end of file diff --git a/style.css b/style.css index e69de29b..63ac23db 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,187 @@ +/* CSS for all */ +body { + background-color: #cc8866; + margin: 0; + padding: 0; + font-family: "Share Tech Mono", monospace; +} + +#back { + padding: 10px; +} + +a { + text-decoration: none; + color: black; +} + +a:link { + text-decoration: underline; + transition: 0.8s ease-in-out; +} + +a:hover { + color: yellow; + text-decoration: underline; + font-size: large; + transition: 0.8s ease-in-out; +} + +/* CSS for main side */ +#main_page_section1 { + text-align: center; + min-height: calc(100vh - 60px); +} + +.main_para { + text-indent: 30px; + text-align: justify; + padding: 10px; +} + +#main_div { + display: flex; + flex-wrap: wrap; +} + +.main_image { + max-width: 100%; +} + +.main_page_div { + width: 250px; + height: auto; + border: 1px solid; + border-radius: 5px; + margin: 15px auto; + transition: 0.7s ease-in-out; + -webkit-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); +} +.main_page_div:hover { + width: 300px; + transition: 0.7s ease-in-out; +} +#main_div a { + text-decoration: none; +} +#main_div a:hover { + text-decoration: none; + color: black; +} +footer { + text-align: center; + padding: 10px; + border-top: 1px solid; + -webkit-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); +} + +#myFooter:hover { + text-decoration: none; +} + +#myFooter:link { + text-decoration: none; +} + +/* CSS for index_2_tibia */ +.news-list:nth-child(odd) { + background-color: #ca6939; + padding: 5px; + -webkit-box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); + box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); +} +.news-list:nth-child(even) { + background-color: #cc8866; +} +#page2_h1 { + text-align: center; +} +#main_news { + text-align: center; +} +/* CSS for index_3_tibia */ +#main { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.site-list { + width: 200px; + border: 1px solid; + border-radius: 5px; + margin: 5px; + text-align: center; + padding: 5px; + -webkit-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); +} + +#page3_h1 { + text-align: center; +} + +/* CSS for index_4_tibia */ +.world-list:nth-child(odd) { + background-color: #ca6939; + padding: 5px; + -webkit-box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); + box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); +} +.world-list:nth-child(even) { + background-color: #cc8866; +} +#page4_h1 { + text-align: center; +} +#world { + text-align: center; +} + +/* CSS or index_5_tibia */ +#monsterBox { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.monster-list { + width: 200px; + margin: 5px; + padding: 5px; + text-align: center; + border: 1px solid; + border-radius: 5px; + -webkit-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); + box-shadow: 0px 0px 50px 0px rgba(66, 68, 90, 1); +} + +#page5_h1 { + text-align: center; +} + +/* CSS for index_6_tibia */ +.spell_list:nth-child(odd) { + background-color: #ca6939; + padding: 5px; + -webkit-box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); + box-shadow: 0px -3px 35px -10px rgba(66, 68, 90, 1); +} +.spell_list:nth-child(even) { + background-color: #cc8866; +} +#page6_h1 { + text-align: center; +} +#spellBox { + text-align: center; +}