react/index.html at gh-pages · csurya/react · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Chrisanthy's React Assignment</title>

    <style>
    h1, li{
      text-align:center;
    }
    </style>

    <h1> 6 Steps to Sketching the Chrysler Building </h1>
    <p>
      <li>New lines in the next step are highlighted in <span style="color:blue">blue</span><br></li>
      <li>Erase the dashed lines</li>
    </p>
  </head>

  <body>
    <p>
    <img id='image' src="http://www.alilsegue.com/wp-content/uploads/2014/10/0bft.jpg"
    alt="sketch1" style="display:block; margin:0 auto;" width= "250" height = "500">
    </p>

    <button onclick="prevStep()" style ="display:block; margin:0 auto;">Previous Step</button>
    <button onclick="nextStep()" style ="display:block; margin:0 auto;">Next Step</button>


    <script>
    //count number of button clicks
    countS = 0;

    //put images into arrays
    var imagesArr = new Array();

    imagesArr [0] = new Image();
    imagesArr[0].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/0bft.jpg';

    imagesArr [1] = new Image();
    imagesArr[1].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/1bft.jpg';

    imagesArr [2] = new Image();
    imagesArr[2].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/2bft.jpg';

    imagesArr [3] = new Image();
    imagesArr[3].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/3bft.jpg';

    imagesArr [4] = new Image();
    imagesArr[4].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/4bft.jpg';

    imagesArr [5] = new Image();
    imagesArr[5].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/5bft.jpg';

    imagesArr [6] = new Image();
    imagesArr[6].src = 'http://www.alilsegue.com/wp-content/uploads/2014/10/6bft.jpg';


    function nextStep(){
      if(countS<imagesArr.length-1){
        countS++;
      }else{
        countS = 0;
      }
      document.getElementById("image").src = imagesArr[countS].src;
    }

    function prevStep(){
      if(countS>0){
        countS--;
      }else{
        countS = 0;
      }
      document.getElementById("image").src = imagesArr[countS].src;
    }
    </script>
  </body>
</html>