saving for tutorial page

views/tutorial/html/10.erb

@@ -17,10 +17,3 @@
   <p>To continue working on your site, head to the <a href="/dashboard">dashboard</a>!</p>
   <p>You can also check out all the <a href="/browse">cool sites on Neocities</a>  and follow them via your <a href="/">news feed</a>.</p>
 </div>
-
-
-<script>
-  function checkHomework(editor) {
-    alert('check homework here')
-  }
-</script>

views/tutorial/html/9.erb

@@ -4,7 +4,7 @@
     It'll be saved as <strong>index.html</strong>, which is the first web page people see when they visit your site.
   </div>
   <div class="dialogue" style="left: 283px;top: 190px; width:160px">
-    You can can find and edit index.html by visitng your <a href="/dashboard">Neocities dashboard</a>.
+    You can can find and edit index.html by visiting your <a href="/dashboard">Neocities dashboard</a>.
   </div>
   <div class="dialogue" style="left: 280px;top: 580px">
     <!-- A cheat sheet of all the tags you've learned can be found in the tutorial section. -->
@@ -12,7 +12,32 @@
 </div>
 
 <script>
-  function checkHomework(editor) {
+  $(document).ready(function() {
-    alert('check homework here')
+    $('#editor').css('display', 'none')
+    $('.editor-heading').css('display', 'none')
+    $('h3 #sitePreview').css('display', 'none')
+
+    $('#saveToSite').on('click', function() {
+      $.ajax({
+        url: '/site_files/save/index.html?csrf_token=<%= Rack::Utils.escape csrf_token %>',
+        data: sessionStorage.getItem('tutorialHtml'),
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        error: function(jqXHR, textStatus, errorThrown) {
+          alert('There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!')
+        },
+        success: function(response){
+          if(response == 'ok') {
+            window.location = '/tutorial/html/10'
+          } else {
+            alert('There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!')
           }
+        }
+      })
+
+      return false
+    })
+
+  })
 </script>

views/tutorial/layout.erb

@@ -16,7 +16,7 @@
 
     <div class="col col-40 interact">
       <% if request.path =~ /\/html\/9/ %>
-      <a href="/tutorial/html/10" class="btn btn-Action">Save to <%= current_site.username %>.neocities.org</a>
+      <a href="#" id="saveToSite" class="btn btn-Action">Save new index.html to <%= current_site.username %>.neocities.org</a>
       <a href="/tutorial/html/10" class="btn cancel" style="margin-right: 7px">Don't Save</a>
       <% else %>
       <input id="submit" class="btn btn-Action" type="submit" value="Save">
@@ -60,11 +60,9 @@
           })
         </script>
 
-      <div class="error" style="display: none; margin-top: 0">
+        <div class="error" style="display: none; margin-top: 0"></div>
-        <i class="fa fa-exclamation-triangle"></i> Try again: make sure you change Hello World to something else.
-      </div>
 
-      <h3>Site Preview</h3>
+        <h3 id="sitePreview">Site Preview</h3>
         <iframe class="preview" style="background: white"></iframe>
       </div>
     </div>
@@ -128,6 +126,7 @@
     $('#editor').text(tutorialHtml)
 
   function refreshIframe() {
+    if(typeof editor !== 'undefined')
       $('.tutorial iframe').contents().find('html').html(editor.getValue())
   }