Need some help to add a t&c checkbox and disable the calculator until the checkbox has been ticked to agree to terms please

Question

https://sololearn.com/compiler-playground/W1rqCI8KQa8j/?ref=app

Answer 1

Add a boolean variable that is false initially, and when the checkbox is pressed, call a function that sets that variable to true. Then use that variable on the calculate button's disable property.

Answer 2

you want a modal element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

your css have lots of problems... What's with those non-existent styles and random property name capitalizations? The main problem with css is that it fails silently. If your css is messed up, the problematic parts will just be ignored, and your page will look weird, and you will have to troublehoot it manually. That can be a painful process.

Answer 3

Thank you bro

Answer 4

Hey Bob_Li

I have been working on this for days and stupidly tried to apply the CSS as I was going which meant that it continually changed.

I am of course new to all of this and have now got the javascript running and have redone the CSS.
I am however still getting a bug line 59 and still need to add the Terms and Conditions text to the terms and conditions button as a "addEventListener()".

I think that's the best way to do it anyway.
https://sololearn.com/compiler-playground/WJ0D2Yu9m4tS/?ref=app

Answer 5

Your cosing even looks 😍........ this would not disable the calculate button until terns are agreed though or would it?

Sorry I'm taking it in like a spinge but my little brain has absorbed so much these.last few weeks.

Answer 6

Thanks Bob_Li Bob_Li

Answer 7

Shane Farrow
nice. I see you cleaned up the css and added nice styling.
yeah, checkbox works, too. Good to see you're becoming comfortable with Javascript DOM manipulations.

Your original idea was a blocking modal popup for terms and condtions. Maybe something like this? It's very basic, but you don't have to include additional js code.

https://sololearn.com/compiler-playground/WZ6DNC8sS2By/?ref=app

Answer 8

The dialog element is an overlay that blocks access to the other parts of the page until the agree button is clicked. It does not affect anything else. You can't click on anything below while it's displayed.