@rikku08Submitted 9 months ago
How can you overlay the accent color on the image? My problem is that the image is not showing when view it on mobile view.
Juan Camilo Botero
@jcboteroAll comments
- @jcboteroPosted 9 months ago
Hi rikku08!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:
.img { mix-blend-mode: multiply; opacity: 0.8; }
In this way, the image achieves the violet color that the challenge asks us for.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful0 - @nade12209Submitted 9 months ago
Please, give me some suggestions!
@jcboteroPosted 9 months agoHi nade12209!!. I think you did a great job with the organization and internal design of the challenge. What I could add is that your container or main div is not well centered, it is quite shifted to the right.
This error is caused by:
.okvir{ margin-left: 500px; } .lijepo{ width: 1440px; }
The values are too large, which makes the layout shift to the left. It would be good not to put values in px since it is not very responsive, you could better put %. In the case of the width of the main container, it may be better to use 100vw. It is more flexible and responsive.
If you think this helped you, please mark the comment as helpful. Thank you!
0 - @Federico-SalernoSubmitted 9 months ago
I created the accordion menu by adding and removing the 'active' class using classList methods like classList.remove or classList.add. Also use classList.toggle to make the 'active' class dynamic. This accordion menu can be made directly from HTML using the
<details>and<summary>tags that allow the text within<summary>to be displayed:details> <summary>How many team members can I invite?</summary> <p>You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p> </details>@jcboteroPosted 9 months agoHello Federico. Good code. If you don't mind, the only thing I would have to add is that I think you forgot to cut the image that comes out of the div with a white background. You can do this like this in css:
div containing the image { overflow: hidden }
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful0 - @DavidRM077Submitted 9 months ago
¿Qué fue lo que te resultó más difícil a la hora de construir el proyecto?
estaba utilizando align-items:center; en el Estilo.css y no me centraba verticalmente el componente, luego me di cuenta que el contenedor tenia que tener altura definida para poder moverlo.
¿De qué áreas de tu código no estás seguro? el estilo en los texto
¿Tiene alguna pregunta sobre las mejores prácticas?
si , sobre mover elementos, probablemente existan mejores practicas para hacerlo
@jcboteroPosted 9 months agoHola David. Muy bien resuelto el challenge. Sobre posicionar/mover elementos, quizás lo que más me guste es usar el Flex-Box. No sé si lo usaste porque está caído el link de tu repositorio, pero sería algo así :
A tu contenedor principal, le pones = display: flex ; Justifiy-content : center
La segunda propiedad te da muchas más opciones, puede ser space-between si quieres que se separen a los largo del contener, o space-around para separarlos copando mejor los espacios, entre otras. También puedes organizar todo lo que está dentro del contenedor principal en formal de columna o filas. Es una gran herramienta para explorar
Es si, tengo cuidado en no usar mucho el margin para posicionar elementos. Es mejor usar en el width : vw, o sino el rem. Son más responsive y se adaptan mejor a diferentes tamaños de pantallas.
Espero te haya sido algo útil
Saludos!!
1 - @rlboogeySubmitted 9 months ago
Please provide feedback
@jcboteroPosted 9 months agoHi rlboogey!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:
.img { mix-blend-mode: multiply; opacity: 0.8; }
In this way, the image achieves the violet color that the challenge asks us for.
If you think this helped you, please mark the comment as helpful. Thank you!
0 - @mehalimesSubmitted 10 months ago
I am open for every comment.
@jcboteroPosted 10 months agoHi Mehmet!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:
.img { mix-blend-mode: multiply; opacity: 0.8; }
In this way, the image achieves the violet color that the challenge asks us for.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful1 - @mickislimSubmitted 12 months ago
this is my first individual project , i decided not to use context Api and passed props down. It was challenging trying to make Error Alert display properly based on the actions performed , i used different approach for days before getting it to work properly
@jcboteroPosted 11 months agoHi mickislim!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to include a couple of things :
1.The credit card number field is not separating every 4 digits To add space every 4 digits, in your javascript sheet you can add an eventlistener that takes the id of that input, and through the .replace() method, give an instruction to place a space every 4 digits. This way:
document.getElementById("cardnumber").addEventListener('input', function (e) { e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); });
2.The image of the credit card is not reflecting the values entered in the fields. For this, you can use javascritp to send the value from one field to the other:
document.getElementById("inputFilled").innerText = document.getElementById("imgInput").value;
This within a function, or within an eventlistener.
If you think this helped you, please mark the comment as helpful. Thank you!
0 - @Abraham-s-yakubuSubmitted 12 months ago
this took me a while ngl and the mobile view is not that good but I am learning a lot
@jcboteroPosted 11 months agoHi Abraham-s-yakubu!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to include a couple of things :
1.The credit card number field is not separating every 4 digits. To add space every 4 digits, in your javascript sheet you can add an eventlistener that takes the id of that input, and through the .replace() method, give an instruction to place a space every 4 digits. This way:
document.getElementById("cardnumber").addEventListener('input', function (e) { e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); });
2.The image of the credit card is not reflecting the values entered in the fields. For this, you can use javascritp to send the value from one field to the other:
document.getElementById("inputFilled").innerText = document.getElementById("imgInput").value;
This within a function, or within an eventlistener.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful0 - @OsatohanmwenTSubmitted 12 months ago
-Please give me feedback on my work
@jcboteroPosted 11 months agoHi OsatohanmwenT!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:
.img { mix-blend-mode: multiply; opacity: 0.8; }
In this way, the image achieves the violet color that the challenge asks us for.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful0 - @sanju321GHSubmitted about 1 year ago
every time what i saw in common is the screen shots don't look like the app i made, so if u r seeing just click preview site i t shows what is really done
@jcboteroPosted about 1 year agoHello Sanju, nice code. The only suggestion I could make if you don't mind is that the graphics are not well centered for large screens. Maybe you did it only for the main design that they asked you for, but to make it more responsive, you could use something like this in the main tag (main or body):
.body { width: 100vw }
For smaller screens, you can use media queries.
If you think this helped you, please mark the comment as helpful. Thank you!
0 - @kohtet0Submitted about 1 year ago
Thank for view. edit ... I edit image foreground color thank you @jcbotero
@jcboteroPosted about 1 year agoHi Thwin!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:
.img { mix-blend-mode: multiply; opacity: 0.8; }
In this way, the image achieves the violet color that the challenge asks us for.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful0 - @avinnoSubmitted about 1 year ago
- So, I have not used JS with regard to window size due to normally being able to do this with CSS, but with this project, I felt it was necessary to meet the goals of the challenge. After the fact, I do believe I could have used flexbox with "order" CSS property or grid with similar to reconfigure where the error message showed up, but I continued on with JS and adding second mobile error message element to hide/show depending on the width of the screen. There are always multiple ways of tackling a project and elements of a project and I may do it differently in the future, but I was okay with testing my JS skills here even if some may say it was doable with CSS.
- Besides the above, I am sure of my code most everywhere else. No major/catastrophic concerns.
- No questions at this time!
@jcboteroPosted about 1 year agoHello Aaron, excellent code. Perhaps the only thing I could suggest is that your input field is accepting values that are not email type. A possible solution is to place the following in that input:
type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}"
Also, you can add an oninvalid=" " function, if you want to customize the error message.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful0
