#JS Homework : Name Picker
- 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.
- 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 arrayvar 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
andrandom
. Use these methods to design some logic that randomly logs a different string each timevar 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 arrayvar 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 startedvar 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 is super basic. How can we refine this step?
-
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!!