Timilehin Emmanuel OJO• 40
@TimilehinEmmanuelOJO
Submitted
After solving the code, i discovered when my input value is on 0.00, amount section reads Nan. how can i rectify this
Isabela Oliveira
@oliverids
All comments
- Isabela Oliveira• 310
@oliverids
Posted
That's probably because you coded it for the calculation to be done at every change in the input's value. You can fix this by only executing the calculating function after you notice the input isn't empty. An if condition sounds enough, something like "if(input.value.length !== 0)".
Marked as helpful
0 - Novidicus Titan• 60
@NovidicusTitan
Submitted
does anyone know how to use :active & :hover correctly? I had to use !important or my hover effect did not work. any help is appreciated.
Isabela Oliveira• 310@oliverids
Posted
Hmm I might be wrong but I tested it really quickly on DevTools and I think the issue is that you didn't access the element correctly.
Notice how, for the main style, you accessed the element by ".card .input .percent .percent_btn button { ... }". However, for the hover, you used ".card .btn:hover { ... }". Might be just a matter of confusion for the browser ? I changed it to ".card .input .percent .percent_btn button:hover { ... }" and it worked just fine, without the !important.
Might be worth it to give it a try.
0 - Nhan Pham• 620
@NhanPhamTrong
Submitted
This is my first time using SCSS. I have some questions:
- Is my organization in .scss files fine? If not, what can I do to improve.
- I cannot use background-image: url("images/....svg"). I have to upload them to get links. I don't know why it doesn't work.
Any suggestions are welcome. Thank you!
Isabela Oliveira• 310@oliverids
Posted
I think your scss organization looks just fine, but I think you could join the _color.scss and the _variables.scss into the same file. Though it isn't necessary, it's fine the way it is.
Your background-image property does not work because you aren't correctly accessing them. Sass compiler is literally just a compiler, it's not the final file. When you want to use an image as a background, you have to remember that you need to access them while you're inside the CSS FOLDER, because that's where the SASS files are being compiled into. Since your images are in a folder OUTSIDE of the css folder, you need to "go back" in the adress, and you do that by adding a "./" to it.
Your images can be accessed by: background-image: "./images/ ...".
Marked as helpful
0 - SC• 60
@sccala
Submitted
The bottom area is always white, even I set the color and height. Does anybody know how to fix?
Isabela Oliveira• 310@oliverids
Posted
Hey, I think part of the reason is that you put the style element for the theme change for the background on the html tag. I don't know if I can say it's wrong, but definitely not recommended. If you want to change the color of the background, add the "light" or "dark" class to the body instead and check again if it works.
Marked as helpful
0 - michaellosdev• 20
@michaellosdev
Submitted
I would like the feesback on my javaScript. I know that its possibble to make the code shorter by putting my "if esle" in the function, but for some reason it wouldn't work
Isabela Oliveira• 310@oliverids
Posted
For the tips, for example, you can shorten the code by using if else with the help of an event listener on a list of all buttons. Your code would look a bit like this:
let buttons= document.querySelectorAll('.tip-select btn'); //this will create a nodeList
buttons.forEach(each => {
each.addEventListener('click', event => {
if(event.currentTarget == fivePercent) {
//
} else if(event.currentTarget == fivePercent) {
//
} ...
}); });
Also, adding the attribute "type=number" also shortens your code because it'll only allow the user to type numbers, and you won't need to do the verification "if(NaN ...)".
0 - HualDev• 850
@HualDev
Submitted
I´d like to know how to get that at the moment I change an input, automatically calculate; I´d tried with focus but it not work immediately.
Isabela Oliveira• 310@oliverids
Posted
Hey, i think your question can be solved with an EventListener!
Add a listener for the "input" event on the bill input. The "input" event catches any and all changes made on the value of said input. After you've done this, you can make all functions work when the browser notices any changes.
Your code would look a bit like this:
let billinput = document.getElementById('bill');
billinput.addEventListener('input', () => { ** all the calculation functions ** )
Marked as helpful
0 - VladimirBrscic• 775
@VladimirBrscic
Submitted
I tried to make JavaScript code really easy to read. Beast I could. Please tell me how I did. Many thanks :-)
Isabela Oliveira• 310@oliverids
Posted
Hey, your code is really neat and works just great!
I'd suggest using the "input" event instead of "keyup" if you want a more imediate trigger, but that's not necessary if you don't want it.
Also, for better usability, I suggest not letting the calculator do its thing until the person types the number of people. Your code says that when the value of the input is zero, to use "1" as default value. However, a random user can't see that, and they might think there's an error. I think something like this would be enough for you:
if (input.value.length) { ..function.. }
Nice job!!
Marked as helpful
0
