Category: Uncategorized

The following code demonstrates drag drop functionality in ES6.

<script>
  const onDrop = (e) => {
    e.preventDefault();
 e.target.appendChild(document.getElementById(e.dataTransfer.getData('target')));
  };
  const onDragOver = (e) => e.preventDefault();
  const onDragStart = (e) => e.dataTransfer.setData('target', e.target.id);
  
</script>
<div id="dest" ondrop="onDrop(event)" ondragover="onDragOver(event)" style="height: 200px; width: 200px; border: 1px solid #000; padding: 10px; box-sizing: border-box;"></div>
<img id="source" draggable="true" ondragstart="onDragStart(event)" src="http://via.placeholder.com/180x180" />

Demo

The following is the implementation of a simple Javascript (ES6) loader.

<script>
  const load = () => {
    let width = 0;
    const id = setInterval(() => {
      if (width === 100)
        clearInterval(id);
      else
        document.getElementById('bar').style.width = `${++width}%`;
    }, 10);
  };
</script>
<div id="loader" style="height: 100px; width: 600px; border: 1px solid #000;">
  <div id="bar" style="background-color: green; width: 0; height: 100px;" class="">
  </div>
</div>
<button onclick="load()">Load</button>

Demo

In the example below, we create a button and attach a click event to it.

const button = document.createElement('button');
 button.innerHTML = 'Click';
 document.body.appendChild(button);
 const test = (val) => {
   console.log('clicked ' + val);
 };
 button.addEventListener('click', test.bind(this, 'test'));

Demo

The following lines of code demonstrate how to align a div at the end of the flexbox row when you want to display the rest of the them at the start.

(more…)

If you don’t configure your .eslintrc file, then you might see this “Parsing error: Unexpected token =” when you do the following in your react components.

class HomeComponent extends Component {
  
  state = {
    term: '',
  };

  setTerm = (term) => {
    this.setState({ term });
  };

  ...
}

To use arrow functions as properties in React components you can do the following. (more…)

Adding stylelint to your project has many advantages that range from being able to throw warnings and errors when the styling rules (CSS, SASS-SCSS) are broken, to being able to fix most of your warnings automatically with a single command. (more…)

Lets say you want to draw something similar to the following using only CSS. (more…)

The following code tries to mimic the look and feel of the modal from Google’s Material Design using CSS3.

(more…)

This can be easily achieved on a linux server with the help of a cronjob.

Open up your terminal and edit your cronjobs list using sudo crontab -e. (more…)