One more bonfire: Search and Replace

Today I went for the next bonfire: Search and Replace.

I sometimes get confused when the solution I am thinking of is not using all of the functions provided in the description under "useful links".

But they seem to be suggestions. Sometimes I use one or two of them and sometimes none, which is fine, as long as I get to a solution which works and which I understand.

In the case of this bonfire, I went step by step, made sure the string was replaced and then took care of the necessity to preserve the case of the original (before) word.

Some more tweaks had to be made, such as to join the "after" term again at an appropriate occasion.


function replace(str, before, after) { 
 str = str.split(" "); 
 for (var i = 0; i < str.length; i++) {
   if (str[i] === before) { 
     before = before.split(""); 
     after = after.split(""); 
     if (before[0] === before[0].toUpperCase()) { 
       after[0] = after[0].toUpperCase(); 
     } after = after.join(""); str[i] = after; 
   } 
 } 
 str = str.join(" "); 
 return str; 

} 


The code is tested with differentsample data, but the purpose is to find the part in str which equals before and replace it with the content of after.

If before is uppercase, the substituted string must be uppercase after insertion as well.

That's it for today, I guess ;)

Roman numeral converter

As part of the "Difficulty 2" intermediate bonfires at Free Code Camp, the task was to create a Roman numeral converter. At first, I did not really have a clue what to do with this, I did a research anf dound pretty neat solutions, but they were either not complete, or too complicated for me to understand.

So I wrote my own code which does the following things:

1) Take the number, and convert it to an array

2) Loop through this array backwards and consider the different cases (is the number smaller than 5 but not equal to 4, is it equal to 4, is it greather than 5, but not equal to 9, or is it equal to nine? Then, of course, I had to consider whether the number was in the tenths, hundreds of thousands.

3) For each case, the corresponding roman numbers are written into a new, separate array.

4) In the end, the new array is reversed (because the numbers were written in opposite order) and joined to print the roman number without any spaces.

I have added a small form and some code to validate user input:

Hoppy Beaver and the squid

... or why you cannot increase counters based on conditions which are based on ranges.

About a month ago, I tried for the Intro to JS class at Khan Academy and was surprised how much fun it was actually. First, I was a little sceptical about the approach the class took.

What was this Processing JS and what were those functions like draw() doing there?

But slowly I became friends with the class and then a fan. Why? Because I liked the video guidance, I liked the challenges, they were a pleasure to follow and I also felt that the difficulty was slowly increased so chances were you would not fall behind.

The following class was about Games and Visualizations. With the already present knowledge of Javascript and Processing JS, a game was built.

I must admit that I liked the video guided classes in the Intro to JS course better than having to read a text, as the texts are quite long and I find it easier to listen and repeat.

Then, the challenge at the end of the Hoppy Beaver section was to change the game in some way.

I decided for enemies and for holes. First. I later dropped the holes, because I could not seem to manage to decrease the score when the beaver walks over a hole instead of jumping over it,

The same problem occurred for the enemies. I tried to define a hit with the enemy through determining whether the beaver was within a certain range from the x and y coordinates from the enemy. I then tried to increase the score, but the score++ then happened as long as the beaver was within that range.

What DID work was the defining of good and bad sticks. 

First, I made sure the Stick object had a third attribute "bad".

Then, I made this bad be a randomly generated number from 1 to 4. Number 2 would be bad and in a different colour. If the beaver catches them, the score decreases.

You can have a look at the project here:

Spin-off of "Project: Hoppy Beaver Extreme"

Made using: Khan Academy Computer Science.

Learning to code, starting somewhere

I am not completely new to coding.

More than 10 years ago, I started with HTML and soon got to love it, built my first website, showed it to friends. I even built some nice websites with further HTML and CSS.

Years later, I actually became curious about the things beyond static websites and got interested in PHP. Soon though, I was intimtidated by the code I read in the books. And I did not feel like typing two pages of example code into my text editor in order to see it did not work. I did not understand more than that you had to perform striptags in order avoid malicious code from entering your system through forms.

But would I be able to do that myself? I mean, writing code myself that would make e-mails arrive at their detination or engage people in fun quizzes? I doubted it.

Some time later, I tried it with a true university class in imperative programming with Pascal. I spent a lot of time reading though a large script, trying to solve assignments revolving around data structures like binary trees. I had a headache. I did not learn. I did not write code. It was no fun at all. Allright, learning is not always fun, but some motivation has to be there.

So what did I lack?

- Practice, for one thing: I need to write code, starting and practising with simple examples. I need to feel encouraged to write code

- A perspective, for another: I want to have something to look forward to. I want to learn something that will allow me to create small but considerable results. Creating an interactive website, an animated form or even a small game? Yeah, why not.


This is why I started with Javascript and why I started to learn it online. At the end of May 2015, I signed up at FreeCodeCamp and I am happy I did it. While I got though the HTML, CSS and Bootstrap parts rather quickly through previous experience, I am struggling quite a bit with the programming exercises. But the steps are realistic. And the perspective looks promising. I am getting really comfortable with the Javascript syntax and looking forward to the challenges to come.