Final Project for C11! I can’t believe I built this 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!

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