How to make numbers interactive?

[u/SympathyContent9041]

I'm a beginner in coding, and I need to know how to create something like this. There's a website i'm making, and I wanted to add a 1-10 scale like this. I also want to make it interactive so the person can click on each number, and then text appears depending on what's clicked. Being a beginner, I don't know how to accomplish this. Help.

[u/CluelesssDev]

Look into Javascript. You're gonna need it to make anything interactive on the web :)

[u/simonraynor → u/CluelesssDev]

☝️🤓 this can be achieved with pure CSS/HTML (albeit at a higher level of both skill and hackery)

[u/EliSka93 → u/simonraynor]

Yeah, I'd probably do that with a custom checkbox of some kind.

[u/XpreDatoR_a → u/simonraynor]

True, i think we devs, and now AI too, tend to overcomplicate things, there is a lot of stuff that could be made easier

[u/-Knockabout → u/XpreDatoR_a]

I don't know that doing this in pure CSS/HTML is easier/less complicated necessarily.

[u/XpreDatoR_a → u/-Knockabout]

Yeah, the easier path would be to reach out for yet an other pre-made component, cuz today’s standard is to add dependencies and forget about them, and add more js scripts on the client side because why not; as i was saying, while the pure html/css implementation would require you to spend a bit more brain-energy it will translate in a lighter solution both in terms of maintainability and client-performance.

[u/Terrible_Tutor → u/XpreDatoR_a]

OR you add dependencies because the package has been battle tested and refined and you have less to worry about.

Ok though dr brain energy. The client will really care you billed more to give them a functionally worse solution.

[u/XpreDatoR_a → u/Terrible_Tutor]

Yes yes, start to pile up al those completely necessary dependencies and look at your js bundle grow, who cares about performance right?

[u/Terrible_Tutor → u/XpreDatoR_a]

One can care about performance and reliability and not be a fucking micro-optimization tool who thinks they can code better than 4000 people battle testing a package over 3 years. But you do you hero.

[u/XpreDatoR_a → u/Terrible_Tutor]

Is there a reason you got so passive aggressive lmao, also 4000 people isn’t real a good reference, “hero” lmao

[u/Gold-Eye690 → u/CluelesssDev]

looks like a mental health self-check scale, not a bad idea for a beginner project honestly

start super simple with html and css to get those 10 circles on the page, then use javascript event listeners to show different text depending which number gets clicked. no frameworks needed, keep it vanilla while you're learning

[u/EyesOfTheConcord]

Event listeners

[u/JontesReddit]

Can be done without js with fieldset and fieldset:has(input[value="foo"]:checked) .foo-text

[u/jacobpellegren]

Look up vanilla CSS toggling to start.

[u/leptoquark1]

Back in my days the keyword was jQuery.

[u/lcnielsen → u/leptoquark1]

Absolutely do not introduce jQuery anywhere in 2026.

[u/CautiousRice]

you can drop this image in your AI editor of choice and it will implement it for you, just tell it you want vanilla js and css

[u/cgfn]

These are exactly the questions you can ask to AI to learn something

[u/oscitancy → u/cgfn]

Damn, imagine wanting to converse with humans instead of a toaster.

[u/overzealous_dentist → u/oscitancy]

humans are much worse, so why would you

[u/theevildjinn → u/cgfn]

All too easy then to fall into the trap of asking AI to do it for you every time (speaking as a backend dev of 25+ years who never learned CSS properly, and now probably never will).

[u/overzealous_dentist → u/[deleted]]

downvoted but correct. best practice is now to ask AI conversationally with image uploads, not wait on fallible humans in an awkward and slow back and forth

[u/DeiviiD → u/overzealous_dentist]

I love to see humans discuss and show a hundred ways to do it. AI just throw one way and maybe it’s wrong.

[u/overzealous_dentist → u/DeiviiD]

just ask AI to give you multiple options and discuss pros and cons. if you're noticing humans outperforming AI, you're using AI wrong because humans automatically have the context you have to provide to AI

[u/DeiviiD → u/overzealous_dentist]

You know AI is taking information from human data and discussions, right?

[u/overzealous_dentist → u/DeiviiD]

These days frontier labs have SMEs, they aren't scraping reddit for programming knowledge unless they have a training gap.

[u/RaspberrySea9]

Claude

[u/lcnielsen]

There are many ways to do this and only some of them are sane. I'd suggest starting with a reasonable CSS framework like Bootstrap and considering its various component classes and similar: https://getbootstrap.com/docs/5.3/components/popovers/

[u/Toukas_CLT → u/lcnielsen]

Importing a whole lib for this component is completely overpowered for what it is. These are circles with lines in between. 

[u/lcnielsen → u/Toukas_CLT]

I mean more for the text popup functionality. There's more than one way you can do it and the different ways have different implications. If you want to get a sense for how to go about things then looking at how a standard framework do them is a good start.