Skip to content
OverviewSolutions
9
Comments
8

Wagner Morais

@wagnnermoraisPorto Alegre230 points

just a front end developer that loves vue js, typescript e modern designs.

I’m currently learning...

Javascript | Typescript | Vue.JS | ReactJS

Latest solutions

View more solutions

Latest comments

  • Wagner Morais•230
    @wagnnermoraisPosted over 1 year ago

    i'd add a transition when a question get open, besides that, nice job.

    1
  • Wagner Morais•230
    @wagnnermoraisPosted over 1 year ago

    hey, sandeep, how u doing?

    to use the json file, first of all, you need to create a javascript file, then, you must link it in the bottom of your html file, right above your closing body tag </body> (best practices), using the script tag, it would be something like script type="module" src="./script.js"

    then, in you js file, you must link the data file, a simple import should work, now, back to html, in your "container-col" div, add an id attribute to it, id="container" for instance.

    in the js again, "get" the container element using any built in function that js provides, a simple get element by id will work.

    after that, its time to iterate through the data file using a callback fn. using a forEach, you will use the createElement fn to use the data from data json.

    then, after creating all elements, you will just append it to the parent element, and thats pretty much it!

    heres the code:

    import data from "./data.json" assert { type: "json" };

    const container = document.getElementById("container");

    data.forEach((item) => {

    const div = document.createElement("div");

    div.classList.add("summary-result-box");

    const logo = document.createElement("img");

    logo.setAttribute("src", item.icon);

    const category = document.createElement("p");

    category.innerText = item.category;

    const score = document.createElement("p");

    score.innerText = item.score;

    div.appendChild(logo);

    div.appendChild(category);

    div.appendChild(score);

    container.appendChild(div); });

    ive made a better comment before, explaining line by line, but front-end mentor simply deleted it... but i hope you can understand that way. :)

    0
  • Wagner Morais•230
    @wagnnermoraisPosted over 1 year ago

    pixel perfect, lovely.

    1
  • Wagner Morais•230
    @wagnnermoraisPosted over 1 year ago

    Alessandra, sobre o design, acredito que seria ideal tentar replicar mais próximo ao que foi sugerido. Em questão de tamanhos, espaçamentos e posições de conteúdos na tela.

    Sobre as validações, uma sugestão, seria fazer mais que simplesmente se o campo foi preenchido ou não, mas sim verificar se é algo "valido", por exemplo, se eu tentar cadastrar o seguinte usuário:

    name: w last name: m email: a@t password: 1

    teu programa não retorna nada me impedindo, a propósito, não retorna absolutamente nada, outra sugestão que posso te dar, retornar alguma mensagem qualquer informando o usuário em caso de sucesso, já que, em caso de erro, o próprio input informa com os erros inseridos por dom.

    no mais, acredito que seja isso:

    • trabalhar um pouco mais no css para deixar o design mais próximo do que é sugerido.

    • estabelecer regras minimas de caracteres no input (quando eu fiz esse projeto, usei a propriedade length mesmo, mas hoje com o aprendizado que adquiri ultimamente, usaria regex para todos os inputs, talvez seja um caminho para tu seguir).

    • nas condicionais, não há necessidade de criar if/else para cada verificação, pode criar condicionais só para os erros e no final retornar a função como um boolean para ai sim, quando tu for fazer o submit no formulário, tu criar uma condicional que verifica se a função de verificação é true/false e, com base nisso, tu criar a lógica que tu quer.

    • retornar alguma mensagem de sucesso informando o usuário quando o cadastrado atende as regras.

    Marked as helpful
    0
  • Wagner Morais•230
    @wagnnermoraisPosted over 1 year ago

    ive realized i forgot the menu dropdown on the desktop design, ill implement later on

    1
  • Wagner Morais•230
    @wagnnermoraisPosted over 1 year ago

    i suggest more effort in your styling, it barely matches the design and its not responsive in the specific width that the style guide brings.

    also, limiting the max content an input could have would be great, i mean, i can insert infinite numbers in the card number input, ok, will throw an error (which is wrong btw, the error says "Invalid Name"), but prevent that to happen would be better than informing that it shouldnt be like this.

    0
View more comments