bfl-itp · Ameliawb · Oct 1, 2014 · Oct 1, 2014 · Oct 1, 2014 · Oct 1, 2014
diff --git a/README.md b/README.md
@@ -1,18 +1,8 @@
 # "React" Assignment
 
-Create a learning resource that gives the user feedback – in other words, responds to the user's input/actions. Actions could include:
-
-* Clicking
-* Typing
-* Scrolling
-
-or lack of any of those things. Feel free to pick a new subject, or dive deeper with one you've already used.
-
-## Examples
-
-1. [Operation](http://en.wikipedia.org/wiki/Operation_(game)), which uses sound to inform the player they are doing something wrong.
-
-    [![Operation](http://img.youtube.com/vi/_6MAkLJ79LE/0.jpg)](http://www.youtube.com/watch?v=_6MAkLJ79LE)
 
 1. An essay helper, where the user needs the their entry in a [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) to have five paragraphs and be 300-500 words.
 1. An essay helper which prompts the user to make sure they are still paying attention if they haven't written anything in a few minutes, but has the option to pause (for dinner, bathroom breaks, and The Voice).
+
+PAIR Programming assignment in class we finished our game:
+https://github.com/Ameliawb/PairProgramming
diff --git a/background_react.jpg b/background_react.jpg
diff --git a/index.html b/index.html
@@ -1,9 +1,40 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>So-and-so's React Assignment</title>
-  </head>
-  <body>
-    YOUR PROJECT HERE
-  </body>
-</html>
+
+<head>
+
+    <body>
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+        <script language="javascript" type="text/javascript" src="react.js"></script>
+        <title>Amelia's REACTIONssssss</title>
+
+        <link rel="stylesheet" type="text/css" href="react.css">
+        <div class="hello">
+            <h1>Press the Buttons to Make the Squares Move</div></h1>
+        <button class="button">Tall</button>
+        <button class="button2">Short</button>
+        <button class="button3">Wide</button>
+        <button class="button4">Narrow</button>
+        <button class="button5">Animate!</button>
+        <button class="button7">clone</button>
+        <button class="button6">reset</button>
+        <div class="instruction">
+            <div class="container">
+                <div class="box" id="green">
+                </div>
+                <div class="box" id="blue">
+                </div>
+                <div class="box" id="red">
+                </div>
+                <div class="box" id="purple"
+                </div>
+                <div class="box" id="yellow"
+                </div>
+                <div class="box" id="pink"
+                </div>
+            </div>
+        </div>
+    </body>
+</head>
+
+</html>
diff --git a/react.css b/react.css
@@ -0,0 +1,65 @@
+body {
+    background-image: url("background_react.jpg");
+}
+h1 {
+    color: #ffffff;
+    font-family: 'Lato', sans-serif;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 18px;
+    margin: 2 2 58px;
+}
+box {
+    position: relative;
+}
+.hello {
+    background: #000000;
+    height: 26px;
+    width: 359px;
+    opacity: .79;
+}
+#green {
+    background: #d6ef39;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+#blue {
+    background: #00a5c6;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+#red {
+    background: #ce007b;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+#purple {
+    background: #660099;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+#yellow {
+    background: #ffff77;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+#pink {
+    background: #ff33aa;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+.instruction {
+    color: white;
+}
diff --git a/react.js b/react.js
@@ -0,0 +1,120 @@
+$(document).ready(function() {
+    $("#pink").hide();
+    $("#purple").hide();
+    $("#yellow").hide();
+    $(".button").click(function() {
+        $("#green").animate({
+            height: "300px"
+        });
+        $("#blue").animate({
+            height: "400px"
+        });
+        $("#red").animate({
+            height: "500px"
+        });
+        $("#purple").animate({
+            height: "600px"
+        });
+        $("#yellow").animate({
+            height: "700px"
+        });
+        $("#pink").animate({
+            height: "800px"
+        });
+    });
+    $(".button2").click(function() {
+        $(".box").animate({
+            height: '50px',
+            width: '300px'
+        });
+    });
+
+    $(".button3").click(function() {
+        $("#green").animate({
+            width: "500px"
+        });
+        $("#blue").animate({
+            width: "600px"
+        });
+        $("#red").animate({
+            width: "700px"
+        });
+        $("#purple").animate({
+            width: "800px"
+        });
+        $("#yellow").animate({
+            width: "900px"
+        });
+        $("#pink").animate({
+            width: "1000px"
+        });
+    });
+    $(".button4").click(function() {
+        $(".box").animate({
+            height: '300px',
+            width: '50px'
+        });
+        /* add after the curly bracket},1000); to set the timing of the animation*/
+    });
+
+    /*make duplicates for crazy shizzz to happen....*/
+    $(".button7").click(function() {
+
+        $("#pink").show().animate({
+            top: 50,
+            left: 3
+        });
+        $("#purple").show().animate({
+            top: 70,
+            left: 3
+        });
+        $("#yellow").show().animate({
+            top: 120,
+            left: 3
+        });
+    });
+
+
+    /* reset all boxes to the original starting position and style*/
+    var wide = 165;
+    var high = 165;
+
+    $(".button6").click(function() {
+        $(".box").width(wide).height(high);
+        $(".box").animate({
+            top: 5,
+            left: 3,
+            opacity: 1
+        });
+        $("#pink").hide();
+        $("#yellow").hide();
+        $("#purple").hide();
+    });
+
+
+    /*animation....*/
+    $(".button5").click(function() {
+        $(".box").css({
+            opacity: 0.8
+        });
+        var h = $(window).height();
+        var w = $(window).width();
+        $('.box').each(function() {
+            var originalOffset = $(this).position(),
+                $this = $(this),
+                tLeft = w - Math.floor(Math.random() * 500),
+                tTop = h - Math.floor(Math.random() * 500);
+
+            $(this).animate({
+                "left": tLeft,
+                "top": tTop
+            }, 2000, function() {
+                $this.animate({
+                    "left": originalOffset.left + 100,
+                    "top": originalOffset.top - 30
+                }, 3000);
+            });
+        });
+
+    });
+});