Amadeu/EstudoVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: tests with vue on html using CDN

Browse Source
This commit is contained in:
Amadeu José Andrade Junior
2025-01-09 10:54:23 -03:00
parent 0d6eca1319
commit 72f6ac55a4
3 changed files with 114 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
random-user-generator/app.js Normal file
View File

@@ -0,0 +1,24 @@
const app = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe',
email: 'john@gmail.com',
gender: 'male',
picture: 'https://randomuser.me/api/portraits/men/10.jpg',
};
},
methods: {
async getUser() {
const res = await fetch('https://randomuser.me/api/');
const { results } = await res.json();
this.firstName = results[0].name.first;
this.lastName = results[0].name.last;
this.email = results.email;
this.gender = results[0].gender;
this.picture = results[0].picture.large;
},
},
});
app.mount('#app');

28
random-user-generator/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<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>Random User Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<img :class="gender" v-bind:src="picture" v-bind:alt="firstName">
<h1>{{firstName}} {{lastName}}</h1>
<h3>Email: {{email}}</h3>
<button v-on:click="getUser()" :class="gender">Get Random User</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="app.js"></script>
</body>
</html>

62
random-user-generator/styles.css Normal file
View File

@@ -0,0 +1,62 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: Arial, Helvetica, sans-serif;
}
#app {
width: 400px;
height: 100vh;
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1,
h3 {
margin-bottom: 1rem;
font-weight: normal;
}
img {
border-radius: 50%;
border: 5px #333 solid;
margin-bottom: 1rem;
}
.male {
border-color: steelblue;
background-color: steelblue;
}
.female {
border-color: pink;
background-color: pink;
color: #333;
}
button {
cursor: pointer;
display: inline-block;
background: #333;
color: white;
font-size: 18px;
border: 0;
padding: 1rem 1.5rem;
}
button:focus {
outline: none;
}
button:hover {
transform: scale(0.98);
}