Mini-Sorting Applet in 1.5 days

I’ve made a ton of progress and finished my final project to the best I could. I want to show a quick comparison with how it looks from the day before, use the slider on this image below to go from before and after!

I wanted to create a very simple filtering system and since most of my time was spent figuring out how to build what I wanted, I want to narrow down my criteria to a few options, so I decided to emulate a very simple job application site. There is always more room, as with any software or website, to expand the breadth of its capabilities and it’s quite exciting to make different discoveries and continue to build the functionality of your product when working on your code. Anyway, below are some additional views of the application form from the responsive views for mobile and table — I was hoping I could implement responsiveness by the due date & I’m glad I did.

I created a lot of modularity in my code by adding different Javascript files for the constructor that I built, and also the two functions I created in order to be able to sort the list of applications submitted. I wanted to build out the capability of being able to sort out the array of user submitted Application Forms and then separate them into two lists, contingent on their priority and dependent on criteria I had set forth. In this case, I implemented a array filter method code that I got from a forum on stackoverflow.com. and worked it into mine and set my criteria. I wanted to display different lists of arrays and utilize the powerful .filter() Array method. Here is the snippet from my code, where the main list of applicant objects is being filtered on two diffferent occasions, once with the filterOut();function and another time with the normal(); function depending on the criteria I set forth:

function filterOut(sortList){

    // Applying filter function on list array of collected applicant objects to retrieve those applicant objects with the criteria below and then the new array returned by filter method is assigned to prioritySort.
    let prioritySort = list.filter(function (applicant) { 
        return applicant.name !== "" && 
        applicant.interests.length >= 12 &&
        applicant.experience >= 2;
    })

  //console.log the Priority Applicants list upon calling function
    console.log("");
    console.log("");
    console.log("Priority Applicants:"); 
    console.log("");
    console.log(prioritySort); 



//define a variable of html that uses an arithmetic and assigment operator to create a new html elements with each command line. For loop is included to loop through all entries. The table that is formed with this code is where filtered results will display on the screen.
    var html = "<table border='2|2'>"
        html+="<div id='priorityTitleList'>" + "Priority List" + "</div>";
    for (var i = 0; i < prioritySort.length; i++) {
    
      html+="<tr>";
      html+="<td>" + "Applicant #" + (i+1) + "</td>";
      html+="<td>" + "Name: " +prioritySort[i].name+"</td>";
      html+="<td>" + "Experience: " + "2+ years" + "</td>";
      html+="<td>" + "Interests: " +prioritySort[i].interests+"</td>";
      html+="</tr>";
      
     }
      html+="</table>";
    //the table displaying the applicant objects is generated by the code block above and put into the priority div on the html file with the .innerHTML assignment below
    document.getElementById("priority").innerHTML = html;
    }



function normal(sortList){

// Applying filter function on list array of collected applicant objects to retrieve those applicant objects with the criteria below and then the new array returned by filter method is assigned to normalPriority.
  let normalPriority = list.filter(function (applicant) { 
        return applicant.name !== "" && 
        applicant.interests.length >= 12 &&
        applicant.experience == 0;
    })

    //console.log the Normal Priority Applicants list upon calling function
    console.log("");
    console.log("");
    console.log("Normal Priority Applicants:"); 
    console.log("");
    console.log(normalPriority); 

//Below we assign the variable HTML that uses an arithmetic and assigment operator to create a new html elements with each command line. For loop is included to loop through all entries. The table that is formed with this code is where filtered results will display on the screen.
var html2 = "<table border='2|2'>";
    html2+="<div id='regularTitleList'>" + "Regular Priority List" + "</div>";
for (var i = 0; i < normalPriority.length; i++) {
    
    html2+="<tr>";
    html2+="<td>" + "Applicant #" + (i+1) + "</td>";
    html2+="<td>" + "Name: " +normalPriority[i].name+"</td>";
    html2+="<td>" + "Experience: " + "0-2 years" + "</td>";
    html2+="<td>" + "Interests: " +normalPriority[i].interests+"</td>";
    html2+="</tr>";

}
html2+="</table>";
document.getElementById("regular").innerHTML = html2;
}

On lines 55-70 above the filtered objects are finally built into a container (in this case a Javascript generated html table that I was able to style and actually make legible. I thought it was really cool that html elements were built using an assignment operater like +=. I didn’t think to do this before, but am happy that I’m learning more about the various ways we can doe. I got a tip for doing this from Prashant Ghimire over at his blog.

So let’s see what it looks like when this code is in action and a user is interacting with it!

User Inputs their Information, clicks Submit to add their Application – then the Admin presses sort to organize the applications!

After the admin clicks sort, the function is initialized and the results are returned neatly for our review.

The main criteria I used for this app to sort applications into the priority list is experience level, which I was able to determined based on the values of the radio inputs I coded in the application, as seen in the HTML code snippet below.

  
  <!-- Input data using radio selection-->
    <div class="form-group">
      <label  class="label">Years of Experience</label>

      <div class="col-sm-10">
        <div class="radio-buttons">
        <input type="radio" id="experience" name="eitherOneChecked" value="0">
        <label>0-2</label>
      </div>
      <div class="radio-buttons">
        <input type="radio" id="moreExperience" name="eitherOneChecked" value="2">
        <label>2+</label>
        </div>
      </div>

    </div>
    

Applications with more than two years of experience go to the top of the list. I also learned that you can store different values in two or more separate radio inputs and still be able to toggle between them easily by giving them all the same name. This made it much easier to store the value of the user’s experience level based on their selection. Check out the Javascript code below to see how I did this.

// values from user-input fields are assigned to the variables 'name', 'experience', and 'interests' to be used as arguments for the parameters of the constructor function 
let name = document.getElementById("name").value;
//the querySelector method on line 12 is only grabbing the value of the radio that is checked
let experience = document.querySelector('input[name = "eitherOneChecked"]:checked').value;
let interests = document.getElementById("interests").value;

All in all, I’m very happy with how this came out, my understanding of how all of the broswer-side languages came together a whole lot more. I would have added some additional design features had I more time, but I’m pretty happy with the challenge I took on to build something out like this for the project. I really did not know how to do it, and putting the code together bit by bit and making it more modular, really helped to understand the whole process of software developement on a conceptual level. I’m excited to see what comes ahead after we have learned back-end and I could actually set this up with an true admin-facing end as well as a client-user one. For now, I will have to show what is possible to compute just with Javascript and HTML+CSS alone! Feel free to visit my project here at my repl to have a live interactive experience with the program and to look at my code more in depth. I really enjoyed working on this and am looking forward to more projects. and especially projects are worth staying up for!

Final Project before General Assembly Kickoff! Making a Simple Message Filtering System

After just a few weeks of learning HTML/CSS and Javascript fundamentals with my Cohort, we are ready to work on some final projects. We will focus on narrowing down on some more advanced programming concepts we continued to study in the past week. Earlier this week we had taken a very lengthy assessment that took almost all day to complete. I actually had to finish the rest after the class as I’m not used to rushing through timed exams in the format of coding and open-ended questions combined. I’m glad I took the time to really flesh out my answers as best as I could (even though I didn’t finish during class) because it definitely helped to outline what I still need to improve upon and what concepts I needed to solidify.

So now, about the final project we have been assigned – Professor Hayes set out a few minimum requirements in the code itself in addition to proper documentation, file separation and organization and commenting throughout the code. The minimum requirements for the project from the programming aspect are as follow:

  1. Use variables instead of hard-coded values
  2. 1 function/method that you define
  3. 1 object
  4. 1 constructor function/class
  5. 1 array

I had already been experimenting with sorting through arrays and user inputs with my Horoscope app and wanted to continue working with data inputted from a user. I’ve also always wanted to create some sort of functionality that had the ability to sort and prioritize submitted forms.

As a freelancer and musician, there are times when I wish I had the ability to categorize or sort serious business inquiries from not so serious ones. With this project, I’m hoping to build a very rudimentary and browser-side basic message filtering system. If I had more knowledge about the full-stack (as I’m hoping to have in the future) this system would truly be able to function two-fold: from the user side, and from the admin side. There would be two separate pages where on one a user would submit their form, it would be stored somehow and then sent to the admin page where an admin could access their own interface and interact with the form submissions. At that point, I would be programming a whole proprietary messaging center.

Since I don’t know the full-stack yet, I will code a very basic system all on the browser side and mainly want to be able to strongly convey my understanding of the javascript principles we are required to use. I want to stray away from using code snippets from other code examples unless I absolutely know how they are used, and want to stay relatively in a place where I can confidently explain the processes going on in my program. I think we’ve learned enough about Javascript so far to truly delve into complexity and I feel like I could spend a whole four months on just JS alone.

Today I got some coding done on the system so far, and visually it currently has a very simple form that performs some operations under the hood:

Basic form is awaiting input from the user
User submits info into the fields and then hits submit

The idea is, that after the user has submitted their information and upon clicking the submit button, the data would be stored into an object to be used later. The sort button next to submit is not currently supposed to be accessible to the user, as it is an admin feature that will be used to further sort and organize the data. For now, I am leaving the sort button there before I start styling and rearranging HTML elements so that I can work out the functionality of my javascript code. I implemented a constructor object that generates a new object with the varying user-inputs of each form submission/new application. These objects (new form submissions) are then pushed to an array called list and the list is printed in the console as shown below, displaying all the submissions made in the current session.

I wanted to note that since I am only doing this in the browser, all submissions pushed into the array will be gone from the memory of the site after the page is refreshed. This is what I need backend knowledge for!

Now for some code snippets!
– you may read the comments in the code below for a deeper explanation of what each line does. Apologies for the lack of text-wrapping in the built-in syntax code highlighter plug-in that comes with the free wordpress and any illegibility it may cause. Hopefully can upgrade to a business account or over to wordpress.org soon to show what I want intentionally.

I currently have broken up the essential function of the Javascript code I am hoping to flesh out into two parts:

1. one that performs the general task of ‘Add File’ to collect the data from the new form submissions.

// this array will be filled with new application objects
var list = [];

//TASK: ADD FILE//

// Lines 9&10 initializes the code procedure of 'ADD FILE' after the Submit button is clicked

// let addFile = document.querySelector('#add');
// addFile.addEventListener('click',function(event){

//Removed lines 9&10 because they were superfluous for now and merged them into one function below at line 13, which does the same thing of initializing the rest of the code needed to carry out the task of 'ADD FILE'
document.querySelector('#add').addEventListener('click',function(event){

// values from user-input fields are assigned to the variables 'name', 'experience', and 'interests' to be used as arguments for the parameters of the constructor function 
let name = document.getElementById("name").value;
let experience = document.getElementById("experience").value;
let interests = document.getElementById("interests").value;

// this assignment puts recently declared variables into the inputs for the class constructor
let newApplicant = new applicant(name, experience, interests);
//On line 23, we can use the variable assignment of newApplicant to push the contents of the object into the list array, which we have defined as a global variable so it may also be used for other purposes later.
list.push(newApplicant);

//The function being declared and invoked below clears the user-input fields on the form after data is stored and pushed to list, this line must come at the end otherwise we risk having data cleared before it is inputted. 
function myFunction() {
  document.getElementById("myForm").reset();
}
myFunction();

});

Below is the constructor function that creates the the class Applicant referenced in the code above, they are in separate JS files for modularity.

// this creates a class an applicant file and constructs a new object when it is called with arguments in the script.js file
  class applicant {
  constructor(name, experience, interests){
    this.name = name;
    this.experience = experience;
    this.interests = interests;
  }
}

2. The second code block that performs the task of ‘Sort’ is below, and it is programmed right below the ‘Add File’ code block. It currently does not do much at all, and is merely showing the list of objects in the list array with console.log(). The goal with fleshing out the rest of this block in the next day and a half will be figuring out a way to encode a function that will loop through and sort the object contents dependent on some criteria using conditional logic. Perhaps I will figure out how to incorporate the .filter() method to this end. In this block, I will also build out a way to display the sorted results by creating another container that will display upon pressing the sort button.

//TASK: SORT

//another function will be initialized after clicking sort button
let sortList = document.querySelector('#sort');
sortList.addEventListener('click',function(event){

//this function will filter out responses eventually, for now it is showing the list with the added objects in the console log
function filterOut(sortThisList){
  console.log(sortThisList);
  return sortThisList;
}
filterOut(list);
})

Feeling happy with my progress just from today, I built out about half of the functionality of my program, really upped the ante on my commenting, documentation and figured out how to clear the fields along with a game plan for the rest of the code. Hopefully will get a lot more done tomorrow with this in motion and hoping to have enough time and green lights to add some interesting styling effects. For now, will continue to map out the flow of the program on paper and reference my notes and other resources to get ideas flowing ~~

C11 Written Assessment – Updated


System/OS, Environment, GIT


What is an operating system?
The operating system, short for OS, is the software that a computer runs on and communicates with the hardware on how to execute programs and applications. Apple has a proprietary OS called Mac, PC users have Windows, Unix or Linux and perhaps there are others.


What is a GUI?
GUI stands for Graphical User Interface and it is the visual representation of data and file structures that you see on your computer display. 


What is a development environment?
A development environment is the various tools and processes a developer uses to program software and other code.


What does IDE stand for?
Integrated Development Environment and it assists you in writing code with various features versus writing code in a plain-text editor.


In MacOs, what is a Terminal? 
A terminal is where you can write commands to directly communicate and execute various functions in your computer without having to use the GUI.


In Windows, what is a Command Prompt?
Similar to terminal, this is where you would write command lines to communicate with your computer, but it has a different name specific to Windows.


What is a shell?
A shell is a program that reads commands and runs programs - it is an interface between the user and Operating System. It is a command line interface.


What is BASH?
BASH is a command-line shell, stands for “Bourne again shell” and came as a replacement for the Bourne shell, which was one of the first Unix shells. It is the default in Linux and Mac OS X applications.


What is Zsh?
Zsh is also a shell like BASH, however it is an interactive shell that incorporates a lot of useful features from other shells including auto-completions, spell correction, path replacement and more.


What is SSH?
SSH, aka Secure Shell, is a shell that automatically encrypts data sent by a computer to a network and is used for network security.


What are dotfiles?
Dotfiles are hidden files that have configurations for settings, themes and other processes.


What are permission?
Permissions give access to certain users depending on their role and are given by the admin of a site or system.


What is an absolute path?
A file pathname that starts from the system root directory.


What is a relative path?
A relative pathname tells the location of a file relative to the current directory it is in.


What does CLI stand for?
Command Line Interface


How can the current directory be identified using the command line?
pwd which stands for ‘print working directory’


How can the contents of a directory (current) be viewed?
Typing in ls which s used to list files and directories.


What command must be used to make a directory or folder using the CLI? 
mkdir (make folder)


How can recent commands be viewed on the command line? 
By using the up or down arrows on your keyboard to browse through the recent history of command lines


What shortcut keyboard combination can be used to automatically complete a path in the 
commands line? 
You use the tab key


How can a local server be started and stopped (state actual commands)? 
Python 2: python -m SimpleHTTPServer 8000
Python 3: pythom3 -m http.server —cgi 8080
PHP: php -S localhost:2222
npm: nom i -g serve
serve


What naming convention can be used to save an application or program? 
-name consistently, short but descriptive, avoid special characters or spaces, use capitals and underscores instead of periods,spaces,slashes, use a standard dating format,etc.


What is GIT?
Git is software to generate repositories.


How is GIT distinct from a repo service like Github or Bitbucket? 
GIT is the software used to communicate and manipulate files to and from a repo service, not the service itself. 


Name at least one other version control technologies (other than GIT).
CVS, SVN, Mercurial and Bazaar


What is the command to initialize a GIT repo?
git init 


What is the difference between staging and committing in GIT?
When staging, you are telling GIT to hold changes prior to committing them to the repo. Only staged changes will be able to be committed to the repo, so this is an important step to do when making version control changes. 


What is the difference between an untracked and tracked file in GIT?
tracked files are ones that are staged and committed, untracked files are ones that exists locally but not part of the Git repo and have not been staged or committed.


What is the difference between the npm init and git init commands? 
npm init generates a package.JSON file to the NPM repo in Node.js and git init creates a .git subdirectory in the current working directory


Workflow, Dev Tools


What is meant by the phrase developer workflow?
This describes the various tools and processes a developer may use to execute projects from start to finish.


What is a code/text editor? Give an example?
A code editor is a platform that allows developers to write and store code sometimes containing built-in features used to deploy the code to repos. Examples include Atom and Sublime, VS Code.


What are the Chrome and Firefox developer tools? List examples of ways they can be used.
These are tools built into the browser that assist in development. Examples include Page Inspector to inspect elements on a webpage, Web Console to view the code logged into the console running in realtime. Javascript Debugger to help debug the code and various other tools that help analyze performance and activity of the code.


List three resources that can assist you in your coding journey (hint: resources for 
troubleshooting or to better understand a concept).
stackoverflow.com, w3schools.org, MDN web docs


What is a local server and why would one be used?
A local server runs applications on the same machine as the application, such as your computer. It is helpful in providing the same environment as your web host’s server.


How can you install and run code using a local server? 
You can use an all-in-one application to install the web server, database server and language such as XAMPP or MAMP. 


What is Node? 
An open source Javascript environment that execute code outside of a web browser.


What is NPM? Give an example of a module that can be downloaded and installed from NPM. 
NPM is Node Package Manager, modules are JavaScript libraries you can include in your project such as  jQuery. 


List one text editor that can be used in lieu of an IDE. How can a library like P5 (p5js.org) be run
without using the P5 web editor? 
You can use Notepad++. You can use the Processing IDE to run p5 code without a web editor.


What is Slack? 
Slack is a web-based collaborative workspace that is meant for teams. You can share and organize files, have conversations, start threads and direct messages with others on your team.


What is Zoom?
Zoom is a web-based digital conferencing software application enabled through live-streaming.


What is the difference between VS Code and Visual Studio?
Visual Studio is a full IDE meant for .NET development and VS Code is a text-editor with lots of optional plugins similar to Atom or Sublime.


What is meant by a development environment?
This refers to the processes and tools needed to create code or programs. This is sometimes synonymous to IDE and involves development of code not seen to the client.


What is meant by a production environment?
The production environment is where the actual changes to code go live and are visible to the client and user. It is where the product operates live on the web and you can roll-out changes to particular users as a way to gradually make updates.


What does it mean to debug a program?
This is the process of finding problems and issues in the code through analyzing segments using console.log.


What is console.log()? 
console.log() is a built-in function within the code that enables you to see the processed results of your code snippets wherever it is called.


How can console.log() be used to debug a program/line/lines of code?
You use this tool to verify whether your code is working the way it is intended to by seeing the results, or to otherwise create alerts in your code if it is not working properly.


CMS, Static Deployment


What is WordPress?
Wordpress is a PHP-based blogging platform and Content Management System.


What is Github Pages?
GitHub Pages is a free hosting platform for web pages.


What is Netlify?
Netlify also offers hosting through cloud computing and server less backend services meant for more productive and rapid deployment of websites.


What is Jamstack?
This stands for a modern web development architecture based on JavaScript, APIs, and Markup and streamlines workflow by providing a simpler developer experience.


How can a web application be deployed (hint: consider services)?
You can use git+github+github pages to deploy your code, other hosting platforms and various IDE’s that have built-in features to get your site up. Also Netlify and Jamstack as mentioned above, which streamline these processes.


Which path currently interests you from the 2020 Developer Road Map?
Front-End Development the most for now


The Internet/The Web


In your own words, what is the Internet and how does it work? 
The internet is what describes the process of a network of computers interacting through communications technology including worldwide servers that store data and share data between these machines. 


What is the difference between the Web and the Internet?
The internet is more in reference to the hardware and global connections between the computers and servers and the web is the collection of information and data accessed through browsers interacting with the internet.


What is a client? 
A client is either a personal device such as a computer or browser that you access applications with. It receives and then uses data from local or remote servers by making requests.


What is a server?
A server is a physical device or software program that runs services to serve the needs of other computers and typically stores mass information and data needed to run applications. Servers send information to clients upon request. Servers that power most of the internet as we know it, largely exist in a collection as seen in big server farms.


What is HTTP? 
Short for, Hypertext Transfer Protocol, is the protocol of rules that clients and servers use in order to transmit data between them.


What is DNS?
Known as the ‘phonebook of the internet’, DNS, short for Domain Name System, designates domain names to various IP addresses and makes them more readable to humans. Examples include google.com, facebook.com, wikipedia.org


What is an IP address?
Short for Internet Protocol address, this is the number used to identify requests made by the user making the browser and is responsible for addressing, routing, and delivering all of the online requests and activity. 


What is an internet connection?
Connecting to the internet requires connection to a server hub in your region before data can be transmitted to a user’s device, which is facilitated through an Internet Service Provider or ISP for short. Telecommunications companies such as Verizon, Time Warner, Spectrum and others provide the means to make these connectionse for consumers so they may access the internet. There are many different ways to obtain internet access through various ISP services, including:
Wireless connection such as 4G and 5G, Mobile connection, Hotspots, Dial-up, Broadband, DSL, Fiber Optics & Satellite.


What is TCP/IP?
Also known as Transmission Control Protocol/Internet Protocol, TCP/IP is instrumental in specifying how data is exchanged through the internet by providing end-to-end communications that identify how it should be broken down into packets, addressed, transmitted, routed and received at the destination.
 
What are packets?
Packets are used to transmit data through the internet through a packet-switching/packet-routing network. Various devices on a TCP/IP network divide data into small pieces, known as packets, allowing the network to accommodate various bandwidths, to allow for multiple routes to a destination and allowing the network to pick the most efficient route for the data. A packet is made up of two parts - a header, which tells the packet where it is going and other formatting instructions and of the data the packet contains.


HTML


What is HTML?
Short for Hypertext Markup Language, HTML is the language used to display the structure of webpages on your browser.


Why is it important?
HTML is the organizational backbone of the various features seen on webpages. With HTML, we are able to add and format content needed for applications. It works alongside other programming languages to provide modern and rich web experiences.


Give an example of a basic HTML file structure?
<html>
  <head>
    <title>My page title</title>
  </head>


  <body>
   <header>
      <h1>Header</h1>
    </header>


    <nav>
      <ul>
        <li><Home</a></li>
        <li>Our team</a></li>
        <li>Projects</a></li>
        <li>Contact</a></li>
      </ul>




CSS


What is CSS? 
Short for Cascading Style Sheets, CSS is a sheet language that adds styling to the various elements on a webpage, from images to text, colors and fonts, backgrounds, spatial design between elements and much more.


How can CSS be used in a web site/application?
CSS is used to add graphic design to a webpage or application, and in effect it can be instrumental in the design of the user interface in making an application aesthetically sound and pleasing to the user.


JavaScript and Programming Principles


What is JavaScript? 
JavaScript is a programming language that works on the client side to add functionality to webpages and other software. It helps create interactive environments by providing a bridge between the visual interface and the data used in the application. 


Where is the console (list all locations that apply) and what is it used for? 
The console is located on web browsers in their developer tool menus and in various text editors and IDE’s made for code. The console is used to debug code and otherwise display any errors in the code.


What is an expression? Give an example.
An expression is a statement that evaluates to a single value.
ex. 10; // evaluates to ten
ex. a===10 && c===30; //evaluates to true or false 


What is a statement? Give an example.
A statement is instruction to perform a specific action, and javascript programs are typically expressed as a sequence of these events.
ex. console.log(message);
ex. let var = 2;


What is the general syntax and structure for a block of code? Use code to demonstrate your 
response. 
We use literals with variables to store values, camelCase to indicate multi-word declarations, indentation to demarcate code snippets, “” to display string values and typically semicolons to run a line of code.


ex. let variableName = 10;
       if (variableName > 10) {
      console.log(“You have a number bigger than ten!”);
} 


Why are certain words in different colors in a text/code editor? 
This makes it easier for developers to know what different elements of code they are working with and makes the code more legible.


What is a system or reserved word in a library, framework or API (for example in P5)? Give an 
example. 
These are words that are reserved to process code given whatever language and cannot be used as identifiers or keywords modified by the user.
examples include function, else, if, eval


How does order matter in JavaScript? Give an example demonstrated with code. 
//typically declarations go on top
let var = 4;
//conditional logic or functions go below
function addNum () {
if (var >= 4) {
let addFour = var + 4;
}
}
//you can invoke functions here
addNum();
//then console.log or another command to display result
console.log(addFour);


What is the difference between a method and a boolean variable? 
Use code to demonstrate your response.
(hint: explore p5js.org)


Typical booleans are primitive values created from literals, and can either be true or false:
ex.
var x = false;
var y = true;
—————————————
A method is a function that is the property of an object.
ex.
let user = {
  name: "John",
  age: 30
};


user.sayHi = function() {
  alert("Hello!");
};


user.sayHi(); // Hello!




What is the difference between an inline comment and a block or multi-line comment? Use 
code to demonstrate your response. 
// This is how you block out an inline comment
/* This
blocks
out multiple 
lines
of
text  */


Does whitespace matter in JavaScript? Capitalization? Use code to demonstrate your response.
 
Yes, sometimes your code will not work properly if there is an incorrect amount of white spaces or incorrect Capitalization between certain characters. 


Let Var = 2;   - incorrect, will not work
let var = 2; - correct will work


let thereWillNotBeASpace = 2+’hello’;
// prints 2hello
let thereWillBeSpace = 2+" hello!”;
// prints 2 hello




Variables, Operators, Logic


What is a variable? 
Variables in JS are used like nouns, they come before an equal signs to represent a value and are often though not always used with keywords to describe how they will be used. let before a variable indicates the value may change and const before a variable will indicate that the value will not change.
Ex. 
age = 30;
let age = 31;
const age = 25;


What is a data type? 
Data types tells computers how the programmer wants to use the data. 
Ex. Numbers, Booleans, Strings, Undefined & Null
What is a value? 
A value is the indicated data type use to represent variables, or to denote the value of a key or parameter.


What is the difference between a system or reserved variable and one that you define? Use code
to demonstrate your response. 
let x = 4;  // x is a variable you can use because it is not used for variables, labels or function names.


let if = 4  // if is not a variable you can use, because it is reserved for conditional logical
const return = 4; // return is not a variable you can use because it is used to call return values from functions.


What is scope and how does it impact code? Use code to demonstrate your response.
Scope is the idea in programming that some variables are accessible/inaccessible from other parts of the program.


var g = 100;


function outer() {
    var x = 99;


    function inner() {
        var y = 77;
    }
}


The code inside the inner function has access to all three variables. The code inside outer can only access g and x, and the code outside of the outer function can only see g.


What does it mean to declare, initialize and use a variable? Use code to demonstrate your 
response. 
Declaring a variable is necessary in code so that you could use it in the program. 
To initialize a variable in order to declare it, you add an equal sign to the right of the variable name and write an expression. 
let var = true;
const age = 45;
let arrayName = [peaches, fruits, everything else];


What happens when a variable is attempted to be accessed outside of its scope?
It will not be accessible and therefore not usable. Your code may return an error or do nothing at all.
What happens when a variable is declared globally, but is not used?
Nothing if it is not being called or used, it will sit declared but not function.
What value does let nums; have?
It will register as undefined as the variable has not been declared with a value.
What are operators? Use code to demonstrate your response using at least one operator.
An operator is a character that represents an action between two operands. Operators include arithmetic, comparison or assignment operators, and logical operators such as +, -, *, %, ++, —, +=, &&, || + more.


ex. let w = 4;
w += 1;  // this operator both adds a value of 1 to w and assigns the new value to w.


What is a boolean data type?
The boolean data type stores true or false data values. 
ex. true or false, 0 also represents false and 1 represents true in the use of integers


List three examples of primitive data types.
Number = 4, 4.15, 777
String = “hello”
Boolean = true/false/0/1


Write a code example that increments a value by 7.
let x = x + 7;


Describe the order of operations for: y = size * 144 /12-53;
PEMDAS 
size multiplies by 144
multiplied value is then divided by 12
divided value is then subtracted by 53
y = calculated value


Write a code example that multiplies an expression by twenty two using shorthand.
x *= 22; // multiply x by 22 and assign new value to x.


What does the logical operator ! do? 
The ! operator denotes the logic of ‘not’ to whatever you are comparing.
x !== y // meaning x is not equal to y


Control, Iteration, Structure 


What is an if statement? When should it be used? Use code to describe its syntax. 
An if statement creates conditional logic to process your code. It should be used when you want to have various outcomes depending on conditions you set on the variables and values present in the code.


if (x >= 21) {
 // then whatever code you have in here will run;
}


How many if statements can you use? What is an alternative to the if statement? 
You can only use one ‘if’ statement for each condition, but you may use as many ‘else if’ statements if you would like to add more conditions. 
What is the difference between else and else if? Use code to demonstrate your response. 
Else statements run designated codes if the conditions outlined in the if and else if statement are not met. Else if creates different conditions, whereas else executes the option if none of the conditions created by the if and else if statements listed above it are met. 


let x = 5;
if (x=1) {
 // run whatever code;
} else if (x !== y) {
 // run another segment of code;
} else {
  // run this code if above conditions are not met 
}


What is the difference between code with several consecutive if statements and code with 
several else if statements? 


With several if statements, each statement’s condition will be checked even when a previous statement is true. With multiple else if statements it will check multiple conditions based on the evaluation of the previous statement, the conditions will stop being checked when a statement is true.


What is a while loop? When should it be used? Use code to describe its syntax.
A while loop creates a function that will loop (or continue) the execution of a specified statement as long as the test condition evaluates to true. You can use while loops to count or sort through data types found in arrays and objects, or to generate elements based on the conditions as long as the loop is running.


let n = 0;
while (n < 3) {
  n++;
}
console.log(n);
// expected output: 3


What is a for loop? When should it be used? Use code to describe its syntax.
A ‘for loop’ is very similar to a while loop and essentially does the same thing but it is used when you want to write shorter code as the conditions and operator function are written in the same line instead of separately like in while loop. 


for ( i = 0; i < 4; i++) {
 // execute code until the above condition is not true anymore
}
What is an infinite loop? Give an example using code. 
An infinite loop is a code that does not stop executing because the conditions that are set forth allow it to run forever. This is something to be careful of, as infinite loops can crash your program.
Ex. for (var i=0; i<Infinity; i++) {
}


How can you prevent an infinite loop?
By making sure the conditions have a logic that will enable it to end the execution of the code. Do not rely on user input to enter a specific value to end the loop. Avoid creating variables that do not have a set value of the loop counter. 


Pick one: Write code that uses a nested for loop to: 
1.) draw a grid of squares across the x and y axis of a canvas using p5js.org.


function setup() {
  createCanvas(600, 400);
}




function draw() {
  background(0);
  strokeWeight(4);
  stroke(255);




for (var x = 0; x <= width; x += 50) {
    for (var y = 0; y <= height; y += 50) {
      fill(255, 255, 255);
      rect(x, y, 25, 25);
    }
  }
}


2.) log to the console the characters x and o in a grid of alternating columns and rows.


Functions/Methods


What is a function?
Functions are subprograms that exist within your code in order to break up your code into smaller bits and avoid repeating the same code over again. They can perform a wide array of operations and can be used repeatedly by invoking and calling one by its name in different parts of your code.


What is the difference between a system function/api method one that you define? 
System functions are built-in to whatever programming language one is using, they cannot be modified and often perform simple and common tasks. User defined functions are created at the time of coding and can include many different tasks custom to the application needed.


Write a function that you define, one that includes parameters and one that does not include 
parameters. Include how the defined function would be used/called:


Function with Parameters
This function takes the parameters of my first name and last name when the function is called at the bottom of the code. When the function is invoked, it prints out the string “My name is Magdalena Krzyzanowski” to the console.


function myName (firstName, lastName) {
console.log('My name is ' + firstName + ' ' + lastName);
}
myName(‘Magdalena’,'Krzyzanowski');


Function without Parameters
In the function below, I am coding an ‘attack’ action that would lower the ‘Life Force’ of a character in the fighting game by 5%.


 // set initial LifeForce to 50
let lifeForce = 50; 
// enemyAttack deals a value of 4
let enemyAttack = 4; 


function attack () {
// using a condtional below to determine equality of the variable  and then a shortcode arithmetic/assignment operator to lower life force to 35%.
if (enemyAttack >= 4) {     
lifeForce -= 5;  
 console.log('Attack lowered your life to ' + lifeForce + ‘%!');     
}
}
attack (); //when attack(); is called, it lowers the lifeForce by 5% and prints ‘Attack lowered your life to 35%!’ to the console.




What does the keyword return mean?
 return stops the function from executing and stores the value of the function to be used in other parts of your code such as a new variable declaration.


Write code that uses the keyword return:
function multiplyByFive(x) {
return x * 5;
}
console.log(multiplyByFive(4));
//Function returns a value of of the parameter multipled by 5, evaluates to 20 and is called to be printed into the console log, which prints out the evaluation of 20.




What is the distinction between a function and a method?
A method, like a function, is a set of instructions that perform a task. Methods are used with objects in Object-Oriented Programming, whereas functions can be used anywhere in your code. However, you can easily turns methods into functions and vice-versa.
 
What is the distinction between argument and parameter?
Parameters are the inputs to the functions expressed as variables.
Arguments are values that are passed through these inputs when the function is invoked.


What do the () in a function call or definition indicate?
It is between these parentheses that a function’s parameters are declared if the particular function has parameters.


What will happen if you call an undefined function?
A function with an empty or non-existent return statement returns undefined, and will not store any value.


What will happen if you define a function, but do not call or use it? 
Nothing, you need to call or invoke it so that you can use it. 


What concept is a function useful for? 
D.R.Y. coding 


Objects/Classes, Arrays


What is an object? Objects are containers that include data sets comprising of key-value pairs and methods.


What is the data type in this example:  Object
let dog = {
name: “Fido”,
age: 12,
coat_length: “short”,
coat_color: “brown”,
bark: function() {console.log(“Woof! Woof!”);} } 


Using the example above, how can properties and methods of an object be accessed? 
You can access properties and methods of an object by using dot notation. Ex. 
dog.bark; 
//Accesses the method found in the bark key of the Object dog.
dog.name;
//Accesses returns the value “Fido”




What concept are objects, classes/constructors useful for? 
OOP, and Syntactic Sugar


What is the difference between an object and a class/constructor? Use code to demonstrate your
response. 
Objects are very useful as structures for storing related data and functionality, and classes/constructors are related as they help build new objects without having to manually input each data set every time you want to make a new object.


var lunch = {
sandwich: 'turkey',
drink: 'soda',
chips: true
};


var Lunch = function (sandwich, drink, chips) {
this.sandwich = sandwich;
this.drink = drink;
this.chips = chips;
};






What is the difference between a method/function attached to an object and one attached to a 
class/constructor? 
Methods attached to an object literal will only be available within that object literal  - however if you use a method in a constructor, each time a new object is created, the method will reproduce to each new object.


What is dot syntax? 
It is similar or the same thing as dot notion and is used to access properties and values in objects, as well as applying methods to specific parts of the objects. 


What is the keyword new used for?
The new operator is used to create an instance of an object which has a constructor function.
When we call the constructor function with new, we automate the following actions:
A new object is created
It binds this to the object
The constructor function’s prototype object becomes the __proto__ property of the new object
It returns the object from the function


What is a constructor? 
The constructor method is a special method for creating and initializing an object created within a class.


Where and when is a constructor/class used? Use code to demonstrate your response. 
The constructor() method is called automatically when a class is initiated, and it has to have the exact name "constructor", in fact, if you do not have a constructor method, JavaScript will add an invisible and empty constructor method.


class Car {
  constructor(brand) {          // Constructor
    this.carname = brand;
  }
}
mycar = new Car("Ford");


What is the keyword this used for? 


When you create your constructor function, you can use the “this” keyword to reference the object that will be created when the constructor is instantiated.
Organize original code to include the main program in one file and a class or constructor in another. Use in-line comments to walkthrough code and explain how to link the files. Be mindful of naming conventions.. Include a screenshot or shared link to an example.
https://repl.it/@studiosemantica/WinterMenu


What is an array?
An array is a list of the same data types, such as strings or numbers and is represented and initialized with a variable.


What is an array used for?
An array is used to store multiple values in a list and can be referenced as a value in function parameters, a value within an Object’s key-value pair and other places.  


What notation is commonly used to denote an array? 
Bracket Notation.
Ex. 
arrayName = [‘this’,’array’,’exists’,’within’,’brackets’];


What are the characteristics of data types in Javascript arrays? 
They have to be the same - you can use objects if you wish to store various data types together at the same time. 
What is an index? 
Items in an array are stored in sequential order. Each element has an index — a number that tells us the position in the array at which the element can be found.


What does 0-based index means in association with JavaScript arrays?
Indices allow you to access and update array values. Javascript is zero-based, meaning it’s number starts at 0 instead of 1.


Write code that declares, initializes and accesses elements in an array. Use comments to 
walkthrough code. 


const animals = []; //declares the variable animals as an array
const animals = ["camel", "dog", "lizard", “cat”]; //initializes the array by adding content
let dog = animals[1]; //accesses the index position of 1, which is “dog” in the animals array and then stores it in a variable called dog




List two or three methods or properties that can be called on an array. Describe how they 
manipulate the array.
.push( ) - adds a new user-defined value to the end of an array   ex. animals.push(‘cows')
.pop( ) - removes the last value from the array   ex. animals.pop()
.unshift( ) - adds a new user-defined value to the beginning of an array  ex.   animals.unshift(“monkey”)


What is a class? How is it distinguished from a constructor function?


It's a new standard in ES6 where using class allows you to to group the declaration of your object and its content in a block. The constructor initializes objects of the class defined but does not specifically belong to a class.  Any object created from the constructor will have the same defined properties as others of its class.


What are the keywords let and const? How are they distinct from var? 
let initializes a variable and allows for the variable to change in value.
const initializes a variable but does not allow the variable to change in value.
var is an outdated form of syntax and not used as much anymore, but will initialize a var like the prior two keywords.

Getting Used to Comparison & Logic: Operators to define our codes

One of the challenges coming into programming as someone without a degree in math, is the notion that you can still code without having crazy math skills. While this is true, the super logical nature of code can take some getting used to, especially if the last time you really did Algebra was when you were a teenager and are still learning the syntax of code as well. With code, how data is manipulated lies heavily on knowing how to work with large collection of small operations that perform simple mathematical functions strategically to help us achieve computing capabilities with our Javascript.

Because the nature of code is of bridging many collections of many small operations, one’s code could end up being quite complex and intimidating. I wanted to get better at understanding the various operators that are used out there through Javascript and other programming languages before I started getting more into writing code. I’m including some helpful charts from w3schools.org below for the operators I have learned about thus far: comparison, arithmetic, assignment and logical operators.


COMPARISON OPERATORS
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x = 5, the table below explains the comparison operators:
OperatorDescriptionComparingReturns

==
equal tox == 8FALSE


x == 5TRUE

===
equal value and equal typex === “5”
FALSE


x === 5
TRUE
!=not equalx != 8TRUE
!==not equal value or not equal typex !== “5”TRUE


x !== 5FALSE
>greater thanx > 8FALSE
<less thanx < 8TRUE
>=greater than or equal tox >= 8FALSE
<=less than or equal tox <= 8TRUE


ARITHMETIC OPERATORS
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y = 5, the table below explains the arithmetic operators:
OperatorDescriptionExampleResult in yResult in x
+Additionx = y + 2y = 5x = 7
Subtractionx = y – 2y = 5x = 3
*Multiplicationx = y * 2y = 5x = 10
/Divisionx = y / 2y = 5x = 2.5
%Modulus (division remainder)x = y % 2y = 5x = 1
++
Incrementx = ++yy = 6x = 6
x = y++y = 6x = 5
Decrementx = –yy = 4x = 4
x = y–y = 4x = 5
ASSIGNMENT OPERATORS
Assignment operators are used to assign values to JavaScript variables.
Given that x = 10 and y = 5, the table below explains the assignment operators:
OperatorExampleSame AsResult in x
=x = yx = yx = 5
+=x += yx = x + yx = 15
-=x -= yx = x – yx = 5
*=x *= yx = x * yx = 50
/=x /= yx = x / yx = 2
%=x %= yx = x % yx = 0

LOGICAL OPERATORS
Logical operators are used to determine the logic between variables or values.
Given that x = 6 and y = 3, the table below explains the logical operators:
OperatorDescriptionExample
&&and(x < 10 && y > 1) is true
||or(x === 5 || y === 5) is false
!not!(x === y) is true

Often times, it is possible that shorthand codes exist for many of these operators, and it’s a good idea to keep a chart on hand of both the regular and shorthand operators so one is not spending extra time just trying to decode what the operators are doing to the operands in your code. In addition to knowing about the shorthand and eventually using them commonly enough to have them memorized, there is an emphasis in the etiquette of writing clean code and one has to be cautious with using too many shorthand operators–these could end up looking like hieroglyphics and make the code hard to read. I’ve read now in several resources studying operators that this principal is important and it is super important to be concise with them.

This great article over at freecodecamp goes into detail about the circumstances surrounding operators (the author calls it Syntactic Sugar) and explains some of the cool shorthand operations I’ve yet to learn about but keep seeing pop up time and again like the ternary operator. Perhaps I will experiment with using some in my codes later on throughout the journey of the course and now have a good resource to reference when I’m thinking of how I can simplify my code. For now, I will get as used to the language of operators as best as I can.

JS Troubleshooting #1/Part 2: Swapping for loops out with array methods

In my last blog post about my Horoscope project, I added the functionality of letting a button click initialize the app program and further enabling a simple retrieval of a daily horoscope based on the the User’s sign. In this post I will explain how the input of the user is collected and how we can determine if the input of the user is within the list of zodiac signs the code has data and content for.

Using the code segment above, I have implemented a code that starts after the user clicks the button and a dialog box requesting information appears on the browser window.

First, I set a variable for the user input of the alert box with the following code

let userPrompt=prompt("What is your zodiac sign?");

Then, I create an array that will contain all the zodiac signs a user may input, including both capitalizations to accommodate for variation in the user input.

let zodiac=["Capricorn","capricorn","Aries","aries","Taurus","taurus","Virgo","virgo","Sagittarius","sagittarius","Aquarius","aquarius","Pisces","pisces","Leo","leo","scorpio","Scorpio","Libra","libra","Cancer","cancer","Gemini","gemini"];

It’s possible that there is a shorter method to account for both variations of spelling in a shorter manner, though I’m not sure yet what it could be. For now, I am using this object.

Initially, I wanted to show an alert to let the user know the app did not have the information for their sign and to try again if the user entered in the wrong information or misspelled. Before I decided to figure out how to add this functionality, I did not have any for loops or array methods on my code as I do now. I could have left the code without, but the app would not respond or do anything if the user input did not match any of the signs I had designated in the zodiac object.

I decided to type in a query, probably something along the lines of “loop through array to determine incorrect user input” through google in regards to wanting to find a best method for implement user input validity and found some information on this stack overflow thread . When I initially saw this post, I took the for loop that was mentioned at the top and implemented it into my code, as such:

// let userPrompt=prompt("What is your zodiac sign?");
// let zodiac=["Capricorn","capricorn","Aries","aries","Taurus","taurus","Virgo","virgo","Sagittarius","sagittarius","Aquarius","aquarius","Pisces","pisces","Leo","leo","scorpio","Scorpio","Libra","libra","Cancer","cancer","Gemini","gemini"];
// let isMatchFound = false;

// for(var x=0; x<zodiac.length; x++) {
//   console.log(zodiac[x]);
//   if(zodiac[x]===userPrompt){
//     isMatchFound = true;
//     break;
//   }
// }
// if(!isMatchFound){
//   console.log("Match not found!");
//   alert("Uh oh! I don't have a horoscope for that sign. Please try again.");

It worked, and gave an alert to the user if their input didn’t not match the object as well as let the rest of the code run. The conditional statements following the for loop would be executed if the user input matched anything in the zodiac array, and each conditional statement furthermore enabled the appearance of each information box that would appear correspondent to each Zodiac sign.

Upon looking at the stack overflow thread once again, I had noticed someone suggest that a for loop was not needed for this functionality, and that one could use this code instead:

if(cars.indexOf(userPrompt) !== -1){    
    // your code
} else {
    console.log("err");
}

Since I had not seen this suggestion before, I decided to further google what that function did. It turns out that this specific type of boolean expression is part of a native implementation of built-in Javascript functions used specifically with arrays called Array Methods. So how would this replace my ‘for loop’ that was running through my array to determine if my user input matched? I could use indexOf(), which will ‘search the array for an element and returns its position’. I went ahead and implemented the indexOf() example into my code and ended up with this result:


let userPrompt=prompt("What is your zodiac sign?");
let zodiac=["Capricorn","capricorn","Aries","aries","Taurus","taurus","Virgo","virgo","Sagittarius","sagittarius","Aquarius","aquarius","Pisces","pisces","Leo","leo","scorpio","Scorpio","Libra","libra","Cancer","cancer","Gemini","gemini"];


 if(zodiac.indexOf(userPrompt) >=0){
   
   //GEMINI//
if  (userPrompt == "Gemini" || userPrompt == "gemini") {
    document.querySelector('#Gemini').style.visibility = 'visible';
    document.querySelector('#Gemini').style.display = 'block';
    console.log("Gemini");
  }

I liked this implementation because it not only shortened and cleaned up my code, I did some additional research on its performance in terms of load time and it turns out that this array method actually returns the value faster than one would using a for loop. It may not make a difference on such a small scale, but in more complex and large application builds, the small differences in time can start to add up and result in lagging browser display and performance load time so I think it is important to think about. I understand this function is working the way I want it to, but it is a bit more opaque compared to the clarity of the for loop.

I’ve happily stumbled into the more complex world of native implementation and built-in functions which may be a bit ahead of my current knowledge of JS, but in learning how to search for what I needed and experimenting with working the new code into my existing one, I have been able to see the potentials that may come by using modular elements without having to fully hardcode each individual step like one would with for and while loops. That potential is super exciting in terms of learning web development. In terms of the way I have the indexof() function implemented in my code, I plan to learn exactly how it functions down to each bit soon and am looking forward to reaching out to others who may know.

JS Troubleshooting #1/Part 1: basic UX exploration by running a web app program with the click of a button

Today I wanted to troubleshoot a rudimentary Horoscope app I began building during our first two weeks of the Open Code program. The premise of the application is simple–you click on the button in the middle of the page that triggers a pop-up prompt, enter the needed information (in this case your Zodiac sign) into the input field of the prompt and in turn after you click the button, you receive your horoscope for the day along with some illustration and more information about your sign. The screencaps below show the three main views and steps of how the app works so far.

Now, since this is a rudimentary app and I have not developed the content, data structure, and hosting needed for a wide multitude of daily horoscopes, my current app as it stands shows the horoscopes for each sign for just one random day that I have picked. I would have to learn more about the Javascript principles of objects and mass data organization to know how to integrate and effectively store content for a wide calendar of daily horoscopes. Currently, I am learning how to work with HTML and CSS elements using the fundamentals of Javascript, a powerful programming language that has the ability to compute numbers and data on the browser side and control the visual elements you see on a website or app. Javascript is used to create dynamic, interactive websites that have the potential to be rich in user-experience.

I wanted to add the functionality of having a button on the page that would initiate the process of getting your horoscope. Javascript enables you to take user actions, known as events, such as clicking a button or link, scrolling, or hovering over an element on the page and turn them into something we can interact with. By adding special Javascript code called functions into our code, we can add event listeners (or handlers) so that the browser knows how to respond to the actions of the user based on what code you have given it to perform in response to those actions.

Below, highlighted in line 1, is the event listener function that enables the rest of the code to run after the click of the button has taken place.

document.getElementById("checkHoroscope").onclick = function() { 
document.querySelector('#checkHoroscope').style.visibility = 'hidden';
document.querySelector('#checkHoroscope').style.display = 'none';

First, we have to find the element we are looking for, by using document.getElementbyId("checkHoroscope")

This function first scans the document, then with getElementbyId grabs the button by searching for its ID name "checkHoroscope" (the ID name being an attribute you may call any unique element on your site for the purpose of styling or manipulating said element). Then the event listener of .onclick is added after we have designated the button and we follow this with defining the function: document.getElementById("checkHoroscope").onclick = function() {

Anything that comes after the bracket, will be executed upon the click of the button. Immediately following the click of the button, I added the functionality of removing the button from view upon clicking it by adding the codes highlighted in lines 2-3 below.

document.getElementById("checkHoroscope").onclick = function() { 
document.querySelector('#checkHoroscope').style.visibility = 'hidden';
document.querySelector('#checkHoroscope').style.display = 'none';

These two codes are functioning similarly in the sense that we are using the Document Object Model to select which element we want to manipulate, in this case, I am instead using document.querySelector('#checkHoroscope') to designate the button as we want it to disappear. Now, since I want the button to disappear, I will use functionality of element.style.attribute after the designation so I can change the attributes of the Button’s CSS (and therefore allow it to disappear) after that event. Before the button is clicked, the original CSS attributes of the button are set so that its visibility is ‘visible’ and its display is ‘block’, as shown below:

#checkHoroscope{
  visibility:visible;
  display:block;

When the button is clicked, the attributes change to what I had assigned:

document.querySelector('#checkHoroscope').style.visibility = 'hidden';
document.querySelector('#checkHoroscope').style.display = 'none';


By setting the visibility = ‘hidden’;, we are telling the element to not appear. We have to additionally set the display = ‘none’; because otherwise a blank space would still appear where the content would be. When you set the display to none, neither the content or the space that it occupies will appear. This functionality came in hand as I was trying to figure out different wyas on how to include a slightly better user experience, which is a goal as not only a developer but as a graphic designer. In this instance, by creating a toggle for the button and room for the resulting content after it disappears, it helps to present a clearer path of action that is more aesthetically pleasing to the user.

This blog post is one of a series I will be doing on this ongoing Horoscope app project build – stay tuned to find out how I implemented if/else statements to display information based on user input and how I learned a shortcut that made my code cleaner but just as effective. I’m hoping to do some solo intensive Javascript refresher exercises the next few days to prepare for the Software Engineering immersive with General Assembly starting in a few weeks,–so I may be limited with time–but if I find some later this week I hope to get this Horoscope code both onto github into a repository and onto github pages with a custom domain. I also plan to start using an independent desktop editor for my code so I can ping version controls of this app to a real website and learn how to stage changes to the site before publishing. I have been using codepen.io for our projects as suggested by our Professor, but want to get comfortable using industry standard developer tools and workflows as soon as possible.

The Developer Roadmap

What is a developer roadmap? If you search the history of technological innovations, you will learn that web and software development have modernized the products and resources we use in our day-to-day as consumers. The process to build applications is becoming more collaborative and synergistic than ever before. Whereas before, developers and other IT team members worked in environments in which their skills were more silo’ed – causing inefficiencies and breaks in the cross-disciplinary aspects of building applications. Fast forward to the present we see that there has been a major shift in the tech industry – new positions in the field such as DevOps engineers or Quality Assurance testers have come into fruition by bridging the gap between teams and breaking down silos in production.

As technological advancements are made both in hardware and software, there is an increasingly rigorous level of functionalities and principles developers must understand to innovate and be competitive in their fields. As a result, you are seeing the proliferation of guides called ‘Developer Roadmaps’ – roadmaps such as these help map out the skills and fundamentals developers need to know to be effective in the current day, whether you are a front-end developer, back-end developer, fullstack, or occupying the newer position as a Dev Ops engineer.

As a class, we were given access to an informative and well-laid Roadmap made by @kamranahmedse over at Roadmap.sh. What I first noticed about this roadmap is how meticulously laid out each specialization of development is – this helps those entering the field understand what they need to know in order to become programmers. While some may have an inclination towards the front-end, or the build and design of browser-facing apps – others may have a penchant for the back-end: organizing, securing and building data infrastructure that make up the business logic of the product being made. Knowing both sides of app development comes with it’s pro’s and cons, but the emergence of fullstack developers comes from the need to break down silos and make the development and deployment process more efficient. The creator of this roadmap included a detailed portion for the DevOps engineer – outlining the close relationship this novel specialization has in creating agile workflows and helping to scale, automate, and facilitate the whole development process between designers and dev teams, IT departments, and business directors. This was my first time learning about what a DevOps engineer does and from the research I’ve gathered, it seems as thought this role will become even more prominent as companies modernize their deployment process. DevOps is both distinct and similar if not a part of knowing the ‘full-stack’ of tech itself.

I have yet to decide what stack I am going to specialize in or whether I will work towards becoming an experienced full-stack developer. I do have a high inclination to obsess over design details, overall branding and UX/UI design in the front-end realm – however I am equally interested in the mechanics, logic, and architecture beneath apps and the efficient structures lying underneath them. I am a bit rusty with my math and logic skills, but I feel confident that with practice I can get back to speed and perhaps be an effective full-stack developer. Some experts and professionals in the field also recommend to future-proof developer career opportunities by learning DevOps before learning the fullstack, as it has a tendency to pay higher and is becoming an increasingly present position at companies who are scaling up. Either way, I am excited to learned about more of these principles and have gone ahead and created an edited roadmap using the materials from Roadmap.sh. I have merged the various stacks and compiled them together, to get an even better sense of how these stacks interact with each other. At some point I might even print this out quite big, and start highlighting the common skills needed between the stacks – this could be a great way to compare and log the skills you would want to pursue as a developer thus making professional goals even more accessible by having a game plan. You can see a preview of the joined roadmap I made in the featured image above this text and you may download the full-resolution pdf in the link below, as the text is showing up blurry in the preview image because of WordPress’s image compression. I am also including a few youtube videos below that help explain the differences between the stacks. Hope you find this useful, and if you do, please leave a comment! Thanks.

Day 3! HTML/CSS Module

Today we went over the fundamentals of HTML/CSS in our module. HTML, short for Hyper-Text Markup Language, is code that browsers read in order to show the structure of the website. Content is organized through tags classified as either semantic or non-semantic. Semantic tags, such as

<header> 
<main>
<footer>
<article>
<aside>
<nav>

tell you something about the content they contain. Utilizing these tags helps to make the structure of websites more streamlined and concise.

Non-Semantic tags such as

<div>
<span>

are used more generally to organize groups of elements. A best practice when writing HTML code is to not overuse the <div> tag as risk of the website being something known as a “div soup”, where elements in the code can seem and easily get more disorganized due to the lack of differentiation or semantic meaning of the elements being organized on the webpage.

Once a preliminary HTML page structure has been coded, developers are able to customize HTML elements with a style sheet language called CSS, also known as Cascading Style Sheets, to create styling rules for various values such as color, fonts, layouts and a lot more! By separating the HTML code from the CSS, it makes it easy to stylize elements on the page without altering the content and HTML structure.

CSS allows you to use the various tags of HTML elements as selectors as well as defining your own through the use of classes and ids. Defining selectors through CSS tells the browser to display the variable attributes and values of each HTML element selected. Classes enable the grouping of various elements to follow the same style and ids lets you style elements unique from the rest of the rules you have already created. In-line style attributes override all CSS styling rules.

Below is a guide to show the styling specificity hierarchy. CSS, with its many attributes to customize allows front-end developers to create very expressive and interactive web sites. Looking forward to learning more about HTML/CSS and how to add automation with Javascript!

CLI, Repositories, GitHub & Git

Day 2 of the Bootcamp! Today we met Professor Polk for the first time through our Zoom meeting. She gave us a run through of Developer Fundamentals that we need including the use of the Command Line Interface (CLI), GitHub and Repositories. The CLI on my Mac is the Terminal – this is where you can command your computer to work with files without using a Graphics User Interface (GUI) as you normally would with the finder. Knowing the CLI and the appropriate codes will come handy in working with Repositories and GitHub. Repositories are essentially files on your computer that house your code and also show changes made to the code as it progresses to its final state. This is a great tool to use within collaboration and to show your thought process and problem-solving skills. GitHub is a large web-based platform where the repositories live on the cloud and can be referenced when working in groups or with multiple computers. Git is the software that is used to communicate between Github and the repositories on your local machine. I don’t fully know how to use them quite yet as this is all super new to me, but looking forward to getting a deeper understanding on how these tools will become essential to development.

Tech Hire Open Code Bootcamp

I was recently admitted into the web development vestibule program of Tech Hire Open Code as part of LaGuardia Community College, General Assembly, Udacity, and Software Guild. Today was our first full day, which was all done virtually through Cisco’s WebEx Program and Zoom. It’s my first time learning in such a capacity and I’m excited for what’s to come.

One of the first things we learned was the importance of documentation and outlining the progress one makes as a web developer. Not only does this allow the developer to measure their own progress, but this allows other developers and collaborators to learn about their problem-solving with code.

We also learned the standard of doing morning (aka stand-up) and exit prompts in the tech world – where team members individually state their causes and concerns before and at the end of each day. This creates a good model to check-in both mentally and professionally each day as well as set an intention.

In addition to the above, the Tech Hire program uses a popular collaborative workspace called Slack, which includes various channels for different topics, the ability to share files and code snippets and to direct message with others in your group. I’ve used Slack before in other groups and thoroughly enjoy the format of the software.

Going forward in the course, I am excited to start the prework section of General Assembly and to learn the fundamental programming languages of front-end web development: HTML/CSS & Javascript. I hope to make it into the next round of the program where there is a chance we will learn more back-end programming languages.

I want to develop advanced coding skills, creativity, problem-solving and efficiency in coding. I would love to develop the confidence to move from being more of a hobbyist and beginner in tech, especially programming, to being a career-ready professional on the path to having expertise in the field.