Skip to content
OverviewSolutions
27
Comments
34
Denis
@Mod8124

All comments

  • Denis•1,060
    @Mod8124Posted over 1 year ago

    👋 Hi there, good job!

    You don't need the starter-code's HTML files just the assets so instead of calling the started-code every time on the nav just call the HTML in the root

    <a href="/starter-code/index.html"><span class="num">00</span> HOME </a>(bad)

    <a href="index.html"><span class="num">00</span> HOME </a>(good)

    Respect for the links you have many options I'm going to give you want one

    // Create a function to read the current URL of the browser and save nav links in a variable

    const const links = document.querySelectorAll('.menu a');

const getCurrentRoute = () => {
const currentURL = window.location.href; // Get the current URL
const route = currentURL.substring(currentURL.lastIndexOf("/") + 1); // Extract the route 
from the URL
      
return route;
}

    // Create a function to add style to your link. You can also add a class to your links by the way you don't have to remove it because every time you click a link reload the page so also remove the class or style within it

    const addStyle = (element) => {
element.style.color = 'white';
element.style.borderBottom = '2px solid white'
element.style.height = '100%'
element.style.lineHeight = '7'
}

    // Add the function to your links

    links.forEach((link, index) => {
const routes = ['index', 'destination', 'crew', 'technology'];
const currentRoute = getCurrentRoute();

if (currentRoute.includes(routes[index])) addStyle(link);
});

    Also for the background(blur) don't worry you have to do it manually in the js because the blur is accordingly to the background color :) also if you don't want to repeat too much your CSS code you can use a CSS methodology called it BEM

    🤟 I hope it helps you, Good coding

    0
  • Denis•1,060
    @Mod8124Posted over 1 year ago

    👌 Good job

    I like it pretty much, if you try to go into full-stack app, try to implement an auth system it's weird that every user shares the same tasks. Because I can edit, and delete your task, and add tasks to your feed.

    Also, try to do not to use the same button overall you can do a component for that because they share the same logic you can do only one, then pass the thing that changes as props

    // they're the same
<button
onClick={() => setActionsChosen("all")}
style={{ color: (actionsChosen === "all") ? "var(--bright-blue)" : "" }}
>All</button>

<button
onClick={() => setActionsChosen("active")}
style={{ color: (actionsChosen === "active") ? "var(--bright-blue)" : "" }}
>Active</button>

<button
onClick={() => setActionsChosen("completed")}
style={{ color: (actionsChosen === "completed") ? "var(--bright-blue)" : "" }}
>Completed</button>

    // just one button component 
const Button = ({text, actionsChosen}) => {
return <button  onClick={() => setActionsChosen(text)}
style={{ color: (actionsChosen === text) ? "var(--bright-blue)" : "" }}
>{text}</button>
}

    also, you don't need that many useState and useEffect for the app, you can use only one for the task and another filter to apply then you can just update the filter and show it to the user

    const [tasks, setTasks] = useState([]) // all task
const [filter, setFilter] = useState('All'); // filter to apply

const filters = { // object that return the task with filter
All: (tasks) => tasks,
Active: (tasks) => tasks.filter((task) => !task.completed),
completed: (tasks) => tasks.filter((task) => task.completed),
};

const filteredTasks = filters[filter](tasks); 

const changeFilter = (value) => {
setFilter(value);
};

// then just render the filterTask and update by the changeFilter
{filteredTasks &&
filteredTasks.map((task, index) => <CardTodo key={index} task={task} index={index} />)}

    and finally try to avoid using the useEffect for fetching data is making double requests to the server you can this video about it react-18

    🤟 I hope it helps you, Good coding

    0
  • Denis•1,060
    @Mod8124Posted over 1 year ago

    👋Hola bien hecho!

    Revisalo no es responsive para movil, y en pantallas grandes esta inclinado a la izquierda, y no esta aligneado en el centro esto pasa porque estas usando rem, el body siempre tiene que cubrir el total de la pantalla ya que es el principal

    body {
width:100%;
height:100vh;
}

    tambien en tus css siempre empieza por mobile y terminas en desktop es mejor para confimar que tu web es responsive en los medias queries es mala practica volver a poner todas las propiedas de nuevo solo pon las que van a cambiar, tambien siempre usa px en los media queries para identificar mas rapido el dispositivo(mobile,table,etc)

    body { // body en mobile
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
background-color: hsl(204, 43%, 93%);
font-size: 1.25rem;
}
@media screen and (min-width:600px) {
.body { // solo escribe la propiedad que cambia
font-size: 1.4rem;
}
}

    🤟Espero te ayude, Buen codigo.

    Marked as helpful
    0
  • Denis•1,060
    @Mod8124Posted over 1 year ago

    10/10

    Marked as helpful
    1
  • Mateusz Filipiak•400
    @Kaipi01Submitted about 2 years ago

    Hello, I just finished a challenge and therefore have a few questions. I would be very grateful if you would just give me an answer.

    Is my code clear and legible? Are semmatics and HTML tags correct? Are there very bad code practices? Have you noticed any mistakes I haven’t seen? What could be changed to make the code run faster? Do I download the API data correctly?

    Mobile-first solution using Sass,Flexbox and Parcel

    1
    Denis•1,060
    @Mod8124Posted about 2 years ago

    Hello Well done!

    Your code is hard to read, first, always put all your variables on the top of the file especially if you use const to avoid hoisted also if you async and await always use try and catch what would happen if the API failed your app too so you need to handle that.

    Also, it's kinda confusing what is this

        capital = [],
    languages = [],
    currencies = [],
    tld = [],
    borders = [];

    And the first look Idk what are these variables, it's better to implement if you use this

    const country = {
     capital = [],
    languages = [],
    currencies = [],
    tld = [],
    borders = [];
}

    Now I Know all these variables are about the country, if you want to see more good practices and legible code you can see clean-code-javascript

    I hope it helps you, Good coding 🤟

    Marked as helpful
    1
  • Ayoife•300
    @AyoifeSubmitted about 2 years ago

    This challenge went well. I learnt to stop using divs for everything in my html as advised by @Lucas and the other Frontend Mentors and I also learnt some CSS tricks as well. But there's one thing I didn't do.....The README.md file in the project folder stated (as a BONUS) to complete the challenge without JavaScript and I didn't know how to ensure that only one question remains open in the card without it, so if you do know how to do it without JavaScript, please leave it in your feedback. Thanks for viewing my solution and have a wonderful day! :)

    FAQ Accordion Card using CSS Flexbox

    1
    Denis•1,060
    @Mod8124Posted about 2 years ago

    Hello well done!

    Without js you can use details here you can see the documentation

    And change the icon(example)

    details > summary {
    list-style-type: '▶️';
}

details[open] > summary {
    list-style-type: '🔽';
}

    and that's all i hope it helps u 👌

    1
  • Denis•1,060
    @Mod8124Posted about 2 years ago

    Hello Well done!

    it's because you have to check if the value of the input is empty

    if (inputText.value.length > 1) not if (inputText !== null) here is checking if the variable inputText exits and has a different value of null, and not inputText's value

    I hope it helps you, Good coding 🤟

    Marked as helpful
    0
  • Muhammad Naufal Farras•270
    @naufalf25Submitted about 2 years ago

    Finally after doing some repairs and some errors that occurred during the making of this project. In the end this project can be completed. There is a note that I need to fix and ask for advice from you guys, how to make a space after 4 numbers are entered in the input number in the form?

    I would really appreciate any suggestions, thank you 🙌

    Interactive Card Detail Form using TailwindCSS3 Framework

    2
    Denis•1,060
    @Mod8124Posted about 2 years ago

    Hello Well done!

    Mmm, I think there are many ways to do that I'm going to show two ways, you choose whatever you want it.

    Html(example)

     <input type="text" name="card" id="inputCard">
    • First way
    //First, select the input a saved it in a variable
const inputCard = document.querySelector('#inputCard')

//Then create a function that watches the input value
const handleSpace = event => {
    if (event.target.value.length === 4 || 
        event.target.value.length === 9 ||
        event.target.value.length === 14) {
                event.target.value += ' '
            } 
 }
// It's simple if the value.length === 4 || value.length === 9 (every four number), the function add space to input value 

//Add event `input` to the input (this is an event that sees every change of the input)
 inputCard.addEventListener('input', handleSpace)
    • Second way
    //First, select the input a saved it in a variable
const inputCard = document.querySelector('#inputCard')

// Create a variable count, start from zero and add one until 4, if the count is equal to zero, the function adds space to the input value 

 let count = 0;

//Create a function that sees if count === 4, if equal add space and restart the count to zero
   const handleSpace = (event) => {
        if (count === 4) {
            event.target.value += ' ';
            count = 0;
        }
        count +=1 
       }  

//Add event `input` to the input (this is an event that sees every change of the input)
 `inputCard.addEventListener('input', handleSpace)`

    I hope it helps you, Good coding 🙌

    1
  • Seb Arz•90
    @websebarzSubmitted about 2 years ago

    Hello coders, as a React beginner I didn't managed to handle the email validation and then displaying the error icon and message on render. Should I use hooks for this or with the form itself is enough? I'm still not quite sure how to manage forms in general, any suggestions would be highly appreciated.

    Base Apparel coming soon page built with Vite+React+Tailwindcss

    1
    Denis•1,060
    @Mod8124Posted about 2 years ago

    Hola Buen trabajo!,

    Para este challange es cuando el usuario hace submit, ademas al hacer un message custom hay que hacerlo manual el require del input te verifica cuando lo envias al server directamente pero eso usualmente solo se utiliza en php, en front se utiliza fetch, axios, HttpClient para enviar data al server siempre que algo sea dinamico hay que usar hooks

      const message = ''Please a provide a valid email"
  const [isInvalid, setInvalid] = useState(false);
   const isEmail = ^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$;

   const handleSubmit = (event) => {
   event.preventDefault();

    const { name } = event.target;

    if (name.value.match(isEmail)) {
    event.reset()
   isInvalid(false)
  } else {
   isInvalid(true)
 }
 }
}

    En your jsx agregas condicionales si es isInvalid por ejemplo y agregas el event onSubmit a tu form

       <form onSubmit={handleSubmit}>
     <div>
     <input type="text" name="name" class={isUnvalid ? 'isUnvalid':'isValid'}/>
     // si es invalid el input se activa la clases isUnvalid sino is valid 

     {isUnvalid && <img src=".src/img/icon-fail.svg">}
      // se el icon de fail si es invalid 
    </div>

    {isUnvalid && <p>{message}</p>}
    // se muestra el mensage
  </form>

    En resume el require en el input es una validacion del html, si quiero mensajes distintos hay que hacerlos manual

    Espero te ayude, Good Coding...

    Marked as helpful
    0
  • Denis•1,060
    @Mod8124Posted about 2 years ago

    Hola buen trabajo!

    El margin y el padding no te preocupes es pura practica práctica, puedes usar los figma s pero ya q no cuentas con estos puedes usar pixel perfect y puedes practicar de manera directa en css battle es mas facil por q ves los resultados de una xd

    Usaste muchas clases pero no te preocupes hay una metodología(escribir de manera eficiente el css) de css que hace lo mismo llamada bem pudiste haber ahorrado un montón de código usándola ya que usaste mucha clases que solo cambian una cosa por ejemplo

    Tu css

    
.card__supervisor {
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--cyan);
    border-radius: 7px;
    box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}

. card__team {
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--red);
    border-radius: 7px;
    box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}

.card__karma {
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--orange);
    border-radius: 7px;
    box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}

    Con bem

    .card {
display: flex;
    flex-direction: column;
    border-top: 4px solid var(--orange);
    border-radius: 7px;
} 
.card--supervisor {
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
} 
.card--team {
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
} 
.card--karma {
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}

    ves es mas fácil de aplicar y ahorras un montón de código css, solo crea una clase con los valores por defecto y otra con modificaciones. En el html:

    <div class="card card--supervisor" ></div>
<div class="card card--team" ></div>
<div class="card card--karma" ></div>

    Ahora cada div tiene los mismo estilos pero cambia el shadow

    Espero te sirva, good coding 👌

    Marked as helpful
    0
  • Denis•1,060
    @Mod8124Posted about 2 years ago

    Hola buen trabajo!

    Trata siempre de poner todas tu variables en el top del archivo de js en especial si usas const o let ya q no cuenta con hoisted, intenta siempre de seguir una convención por ejemplo todas las variables en el top, en el medio funciones y en la parte de abajo las llamadas de funciones y eventos de esta manera hace que tu código sea más legible para otros y para ti

    Te puedes ahorrar mucho código si seleccionas todos los botones de una Const btns = document.queryselectorAll('.card__content--li')

    Después nadamas le asignas el evento btnGris con el método forEach simpre trata de evitar el for ya q no te asegura que sea inmutable y de una aplicas programación funcional :)

    btns.forEach(btb => btn.addEventListener('click',btnGris)

    Espero te sirva y good coding 👍

    Marked as helpful
    1
  • Denis•1,060
    @Mod8124Posted about 2 years ago

    Hola buen trabajo!

    Usualmente si usas css modules o javascript modules en vanilla, tienes que implementar un empaquetador como webpack o vite si no lo haces haces muchas peticiones http la cual afecta al performance y cache del sitio y también te ayuda a minificar el código

    Para q lo tengas en cuenta en tu siguiente proyecto :)

    Marked as helpful
    1