larnu-bootcamp · stom83 · Jul 11, 2022 · Jul 11, 2022 · Jul 11, 2022 · Jul 12, 2022
diff --git a/personas-detalles/assets/cualidades-persona-humanitaria.jpg b/personas-detalles/assets/cualidades-persona-humanitaria.jpg
diff --git a/personas-detalles/assets/model.png b/personas-detalles/assets/model.png
diff --git a/personas-detalles/index.html b/personas-detalles/index.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script defer src="./main.js"></script>
+  </head>
+
+  <body>
+    <main class="main">
+      <div class="card"></div>
+    </main>
+  </body>
+</html>
diff --git a/personas-detalles/main.js b/personas-detalles/main.js
@@ -0,0 +1,125 @@
+class App {
+  /**
+   * @typedef User
+   *  @property {String} name
+   *  @property {String} picture
+   *  @property {String} email
+   */
+
+  #skills = [
+    ['<i class="fa-brands fa-js btn__icon"></i>', "Js"],
+    ['<i class="fa-brands fa-css3 btn__icon"></i>', "Css"],
+    ['<i class="fa-brands fa-html5 btn__icon"></i>', "Html"],
+    ['<i class="fa-brands fa-python btn__icon"></i>', "Python"],
+    ['<i class="fa-solid fa-server btn__icon"></i>', "Backend"],
+    ['<i class="fa-solid fa-database btn__icon"></i>', "Mongodb"],
+    ['<i class="fa-solid fa-laptop-code btn__icon"></i>', "Hacking"],
+    ['<i class="fa-brands fa-react btn__icon"></i>', "React"],
+    ['<i class="fa-brands fa-java btn__icon"></i>', "Java"],
+    ['<i class="fa-solid fa-function btn__icon"></i>', "D. Science"],
+    ['<i class="fa-solid fa-robot btn__icon"></i>', "M. learning"],
+    ['<i class="fa-brands fa-figma btn__icon"></i>', "UI-UX"],
+  ];
+
+  constructor() {
+    this.#fetchUser()
+  }
+
+  /**
+   *
+   * @param {Array} arr
+   */
+  #randomNumbers(arr) {
+    return Math.floor(Math.random() * arr.length);
+  }
+
+  /**
+   *
+   * @param {User} user
+   */
+  #createUser(user) {
+    const card = document.querySelector(".card");
+    const mySet = new Set();
+
+    for (let i = 0; i < 5; i++) {
+      const number = this.#randomNumbers(this.#skills);
+      mySet.add(number);
+    }
+
+    const buttons = () => {
+      const randomSkills = Array.from(mySet);
+
+      return randomSkills
+        .map((skill) => {
+          return `
+        <button class="btn" type="button">
+          ${this.#skills[skill][0]}
+          ${this.#skills[skill][1]}
+        </button>
+      `;
+        })
+        .join("");
+    };
+
+    const userHtml = `
+    <div class="card__head">
+      <figure class="avatar-container">
+        <img
+          class="avatar"
+          src="${user.picture}"
+          alt="image"
+        />
+      </figure>
+      <h1 class="heading">
+        <span>
+          Name <span class="heading--main"> ${user.name} </span>
+        </span>
+        <span>
+          Email <span class="heading--subtitle"> ${user.email} </span>
+        </span>
+      </h1>
+    </div>
+
+    <article>
+      <h4>Hobbies</h4>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Reiciendis, et pariatur deleniti cupiditate harum odio voluptate
+        magnam ab modi sunt inventore numquam vitae quod necessitatibus
+      </p>
+    </article>
+
+    <div class="buttons-box">
+      <h4>Skills</h4>
+      <div class="skills-container">
+      ${buttons()}
+      </div>
+    </div>
+  `;
+
+    card?.insertAdjacentHTML("afterbegin", userHtml);
+  }
+
+  #fetchUser() {
+    fetch("https://randomuser.me/api/")
+      .then((res) => {
+        return res.json();
+      })
+      .then((res) => {
+        const payload = res?.results[0];
+        const { first, last } = payload.name;
+
+        let { email } = payload;
+        email = email.slice(0, -4);
+        const { large, medium, thumbnail } = payload.picture;
+
+        this.#createUser({
+          name: `${first} ${last}`,
+          email: email,
+          picture: large || medium || thumbnail || "",
+        });
+      });
+  }
+}
+
+const app = new App();
diff --git a/personas-detalles/style.css b/personas-detalles/style.css
@@ -0,0 +1,130 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
+
+:root {
+  font-family: "Montserrat", sans-serif;
+  font-size: 62.5%;
+  box-sizing: border-box;
+
+  --white-100: rgb(252, 252, 252);
+  --white-150: rgb(242, 242, 247);
+  --primary: rgb(109, 40, 217);
+  --base-content: rgb(46, 44, 82);
+}
+
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  outline: none;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-size: 1.5rem; /* 1.6px */
+  color: var(--base-content);
+  height: 100vh;
+  font-weight: 400;
+  background-color: var(--white-150);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--white-100);
+  border-radius: 2rem;
+  padding: 4rem;
+  width: 48rem;
+  min-height: 30rem;
+  box-shadow: 0px 0px 12px 2px rgba(46, 44, 82, 0.15);
+}
+
+.avatar-container {
+  width: 12rem;
+  height: 12rem;
+}
+
+.avatar {
+  object-fit: cover;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+
+.card__head {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+.heading {
+  letter-spacing: -0.4px;
+  font-size: 1.3rem;
+}
+
+.heading > * {
+  display: block;
+}
+
+.heading--main {
+  font-weight: 400;
+  font-size: 2.6rem;
+}
+
+.heading--subtitle {
+  font-weight: 400;
+  font-size: 1.5rem;
+}
+
+.skills-container {
+  width: 28rem;
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+article p {
+  font-size: 1.4rem;
+}
+
+h4 {
+  font-size: 2rem;
+}
+
+.btn {
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  color: var(--white-150);
+  padding: 0.5rem 1.2rem;
+  border-radius: 25rem;
+  box-shadow: 0px 0px 8px 1px rgba(46, 44, 82, 0.35);
+  background-color: var(--primary);
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.btn:hover {
+  transform: scale(1.08) translateY(-2px);
+  box-shadow: 0px 0px 16px 1px rgba(46, 44, 82, 0.35);
+}
+
+.btn:active {
+  transform: scale(1) translateY(1px);
+  box-shadow: 0px 0px 4px 1px rgba(46, 44, 82, 0.35);
+}
+
+.btn__icon {
+  font-size: 1.8rem;
+}
+
+.buttons-box {
+  gap: 2rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}