bfl-itp · susfor · Oct 2, 2014 · Oct 2, 2014 · Oct 2, 2014 · Oct 9, 2014
diff --git a/README.md b/README.md
@@ -1,18 +1,4 @@
 # "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).
+Read blog post here:
+http://www.forchheimer.se/susanne/ITP/?cat=14
diff --git a/index.html b/index.html
@@ -1,9 +1,43 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>So-and-so's React Assignment</title>
+    <title>React Assignment</title>
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="http://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+
+    <style>
+      body {
+        text-align: center;
+        font-family:verdana;
+      }
+      .testspace {
+        width: 600px;
+        height: 400px;
+        margin: auto;
+        position: relative;
+        border: 3px solid green;
+      }
+
+      p {
+    	font-size:300%;
+      }
+
+    </style>
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="scripts/jquery-ui.min.js"></script>
   </head>
   <body>
-    YOUR PROJECT HERE
+    <h1>Simple Math Test</h1>
+    <div class="testspace">
+		<p id="math"></p>
+		<h3> Answer here: </h3>
+		<input type="text" id="answer" value="">
+		<button id="button1">Check answer</button> <br>
+		<h3 id="feedback"></h3>
+
+    </div> 
+
+
+    <script src="scripts/react.js"></script>
   </body>
 </html>
diff --git a/react part 2/Gruntfile.js b/react part 2/Gruntfile.js
@@ -0,0 +1,45 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    jshint: {
+      files: {
+        src: [
+          '**/.html',
+          '**/*.js',
+          // excluded files
+          '!node_modules/**/*',
+          '!vendor/**/*'
+        ]
+      },
+      // http://www.jshint.com/docs/options/
+      options: {
+        browser: true,
+        eqeqeq: true,
+        extract: 'auto', // http://bahmutov.calepin.co/linting-javascript-inside-html.html
+        forin: true,
+        freeze: true,
+        latedef: true,
+        maxdepth: 4,
+        maxparams: 3,
+        maxstatements: 10,
+        newcap: true
+      }
+    },
+    validation: {
+      options: {
+        failHard: true,
+        reset: true
+      },
+      files: {
+        src: [
+          '**/*.html',
+          '!node_modules/**/*'
+        ]
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-html-validation');
+
+  grunt.registerTask('default', ['jshint', 'validation']);
+};
diff --git a/react part 2/README.md b/react part 2/README.md
@@ -0,0 +1,4 @@
+# "React" part 2 Assignment
+
+Read blog post here:
+http://www.forchheimer.se/susanne/ITP/?cat=14
diff --git a/react part 2/index.html b/react part 2/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>React Assignment</title>
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="http://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+
+
+    <style>
+      body {
+        text-align: center;
+        font-family: verdana;
+      }
+      .testspace {
+        width: 600px;
+        height: 500px;
+        margin: auto;
+        position: relative;
+        border: 3px solid green;
+      }
+
+      p {
+    	font-size:300%;
+      }
+
+      #count{
+        margin-left: 240px;
+        margin-top: -48px;
+        font-size:150%;          
+      }
+
+      .top{
+        position: absolute;
+        margin: 10px;
+      }
+
+      .iconomation{
+        position: fixed;
+        font-size:80%;
+
+      }
+    </style>
+    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="scripts/jquery-ui.min.js"></script>
+  </head>
+  <body>
+    <h1>Simple Math Test</h1>
+    <div class="iconomation">
+
+    </div>
+    <div class="testspace">
+      <div class="top">
+        <button id="addition">Addition</button> 
+        <button id="multiplication" disabled ="disabled">Multiplication</button> <br>
+        <div id="newlevel"></div>
+      </div>     
+      <h3> Right answers:</h3>
+      <h4 id="count"></h4> 
+      <div class="contenttext">   
+        <p id="mathtype"></p>
+    		<p id="math"></p>
+    		<h3> Answer here: </h3>
+    		<input type="text" id="answer" value="">
+    		<button id="button1">Check answer</button> 
+        <button id="tryagain">Try again</button>
+    		<h3 id="feedback"></h3>
+      </div>  
+    </div> 
+
+    <script src="scripts/react.js"></script>
+  </body>
+</html>
diff --git a/react part 2/package.json b/react part 2/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "react",
+  "private": "true",
+  "scripts": {
+    "test": "grunt"
+  },
+  "devDependencies": {
+    "grunt": "^0.4.4",
+    "grunt-contrib-jshint": "^0.10.0",
+    "grunt-html-validation": "^0.1.15"
+  }
+}
diff --git a/react part 2/scripts/jquery-ui.min.js b/react part 2/scripts/jquery-ui.min.js