Desktop design

Active states

Mobile design

Expenses chart component

<div class="info-section"><p> min: 17.45  </p><p> max: 52.36  </p><p> sum: 227.94  </p><p> maxValueIndex: 2  </p><p> maxValueDay: wed  </p></div>

<div class="balance-txt"><span class="title-sm">My balance</span><span class="title-lg">$921.48</span></div>

<div class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://github.com/colormethanh/expense-chart-component">Thanh</a>.</div>

: </label><input type="text" inputmode="decimal" id="mon" name="mon" class="input-input" value="17.45"></div>

: </label><input type="text" inputmode="decimal" id="tue" name="tue" class="input-input" value="34.91"></div>

: </label><input type="text" inputmode="decimal" id="wed" name="wed" class="input-input" value="52.36"></div>

: </label><input type="text" inputmode="decimal" id="thu" name="thu" class="input-input" value="31.07"></div>

: </label><input type="text" inputmode="decimal" id="fri" name="fri" class="input-input" value="23.39"></div>

: </label><input type="text" inputmode="decimal" id="sat" name="sat" class="input-input" value="43.28"></div>

: </label><input type="text" inputmode="decimal" id="sun" name="sun" class="input-input" value="25.48"></div>

Please log in to post a comment

Community feedback

Responsive Expense Chart w/User data input feature

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community