RE: Why learn to code?

Looking through the subreddit’s wiki on “common concerns and fears” and “questions about learning“, I came across a lot of information that I didn’t think I would ever need to know when diving into coding.

There are a lot of assumptions when it comes to wanting to achieve the ability of coding, step by step. One of them is having to be good in math. To be honest, I thought this was apart of the truth. Personally, I am not that good in math. As I came to terms with what I wanted to major in, I was nervous that this would be a problem for me. Once I keep reading the discussion thread, I found out that it isn’t that serious. The only things you need to know are the basics — addition, subtraction, multiplication and division. Some algebra may be required, but not anything so complex. Most programmers have had to do hardly any maths in their entire career.

Six Degrees of Separation Stretch goals

The game has come to a point where your version should have the functionality to actually play. There are start and finish actors set and through credit guesses you have a test for matches.

There are some additional functional elements you can include that you’ll see in a previous ‘final’ version of the game from last semester. The code base has a lot of differences, but the features you can consider adding include the following:

  • A hints box layout that shows the three credits at a time for the finish actor. These credits look the same as ones in the main cast-credits box, but do not have event listeners attached. There is only an event listener on the ‘More’ button that doles out three additional credits at time. As part of this functionality you’ll need to save all the credit (Movie or Tv) to the game_data finish actor data structure.
  • A guesses box that shows the pathway the user has taken to make a match between two actors. This also involves adding to the game_data structure by saving each object (or a reference to it) that was clicked on in main cast-credits box.
  • A game reset in the top center, as well as some game data.
  • Functional navigation to show/hide the three divs for the three boxes.
  • There are other bigger stretch goals that I’ve tracked on my own blog. Some have been solved like the more complete tv show cast by generating a combined list actors from all the seasons of the show.

Note any stretch goals you’ve attempted or solved in your final blog post of your version of the game.

dev1 – moron test DOM

**note use this updated HTML/CSS/JS

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

With the game board designed and the data structure for the icons designed, we can now dynamically build the game board using four functions: clear_icons(), build(icon), set(icons), and listen_to_icons().

//clear the div.icon-box of <i> elements
function clear_icons() {
}

//using an icon object as an argument
//build an <i> element with icon properties
function build(icon) {
}

//using array of icon objects as an argument
//forEach object call build(icon)
//then set returned <i> element to the icon box
function set(icons) {
}

//create a click listener forEach <i> element in div.icon-box
//for now a click will console.log the index value of the icon
function listen_to_icons() {
}

clear_icons()

This function uses a while condition to check if there is a ‘first child’ in the div.icon-box. As long as there is a first child then the loop will continue to remove a first child. Eventually no first children remain and the while loop ends.

Requires: while, parent_el.firstChild, and parent_el.removeChild.

build(icon)

This function uses the document.createElement() method to first build an <i> element. After, the values of icon object passed as an argument are used to modify the <i> element. This includes a number of icon_el.style modifiers, icon_el.innerHTML, and a bit of tricky use of icon_el.classList.add. Values of classList are in an array, so each class must be added one at a time. So the class pair string ‘fas fa-ghost’ needs to be converted to an array of two strings – ['fas', 'fa-ghost']. Then you can loop through the array and add each class one at a time.

Requires: document.createElement(), icon_el.style, icon_el.innerHTML, icon_el.classList.add, and a to be discovered method of converting a string to an array of strings.

set(icons)

Traverses the array of icon objects passed as an argument using a forEach() method. And for each icon obj, build(icon) is called to created the <i> element with all the icon properties. The built element is then added to div.icon-box as child element using parent_el.appendChild(el) method.

Requires: forEach() and parent_el.appendChild(el)

listen_to_icons()

Adds a click event listener to every <i> element added to div.icon-box. Using a special case of the forEach() method combined with a .call() method to allow a ‘node list’ of selected elements to be treated as an array. This allows the use of the second argument in a forEach(value, index) – the index so we can track which <i> element has been clicked.

Requires: Array.prototype.forEach.call(selected_icon_els, function(icon, i){})

dev2 – six degrees of separation v4

So more changes! That’s how development works. As I described on Tuesday I’ve restructured the model for building credit objects from the movie database data. There is now a Credit class that extends to Actor, Movie, or TV. Each extended class has it’s specific get_credits() method to fetch data from the movie database.

Credit, Actor, Tv, Movie

class Credit {
  constructor(id, name, img, detail) {
    this.id = id;
    this.name = name;
    this.img = img;
    this.detail = detail;
  }
}

class Actor extends Credit {
  async get_credits() { //fetch actor combined credits and create
                        //Movie or TV objects in an array
 }
}

class Tv extends Credit {
  async get_credits() { //fetch tv details
                        //then fetch actors for each tv season
                        //then create array of Actor objects
                        //then remove duplicate Actor objects
 }
}

class Movie extends Credit {
  async get_credits() { //fetch movie cast
                        //then create array of Actor objects
 }
}

Also, a Card class was created to build cards from the Credit object’s data. There are methods to build different card types – build_main(), build_header(), and build_empty(). As well there are a couple methods – set_image() and set_detail() – to deal with missing images and different detail data respectively.

class Card {
  constructor(credit_obj, card_type, id, img, main, detail) {
    this.credit_obj = credit_obj;
    this.card_type = card_type;
    this.id = id;
    this.img = img;
    this.main = main;
    this.detail = detail;
  }

  set_img() {
   //deals with no image data
   //and returns url from card img src attribute
  }

  set_detail() {
   //details with Actor vs Movie/TV credit detail differences
   //Actor is a character and Movie/TV has a date that needs
   //to be shortened
  }

  build_main() {
   //returns a card used in the main credits-cast div 
   //or for the main hints div
  }

  build_header(start_or_finish) {
    //takes 'start' or 'finish' as an argument
    //updates img and name of the selected card
  }

  build_empty() {
   //returns an empty card for layout purposes in the header and main divs
  }
}

Setting the cards to the DOM requires a number of functions to be able to – clear_cards(cardbox), set_main_cards(credit_arr, cardbox), set_header_card(credit_obj, start_or_finish), set_empty_cards(cardbox, count)

clear_cards(cardbox)

Passes the class of the card box to be cleared of all child elements. All child elements (div.cards) are removed.

set_main_cards(credit_arr, cardbox)

Takes an array of constructed Credit objects (Actor, Movie, TV) and using the Card constructor class builds and sets cards for each object to the cardbox class. Finally adds a click event listener to all the cards in the carbox. For now just console.log the ‘id’ of the card.

set_header_card(credit_obj, start_or_finish)

Takes a constructed Credit object (Actor, Movie, or TV) and using the Card constructor class and the build_header(start_or_finish) method, sets the values of either the ‘start’ or ‘finish’ card in the header.

set_empty_cards(cardbox, count)

Uses the Card class and the build_empty() method and creates as many empty cards in the count. Then sets each empty card to the selected class for a cardbox.

dev2 – Six Degrees of Separation New CSS

At this point the game.js has pulled out any of the DOM construction and manipulation from the two core classes of Actor and Credit. Each has their respective methods getCredits() and getCast(). There is also the original getActor() function to search for an actor by string value and return an Actor constructed in a promise value.

We can now rebuild the DOM constructors and manipulators using our functions and our new HTML/CSS. This is going to require re-writing a number of element selectors and functions to clear and build the DOM. So for this week you get to use my rebuilt HTML/CSS and the game.js files which has all the above classes and functions.

There are two empty element selectors and five empty functions. Build these selectors and use them to build the five DOM builders/manipulators. If you run into issues, no worries about having to solve the problem with changes. We’ll review together and change the future base code where needed.

Below are the selectors and functions:

  • const headerCardBox
  • const mainCardBoxCreditsCast
  • function clearCards(cardbox) {}
  • function buildCard(cardType, id, img, main, detail) {}
  • function setHeader(card, id, img, main) {}
  • function setCards(arr, cardbox) {}
  • function init() { //call functions to get an actor clear, build, and set cards }

dev1 – moron test icon data structures

On Tuesday you worked on an abstraction of the text icon and Font Awesome icon properties. Now it’s time to create a data structure for each scene’s set of icons that you worked on last week.

Each icon in a scene will be represented by an object with a set of key value pairs. All the icon objects created for a scene will then be stored in a single array. It’s going to be useful to place the icon objects in an array in a consistent manor to make writing future ‘tests’ a little easier. So order the objects based on the icon positions left to right.

For example:

The icons data structure for the above layout should be something like:

var ghosts = [
    {/*pink*/}, 
    {/*orange*/}, 
    {/*cyan*/}, 
    {/*red*/}
]

Problem Set

Create array of icon objects for each scene. Save these in a JS file in version 2 of the moron test:

  • moron-test/v2/img/two-images-to-be-used-later
    moron-test/v2/style.css
    moron-test/v2/index.html (boilerplate of game keep original)
    moron-test/v2/scene-number.html (have as many copies as scenes your tasked with rebuilding)
  • moron-test/v2/moron.js (Should have an array of icon objects for each scene. Save as a variable each array and name it iconsXX where ‘XX’ is the two digit scene number.

dev2 – ES2015 part 2, ES 2106, ES2017

Tutorials

Blogging Questions

Describe the differences between declaring a constructor function and using the class keyword. Use a code snippet and an example refactor as part of your explanation.

dev1 – icon values

For each fontawesome icon or text icon used in the HTML/CSS template, there are a number of values needed. The text icon and fontawesome icons are created differently, but between the two icon types what are all the different possible values used?

Blog Questions

Describe all the different values and give each type a name. How many in total are there? List them all. Use a code snippet with examples to support your answer.

dev1 – The moron test – the game board

For the remaining few weeks of the semester we’re going to be collaborating to rebuild the Moron Test. It’s a game that was popular in the early days of the iPhone and iOS. I’ve created a run through above of the game play.

It has simple enough game logic, each scene has a layout of images to be chosen based on the instructions at the top. Sometimes there is just one image to be clicked, other times a sequence of images, and even at times no image should be clicked. Also, there are timing events that are used to trick the player. Ultimately it’s a pattern game that messes with our brain’s propensity to quickly build habits and then falters when there’s a disruption to that habit.

This basic logic and simple UI makes for a pretty good introduction to JavaScript capstone project. We’re going to start with building the layout of the game board using a shared image library and HTML/CSS code base. You’ll be given scenes to rewrite and then make minor storytelling adjustments to fit the limited image library.

After we have all our pieces in place on the board, we’ll come up with a data structure to manage the pieces and then use JavaScript to set each game board scene. And finally we’ll come up with ways to manage the various pieces of logic needed to run the game.

Problem Set

  • Review the game play above and the games scenes breakdown
  • Using the common HTML/CSS starter page (zip of starter), rebuild four chosen scenes (one just clicks, two with moving/replacing, one with timing) by hardcoding them, and save each as a separate HTML rebuilt from the starter:
    • moron-test/v1/img/two-images-to-be-used-later
    • moron-test/v1/style.css
    • moron-test/v1/index.html (boilerplate of game keep original)
    • moron-test/v1/scene-number.html (have as many copies as scenes your tasked with rebuilding)

dev2 – ES2015 part 1

Tutorials

  • ADV 15 ES2015 part 1, videos 169 – 186
  • Exercise files to publish on your server as HTML/JS pairs:
    • es2015-code-a-long.html / es2015-code-a-long.js
    • arrow-ex.html / arrow-ex.js (instructions)
    • rest-spread-ex.html / rest-spread-ex.js (instructions)
    • destructure.html / destructure.js (instructions)

Blogging Questions

Describe how the use of arrow => functions changes the need for the return keyword. Compare this to functions declared with the function keyword. Use a code snippet example to illustrate your description.

css.php