Pill Lanes

It's an animated, interactive web component.

Pill-Lanes creates a panel container with moving lanes that have logos on a "pill" format. By moving at different speeds, they show all logos contained in it. Clicking on a "pill" will redirect you to a website.

This project is part of my journey of learning how to code.

Implementation Details

Tools (libraries) and techniques used.

The initial approach was to clearly define all the constituent elements of the component and classify them as either static or dynamic. This method was primordial to the further separation of concerns and problem thinking clarification. Two main tasks were established: the development of a visual manifestation of the component, using HTML and SASS, and the transcription of the functionality to a single JavaScript file.

Having broken down the first main task into smaller ones, I resorted to BEM naming, adapting the already defined elements to the nomenclature. To produce the animation, I have created copies of each lane, each with different moving timings so that the synchronisation creates an illusion of infinite movement.

The second main task started by establishing an array of objects as the data format to be used on the pills. I have transcribed part of the initial problem solving process into unit tests using Jest. Small functions were used to create the static and dynamic elements, to organize the provided data into lanes with a maximum of 6 pills, and to render the created elements to the DOM. They are prefixed with the double underscore privacy convention as they are meant to compute business logic, and should not be accessible. Through ES6 modules, I was able to group every small tested "private" function into a single JS file.

Usage

Instructions for developers that want to use the component.

Import the pillLanes function from "./src/pill-lanes.js" directory. The first argument is the data array and the second argument is the document element in which the component will be rendered.

<script type="module">
  import {pillLanes} from "./src/pill-lanes.js"; const domEl =
  document.getElementById("test"); pillLanes(data, domEl);
</script>

The data to be displayed must be in an array of objects with three properties:

label , the name to be displayed.
link, the link's destination.
img, the image's directory.

const data = [
  {
    label: 'ducati',
    link: 'ducati.com',
    img: 'ducati.com/logo.jpg',
  },
  {
    label: 'yamaha',
    link: 'yamaha.com',
    img: 'yamaha.com/logo.jpg',
  },
];

! Note

The component will render a minimum of 1 pill, and a maximum of 30 pills (6 by lane). If more data is provided, it will not be rendered.

I did not include a production bundle because it was not part of my focus for this project.

Development

Instructions for developers that want to run the code in development mode.

To install the component, clone repository, change into directory on the terminal and install with npm.

git clone https://github.com/kevinsilva/pill-lanes
cd pill-lanes
npm install

To run the application.

  npm run dev

To run the tests.

  npm test <file>

Credits

Big thanks to my mentor 🎓, William R. J. Ribeiro.

All images from:

Inspiration from Retool.

License

MIT