From edf82b6a284da6d655c34da47e39f83b8e44028f Mon Sep 17 00:00:00 2001 From: Justin Berman Date: Sat, 2 Nov 2019 00:18:46 -0700 Subject: [PATCH] Minor edits to tutorial language + ellipsis fix --- src/pages/docs.html | 79 ++++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 34 deletions(-) diff --git a/src/pages/docs.html b/src/pages/docs.html index 3916579..27ac1a0 100644 --- a/src/pages/docs.html +++ b/src/pages/docs.html @@ -24,9 +24,7 @@
@@ -92,11 +90,11 @@ You can think of this tutorial as a demonstration of the core functionality of Userbase in the simplest way possible. We are going to focus solely on building a fully functional web app. Making things pretty is left as an exercise to the reader.

-

You can see a live demo of what we'll building here.

+

You can see a live demo of what we'll be building here.

Prerequisites

-

You just need to be familiar with HTML and JavaScript basics.

+

You just need to be familiar with HTML and JavaScript basics.

Setting up

@@ -136,7 +134,7 @@

Creating a developer account

-

To complete this tutorial, you'll need to create a Userbase developer account, and then create an app from within your account. Take note of the Application ID of your app.

+

To complete this tutorial, you'll need to create a Userbase developer account. Upon creation, a default application named "Preview" will be created. Take note of the App ID, you'll need it in a second.

We're now ready to start building our web app. We'll start by implementing the sign up and login features, and then in the second part we'll implement the to-do functionality. @@ -147,14 +145,12 @@ We're going to load the Userbase SDK from a CDN with a <script> tag in the head of our page: - 

+  
     
   

@@ -165,7 +161,7 @@
 
   

     Before doing anything with the Userbase SDK, we need to let it know our Application ID.
-    Simply replace 'YOUR_APP_ID' with the Application ID of the app you created earlier:
+    Simply replace 'YOUR_APP_ID' with the App ID you received when you created your developer account:
   

 
   
@@ -313,7 +309,7 @@
       function handleSignUp(e) {
         e.preventDefault()
 
-    ...
+    …
 
     </script>
 
@@ -327,7 +323,7 @@
     <!-- application code -->
     <script type="text/javascript">
 
-    ...
+    …
 
         .catch((e) => document.getElementById('signup-error').innerHTML = e)
       }
@@ -363,8 +359,14 @@
 
   
First, we'll add a new container under the authentication forms:

 
-  
+  
     
+
+    <!-- Auth View -->
+    <div id="auth-view">
+
+    …
+
     </div>
 
     <!-- To-dos View -->
@@ -379,7 +381,7 @@
     <script type="text/javascript">
       userbase.configure({ appId: 'YOUR_APP_ID' })
 
-    ...
+    …
 
     </script>
     
@@ -388,18 +390,27 @@
   
Then, we'll add a function to display this view and initially make it hidden:

 
   

-    
+    
       
-      function showTodos(username) {
-        document.getElementById('auth-view').style.display = 'none'
-        document.getElementById('todo-view').style.display = 'block'
-        document.getElementById('username').innerHTML = username
-      }
+      <!-- application code -->
+      <script type="text/javascript">
+
+      …
+
+          .catch((e) => document.getElementById('signup-error').innerHTML = e)
+        }
+
+        function showTodos(username) {
+          document.getElementById('auth-view').style.display = 'none'
+          document.getElementById('todo-view').style.display = 'block'
+          document.getElementById('username').innerHTML = username
+        }
+        
+        document.getElementById('login-form').addEventListener('submit', handleLogin)
+        document.getElementById('signup-form').addEventListener('submit', handleSignUp)
       
-      document.getElementById('login-form').addEventListener('submit', handleLogin)
-      document.getElementById('signup-form').addEventListener('submit', handleSignUp)
-      
-      document.getElementById('todo-view').style.display = 'none'
+        document.getElementById('todo-view').style.display = 'none'
+      </script>
       
     

   

@@ -444,11 +455,11 @@
     authentication view disappear and your username show up along with the to-do list heading.
   

 
-  
Using to the database

+  
Using the database

 
   

-    Each time a new session is started, we need to establish a connection with the
-    database that will hold that user's to-dos.
+    Each time a new session is started when a user signs up or logs in, we need to establish a
+    connection with the database that will hold that user's to-dos.
   

 
   

@@ -586,7 +597,7 @@
     
     <!-- application code -->
     <script type="text/javascript">
-    ...
+    …
 
       function addTodoHandler(e) {
         e.preventDefault()
@@ -647,7 +658,7 @@
       const todoLabel = document.createElement('label')
       todoLabel.innerHTML = items[i].item.todo
 
-    ...
+    …
 
       // append the todo item to the list
       const todoItem = document.createElement('div')
@@ -729,7 +740,7 @@
     <!-- application code -->
     <script type="text/javascript">
     
-    ...
+    …
 
         .catch((e) => document.getElementById('signup-error').innerHTML = e)
       }
@@ -744,7 +755,7 @@
         document.getElementById('auth-view').style.display = 'none'
         document.getElementById('todo-view').style.display = 'block'
 
-    ...
+    …
 
       function showAuth() {
         document.getElementById('todo-view').style.display = 'none'
@@ -760,7 +771,7 @@
       function handleDatabaseChange(items) {
         const todosList = document.getElementById('todos')
 
-    ...
+    …
 
       document.getElementById('login-form').addEventListener('submit', handleLogin)
       document.getElementById('signup-form').addEventListener('submit', handleSignUp)
@@ -802,7 +813,7 @@
     <!-- application code -->
     <script type="text/javascript">
     
-    ...
+    …
     
       document.getElementById('login-form').addEventListener('submit', handleLogin)
       document.getElementById('signup-form').addEventListener('submit', handleSignUp)