How can you create this INSTAGRAM POLL using Jquery, html and css? [Solved]

Question

The poll gif is at my profile, for reference. Check it.

Answer 1

here's my code at codepen. https://codepen.io/Gaurav9372/pen/ZEWavmr

Answer 2

Dadson Wamuiga Matu please use the q&a as it is intended which is for questions concerning codes related issues, not advertising. Not only are you offtopic but being disrespectful to the poster and those whom are trying to help them.

Please remove all your YouTube posted comments.

Thanks and happy coding.

https://www.sololearn.com/discuss/1316935/?ref=app
https://code.sololearn.com/Wv5gTHy1N6Ji/?ref=app

Answer 3

Lets just assume we are not storing the clicks yet. I tried making it. But i failed so yeh.

Answer 4

Show your tried code

Answer 5

Shreyansh Gaurav what are you trying to achieve there? You are changing the inner div #bar width, considering the parent has fixed width of 300px

And the design is nowhere similar to that of instagram's poll

Answer 6

I just updated it. Check again please

Answer 7

The only thing that i cant understand is how to write the jquery code. My code doesn't seem to work as i expected it. I know its not correct though.

Answer 8

Yeh but when i click an option it should take 100% width for the first click, which it doesn't, what formula should i use?

Answer 9

Check mine. Its correct right?

Answer 10

Shreyansh Gaurav Ya it's right, seperating the buttons, for counters is good,
Edit : see the update of my code, without the buttons

Answer 11

The polls data need to be saved in some sort of storage, to keep track of polls recorded,
If the query is just about the desing and it's transition that's not very hard,

Answer 12

Shreyansh Gaurav I don't see any problems now, it works fine, except the transition, which you can do with css

Answer 13

also the bar2 should change according to the width of bar 1 right? I font understand how to change the global variable value of total count dynamically...

Answer 14

The width of, bars will change with respect to the barCounter variable,
Although why are you using 400 as a threshold width for changing width of the #bar1 and #bar2 Containers.
Shouldn't it be 300, as the width of the #Cont container..
Since #Cont is flex, the bar1 and bar2 will have width varying on the barCounter variable, which will still be within 300px that is the total width of the #Cont

Answer 15

Sorry, it should be 300 for the bars too, yes! i forgot to change it. But it still isn't taking up full width after changing it to 300px.

Answer 16

I think variable Totalcount needs to be placed somewhere else instead of in global.

Answer 17

Shreyansh Gaurav wait I just copied the code from the codepen and palced it in sololearn code playground, now let me see what problem , you are having,
Codepen doesn't works when edited using phone

Answer 18

alright captain! But SoloLearn doesn't allows Jquery either 😂🙏

Answer 19

Мг. Кнап🌠 You will have to run the code in your system.

Answer 20

I did it. :)