This is my first project where I tried to use semantic HTML. Please, let me know how is it.
In this project I had to create a hover effect, but this one was a bit tricky. When the mouse is over a chart's progress bar, should appear some text with amount info. I couldn't find a way to do it from CSS, so I used JS to change text's visibility. Is this the proper way to do it?
Also, I created this project using JSON file, let me know if everything is ok with its use.
I found getting firefox to ignore the cache when sending https GET requests to an API difficult. StackOverflow had a helpful suggestion where you append the url with a timestamp query string. Can we do better than this?
Hi @veeru-neerukonda, nice job completing this challenge!
I don't know how axios works, but personnaly I used a basic fetch request with cache: no-cache as follow : let quote = await fetch('https://api.adviceslip.com/advice', { cache: 'no-cache' }) and it did the job!
Hi @nikasana, great job completing this challenge!
Using radio buttons is in my opinion the best way to handle it, this way you don't have to prevent the default behavior as it does exactly what we need. Hope it helps! Do not hesitate to check my own solution if needed :)
I @Alex-Korir, well done with your solution! To answer your question, the custom button is here for allowing the user to enter a custom percentage.
You can check my solution here: https://remyboire.github.io/tip-calculator-app/public/
I feel like the tooltip could be improved upon, its just that with my implementation (tailwind-in-html-in-js) leaves not a whole lot of flexibility, any input is appreciated
Hi @Aadv1k, as you request it, here is my feedback.
Your integration looks nice and everything is working properly, great job!
However, as an old art director, I would be worried by some little differences between the design and your integration: colors not always match (the current day bar is more of a blue and the section background is a cream), border radius are 20px on desktop and 10px on mobile (and for the bars, its 5px / 3px). There are also some breakpoints on padding, bar spacing, logo width…
I also noticed that you used width: 14% on bars, which in my opinion not the best way because it assumes that we have 7 bars. This can become a problem in the future if you want to display more or less bars! Personally, I used width:100%, that way you can add or remove bars without breaking the layout.
Regarding the tooltips, I think using :before and :hover would have been an easier way to handle it than with event listeners. You can put a data-attribute on the bar and access it from a pseudo-element like :before { content: attr(data-attribute) } and get rid of the span.
Those are some minor details, but important in my opinion. :)
I didn't take a look at your code yet but for React with github you can use react-gh-pages. I used it for my last project and it's very easy. Do not forget to set your page to the gh-pages branch that will be created.
For some reason the click event isn't repeatable on Firefox. It will load the initial time but not after... The function is still firing though, as I tested it with console.log("test") at the last line of the function and it logged it.. just wouldn't update the DOM ? Works fine on Edge and Chrome
Hi @AndyAshley, well done for this project !
The data is cached by default, you can try this at line 6 in your JS file : let response = await fetch("https://api.adviceslip.com/advice", { cache: "no-cache" });.
You can read more on cache control here on mozilla.org.
Hi, nice animations !
On my side, the quote doesn't change when I click the button.
In your JS, you can change
fetch(link).then(response=>{
to
fetch(link, { cache: "no-cache" }).then(response=>{
to get rid of the cache problem. ;)
Hey everyone! I just have two problems. My JS works, but the code itself is very repetitive I notice.(I don't know any JS libraries/frameworks yet) If someone has a way for me to simplify my code, I'll greatly appreciate it! My next problem is with the functionality of the rating buttons. So when I click on a number, it does what it's supposed to, but when I click on another number, they both turn the same color...Now this obviously isn't supposed to be happening, but I couldn't figure the JS out for it not to be repetitive, so again, I'll be more than happy if someone could help me with that! Overall, I'm hoping to get some feedback on the design itself, the HTML/CSS I used. Would anyone do anything different or more efficient to what I did (specifically for the HTML and CSS portion)
Hi @jplawrence ! This looks great, really well done !
Here is what I personnaly wrote :
buttons.forEach((element) => { element.addEventListener('click', () => { buttons.forEach((element) => { element.classList.remove('selected') }) element.classList.add('selected') }) })
This is not as repetitive as your method, plus, adding and removing a class is easier to maintain as colors and styles remains in the CSS file.
Hi, it looks like the browser keep the data in cache, change fetch(advice_url) by fetch(advice_url, { cache: "no-cache" }) and it will work !
More info here
