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 ~~

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s