From 72f6ac55a4bc4fd5b669cdec26115f93479f52a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Amadeu=20Jos=C3=A9=20Andrade=20Junior?= Date: Thu, 9 Jan 2025 10:54:23 -0300 Subject: [PATCH] feat: tests with vue on html using CDN --- random-user-generator/app.js | 24 +++++++++++++ random-user-generator/index.html | 28 +++++++++++++++ random-user-generator/styles.css | 62 ++++++++++++++++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 random-user-generator/app.js create mode 100644 random-user-generator/index.html create mode 100644 random-user-generator/styles.css diff --git a/random-user-generator/app.js b/random-user-generator/app.js new file mode 100644 index 0000000..3c2d118 --- /dev/null +++ b/random-user-generator/app.js @@ -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'); diff --git a/random-user-generator/index.html b/random-user-generator/index.html new file mode 100644 index 0000000..700837c --- /dev/null +++ b/random-user-generator/index.html @@ -0,0 +1,28 @@ + + + + + + + + + Random User Generator + + + + + + +
+ +

{{firstName}} {{lastName}}

+

Email: {{email}}

+ +
+ + + + + + + \ No newline at end of file diff --git a/random-user-generator/styles.css b/random-user-generator/styles.css new file mode 100644 index 0000000..c2f9361 --- /dev/null +++ b/random-user-generator/styles.css @@ -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); +}