I went through alot of stress while coding it. Feel free to check it out and drop comment.
I have a question. How can I change the svg color on hover. I tried allota of things, like hover:fill-yellow, hover:stroke-yellow. They all didn't work. I only manage filter (invert).
Your response is very much welcomed.
Hi Bello Hammed, oneway on how to change the icon fill color dynamically, is to have a css custome variable for the fill color alongside with fallback color:
<path fill="var(--icon-color, #000)"></path>
.icon:hover{
--icon-color:#fff;
}
i recommend to group your svg icons in a sprite.svg file, there are many free online tools to do that.
Toyed with the idea of converting node list of buttons to array. Could not see that there was any major upside to this other than being able to use methods like map. For a single component Javascript's forEach seemed to be fine.
Also, if someone has a good idea how to clean up the nested loop that would be cool.
Hi Adrian, in your project as there will be only one active button at the time you can modify the forEach loop like this:
ratingButtons.forEach((btn) => {
btn.addEventListener("click", (e) => {
selectedRating = btn.textContent;
let activeButton = document.querySelector(".active-button");
if(activeButton) {
activeButton.classList.remove("active-button");
}
btn.classList.add("active-button");
});
});
good luck.
This is my first project after taking a long break from html and css. I'd love some feedback on my approach to the design and anything to clean up my code a bit. Thank you!
Hi CaseyLawver, your solution looks good, some suggetions for your css codes:
html{font-size:62.5%} this will bring the font size of the root element to 62.5% which is 10px, so now just multiply by 10, and from there you can easiely calculate all sizes you want, 1rem now is 10px and so on.hope this will help. Happy coding :)
I did it with bootstrap. And ı used no fixed lengths for not eperiencing a problem in responsive. I will be waiting your suggestion.
Hi Enis Kerti, your solution looks pretty good, my suggestions:
hope this be useful.
I had a good time with this project, but I can't for the life of me get the card centered vertically in desktop. I'd appreciate any pointers! Thank you for taking a look
Hi @bbuglz81,
1- One way to center your card vertically is to throw min-height 100vh on body selector then display grid, place-content center and that's it.
2- In addition to normalize.css, a simple css reset would make working with content much easier: *{box-sizing:border-box; margin:0; padding:0;}, this reset will make sure the content width includes will inculde the padding in the total width calculated by the browser, so you don't have to calculate the content width + padding, and this will reset all the padding and margins to 0.
Feedback is welcome.
Hi @seamissu, my suggestions for your solution:
In your page structure i have noticed you are using section, div element outside of a landmark element, which will make the page difficulte for assestive technologies, wrapping all the main content inside main element would be better.
the social icon does not change the fill color on hover state, one way to change an svg fill color dynamically is to use svg sprites file that holds all the social svg's content then throw css var() in fill property and then in your css codes just specify where the variable should get a new value for example: in your svg fill="var(--fill-color, #fff)" then in css .social-icon:hover{--fill-color:green;}.
In the projects section, the vertical spacing between the projects it's bit too small.
Hello, I would like feedback, if there are something I can improve.
Thanks!
Hi @rafaeldgeo, my suggestions for your solution:
display:block; max-width:100%;Thanks.
This is my third javascript challenge. I'm learning a lot of the logic needed to write code. Any tips on how to write documentation properly, and what is the right way to show a new page within a page? Like in this challenge. Until now, I was generating new HTML in Javascript, is that the best practice?
Hi @Alleared, one way to show dynamic content, use individuale section and throw display none on it, then change the display property using Javascript. Your implementation it's ok for a small proeject like this one, anyway it will soon become overwhelming when the project grows, that's why there are many libraries and tools to help with this like React.
Your feedback is very important to me. It helps me improve my coding style. Thank you!
Hi @reemalnaji, my tips for your solution:
1- In your HTML file try to use semantic HTML elements so it would be more accessible for screen readers, for example: wrapp all your content inside main element.
2- When using svg in HTML, you specify the src link to your svg file directly in img element without using the svg itself in your code.
3- Use global selector on top of your css file to reset some default styling instead of using it on body.
4- Consider using CSS custome properties to define Colors, Typography, Sizes.
5- Try not to use explicit width or height on elements, always stick with the default witch is (auto), or you set the maximum or minimum threshold (max-width, min-width).
Getting used to tailwind!
I'm pretty new to javascript, so this was a fun project to try out!
I had trouble with gradient on hover in tailwind, and resorted to a wonky way of doing it, so please feel free to suggest a better way!
Hi @bacoder1, my suggestion for your solution:
1- for this project i think using Tailwind is a bit overkill, using only CSS would be more than enough (just my opinion).
2- illustration image is not responsive on small screens, try not to use fixed width, instead use max-width with relative units or consider using minmax to dynamically resize element.
3- The breakpoint for smaller screens is 1440px which is way too big, for this project 768px would be good to go.
I attempted using Fetch API to display information from a JSON file to an HTML file. Please let me know if there was a better way of going about it, if I should've structured my CSS file better or what best practices I could've used from semantics to CSS concepts.
Hi @Jen-464, some tips for the solution:
1- For the HTML structure you could use main element and a (blockqoute or article ) inside main, then use divs to wrappe each section and work with them easily.
2- if you are using JS to dynamically display the results, when fetching data make sure you are using asynchronous requests so the operation will wait for the data to be fetched (considering real world examples).
3- use arrow functions when using callback.
4- for your css global reset, instead of specifiying different font property just use font: inherit and you good to go, and maybe you should consider using relative units when dealing with sizes instead of pexels.
5- when selecting elements in css use classes instead of (id)s, try to avoid raising specificity by combining too many selectors, cause it will be hard to debug later when the codes become more complicated.
The method I used for showing the "Thank you" page, was removing all contents internal elements, and creating new ones using JavaScript, and assigning them an already predefined CSS class. I would appreciate any recommendations related to the way of displaying this page. My biggest problem was the design, the final product is not pixel perfect. I would be thankful to receive any improvements, suggested to my CSS in that regard.
Hi @IvayloKartev, some tips for the solution:
1- The submit function escaps without any selection make sure it checks if there is any selected value.
2- Using JS for updating the content it is bit overwhelming, try to use html pre-defined template then display it dynamically.
3- When querying multiple elements with javascript it is easier to throw same class on all the elements then query selector all of them, then if you want to work with them just use forEach loop.
4- A good reset for your css file would be better, use global selector at the top of your css file (box-sizing: border-box, margin:0, padding:0, font:iherit).
