@rikku08
Juan Camilo Botero
@jcboteroAll comments
- @jcbotero
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 helpful - @nade12209@jcbotero
Hi 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!
- @Federico-Salerno@jcbotero
Hello 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 helpful - @DavidRM077@jcbotero
Hola 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!!
- @rlboogey@jcbotero
Hi 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!
- @mehalimes@jcbotero
Hi 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 helpful - @mickislim@jcbotero
Hi 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!
- @Abraham-s-yakubu@jcbotero
Hi 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 helpful - @OsatohanmwenT@jcbotero
Hi 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 helpful - @sanju321GH@jcbotero
Hello 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!
- @kohtet0@jcbotero
Hi 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 helpful - @avinno@jcbotero
Hello 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 helpful - @ayindesadiq01@jcbotero
Hi Ayinde, Nice code!!. 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(); });
If you think this helped you, please mark the comment as helpful. Thank you!
- @y0g3shpf@jcbotero
Hi Yogesh!. 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 helpful - @ks5ks@jcbotero
Hi Kimball, nice code!. The only thing I could add to you is that perhaps the size of your design was somewhat small. You can fix this in your css sheet, with the body selector. something like that:
body { width: 100vw; }
If you need different sizes, you can do it with media-queries.
If you think this helped you, please mark the comment as helpful. Thank you!
- @Have-Samuel@jcbotero
Hi, Nice code!!. To add, I think you forgot to put the error message when filling out the form, for example, when you enter a text that does not correspond to the email, a message that says "Looks like this is not an email" should appear, with its respective error icon.
You can do this by placing a div in your html sheet that is only displayed when the error is fired. Something like that:
<input oninvalid="mis()" required> <div class="error" style="display:none;" id="er2" > <img src="images/icon-error.svg" alt="icon"> <div id="show" > Last Name cannot be empty</div> message--> </div>the oninvalid of the input connects to a formula in your javascript sheet, which displays the div below when it doesn't fill properly. DOM management.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful - @Biglad22@jcbotero
Hi Emmanuel , nice code!. I think you forgot to include the continue button color change as the layout suggests. You can do this easily, just by hovering the button selector. Thus: button:hover { cursor: pointer; background image: linear gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }
If you think this helped you, please mark the comment as helpful. Thank you!
- @Fran3103@jcbotero
Hola Franco. Buen código. si no te importa, lo único que tendría para agregar es que creo que olvidaste cortar la imagen que se sale un poco del div con fondo blanco. Esto lo puedes hacer así en css:
div que contiene la imagen { overflow: hidden }
Si crees que esto te ayudó, marca el comentario como útil. ¡Gracias!
Marked as helpful
