Javascript ćwiczenie z formularzami i przedziałami liczb

Question

Witam mam to opracowania następujące ćwiczenie ale nie mam zielonego pojęcia jak powiązać wprowadzane wartości liczbowe ze słupkami graficznymi przedstawionymi w pikselach. Dziękuje za pomoc pozdrawiam.

 

Zadanie: Opracuj dokument HTML z elementami CSS oraz składni JavaScript, który po podaniu przez użytkownika 4 wartości z przedziału <0;10> "narysuje" na ekranie słupki odpowiadające proporcjonalnie podanym wartościom.

Answer 1

Tutaj moja szybka implementacja, może coś z tego wyciągniesz. Zrobione trochę z ciekawości, jak i chęci nauki (miałem użyć tablicy i pętli, ale kompilator się buntował). Jak widać użyłem klas z opcją !important i dodawałem je kiedy wartość była odpowiednia. Jak chcesz to możesz ustawić te słupki żeby rosły 'od dołu', a nie od góry. https://jsfiddle.net/yL1gaoe3/2/

Comments

Dziękuje bardzo już wszystko jasne :)

Answer 2

Słupki zrobisz poprzez zmienianie wysokości lub szerokości divów. W zależności od tego czy chcesz poziome czy pionowe. Robisz 4 divy i javascriptem zmieniasz ich wysokość lub szerokość w zależności od podanej wartości.