Here is a simple program coded using REACT features in Codepen with the help of external react libraries and Codepen’s Babel Transpiler. HTML JS (Babel) import React, { useState, useRef, useEffect } from ‘https://esm.sh/[email protected]’ import ReactDOM...
Stacked Bar Chart with Gap – Apache ECharts I created an example to create a gap between stacked bars using Apache ECharts. See the Pen Bar Charts with Two datasets – using Apache ECharts by Puneet Sharma (@webdevpuneet) on CodePen. Donut Chart with Apache...
Here is a simple responsive example with a demo and code for slide layout. You can use this as a starter template to achieve any demanding animation-heavy slides. DEMO See the Pen Slides Layout by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...
JavaScript to equalize element heights To achieve equal heights for child elements with the class equalize within a parent element with the class equalize-columns, you can use CSS and possibly a bit of JavaScript. One common approach is using Flexbox or Grid layout...
Here is a custom range slider I created to use gradients in the slided part and the thumb itself. DEMO See the Pen Custom Range Sliders by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div class=”slider”> <span...
Here is a simple example of creating a customized pie chart using the Apache Echart library. DEMO See the Pen Pie Chart Using Echart by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div id=”piechart1″ style=”width:...
Blog
