hodonsky/namepicker.md

## namepicker.md

      
    Raw
  

              namepicker.md
            
          
    JS Homework : Name Picker

Setup:


make a new directory for this project
make three files -> index.html main.js style.css
Build the html basics (head, body)
link up the css and js files to the <head> section in your html.

Before we get going - lets git going.


git status
git init
git add -A (or git add .)
git commit -m "initial commit"
git remote add origin (SSH key)
git push -u origin master

In your JS file:


make an array of strings (or use this one)

var wdi_18_names = ["Addison", "Ben", "Christine", "Chloe", "Cris", "Dane", "David H", "David Z", "Emily", "Imtaek", "Jack", "Jesse P", "Jesse Z", "Jonathan", "Pericles", "Peter", "Philippe", "Sergio", "Simon", "Tali", "Tavo", "Trevor"];


load the index.html file in your browser


In the browser:


make sure that the JS file is linked by searching for the wdi_18_names variable within the console.


console log the first string from that array
console.log(wdi_18_names[0]); //this returns the first string from the array (at index position 0)


console log a different string from that array


Back in the JS file


create a FOR loop that console.log all strings from that array
var i;
for (i = 0; i < wdi_18_names.length; i++) { 
    console.log(wdi_18_names[i]);
}

// the loop logs each string in the array
//notice the difference in what is logged


reload the browser to see if it works


create a FUNCTION "eachName" that console.log each string individually from that array.
  var i = 0;
    function eachName(){
      console.log(wdi_18_names[i]);
      i ++; 
    }

when you call eachName() it will return a different name every time


research the JS  Math methods floor and random. Use these methods to design some logic that randomly logs a different string each time
var pick = Math.floor(Math.random() * wdi_18_names.length)
var namePicker = wdi_18_names[pick];
console.log(namePicker);


//REFACTORED
var namePicker = wdi_18_names[Math.floor(Math.random() * wdi_18_names.length)];
console.log(namePicker);


Use this logic within your function eachName
now when you call eachName() it should return a random name from the array
  var i = 0;
    function eachName(){
    	var namePicker = wdi_18_names[Math.floor(Math.random() * wdi_18_names.length)];
		console.log(namePicker);
      
      i ++; 
    }


##Git add + commit

Make that git commit message count!


$ git add -p 
$ git commit -m "builds javascript logic"
$ git push


##Let's refine our logic
We need to make sure that the following circumstances are accounted for:

Each name is picked only once, until all names have been picked
Once all names have been picked it would be cool to start again but without having to reload the page

##Connecting the DOM to INPUT
####(Preparation for tomorrow - optional)

Create a button in HTML
Research how you can use that button to call a function (namePicker)
Write a function that uses the JS logic for selecting a random name.
Hook everything up so that your button is now printing a random string to the console.

##Make that commit message count!

$ git add -p 
$ git commit -m "button prints string to console"


##Writing to the DOM


Write to the DOM. We want the name to render in our DOM - not just in the console!! Use document.write to get started
  var i = 0;
    function eachName(){
    
    	var namePicker = wdi_18_names[Math.floor(Math.random() * wdi_18_names.length)];
		console.log(namePicker);
		document.write(namePicker);
      
      i ++; 
    }


document.write (henceforth DW) is super basic. How can we refine this step?


DW  does not work in XHTML
DW does not directly modify the DOM, preventing further manipulation
DW executed after the page has finished loading will overwrite the page, or write a new page, or not work
DW executes where encountered: it cannot inject at a given node point
DON'T USE document.write

MDN[https://developer.mozilla.org/en-US/docs/Web/API/Document] has some better ways


Rework the JS logic so that a name will not be picked twice, until all other names have been picked

array.pop()

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_pop


##BONUS CHALLENGE ADD ON!!

Render a photo of the person who's name is picked
CSS Animations!
Bling!!