Skip to content

Aimee/javascript/vuecapstone #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aimeeny wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Aimee/javascript/vuecapstone #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
238eaeb
began vue capstone
aimeeny May 19, 2022
87c776c
trying to get api to work
aimeeny May 19, 2022
f3b4af0
still working
aimeeny May 20, 2022
b6ec8c8
working on api interactivity
aimeeny May 20, 2022
bb2aa98
progress
aimeeny May 24, 2022
0a53a0b
completed vue mini capstone
aimeeny May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
361 changes: 361 additions & 0 deletions code/aimee/javascript/vue_capstone/ffxiv.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,361 @@
<!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">
<title>SourceBook</title>
<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=Koulen&family=Press+Start+2P&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<style>
* {
margin: auto;
max-height: 70rem;
max-width: 30rem;
}

body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #FFFBFC;
max-width: 30rem;
max-height: 70rem;
justify-content: center;
border: 4px solid #FF729F;
border-radius: 15px;
}

.header {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

.info {
border: 2px 2px #A0A0A0;
border-radius: 20px;
padding: 1rem;
text-align: center;

}

.display-characters {
font-family: 'Source Sans Pro';
color: #C8F5FF;
display: flex;
flex-direction: column;
border: 1px solid #2660A4;
border-radius: 30px;
box-shadow: 4px 4px 4px rgb(11, 70, 110);
margin: 1rem;
background-color: #56CBF9;
padding-top: 3rem;
}

.display-fcs {
font-family: 'Source Sans Pro';
color: #C8F5FF;
display: flex;
flex-direction: column;
border: 1px solid #2660A4;
border-radius: 30px;
box-shadow: 4px 4px 4px rgb(11, 70, 110);
margin: 1rem;
background-color: #56CBF9;
padding-top: 3rem;
}

.profile {
display: flex;
flex-direction: column;
overflow: scroll;
max-height: 50rem;
}

input {
color: #2660A4;
font-family: 'Source Sans Pro';
}

h1 {
color: #FF729F;
font-family: 'Koulen';
font-size: 3rem;
margin-bottom: -2rem;
text-shadow: 2px 2px 10px #A0A0A0;
}

h2 {
font-family: 'Koulen';
color: #235C8E;
}

h3 {
font-family: 'Source Sans Pro';
color: #2660A4;
font-weight: 400;
font-style: italic;
padding: 1rem;
text-align: center;
}

h3.details {
font-family: 'Source Sans Pro';
color: #2660A4;
font-weight: 600;
font-style: italic;
}

label {
font-family: 'Source Sans Pro';
color: #FF729F;
padding-right: 1rem;

}

p {
font-family: 'Source Sans Pro';
color: #000;
}

.image {
max-width: 28rem;
}

.character-results {
font-family: 'Source Sans Pro';
color: #C8F5FF;
display: flex;
flex-direction: column;
border: 1px solid #2660A4;
border-radius: 30px;
box-shadow: 4px 4px 4px rgb(11, 70, 110);
margin: 1rem;
background-color: #56CBF9;
overflow: scroll;
max-height: 50rem;
max-width: 28rem;
}

.fc-results {
font-family: 'Source Sans Pro';
color: #C8F5FF;
display: flex;
flex-direction: row;
border: 1px solid #2660A4;
border-radius: 30px;
box-shadow: 4px 4px 4px rgb(11, 70, 110);
margin: 1rem;
background-color: #56CBF9;
overflow: scroll;
}

.text-info {
text-align: center;
margin: 1rem;
}

img.avatar {
box-shadow: 2px 2px 2px rgb(11, 70, 110);
}

hr {
margin: 1rem;
}
</style>
</head>

<body>
<div id="app">
<div class="header">
<h1>FFXIV Character Info</h1>
<div class="sub-header">
<h3>look up character data</h3>

<input type="text" id="name" v-model="name" placeholder="search by name">
<input type="submit" value="search" @click="searchName" v-on:click="isHidden=false"
v-on:click="hideButton=false"></input><br>

<input type="text" id="fc" v-model="fcname" placeholder="search by FC">
<input type="submit" value="search" @click="searchFC" v-on:click="isHiddenFC=false"></input><br>
</div>
</div>

<hr>

<!-- detailed character info -->
<div v-bind="character" class="character-results" v-if="!hideDetails">
<div class="image">
<img class="portrait" v-bind:src="character.Portrait">
</div>
<div class="text-info">
<h2>{{character.Name}}</h2>
<!-- <h3 class="details">Active Job/Class</h3> -->
<!-- <p>{{ character.ActiveClassJob }}</p> would like to figure out later -->
<h3 class="details">Free Company</h3>
<p>{{ character.FreeCompanyName }}</p>
<h3 class="details">Data Center</h3>
<p>{{ character.DC }}</p>
<h3 class="details">Nameday</h3>
<p>{{ character.Nameday }}</p>
<h3 class="details">Race</h3>
<p>{{ races[character.Race] }}</p>
<h3 class="details">Gender</h3>
<p>{{ gender[character.Gender] }}</p>
</div>
</div>

<!-- character results -->
<div class="display-characters" v-if="!isHidden">
<div class="profile">
<p v-for="result in results" class="info">{{ result.Name }}, {{ result.Server }}<br>
Lodestone ID: {{ result.ID }} <br><br>
<a target="_blank"
v-bind:href="`https://na.finalfantasyxiv.com/lodestone/character/${result.ID}`"><img
v-bind:src="result.Avatar" class="avatar"></a><br>
<input type="submit" value="more info" @click="displayCharacter(result.ID)"
v-on:click="hideDetails=false; isHidden=true">
</p>
</div>
</div>

<!-- fc results -->
<div class="display-fcs" v-if="!isHiddenFC">
<div class="profile">
<p v-for="result in results" class="info">{{ result.Name }}, {{ result.Server }}<br>
Lodestone ID: {{ result.ID }} <br><br>
<a target="_blank"
v-bind:href="`https://na.finalfantasyxiv.com/lodestone/character/${result.ID}`"><img
v-bind:src="result.Avatar" class="avatar"></a><br>
<input type="submit" value="more info" @click="displayFC(result.ID)"
v-on:click="hideFC=false; isHiddenFC=true">
<img v-bind:src="result.Crest[2]">
</p>
</div>
</div>


<!-- detailed FC information -->
<div v-bind="freecompany" class="fc-results" v-if="!hideFC">
<div class="text-info">
<h2>{{ freecompany.Name }} - "{{ freecompany.Tag }}"</h2>
<h3 class="details">Active Members</h3>
<p>{{ freecompany.ActiveMemberCount }}</p>
<h3 class="details">Grand Company</h3>
<p>{{ freecompany.GrandCompany }}</p>
<h3 class="details">Slogan</h3>
<p>{{ freecompany.Slogan }}</p><br>
</div>
<img class="portrait" v-bind:src="result.Crest[2]">

</div>

</div>

<script>
const App = {
data() {
return {
baseUrl: 'https://xivapi.com/',
isHidden: true,
isHiddenFC: true,
hideFC: true,
hideDetails: true,
hideButton: true,
name: '',
fcname: '',
character: '',
avatar: '',
crest: '',
results: [],
FCID: '',
freecompany: '',
freecompanymembers: '',
ID: '',
characterID: '',
character: '',
output: '',
char: '',
FCM: '',
FC: '',
estate: '',
races: [
"",
"Hyur",
"Elezen",
"Lalafell",
"Miqo'te",
"Roegadyn",
"Au Ra",
"Hrothgar",
"Viera"
],
gender: [
"",
"male",
"female"
]

}
},
methods: {
searchName() {
axios({
url: 'https://xivapi.com/character/search',
headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
method: 'get',
params: { name: this.name }
}).then(res => {
console.log(res.data)
this.results = res.data.Results
}).catch(error => console.log(error.message))
},
searchFC() {
axios({
url: 'https://xivapi.com/freecompany/search',
headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
method: 'get',
params: { name: this.fcname }
}).then(res => {
console.log(res.data)
this.results = res.data.Results
}).catch(error => console.log(error.message))
},
displayCharacter(characterID) {
console.log(characterID)
axios({
url: `https://xivapi.com/character/${characterID}`,
headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
method: 'get',
params: { data: this.FC }
}).then(res => {
console.log(res.data)
this.character = res.data.Character
}).catch(error => console.log(error.message))
},
displayFC(fcid) {
console.log(fcid)
axios({
url: `https://xivapi.com/freecompany/${fcid}`,
headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
method: 'get',
}).then(res => {
console.log(res.data)
this.freecompany = res.data.FreeCompany
}).catch(error => console.log(error.message))
}
}
}
const app = Vue.createApp(App)
app.mount('#app')
</script>
</body>

</html>
Loading