Thirteenth Week of 100 Days of Code

screenshot_2017-03-20-15-50-41.png

As the end draws closer, I’m scrambling to check off items on my to-code list. This week was focused, but few bullet points show how much focus went into it. My accomplishments this week:

  • created a CSS robot
  • pushed more code to Women Who Code repo
  • uploaded my portfolio to my personal site and did a lot of progressive tweaking
  • started learning CSS grid
  • picked up my first issue from Free Code Camp repo to resolve
  • progressed more on the development of my JavaScript calculator, an advanced Free Code Camp project

10 more days to go, people!!

JavaScript: Remove/Add Class Attribute

javascript-736400_640

I love jQuery because it helps simplify JavaScript. However, I needed to remove a class attribute from one menu item in my HTML, and add that class to another menu item. Easy with jQuery’s .addClass() and .removeClass(), right? BUT I didn’t want to add the entire jQuery library to my page just for this reason! So, like any self-respecting web designer, I googled it.

My final results:

function changeClass(){
    document.getElementById("menu_list").getElementsByTagName("li")[0].removeAttribute("class");
    document.getElementById("menu_list").getElementsByTagName("li")[3].setAttribute("class","selected");
}
window.onload = changeClass();

And it worked! A little JavaScript knowledge (and Google) can go a long way in improving page performance while adding enhancement.

On my journey to learn vanilla JavaScript, this small accomplishment was a big deal.

Twelfth Week of 100 Days of Code


So much to be proud of this week:

  • completed the Advanced Algorithm Scripts level of Free Code Camp (FCC)
  • made progress on the interactive part of my first FCC advanced project: JavaScript calculator
  • designed and hand-coded a new online portfolio that I am much prouder of
  • learned some PHP so I could create a form that submits info to my email
  • started creating web accessibility issues in the Women Who Code repo to help their site follow a more universal design model
  • refactored my old FCC tribute page to trim a ton of excess code, utilize the Bootstrap framework better, and transform my CSS to SCSS for convenience

Whew! And, um… I might have submitted an application for a web dev job, too. It’s hard to recall through this coder’s high I’m on.

Happy coding, y’all! And keep reaching for more.

Eleventh Week of 100 Days of Code

This past week felt like a learning week! Though I squeezed in a lot of hours this week, it seemed as though most of it was spent reading a lot of JavaScript documentation. I also picked up reading Inclusive Design Patterns again to coincide with a Digital Accessibility MOOC I am taking through the University of Southampton.

This week’s accomplishments:

  • solved 3 advanced algorithms for Free Code Camp
  • pushed updated code to the Women Who Code website and merged two of my branches with staging
  • completed a lot of content and design work for my new online portfolio (of which I am much more happier with than my original Free Code Camp project)
  • started adding interactivity to my JavaScript calculator (Free Code Camp project)
  • learned about more techniques on how to make web pages inclusive and accessible
  • set up a workspace on Cloud9 to start contributing to the Free Code Camp website

Three-quarters of the way through this challenge, I’m feeling the world open up to me. Not only do I have ideas, but I have ideas about how to accomplish those ideas. 🙂 I also feel a bit of confidence in myself enough to contribute to others’ ideas, which is why I’m going to investigate more open source projects on Github to lend a hand with after I get through the bulk of projects I am already working on.

Life is too short to not pursue after something meaningful to you.

Tenth Week of 100 Days of Code

screenshot_2017-02-27-16-58-18.png

Lots of Free Code Camp (FCC) work this week! I’m determined to earn my Front End Web Development Certificate. And, thanks to my husband, I managed to squeeze in more coding time than usual.

This week’s reasons to celebrate the progress I’m making:

  • solved 5 FCC algorithm challenges
  • completed the design of my first advanced front-end project (started work on its functionality)
  • acquired two local projects to work on
  • started redesigning my online portfolio
  • finally solved a project at work that has been eluding me for a few weeks
  • created two bookmarklets

These are not only reasons to celebrate, but also building blocks to the confidence I now how to tackle more programming projects. It’s been an exciting week!

Given enough time and perseverance, a designer can become a developer. Code on, friends. Code on.

jQuery: Sort an API List Alphabetically

After my recent schooling in JavaScript, I was very excited to take on a minor work project that let me flex my new vocabulary and solve an issue for our librarians.

js_success

My Journey

Platform: Springshare’s LibGuides

Problem: Their A-Z list needs to display a list of specific databases according to type and sort those combined lists alphabetically.

Solution: Access LibGuides A-Z API. Target the desired databases by ID. Append a sorted list into a pre-constructed div.

Springshare got me started by providing the API information and offering some iterative code. This was my jumping off point:

jQuery(document).ready(function() {
jQuery.getJSON(“https://lgapi.libapps.com/1.1/assets?site_id=3728&key=f73cbce180e1d6de553031a6644fb391&asset_types=10&expand=az_types (https://lgapi.libapps.com/1.1/assets?site_id=3728&key=f73cbce180e1d6de553031a6644fb391&asset_types=10&expand=az_types) “, function( data )
{var items = [];
var list = [];
jQuery.each( data, function( key, val ) {
items.push(val);
});
jQuery.each(items, function( key, val) {
var dbName = val.name;
var dbHref = val.url;
if (val.az_types[0].id === 8280) {
list.push(“<li id='” + key + “‘>” + “<a href='” + dbHref + “\’>” + dbName + “</a>” + “</li>”);
}

if (val.az_types[0].id === 8381) {
list.push(“<li id='” + key + “‘>” + “<a href='” + dbHref + “\’>” + dbName + “</a>” + “</li>”);
}

});
jQuery(‘#list-div’).append(list);
});
});

I refactored their code, then set out to figure out why simply tacking on .sort() to the end of .append(list) was not working for me. Half a day later, it occurred to me that I needed to be targeting the list items themselves, rather than the div that held that list! After spending much time on StackOverflow and several developers’ blogs, here is my final code:

$(function() {
$.getJSON(‘//lgapi.libapps.com/1.1/assets?site_id=3728&key=f73cbce180e1d6de553031a6644fb391&asset_types=10&expand=az_types’, function(data){
var sortList = function(a, b){
return $(a).text().toLowerCase() > $(b).text().toLowerCase() ? 1:-1;
};
var items = [];
var list = [];
$.each(data, function(k,v) {
items.push(v);
});

$.each(items, function(k,v) {
var dbName = v.name;
var dbHref = v.url;
var dbDesc = v.description;
if (v.az_types[0].id === 8280 || v.az_types[0].id === 8381) {
list.push(“<li id='” + k + “‘><a href='” + dbHref + “\’>” + dbName + “</a><br>” + dbDesc + “</li>”);
}
});

$(‘#list-div ul’).append(list).children(‘li’).sort(sortList).appendTo(‘#list-div ul’);
});
});

Of course, that was AFTER I refactored with some ES6 using the arrow function as my sort function. But after getting nothing in IE11, it occurred to me to check if that functionality was available for that browser (caniuse.com). Nope. Back to the regular old function expression! But I was satisfied that I had learned to use the arrow function, and will keep that close by when all browsers (ahem, Microsoft…) catch up.

caniuse

In Conclusion

I’m on my way to being more proficient in JavaScript! I’m comfortable refactoring code, searching for methods that work, and using the ternary operator. The above code is a beginner’s solution, but a good start to getting what we wanted. And I’m excited to be a part of that solution. Bonus: I wrote a bookmarklet during this development process to count the number of database links that were coming through, so I could verify we were filtering the right ones.

Thanks, FreeCodeCamp, for pushing me forward, teaching me some basics, and giving me the confidence to offer solutions.