Compare text

Find the difference between two text files

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

Tools

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

Comparing sensitive data, confidential files or internal emails?

Most legal and privacy policies prohibit uploading sensitive data online. Diffchecker Desktop ensures your confidential information never leaves your computer. Work offline and compare documents securely.

Download Diffchecker Desktop Learn more

Untitled diff

Created 10 years agoDiff never expires

28 removals

66 lines

54 additions

68 lines

//Problem: No user interaction causes no change to application

// Problem: No user interaction causes no change to application.

//Solution: When user interacts cause changes appropriately

// Solution: When user interacts, cause changes appropriately.

var color = $(".selected").css("background-color");

var $canvas = $("canvas");

var context = $canvas[0].getContext("2d");

var lastEvent;

var mouseDown = false;

// When clicking on control list items

//When clicking on control list items

$(".controls").on("click", "li", function() {

$(".controls").on("click", "li", function(){

// Deselect sibling elements

//Deselect sibling elements

$(this).siblings().removeClass("selected");

// Select clicked element

//Select clicked element

$(this).addClass("selected");

// Cache current color

//cache current color

color = $(this).css("background-color");

});

//When "New Color" is pressed

// When "New Color" is clicked

$("#revealColorSelect").click(function(){

//Show color select or hide the color select

// Show color select or hide the color select

changeColor();

$("#colorSelect").toggle();

});

//update the new color span

// Update the new color span

function changeColor() {

var r = $("#red").val();

var g = $("#green").val();

var b = $("#blue").val();

$("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");

$("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");

}

//When color sliders change

// When color sliders change

$("input[type=range]").change(changeColor);

//When "Add Color" is pressed

// When "Add Color" is pressed

$("#addNewColor").click(function(){

//Append the color to the controls ul

// Append the color to the control list

var $newColor = $("<li></li>");

$newColor.css("background-color", $("#newColor").css("background-color"));

$(".controls ul").append($newColor);

//Select the new color

// Select the new color

$newColor.click();

});

//On mouse events on the canvas

// On mouse event on the canvas

$canvas.mousedown(function(e){

lastEvent = e;

mouseDown = true;

}).mousemove(function(e){

//Draw lines

// Draw lines

if(mouseDown) {

context.beginPath();

context.moveTo(lastEvent.offsetx, lastEvent.offsety);

context.moveTo(lastEvent.offsetX, lastEvent.offsetY);

context.lineTo(e.offsetx, e.offsety);

context.lineTo(e.offsetX, e.offsetY);

context.strokeStyle = color;

context.stroke();

lastEvent = e;

}

}).mouseup(function(){

mouseDown = false;

}).mouseLeave(function(){

}).mouseleave(function(){

$canvas.mouseup();

});

Saved diffs

Original text

Open file

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;

//When clicking on control list items
$(".controls").on("click", "li", function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});

//When "New Color" is pressed
$("#revealColorSelect").click(function(){
  //Show color select or hide the color select
  changeColor();
  $("#colorSelect").toggle();
});

//update the new color span
function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  $("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
}

//When color sliders change
$("input[type=range]").change(changeColor);

//When "Add Color" is pressed
$("#addNewColor").click(function(){
  //Append the color to the controls ul
  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($newColor);
  //Select the new color
  $newColor.click();
});

//On mouse events on the canvas
$canvas.mousedown(function(e){
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e){
  //Draw lines
  if(mouseDown) {
    context.beginPath();
    context.moveTo(lastEvent.offsetx, lastEvent.offsety);
    context.lineTo(e.offsetx, e.offsety);
    context.strokeStyle = color;
    context.stroke();
    lastEvent = e;  
  }
}).mouseup(function(){
  mouseDown = false;
}).mouseLeave(function(){
  $canvas.mouseup();
});

Changed text

Open file

// Problem: No user interaction causes no change to application.
// Solution: When user interacts, cause changes appropriately.

var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;

// When clicking on control list items
$(".controls").on("click", "li", function() {
    // Deselect sibling elements
    $(this).siblings().removeClass("selected");
    // Select clicked element
    $(this).addClass("selected");
    // Cache current color
    color = $(this).css("background-color");
});

// When "New Color" is clicked
$("#revealColorSelect").click(function(){
    // Show color select or hide the color select
    changeColor();
    $("#colorSelect").toggle();
});

// Update the new color span
function changeColor() {
    var r = $("#red").val();
    var g = $("#green").val();
    var b = $("#blue").val();
    
    $("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
}
                       
// When color sliders change
$("input[type=range]").change(changeColor);

// When "Add Color" is pressed
$("#addNewColor").click(function(){
    // Append the color to the control list
    var $newColor = $("<li></li>");
    $newColor.css("background-color", $("#newColor").css("background-color"));
    $(".controls ul").append($newColor);
    // Select the new color
    $newColor.click();
});

// On mouse event on the canvas
$canvas.mousedown(function(e){
    lastEvent = e;
    mouseDown = true;
}).mousemove(function(e){
    // Draw lines
    if(mouseDown) {
        context.beginPath();
        context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
        context.lineTo(e.offsetX, e.offsetY);
        context.strokeStyle = color;
        context.stroke();
        lastEvent = e;   
    }
}).mouseup(function(){
    mouseDown = false;
}).mouseleave(function(){
    $canvas.mouseup();
});