message id doesnt exist

Adalab · Aug 22, 2024 · c1892a5 · c1892a5
1 parent 4dc737e
commit c1892a5
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 44 deletions.
diff --git a/src/components/filters/CharacterFilter.jsx b/src/components/filters/CharacterFilter.jsx
@@ -17,17 +17,14 @@ function CharacterFilter({ searchInput, handleChangeCharacterFilter }) {
     return (
         <>
             <form className='form__input'>
-                <div>
-                    <label className='form__label'>Busca por personaje: </label>
-                    <input className='form__input'
-                        type="text"
-                        name="search" id="search"
-                        value={searchInput}
-                        onChange={handleInputChange} />
-                </div>
+                <label className='form__label'>Busca por personaje: </label>
+                <input className='form__input'
+                    type="text"
+                    name="search" id="search"
+                    value={searchInput}
+                    onChange={handleInputChange} />
             </form>
         </>
-
     );
 }
 CharacterFilter.propTypes = {

diff --git a/src/components/filters/HouseFilter.jsx b/src/components/filters/HouseFilter.jsx
@@ -14,20 +14,18 @@ function HouseFilter({ houseFilter, handleChangeHouse }) {
     return (
         <>
             <form className='form__select'>
-                <div>
-                    <label className='form__label'>Selecciona la casa: </label>
-                    <select className='form__select'
-                        name="house"
-                        id="house"
-                        onChange={handleChangeHouseFilter}
-                        value={houseFilter}>
-                        <option className='filter__house' value="All">All</option>
-                        <option className='filter__house' value="Gryffindor">Gryffindor</option>
-                        <option className='filter__house' value="Slytherin">Slytherin</option>
-                        <option className='filter__house' value="Ravenclaw">Ravenclaw</option>
-                        <option className='filter__house' value="Hufflepuff">Hufflepuff</option>
-                    </select>
-                </div>
+                <label className='form__label'>Selecciona la casa: </label>
+                <select className='form__select'
+                    name="house"
+                    id="house"
+                    onChange={handleChangeHouseFilter}
+                    value={houseFilter}>
+                    <option className='filter__house' value="All">All</option>
+                    <option className='filter__house' value="Gryffindor">Gryffindor</option>
+                    <option className='filter__house' value="Slytherin">Slytherin</option>
+                    <option className='filter__house' value="Ravenclaw">Ravenclaw</option>
+                    <option className='filter__house' value="Hufflepuff">Hufflepuff</option>
+                </select>
             </form>
         </>
     );

diff --git a/src/components/pages/CharacterDetail.jsx b/src/components/pages/CharacterDetail.jsx
@@ -9,29 +9,30 @@ function CharacterDetail({ findCharacter }) {
     const params = useParams();
     const characterToShow = findCharacter(params.id);
 
-    if (characterToShow !== undefined) {
-        localStorage.setItem('character', JSON.stringify(characterToShow));
+    if (characterToShow === undefined) {
+        return (
+            <p className='p__text'>El personaje que buscas no existe</p>
+        )
     }
-    const getCharacter = JSON.parse(localStorage.getItem('character'));
 
     //HTML code
     return (
         <>
             <section className="detail__section">
                 <div className="card__detail">
                     <div >
-                        <img src={getCharacter.image}
+                        <img src={characterToShow.image}
                             className='cardDetail__img'
-                            alt={`Picture of ${getCharacter.name}`}
-                            title={`Picture of ${getCharacter.name}`} />
+                            alt={`Picture of ${characterToShow.name}`}
+                            title={`Picture of ${characterToShow.name}`} />
                     </div>
                     <form className="form__detail">
                         <div>
-                            <p className="cardDetail__description name">{getCharacter.name}</p>
-                            <p className="cardDetail__description ">Estado: {translateStatus(getCharacter.alive)}</p>
-                            <p className="cardDetail__description">Especie: {translateSpecie(getCharacter.species)}</p>
-                            <p className="cardDetail__description">Género: {translateGender(getCharacter.gender)}</p>
-                            <p className="cardDetail__description">Casa: {getCharacter.house}</p>
+                            <p className="cardDetail__description name">{characterToShow.name}</p>
+                            <p className="cardDetail__description ">Estado: {translateStatus(characterToShow.alive)}</p>
+                            <p className="cardDetail__description">Especie: {translateSpecie(characterToShow.species)}</p>
+                            <p className="cardDetail__description">Género: {translateGender(characterToShow.gender)}</p>
+                            <p className="cardDetail__description">Casa: {characterToShow.house}</p>
                         </div>
                     </form>
 

diff --git a/src/components/pages/CharacterList.jsx b/src/components/pages/CharacterList.jsx
@@ -7,7 +7,7 @@ function CharacterList({ characters, searchWord }) {
 
     if (characters.length === 0) {
         return (
-            <p>No hay ningún personaje que coincida con la palabra: {searchWord}</p>
+            <p className='p__text'>No hay ningún personaje que coincida con la palabra: {searchWord}</p>
         )
     }
 

diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -12,3 +12,9 @@
   display: grid;
   align-items: center;
 }
+
+.p__text {
+  color: whitesmoke;
+  margin: 2rem;
+  font-size: 1.5rem;
+}
diff --git a/src/styles/layout/_filters.scss b/src/styles/layout/_filters.scss
@@ -31,7 +31,7 @@
 
 @media (min-width: 600px) {
   .filters__section {
-    flex-direction: row;
+    grid-template-columns: 1fr 1fr;
     gap: 2rem;
   }
 

diff --git a/src/styles/layout/_landing.scss b/src/styles/layout/_landing.scss
@@ -23,7 +23,7 @@
 .cards__ul {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1rem; /* Space between cards */
+  gap: 1rem;
 }
 
 .card__li {
@@ -57,7 +57,7 @@
 
 .card__description {
   font-size: 11px;
-  margin-bottom: 1rem; /* Add space below the description */
+  margin-bottom: 1rem;
 }
 
 .card__img {
@@ -66,13 +66,10 @@
   height: 20rem;
   margin: 0 auto;
 }
-/* Responsive adjustments for smaller screens */
+
 @media (max-width: 660px) {
   .cards__ul {
-    grid-template-columns: repeat(
-      2,
-      1fr
-    ); /* 2 equal columns on small screens */
+    grid-template-columns: repeat(2, 1fr);
   }
   .card__img {
     display: block;
@@ -84,7 +81,7 @@
 
 @media (max-width: 480px) {
   .cards__ul {
-    grid-template-columns: 1fr; /* 1 column on very small screens */
+    grid-template-columns: 1fr;
   }
   .card__img {
     display: block;