Progress Bar using vanilla Javascript

Problem

Create a button to add a progress bar on click. Everytime a progress bar is added, it should start loading and reach 100% completion.

See the Pen pbjRPd by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.

Edit textbox on clicking an image & save on clicking outside

This was my response to a stackoverflow question: http://stackoverflow.com/questions/36045974/how-to-create-an-editable-textbox/36046548#36046548

React ContentEditable Div

A custom contentEditable div, with placeholder text styling:

Part 1: The JSX component file

var ContentEditableDiv = module.exports = React.createClass({
  
  handleKeyPress: function(e){

    e.stopPropagation();
    if(getKeyCode(e) == 13) {
      e.preventDefault();
      e.target.blur();
      if(this.props.onEnterKey) this.props.onEnterKey(e);
    }
  },

  onBlur: function(e){

      e.stopPropagation();
      // console.log('blurring called from content_editable div react');
      if(this.props.onBlur) {
        console.log('e', e);
        var el = $(e.target);
        var text = $.trim(el.text());
        el.text(text); //just to keep it in sync
        this.props.onBlur(text, e);
      }
  },
  
  onKeyDown: function(e){
    if(this.props.onKeyDown) this.props.onKeyDown(e);
  },

  render: function(){
      // console.log('render content content_editable', this.props.text.length);
      var klass = this.props.class + " content_editable";
      var placeholder = this.props.placeholder ? this.props.placeholder : "Type here";
      return (

<div classname="{klass}" contenteditable="{true}" id="{this.props.id}" onblur="{this.onBlur}" onkeydown="{this.props.onKeyDown}" onkeypress="{this.handleKeyPress}" placeholder="{placeholder}">

{this.props.text}

</div>
)
  }
});

Part 2: CSS Styling:

.content_editable
  border: none
  outline: none
  height: 17.55px
  padding-right: 2px !important
  &:focus
    white-space: normal
    border-bottom: 1px solid black
  

.content_editable:empty:before  
  content: attr(placeholder)
  display: block /* For Firefox */
  &:hover
    cursor: text


.content_editable:focus:empty:before
  content: ""
  display: block /* For Firefox */
  margin-top: 19px /* To make sure the border doesn't go up */
  min-width: 90px

Jquery list attributes of an element

$('#ElemId').each(function() {
  $.each(this.attributes, function() {
    // this.attributes is not a plain object, but an array
    // of attribute nodes, which contain both the name and value
    if(this.specified) {
      console.log(this.name, this.value);
    }
  });
});

SVG Add Class, Delete Class for Jquery

svgAddClass($(".myClass"), "selected_class");
svgRemoveClass($(".myClass"), "selected_class");

/**
  date: 26th Jan 2016
  Jquery doesn't support add class for svg currently
  workaround function for that
**/

function svgAddClass(svgElem, className){
  var classList = svgElem.attr('class') + " " +className;
  console.log('classList', classList);
  svgElem.attr('class', classList);
}

function svgRemoveClass(svgElem, className){
  var classList = svgElem.attr('class').replace(className, '');
  console.log('classList', classList);
  svgElem.attr('class', classList);
}

Steps to get license for Desktop Alarm Clock

To get a license key for the Desktop Alarm Clock,

1. Email dhiviyadhanasekar@gmail.com, requesting for author's bank account details. Email subject should be "Desktop Alarm Clock - License Request".

2. Once you receive an email with bank account details, transfer the amount specified in the email to the bank account and email back with the transaction reference.

3. Once the transaction has completed, author will email you back the the user name and license key.


Note: The above was done to hack the payment link on an application that I reverse engineered and by pass the registration process by reverse engineering the application using OllyDbg and creating a patch, that would exploit the application's security\vulnerabilities.

Subtree Sum

Problem

Find subtrees with nodes that add to a given sum

Example Input:

Sum = 5
Tree is:

            1
    /   \
           2     3
         / \   / \
      2  -1 0   8
      /\   /\           /\   /\
   0  3 -5 4     6 -9 -6 1

Output: 

2 

0 3 

null null null null 

--------------------

2 

2 -1 

0 3 -5 4 

null null null null null null null null 

--------------------

Solution

package Tree;

import java.util.ArrayList;

public class SubtreeSum {

	private ArrayList sumPaths;

	private Integer traverse(Tree t, int sum){
		if(t == null) return 0;

		Integer leftSum = traverse(t.left, sum);
		Integer rightSum = traverse(t.right, sum);
//		if(leftSum == null || rightSum == null) return null;
		Integer curSum = leftSum + rightSum + t.val;

//		if(curSum > sum) return null;
		if(curSum == sum) { sumPaths.add(t);}
		return curSum;
	}
	
	public void printSubTreeWithSum(Tree t, int sum){
		sumPaths = new ArrayList();
		traverse(t, sum);
		
		for(int i = 0; i < sumPaths.size(); i++){
			TreeOperations.printTree(sumPaths.get(i));
			System.out.println("--------------------");
		}
	}
	
	public static void main(String[] args) {
		SubtreeSum ob = new SubtreeSum();
		Tree t = TreeTestData.getSampleTree3();
		ob.printSubTreeWithSum(t, 5);
	}
}