Etch-a-sketch/script.js at master · tempeste/Etch-a-sketch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
$(document).ready(function(){


    for (i = 0; i < 16; i++){
      var row = $('<div class="row"></div>')

      for (j = 0; j < 16; j++) {
          $('<div class="unit"></div>').appendTo(row);
      }

      $("#container").append(row);
  }

  $("#changepx").click(function(){
    var gridSize = prompt("What dimensions should the new grid be? (enter 1-50 only)",16)
    if (gridSize > 50) {
      alert("Too big")
    }
    else{
    $(".row").remove()

    //remaking the grid
      for (i = 0; i < gridSize; i++){
          var row = $('<div class="row"></div>')

          for (j = 0; j < gridSize; j++) {
              $('<div class="unit"></div>').appendTo(row);
          }

          $("#container").append(row);
      }
    }

  $("#container").css("height",""+ (gridSize*20+500) +"px")

    //Drawing effect
    $(".unit").mouseenter(function(){
      $(this).addClass("color")
    });
    //reset

    $("#reset").click(function(){
      $(".unit").removeClass("color")
      $(".unit").css("background-color","white")
    });


  });


  //Drawing effect
  $(".unit").mouseenter(function(){
    $(this).addClass("color")
  });
//reset
  $("#reset").click(function(){
    $(".unit").removeClass("color")
  });
//hover on button
  $("button").hover(function(){
    $(this).fadeTo('fast',0.5)
  },

  function(){
    $(this).fadeTo('fast',1)
  });

//color randomizer
  function color(){
    var letters = '0123456789ABCDEF'
    var color = '#'
    for (var u =0; u<6; u++){
      color += letters[Math.floor(Math.random()*16)]
    }
    return color
  }

  $("#rainbow").click(function(){
  $(".unit").off('mouseenter')
  $(".unit").mouseenter(function(){
    $(this).css("background-color", ""+color()+"")
  });
});

  $("#default").click(function(){
    $(".unit").off('mouseenter')
    $(".unit").mouseenter(function(){
      $(this).css("background-color","gray")
    })
  })

  $("#user").click(function(){
    $(".unit").off('mouseenter')
    var value = prompt("Choose your color value(hexadecimal only)","#FF0000")
    $(".unit").mouseenter(function(){
      $(this).css("background-color",""+value+"")
    })
  })
});