If anyone with experience can take a look at how I used CSS together with Bootstrap and tell me if I can reduce the redundancy or improve something else.
I would like feedbacks on my CSS.
Hello, how are you?
Your project is very good, congratulations!
I took a look at your CSS and I think your intentions are very clear in every line of CSS. It seems to be very clean and objective in the whole context.
I have used the Bootstrap for the first time so I am happy that I have completed. I have used only few bootstrap codes this time I would love to use it more in upcoming projects.
What challenges did you encounter, and how did you overcome them?I have encountered some challenges while using bootstrap as I was using it for the first time. I have used ai tools and bootstrap site to learn from it.
What specific areas of your project would you like help with?I was not able to change color of accent of slider. I also need help with the bootstrap codes. How can I make it more accessible and easy to use?
Hi Suraj, your project is very good, congratulations! I see that there are some details that you may have had difficulty with, and one of them is the fact that you were unable to adjust the style of the input range. I took a look at your code so as not to change the code too much, I made some small adjustments to the CSS and JS. In the JS there is an input event that calls an anonymous function and I added some logic to it that allows the bar to be the color you need. In the CSS I just removed some properties and used another idea.
In js i just changed this piece of code, leaving it like this:
sliderValue.textContent = slider.value;
const min = slider.min;
const max = slider.max;
const val = slider.value;
const percentage = ((val - min) / (max - min)) * 100;
slider.style.background = `linear-gradient(to right, var(--light-green) ${percentage}%, var(--very-dark-charcoal) ${percentage}%)`;
});```
/*in css change the styles in "input[type='range']" leaving it like this*/
```/* slider */
input[type="range"]{
-webkit-appearance: none; /* Necessary for styling in WebKit browsers */
width: 100%;
height: 0.5rem;
background: var(--very-dark-charcoal);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Ensure custom styles */
appearance: none;
width: 1.75rem; /* Thumb size */
height: 1.75rem;
border-radius: 50%; /* Rounded thumb */
background-color: var(--off-white);
cursor: pointer;
}```
Regarding Bootstrap, I don't think there is anything really wrong.
I hope I helped you and if you have any questions, send me a message, thank you.
I liked how the code was structured, but more effort could have been put into the design.
I liked the idea of using vue, it’s really good!
Great, the code is very easy to understand and can use some more complex concepts in js and css well.
