From 1bc9bbe8e27b05e1db1745a7a932a598c6388046 Mon Sep 17 00:00:00 2001
From: David Kerr <david.m.kerr@uconn.edu>
Date: Thu, 19 Apr 2018 14:44:55 -0400
Subject: [PATCH] testing smile

---
 css/main.css |  14 ++++--
 index.html   |   7 ++-
 js/main.js   | 123 ++++++++++++++++++++++++---------------------------
 3 files changed, 75 insertions(+), 69 deletions(-)

diff --git a/css/main.css b/css/main.css
index bf61c9f..682d1ef 100644
--- a/css/main.css
+++ b/css/main.css
@@ -97,11 +97,17 @@ textarea {
    Author's custom styles
    ========================================================================== */
 
+
+
 body{
     background-color:#ffb732;
     font-family:"Roboto";
 }
 
+#password{
+    text-align:center;
+}
+
 #tupperware{
     margin:0 auto;
     width:100%;
@@ -156,7 +162,7 @@ textarea{
     height:100px;
 }
 textarea, input{
-    width:200px;
+    width:250px;
 }
 input{
     margin-bottom:5px;
@@ -187,13 +193,15 @@ input:focus, textarea:focus, button:focus{
 
 
 
+
+
 @media screen and (min-width:500px){
     .profile{
         width:50%;
         padding:1%;
     }
-    textarea{
-        width:405px;
+    textarea, #userimg{
+        width:505px;
     }
 }
 
diff --git a/index.html b/index.html
index 3da12d0..0e28fc9 100644
--- a/index.html
+++ b/index.html
@@ -19,14 +19,15 @@
         
     
 
-        <div id="password" class="hidden">
+        <div id="password" class="">
             <!-- some webcam video link -->
             <h1>How 'bout a smile?</h1>
             <p>Smile for the camera to enter the page</p>
+            <smile-to-unlock api-key="1fd73c6345e449ee8f8b0febc33cf300"></smile-to-unlock>
         </div>
 
 
-        <div id="tupperware" class="">
+        <div id="tupperware" class="hidden">
             <div id="content" clss="clearfix">
                 <header>
                     <h1>Scripting for the Web Roster</h1>
@@ -40,12 +41,14 @@ <h3>Add a student</h3>
                 <input id="usertitle" type="text" placeholder="Title">
                 <input id="useremail" type="text" placeholder="Email"><br>
                 <textarea id="userbio" placeholder="Bio"></textarea><br>
+                <input id="userimg" type="text" placeholder="Image URL"><br>
                 <button type="submit" id="submit">Add to roster</button>
             </form>
         </div>
 
 
 
+        <script src="https://unpkg.com/smile-to-unlock@latest/dist/smiletounlock.js"></script>
         <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
diff --git a/js/main.js b/js/main.js
index 92514e6..652ccc6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,117 +1,115 @@
 
 
-var davidBio = 'I\'m a DMD student at UConn working on a concentration in web design.  I like sci-fi robots and spaceships, and enjoy building models of them.'
-var davidImg = 'https://vignette.wikia.nocookie.net/gundam/images/5/5e/Gundam_Exia_LOL.jpg/revision/latest?cb=20101019165531'
-var amandaImg = 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg'
-var danielImg = 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg'
+function Student(name, title, email, bio, img){
+	this.name = name;
+	this.title = title;
+	this.email = email;
+	this.bio = bio;
+	this.img = img;
+	printProfile(this.name, this.title, this.email, this.bio, this.img)
+}
+
+var david = new Student('David Kerr', 'Dork', 'david.m.kerr@uconn.edu', 'I\'m a DMD student at UConn working on a concentration in web design.  I like sci-fi robots and spaceships, and enjoy building models of them.', 'https://vignette.wikia.nocookie.net/gundam/images/5/5e/Gundam_Exia_LOL.jpg/revision/latest?cb=20101019165531');
+var emilyR = new Student('Emily Ruffell', 'Can you read for the class?', 'reviveVine@vine4ever.com', 'What up, I\'m Emily, I\'m twenty-three and I never fucking learned how to read.', 'https://files.slack.com/files-pri/T040V7VBL-FA9KYBBL4/emilyr.png')
+
+classList = ['Amanda Brickner', 'Daniel Bean', 'David Kerr', 'Emily McAndrew', 'Max Nonken', 'Rachel Sarnie', 'Emily Ruffell'];
+
+
+var tupperware = document.querySelector('#content');
+var smile = document.querySelector('#password');
+
 
+var locker = document.querySelector('smile-to-unlock');
+locker.start();
 
-classImg = [amandaImg, danielImg, davidImg]
-classList = ['Amanda Brickner', 'Daniel Bean', 'David Kerr', 'Emily McAndrew', 'Max Nonken', 'Rachel Sarnie', 'Emily Ruffell']
-classTitle = ['', '', 'Dork', '', '', '', '']
-classBio = ['', '', davidBio, '', '', '', '']
-classEmail = ['', '', 'david.m.kerr@uconn.edu', '', '', '', '']
+locker.addEventListener('userSmiled', function (ev) {
+    // --> Add the code to show the free content here <--
+    smile.classList.remove('hidden');
+    tupperware.classList.add('hidden');
 
 
-var tupperware = document.querySelector("#content");
+    locker.end(); // End the locker so the camera is shutdown
+})
 
 
 function addImage(src = 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg'){
-	var imgdiv = document.createElement("div");
-    imgdiv.style.backgroundImage = "url(" + src + ")";
-    imgdiv.classList.add("circle");
+	var imgdiv = document.createElement('div');
+    imgdiv.style.backgroundImage = 'url(' + src + ')';
+    imgdiv.classList.add('circle');
     return imgdiv;
 }
 
 function createName(name){
 	/*classList.push(name)*/
-	var newh2 = document.createElement("h2");
+	var newh2 = document.createElement('h2');
 	var newh2Text = document.createTextNode(name);
 	newh2.appendChild(newh2Text);
 	return newh2;
 }
 
 function createTitle(title){
-	var newh3 = document.createElement("h3");
+	var newh3 = document.createElement('h3');
 	var newh3Text = document.createTextNode(title);
 	newh3.appendChild(newh3Text);
 	return newh3;
 }
 
 function createBio(bio){
-	var newp = document.createElement("p");
+	var newp = document.createElement('p');
 	var newpText = document.createTextNode(bio);
 	newp.appendChild(newpText);
 	return newp;
 }
 
 function createEmail(email){
-	var newh4 = document.createElement("h4");
+	var newh4 = document.createElement('h4');
 	var newh4Text = document.createTextNode(email);
 	newh4.appendChild(newh4Text);
 	return newh4;
 }
 
-function printProfile(/*name, title, bio, email, src*/){
-	
-	for (n=0; n < classList.length; n++){
-		var newDiv = document.createElement("div");
-		newDiv.classList.add("profile");
+function printProfile(name, title, email, bio, src){
+	var newDiv = document.createElement('div');
+	newDiv.classList.add('profile');
 		
-		newDiv.appendChild(addImage(classImg[n]));
-		newDiv.appendChild(createName(classList[n]));
-		newDiv.appendChild(createTitle(classTitle[n]));
-		newDiv.appendChild(createEmail(classEmail[n]));
-		newDiv.appendChild(createBio(classBio[n]));
-
-		content.appendChild(newDiv);
-	}
-	
-}
-
-function createProfile(name, title, bio, email, src){
-	var newDiv = document.createElement("div");
-	newDiv.classList.add("profile");
-
-	classImg.push(src);
-	classList.push(name);
-	classTitle.push(title);
-	classBio.push(bio);
-	classEmail.push(email);
-
 	newDiv.appendChild(addImage(src));
 	newDiv.appendChild(createName(name));
 	newDiv.appendChild(createTitle(title));
 	newDiv.appendChild(createEmail(email));
 	newDiv.appendChild(createBio(bio));
 
-	/*var newbutton = document.createElement("button");
-	newbutton.innerHTML = 'Delete';
-	newDiv.appendChild(newbutton);
-	newbutton.id = 'deleteDiv';*/
-
 	content.appendChild(newDiv);
 }
 
-printProfile();
-
 
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
 
-submit.addEventListener("click", function(event){
+submit.addEventListener('click', function(event){
 	event.preventDefault();
 })
 
 
 
-submit.addEventListener("click", function(){
-	var fname = document.querySelector("#userfname").value;
-	var lname = document.querySelector("#userlname").value;
+submit.addEventListener('click', function(){
+	var fname = document.querySelector('#userfname').value;
+	var lname = document.querySelector('#userlname').value;
 
-	var name = (fname + " " + lname);
+	fname = capitalizeFirstLetter(fname);
+	lname = capitalizeFirstLetter(lname);
 
-	var title = document.querySelector("#usertitle").value;
-	var email = document.querySelector("#useremail").value;
-	var bio = document.querySelector("#userbio").value;
+	var name = (fname + ' ' + lname);
+
+	var title = document.querySelector('#usertitle').value;
+	title = capitalizeFirstLetter(title);
+	var email = document.querySelector('#useremail').value;
+	var bio = document.querySelector('#userbio').value;
+	var img = document.querySelector('#userimg').value;
+
+	if (img == ''){
+		img = 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg';
+	}
 
 	if (fname == ''){
 		alert('Please enter a first name');
@@ -120,14 +118,11 @@ submit.addEventListener("click", function(){
 		alert('Please enter a last name');
 	}
 	else{
-		createProfile(name, title, bio, email);
+		var newStudent = new Student(name, title, email, bio, img);
 	}
 
-	/*document.querySelector("#deleteDiv").addEventListener("click", function(){
-		newDiv.classList.add("hidden");
-	})*/
-
-	document.getElementById("addstudent").reset();
+	
+	document.getElementById('addstudent').reset();
 });