Ranking

backend/src/controllers/badge.controller.js

@@ -0,0 +1,3 @@
+import { createBadge } from "./badge/createBadge";
+// Aquí importamos para exportar las funciones.
+module.exports = {createBadge}

backend/src/controllers/badge/createBadge.js

@@ -0,0 +1,43 @@
+const Badge = require('../../models/badge.model')
+
+const createBadge = async (req, res) => {
+  const { name, url } = await req.body;
+
+  // Validación que estén todos los campos.
+  if (!name || !url) {
+    return res.status(404).json({
+      msg: "Todos los campos son requeridos",
+      status: 404,
+    });
+  }
+  // Fin validación
+
+  // Validación si es que ya está registrado.
+  const urlBd = await Badge.findOne({url: `${url}`}).exec()
+  if(urlBd !== null){
+    return res.status(409).json({
+      msg: "Ya existe una cuenta con este correo.",
+      status: 409,
+    });
+  }
+  // Fin Validación
+
+  try {
+    await Badge.create({
+      name: name,
+      url: url,
+    });
+    res.status(201).json({
+      msg: "Insignia creada.",
+      status: 201,
+    });
+  } catch (err) {
+    console.log(err);
+    res.status(500).json({
+      msg: "Error al crear una insignia.",
+      status: 500,
+    });
+  }
+};
+
+module.exports = {createBadge}

backend/src/models/badge.model.js

@@ -0,0 +1,12 @@
+const mongoose = require("mongoose");
+
+const { Schema } = mongoose;
+// Creación de esquema
+const badgeSchema = new Schema({
+  name: {type: String, require: true},
+  url: {type: String, require: true}
+});
+// Creación del modelo
+const Badge = mongoose.model("Badge", badgeSchema);
+
+module.exports = Badge;

backend/src/routes/badge.routes.js

@@ -0,0 +1,6 @@
+const router = require('express').Router()
+const {createBadge} = require('../controllers/badge/createBadge')
+
+router.post('/createBadge', createBadge)
+
+module.exports = router

backend/src/routes/router.js

@@ -1,9 +1,11 @@
 const router = require("express").Router();
 
 const userRouter = require("../routes/user.routes");
+const badgeRouter = require("../routes/badge.routes");
 const authRouter = require("../routes/auth.router");
 
 router.use("/user", userRouter);
+router.use("/badge", badgeRouter);
 router.use("/auth", authRouter);
 
 module.exports = router;

myboya-project/src/components/Cuenta/Cuenta.css

@@ -1,9 +1,13 @@
 .fondoCuenta{
-padding: 50px 260px;
+display: flex;
+flex-direction: column;
+align-items: center;
+gap: 1rem;
 }
 
 .containerCuenta{
 display: flex;
+justify-content: center;
 gap: 30px;
 }
 
@@ -35,6 +39,7 @@ width: 200px;
 .circulosColoresIcono{
 display: flex;
 flex-direction: row;
+justify-content: center;
 gap: 8px;
 }
 
@@ -110,17 +115,27 @@ line-height: 15px;
 .containerPuntos{
 background-color: #005cb2;
 border-radius: 50px;
-padding: 40px;
+padding: 60px;
 align-items: center;
 }
 
 .img-puntaje{
-width: 60px;
+width: 70px;
+}
+
+.puntajePerfil{
+display: flex;
+flex-direction: row;
+}
+
+.contenedorpuntajeAcumulado{
+padding-left: 20px;
+padding-top: 15px;
 }
 
 .puntajeAcumulado{
 font-size: 22px;
-line-height: 30px;
+line-height: 20px;
 }
 
 .insigniasPerfil{
@@ -132,12 +147,14 @@ flex-direction: row;
 display: flex;
 flex-direction: column;
 align-items: center;
+padding-right: 10px;
 }
 
 .misInsignias{
 font-size: 22px;
 line-height: 30px;
-padding-top: 50px;
+padding-top: 65px;
+padding-bottom: 30px;
 }
 
 .cantidadPuntajeAcumulado, .tituloInsignia{
@@ -157,7 +174,14 @@ color: #03E2CC;
 line-height: 25px;
 }
 
+.puntosFaltantesInsignia{
+font-size: 18px;
+color: #FF8C00;
+line-height: 15px;
+}
+
 .btn-volver{
+display: flex;
 background-color: #005cb2;
 color: white;
 font-family: 'NATS';
@@ -167,5 +191,5 @@ text-align: center;
 border: none;
 border-radius: 50px;
 cursor: pointer;
-margin: 30px;
+justify-content: center;
 }

myboya-project/src/components/Cuenta/Cuenta.jsx

@@ -14,6 +14,7 @@ function Cuenta() {
   const navigate = useNavigate();
   const jugarQuiz = () => navigate("/playground");
 
+  /* Personalizar color ícono */
   const [color, setColor] = useState("#80BACC");
 
   const cambiarColor1 = () => {
@@ -45,6 +46,7 @@ function Cuenta() {
     const nuevoColor = "#E3CE12";
     setColor(nuevoColor);
   };
+  /* fin Personalizar color ícono */
 
   return (
     <div className="fondoCuenta">
@@ -75,26 +77,30 @@ function Cuenta() {
               <p className="cantidadPuntajeAcumulado">
                 {userData?.score ?? 0} Puntos
               </p>
+
             </div>
           </div>
           <h2 className="misInsignias">MIS INSIGNIAS</h2>
           <div className="insigniasPerfil">
             <div className="contenedor-insignia">
               <img src={insignia1} className="img-insignia"></img>
               <p className="tituloInsignia">Aprendiz</p>
-              {/*               <p>Consigue 50 puntos</p> */}
+              <p className="puntosFaltantesInsignia">Consigue 50 puntos</p>
             </div>
             <div className="contenedor-insignia">
               <img src={insignia2} className="img-insignia"></img>
               <p className="tituloInsignia">Principiante</p>
+              <p className="puntosFaltantesInsignia">Consigue 300 puntos</p>
             </div>
             <div className="contenedor-insignia">
               <img src={insignia3} className="img-insignia"></img>
               <p className="tituloInsignia">Intermedio</p>
+              <p className="puntosFaltantesInsignia">Consigue 1000 puntos</p>
             </div>
             <div className="contenedor-insignia">
               <img src={insignia4} className="img-insignia"></img>
               <p className="tituloInsignia">Avanzado</p>
+              <p className="puntosFaltantesInsignia">Consigue 1500 puntos</p>
             </div>
           </div>
         </div>

myboya-project/src/components/InicioQuiz/InicioQuiz.css

@@ -134,7 +134,9 @@ body {
   border: none;
   min-width: 17rem;
   padding-left: 1em;
+  font-size: 23px;
 }
+
 .ranking-insigniaa {
   color: white;
   display: flex;
@@ -146,6 +148,10 @@ body {
   border: none;
   min-width: 17rem;
   padding-left: 1em;
+  font-size: 23px;
+  line-height: 22px;
+  text-align: left;
+  cursor: pointer;
 }
 
 .datocurioso-contenedor {

myboya-project/src/components/Noticias/Noticias.css

@@ -1,17 +1,40 @@
-#contenedorNoticias > img{
+#contenedorNoticias > a {
+
     border-radius: 8px;
     width: 100%;
+    max-width: 350px;
     height: auto;
     box-shadow: 0px 0px 30px #000;
 }
 
 #contenedorNoticias {
+    padding: 40px 100px;
     display: grid;
     grid-template-columns: 
     repeat(
-        auto-fit,
+        4,
         minmax(150px, 1fr)  
     );
-    gap: 32px;
-
+    gap: 32px;  
+}
+
+@media (max-width: 768px){
+    #contenedorNoticias {
+        grid-template-columns: 
+        repeat(
+            3,
+            minmax(150px, 1fr)  
+            );
+    }
+}
+
+@media (max-width: 390px) {
+    #contenedorNoticias {
+        grid-template-columns: 
+        repeat(
+            2,
+            minmax(150px, 1fr)  
+            );
+        padding: 40px 20px;
+    };
 }

myboya-project/src/components/Noticias/Noticias.jsx

@@ -27,7 +27,6 @@ const Noticias = () => {
             <a href="https://www.greenpeace.org/international/publication/28181/turtles-under-threat/">
             <img src="https://www.greenpeace.org/static/planet4-international-stateless/2020/01/5fd7335d-screen-shot-2020-01-14-at-13.43.45.png" alt="turtles under threat greenpeace imagen" />
             </a>
-
         </div>
 );
 }