Hello, Frontend Mentor coding community. This is my solution for the Advice Generator App.
It was a fun project to do as a first project to test the platform. I simply have a minor issue with the API, which does not refresh the advise presented when making a new request for some reason. Apart than that, everything went smoothly, and I'm eager to take on new challenges in order to become a better developer.
Feel free to leave a feedback on my work.
Congratulations completing your challenge Urban
if you want to show the advice when the pages load you can do that ,adding a event listener
btnAdvice.addEventListener('click',() =>{
getAdvice();
}
)
window.onload = () =>{
getAdvice();
}
also i like the desing and how you work with css variables, that makes changing colors a lot easier, if you want the card to be center you can use flexbox in the body, something like this
body{
background-color: var(--neutral-dark-blue);
display:flex;
justify-content:center;
aling-items:center;
min-height:100vh;
}
also it is better to work with classes cause we can reuse the code , id´s can get pretty heavy to work with , overall the project it is really good, hope to see more of your work and also see more of your projects , Keep going 😃👍
This was my first API call. I don't have any specific questions, but I would love it if you reviewed my code and provided any feedback on ways I might improve the next project. Thank you so much. Cheers!
Congratulations completing your first challenge with an API
The result it is really good, the async function works pretty well and the desing it is responsive also i like that you use Sass, and also make each part of the function wait to get the response,
If there is something that i would point out, would be the lack of a background shadow, and maybe , that you don't put your js in a folder, but those are minor details ,
Overall the desing and funcionability of your app it is amazing, keep the good work Hope to some more of your publications
Hola, cualquier comentario es valido. Este ejercicio fue realizado con visual estudio core. Vamos Mejorando
Felicitaciones en terminar tu desafio de codigo
Me parece que la estructura esta bastante bien, en cuanto al resultado final, esta bien logrado, si tuviera que mejorar algo seria tal vez el usar flex en el body para arreglar algunas lineas de codigo, algo asi:
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
en cuanto a las unidades que utilizaste diría que se usaran *rem * durante todo el proyecto, para hacer las cosas mas sencillas
en general el resultado final es muy bueno espero que puedas seguir adelante y mejorar quiero ver mas de tu trabajo , sigue aprendiendo además de compartiendo 😃😃😃
i had difficulty aligning the paragraph tag, i had to use the <br>, so how do you align the paragraph tag without using the break tag tag
Congratulations in completing your challenge Benedicta
Somehting that you can try it is to use your body for aling your card ,that would make you reduce the mayority of the css code and simplify your code,
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
also something that you cand do, it is to use the padding to make the text wrap, usually we use padding or maring to make the text wrap or create spaces
there is a video in which Kevin Powell talks about that topic, or you coul also see this sort video
hope to se more of your work and good luck in your journey 😃
...
What challenges did you encounter, and how did you overcome them?...
What specific areas of your project would you like help with?...
Congratulations completing your challenge
the result it is really good,
something that you could do to improve the desing is work with rem units, instead of px units, we want to work with relative units (rem) to make the desing responsive,
also you could use flex or grid to make the card responsive, you could try this code in the body
body{ display:flex; justify-content:center; aling-items:center; min-height:100vh; }
also the way you name your elements it is good, keep learning, hope to see more of your work
How do you go about measuring the dimensions units from the given jpg? I have used ms paint and figured out the sizes in pixels. What are the units recommended?
How to check if design matches pixel perfectly?
Congratulations completing your challenge
About measuring the dimesions of the units, if you want a tool , photophea (it is free) it is a really good option, it works like photoshop but on the browser and there is an option to measure the images, but if you want something more profesional there is Figma
About what measuring units are recommended, we want the desing to be responsive, usually we use rem,em ,vh or vw 1rem=16px Units and measures also if you want to change the measures here is a rem to PX calculator Calculator RemPx
About the last question, I think you should look at your desing and compare it with the web you are building,
keep the good work
I really found it quite difficult to switch from a working completed mobile design to a desktop one; the card container wasn't taking the width of the content even when I removed all the margins and turned all the content into 'inline-block' display just to make them take their exact width. I will really appreciate any help and just forgive me if what I said seemed boring to you. I am a real beginner at CSS but I have the desire to learn. Thank you again for your time :D
Congratulations for completing the challenge, well done
You did a great job, , something that you can do ,it is to use rem units, and have a mobile approach first,(or to work in the general aspects of things like backgrounds ,text and images) also if you want to work a little bit more with css the youtube channel of Kevin Powell it is a great resource,
Keep the good work
i cannot find the way to do the hover image:/
Something you can do mentioned by @Hussain5325 it is to created the effect with a pseudo element(like ::before) or you could also make the effect with a div with the class of overlay , here is a an example about that Overlay icon
also something you can do it is to take the image and make the effect with javascript
