@Cheosphere
Wagner Morais
@wagnnermoraisAll comments
- @wagnnermorais
i'd add a transition when a question get open, besides that, nice job.
- @sandeepwebsite@wagnnermorais
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. :)
- @Cheosphere@wagnnermorais
pixel perfect, lovely.
- @itsale-o@wagnnermorais
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 -
- @wagnnermorais@wagnnermorais
ive realized i forgot the menu dropdown on the desktop design, ill implement later on
- @sidarth-23@wagnnermorais
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.
- @RangCloud@wagnnermorais
you can create a div for your span and p tag in the pricing, then insert a display flex/align items center and it will align both of them.
justify content: space between should work, depending on your container width, if it doesnt, you can put some gap as well.
Marked as helpful - @PradneyaSP@wagnnermorais
good job, nice animation on inputs fields btw.
i suggest you take a better look in the validation itself, i tried to register the following user and it passed:
first name: w last name: m email: was@123 password: 1
implementing some minimum lengths in each input should work, and about the email input, would be nice to validate with an email regex, theres a lot content in the web about patterns of email validations.
Marked as helpful
