...made with a lot of love 🤘🏻🙂
Wagner Morais
@wagnnermoraisAll comments
- @CheosphereSubmitted 12 months ago@wagnnermoraisPosted 12 months ago
i'd add a transition when a question get open, besides that, nice job.
1 - @sandeepwebsiteSubmitted about 1 year ago
I can't use the JSON file. Please help me to know to access data and use data of from JSON file in Javascript.
@wagnnermoraisPosted about 1 year agohey, 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 - @CheosphereSubmitted about 1 year ago
...made with a lot of love 🤘🏻🙂
- @itsale-oSubmitted about 1 year ago
Hello! 👋
This is my solution to the intro component with signup form master challenge. I'm working on my JavaScript skills, I'm getting better, but not very good yet.
All feedbacks are welcome
@wagnnermoraisPosted about 1 year agoAlessandra, 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 helpful0 -
- @wagnnermoraisSubmitted about 1 year ago@wagnnermoraisPosted about 1 year ago
ive realized i forgot the menu dropdown on the desktop design, ill implement later on
1 - @sidarth-23Submitted about 1 year ago@wagnnermoraisPosted about 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 - @RangCloudSubmitted about 1 year ago
After submitting the first solution, I studied about flex and grid. It really helped me a lot. It was difficult to control the span tag and p tag on the bottom right. I adjusted the position by using only margin and padding, is there any other way? Any feedback would be appreciated.
@wagnnermoraisPosted about 1 year agoyou 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 helpful0 - @PradneyaSPSubmitted about 1 year ago
This is a good challenge to start with form validation. My JS is not optimised enough. Any suggestions are welcome.
@wagnnermoraisPosted about 1 year agogood 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 helpful0