File Upload Get MIME Type using JavaScript

<html>
<body>

    <input type="file" id="upload-files" multiple>
    <script>
    var control = document.getElementById("upload-files");
    control.addEventListener("change", function(event) {      
        var files = control.files;
        for (var i = 0; i < files.length; i++) {
            console.log("Filename: " + files[i].name);
            console.log("Type: " + files[i].type);
            console.log("Size: " + files[i].size + " bytes");
        }
    }, false);
    </script>

</body>
</html>

How to Create DataTable in Angular2 / TypeScript

I am not sure if there are any ported Jquery DataTable available but I’m pretty sure I find a hard time finding it.
So I created my own DataTable implementation in Angular2/TypeScript.

I too busy to explain so just copy and paste this and if you have any problems drop me a comment or email me.

Angular2 restful client. #angular2 #aspnetmvc5 #webapi #entityframework #javascript #webdev #webdesign #sofwareengineering #singlepageapplications

A video posted by Full-Stack .Net Developer (@butchokoiechronicles) on

@Component({
  selector: 'btc-table',    
  moduleId:module.id,
  template:`
  <div>
    <input type="text" [(ngModel)]="searchString" (keyup)="filterResult($event)" placeHolder="Search" class="form-control" />
  </div>
  <table class="table table-bordered">
    <thead>
        <tr><th *ngFor="let t of theader">{{t}}</th></tr>
    </thead>
    <tbody>
        <tr *ngFor="let d of displayData">
            <td *ngFor="let t of theader">{{d[t]}}</td>        
        </tr>
    </tbody>
    <tfoot>
        <tr><th *ngFor="let t of theader">{{t}}</th></tr>
    </tfoot>
  </table>
  <div>    
        <div style="display:inline-block">{{displayStatus}}</div>
        <div
        (click)="showPage(ndx + 1)"
        style="display:inline-block"
        class="btn btn-success"
        *ngFor="let item of totalPages | fill let ndx = index">{{ndx + 1}}</div>
  </div>
  `,
   pipes: [ FillPipe,FilterArrayPipe ]
})
export class BtcTableComponent {
    theader = ["id","FullName","Email"];  
    totalResultCount:number = 10;
    totalResultPerPage:number = 3;
    totalRemaining:number;
    totalPages:number;
    searchString:string;
    displayStatus:string;
    displayData:Datum[];
    inMemoryData:Datum[];
    data:Datum[] = [
        {id:1,FullName:"Julius Bacosa",Email:"juliusbacosa@gmail.com",p:1},
        {id:2,FullName:"Julius Ceasar",Email:"juliusceasar@gmail.com",p:1},
        {id:3,FullName:"Napoleon Bonaparte",Email:"napoleonbonaparte@gmail.com",p:1},
        {id:4,FullName:"Genghis Khan",Email:"genghiskhan@gmail.com",p:2},
        {id:5,FullName:"Joseph Stalin",Email:"josephstalin@gmail.com",p:2},        
        {id:6,FullName:"Cara Delevingne",Email:"caradelevingne@gmail.com",p:2},
        {id:7,FullName:"Wintson Churchill",Email:"winstonchurchill@gmail.com",p:3},
        {id:8,FullName:"Vladimir Putin",Email:"vladimirputin@gmail.com",p:3},
        {id:9,FullName:"Adolf Hitler",Email:"adolfhitler@gmail.com",p:3},
        {id:9,FullName:"Donald Trump",Email:"donaltrump@gmail.com",p:4},
    ];

    constructor(){}

    ngOnInit(){        
        this.inMemoryData =this.data;
        this.showPage(1);
       
    }

    showPage(index){      
        var  d = this.inMemoryData;      
     
        var newd = [];
        for(var i in d){    
            if(d[i].p==parseInt(index)){
              newd.push(d[i]);      
            }
        }        
        this.totalPages = Math.ceil(this.inMemoryData.length / this.totalResultPerPage);
        this.totalRemaining = this.inMemoryData.length % this.totalResultPerPage;
        this.displayData = newd;
        this.displayStatus = "Showing " + newd.length + " of " + d.length;

    }
    filterResult(event:any) {
       
        var str = this.searchString;
        var d = this.data;
        var newd = [];
       
       
        var itemCounter = 1;
        var pageCounter = 1;                
        for(let i in d){
          if((typeof d[i].FullName === 'string' || d[i] instanceof Datum) && (d[i].FullName.indexOf(str)!==-1)){
               
               d[i].p = pageCounter;
               newd.push(d[i]);

               // assign page
               if(itemCounter >= this.totalResultPerPage){
                   itemCounter=1;
                   pageCounter++;

               }else{
                   itemCounter++;
               }
               
          }
        }

        this.inMemoryData = newd;
        this.totalPages = Math.ceil(newd.length / this.totalResultPerPage);
        this.totalRemaining = newd.length % this.totalResultPerPage;
        this.showPage(1);
    }
   
   
}

export class Datum{
    id:number;
    FullName:string;
    Email:string;
    p:number;
}

Loosely Coupled , Test Driven Design and API Centric Application

I now have my Asp.net MVC WebAPI 2 implemented with Test Driven Design.

Loosely Coupled with the help of Unity and TDDed with Moq.

Now I can begin porting my Real Estate Billing Management System coded in PHP and Zend Framework

public class PeopleRepository<T> : IPeopleRepository<T> where T : class
{
   protected AppDBContext db;

   public PeopleRepository(IUnitOfWork unitOfWork)
   {
     db = unitOfWork.DbContext;
   }
}
   public interface IPeopleRepository<T> where T : class
   {
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);
   }
   public interface IPeopleRepository<T> where T : class
   {
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);
   }

I will have this Application front ended with AngularJs2 because of TypeScript.

I heard that ReactJs is becoming more popular. But just *7^&off!

Screen Scrolling with Mouse Wheel in Jquery

Hi Kids!

Here is how to detect scroll with Mouse Wheel in Jquery

$('#div1, #div2, #div3').on('DOMMouseScroll mousewheel', function (e) {            
        if(e.originalEvent.wheelDelta){
            if(e.originalEvent.wheelDelta < 0) {
               //down
               i++;
                if(i>divArr.length){
                    i=divArr.length-1;
                }
             
            }else{
                //up                
                 i--;
                if(i<0){
                    i=0;
                }                
            }                    
        }                                                            
        AnimateToView(divArr[i]);              
});

Alright Kids!
Ciao!

The best and Proper Way to code in Javascript is not to use Globals

Hi Kids,

You must avoid using globals in Javacript, its because
They are slower to look up than local variables and will clutter up the global namespace as well.

So here take a look kids. This is how you do it properly. 🙂

(function(){      
      var createObject = function(){
            var count = 0;
            var todo1 = function(){
                count += 1;
            };

            var todo2 = function(){
                count += 2;
            };

            return {
                task1: todo1,
                task2: todo2
            }
      };

      var obj = createObject();
      obj.task1();
      obj.task2();
}());

Alright Kids! Ciao!

Smooth Animated anchor Scrolling using Jquery

Hi Kids,

Here is a simple snippet to add scrolling effect with anchor and js.

$('.some_div > a').click(function(){
            $('html, body').animate({
                  scrollTop: $( $.attr(this, 'href') ).offset().top + (some_adjustments)
            }, 800);
            return false;
});

And here is for your HTML dom structure.

<div class="some_div">
        <a href="#achor">Anchor Link Here</a>
</div>


<div id="anchor">
     Your Load of BS here Kids!
</div>

Alright Kids. Enjoy! Ciao!

Injecting String within a String in Javascript (substring)

Hi Kids,

This is how to insert String within a String using Javascript’s Substring.

    $(".footer-icons > .icon-item > a").mouseover(function(e){          
          var currentSrc = $(this).find("img").attr("src");
          var newSrc = currentSrc.substring(0,currentSrc.lastIndexOf('.'));
          newSrc += "-green.jpg";
          $(this).find("img").attr("src",newSrc);            
    });
    $(".footer-icons > .icon-item > a").mouseout(function(e){          
          var currentSrc = $(this).find("img").attr("src");
          var newSrc = currentSrc.substring(0,currentSrc.lastIndexOf('.')-6);
          newSrc += ".jpg";
          $(this).find("img").attr("src",newSrc);            
    });

Drop a comment for your questions Kids.

jQuery Window Scrolling and Css Transform Animation

Here we go, our first tutorial of the year since I my rock n’roll days.

Glad to be back on track.
alright Kids, our first tutorial is using Jquery and Css to animate the size of a DIV on window scrolling.

Step 1: Your Javascript / JQuery snippet

    var $animation_elements = [$('.front-header-div-holder')];
    var $window = $(window);

    $window.on('scroll', check_if_in_view);
    $window.on('scroll resize', check_if_in_view);

    $window.trigger('scroll');

    function scaler(element,i){            
          i = (i/100)+1;          
          $(element).css("-ms-transform", "scale(" + i +")");
          $(element).css("-webkit-transform", "scale(" + i +")");
          $(element).css("transform", "scale(" + i +")");      
    }

    function fader(element,i){  
          i = ((i/100) * -1) +1;                    
          $(element).css("opacity",i);          
    }
    function check_if_in_view() {
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
           
            if($(this).attr("class")!=undefined){
                 
                  var $element = $(this);
               
                  var element_height = $element.outerHeight();
                  var element_top_position = $element.offset().top;
                  var element_bottom_position = (element_top_position + element_height);

                  //check to see if this current container is within viewport

                  var h = 0;
                  var ename = $(this).attr('class');
                  if(ename == "front-header-div-holder"){
                        h = element_height;
                  }else{                    
                        h = element_height;  
                  }

                  if ((element_bottom_position >= (window_top_position + (h))) && (element_top_position <= (window_bottom_position-(h/2)))) {                        
                        var ename = $(this).attr('class');                        
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }
                  } else {                      
                        var ename = $(this).attr('class');                  
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }                                              
                  }

            }

           
      });
    }

Step 2: Your HTML

<div class="front-header-div-holder">
     <div class="front-header-div">
          <div class="front-header">
              <!-- your load of BS here -->
          </div>
      </div>
</div>

Step 3: Your CSS
Code as you please.

Drop me a question if you have one. Ciao!