Tag Archives: problem-solving

AngularJS To do App – Part IV

Following from the previous entry, there was just one feature remaining for the rudimentary functionalities of our app:

  • Check of an item

I added an input checkbox to the ngRepeat construct. And after some fumbling around and going through some forums + angularjs developer documentation, I managed to apply a simple class styling to the item in the list when the checkbox is checked.

// Class applied when model ticked is true
<input type="checkbox" name="tickbox" ng-model="ticked" />
<span ng-class="{'checked': ticked}"> {{ item }} </span>

// CSS style that's applied
.checked {
text-decoration:line-through;
color: gainsboro;
}

This accomplishes a somewhat crude implementation of a To Do list item being checked off. However, the styling seems to fall through to the next item when a checked item is deleted. Also a checked item should preferably be locked from being edited.

So that still needs to be worked on and possibly some extra refactoring of the code in terms of button states as extra conditions required to prevent the fall through will only add to the growing list of conditions on some of the buttons already:

<button type="submit" ng-show="updateShow" ng-click="update($index, editedItem); updateShow= false; showEditInput = false; editShow = true;">Update</button>

Apart from that some aesthetic tweaks to the design and form is warranted. So stay tuned and check out the latest:

App – To Do | Commit

AngularJS To do App – Part III

So out of the remaining features, what should I pick next to work on, hmm let me see. Edit an item, sure why not. Why not indeed.

  • Check of an item
  • Edit an item
  • Delete an item

It turned out more difficult than I had (not) anticipated. Not the most crucial feature but sure. Thought it would take a few days to figure out and slow down development as I couldn’t find much of a guide from scouring through a book or two and several forums.

Thought there might be some directive floating around I could use (didn’t find anything remotely close). Then I tried to do a simple update the array item in place technique.

But therein lay the difficulty as threading it through AngularJS wasn’t easy going. I cycled through a few ways to do it. Some of it involved  a straight ngClick using the $index as a parameter which would try and update the array item based on that index.

That didn’t work as the button I wired up to do the ‘in place’ editing simply cleared the value already present and just left the input field and buttons showing:

$scope.update = function(index){
  $scope.items[index] = $scope.item;
}

Or something along those lines as I’d changed code and banged my head so many times I can’t quite remember.

It did work eventually by recreating the first pattern I had for adding an item into the list – I needed to create a new model on the fly using ngModel and then passing the $index and that model to the function call within the controller code. Still peculiar how I couldn’t get it to work by referring to the newly created model from the $scope variable.

In hindsight the solution I came up with is very very simple and it works. The condition updating to show/hide buttons for editing purposes is verbose. Hopefully find a more succinct system or pattern online later for refactoring but for now it does the trick.

So now just one primary function left to complete to call it a mvp

  • Check of an item

For now here’s the updated demo To Do App & the latest commit.

JavaScript binary to decimal application (Part Three): The Flux Capa… Convertor

Ok been on a hiatus due to work/college and most importantly my first born. So after a much waited delay, here’s the final piece – the actual conversion from Binary to Decimal.

This is the logic, which I took adapted from my Java lectures.

var convertToDecimal = function(binVal){
  var result = 0;
  var n = binVal.length - 1;
  for (i = 0; i < binVal.length; i++){
    var digit = binVal.charAt(i);
    result = result + (digit * Math.pow(2, n));
    n--;
  }
  return result;
}

This takes over from the last check, where we verified if an input was binary, and traverses the length of that input from left to right. Simultaneously var n is set to the positional power of the digit iterated over and added to the digit. The end result of all such additions is the decimal value.

Niggles encountered

I initially set the for loop check as n + 1; I erroneously assumed that since n was length minus one that would make up for the discrepancy, however each iteration would affect the value of n with the decrement (n–) and then the check would add 1 to it. I haven’t checked the full ramification of such a value but it did throw off conversion.

Another snag was that I was trying to set the output field’s value inside a conditional branch i.e.

if (value does not contain 1 or 0){  
  document.getElementById("output").value = input;
} else {
  /* code to execute if input is binary */
}

This was before, when I was doing a test to see output of invalid characters; input is the parameter passed to the function which contains the above conditional. That didn’t actually set the output as I’d expected. It somewhat makes sense when the function call is made – it is set to pass a value back, which expects a returned value.

document.getElementById("output").value = checkInput(binInput);

The line above can be taken to mean it would set it directly but wasn’t doing anything.

Closing Thoughts

So that pretty much wraps up the project in terms of the functionality and what was set out initially :

  • Creating a HTML/CSS/Javascript implementation of a problem we had to solve in a Java class – given a binary value, convert it to its decimal counterpart.
    • logic for the binary to decimal conversion.
    • restricting the entry value to 1’s and 0’s, probably using regular expression.

Further enhancements might be conducted to improve the user interface. One thing that came up during the exercise is that CodePen isn’t ideal for showing the various stages of the project. So each blog entry detailing the steps I’d taken will all point to the end result and not what it was like at that moment in time. Suppose that’s another issue to contend with if items are being created on CodePen. For the moment here is the completed, albeit unpolished, piece:

See the Pen
Binary to Decimal Conversion
by Donal D’silva (@donyd)
on CodePen.

JavaScript binary to decimal application (Part Two): Regular Expressions

Continuing on from the previous post, where I set up a pen on codepen.io to create a simple application that would take a binary number and covert to decimal. I’d laid out front end and the two tasks I had left were:

  • logic for the binary to decimal conversion.
  • restricting the entry value to 1’s and 0’s, probably using regular expression.

Filtering binary values using Regex

The one currently on my to do list is limit only binary values being entered into the input field. First hurdle was being able to compare the value input. Regex was my go to choice and was simple enough:

/[10]/g  -- pretty much translates to a range of digits from 1 to 0

However, there were a range of issues:

  • I assumed that even though the expression would find all instances of the pattern, it wasn’t working properly and I would have to create code to iterate through each character in the input [turned out I was using the wrong regex object methods i.e. match instead of test]
  • After finding the right method call ‘regex.test()’ the condition was picking some input which wasn’t binary.

My condition was

if (value contains 1 or 0) {
     /* code to execute if input is binary */
} else {
    /* code to execute if input isn't binary */
}

Any values which contained either a ‘1’ or ‘0’ would be accurately considered as binary figures. However, the issue was when a non valid input contained either of the valid elements ‘1’ or ‘0’ e.g. 10A, that would be considered binary as well.

I’d searched for numerous forums tips on pattern matching what was needed and excluding others i.e. show me only cases where it’s 1’s and 0’s and excluded everything else. Pretty sure there are ways but none that I could find.

Solution

The solution was very simple however, by seeking a pattern that considered everything except 1’s and 0’s and then using that as the filter to discount all non valid binary  input meant that the remaining items would surely be binary values.

if (value does not contain 1 or 0){  
  /* code to execute if not binary */
} else {
  /* code to execute if input is binary */
}

See the Pen xELLJP by Donal D’silva (@donyd) on CodePen.

Closing thoughts

The task was deceptively simple, even though it proved somewhat daunting in the beginning. Further excursions into Regex is warranted, just to get beyond the basic pattern matching that can be done. So with that we’re one step closer to the end goal.

JavaScript binary to decimal application (Part One): Getting Started

Following on the heels of the last blog “Enter your destiny here – Javascript binary to decimal“, this entry will pickup and start on the tasks for creating what was set out – creating a web application, of sorts, to convert a binary entry to decimal representation.

Firstly, a place to develop and host it. Codepen.io is my go to choice. Now this is almost ad-hoc and not planned out or scoped (I guess more software engineering principles will be focused later down the line).

First Steps

  1. The first stab involved setting up an HTML front end with a minimal of styling with CSS. It consists of two input boxes and a button.
  2. Then I changed the text styling from something other than default.
  3. I experimented with getting and setting the text boxes values with JavaScript.
  4. Then once those were working I putting them into a function.
  5. This function was then called on the onclick property of the button.

So this basically allows text to be entered into one input box and clicking on the button will push it to the other one.

See the Pen
Binary to Decimal Conversion
by Donal D’silva (@donyd)
on CodePen.

It’s nowhere near completion but not too shabby for rabid typing in between a lecture (Java of all classes).  So this will be the first iteration and more soon to follow, including:

  • logic for the binary to decimal conversion.
  • restricting the entry value to 1’s and 0’s, probably using regular expression.

Closing thoughts and caveats

One constant internal nag that I had was that the html elements weren’t entirely up to standards. I just essentially cobbled together items from memory and out of necessity i.e. I need a text box, just get it in and enter a non semantic, untagged text as its label.

Also I initially had an issue with the JavaScript (I’ve not had the best of experiences wiring up JavaScript with HTML contained in a browser before). Especially with event handlers, of which, I’m assuming, the onclick is one (see shows how much I don’t know). Which lead me to believe that I’d done it again. However, the issue was that I was trying to push the value of an input box into an HTML element.

I’d created an empty paragraph <p></p> to which I added an Id and then tried to push the value into that empty paragraph. It’s only later that I realised that I would’ve had need to affect the innerHTML property for an element like paragraph. It works fine with the input fields, as it does have a value property that can be updated with an getElementById train.

 

Enter your destiny here – Javascript binary to decimal

The bane of learning programming, it seems, is mostly waning effort or focus. This might not be due to lack of interest, but personally, like lots of effort spread over many different things, or specifically, to one particular item, none of which seem to gain any traction.

You just seem to go through the motions of learning the syntax or solving mini tasks or challenges online, or almost mechanically going through tutorials without ever seeming to gain a viable grasp, let alone mastery, to be able to generate code without looking up examples or asking others.

The only time something seemed to stick is when you are attempting to solve a problem or challenge for yourself. This seems to embed the knowledge/skills more deeply and doesn’t leave you feeling like you’ve just written across water. A beneficial side affect is that your focus has narrowed to a point where you might only require a select range of knowledge and skills, instead of a consuming an entire book or 5+ hour tutorial.

So with that in mind, the only efficient means of learning, I can see of being of any value is to start my own projects or try and create things or solve problems with code. The first item I plan on tackling is:

  1. Creating a HTML/CSS/Javascript implementation of a problem we had to solve in a Java class – given a binary value, convert it to its decimal counterpart.

Now this should be fairly simple as the logic was somewhat nailed out and then later given to us, so it’ll be merely a way of translating that into a web based application.

Update: here is the first in the series of entries that catalogs that –
JavaScript binary to decimal application – Part I