Back on Freecodecamp

It has been quite a while but I am finally back on Freecodecamp working myself through the challenges :)

Setting up a Github page

When wondering how a fellow camper had set up a portfolio page at their Github account address, I found out that it is in fact quite easy.

I followed these instructions to upload and view a test site at this address. Moreover, you can also host project sites with Github.

I guess I will upload my portfolio page to the Github site once I completed it.

Bonfire: Boo who and updates

Looks like I already completed the Intermediate bonfires as well. Some bonfires were longer than expected, some were shorter. One example is the "Boo who" bonfire. It was perfectly sufficient to check whether the type of the value handed to the function is "Boolean", then the function will return true, otherwise false. This is my code:
function boo(bool)
 { if(typeof(bool) === 'boolean')
{ return true; } 
else return false; }

Now I am continuing with the Ziplines and I am progressing well with the Portfolio page. Although I have been creating websites before, I am taking my time to make the best of this project. I am using Bootstrap, CSS (of course) and some amazing stock photos I have found.

 Luckily, Codepen supports extra lines for the head section to add Google fonts.

Distraction in form of blocks

I must admit, sometimes I get distracted from my coding (which is not thaaat bad, since everyone needs a break now and then, right?).

I must have downloaded Minecraft first in 2012 maybe, but I did not play it as much as others. Now I restarted, creating a new world and watching Youtube videos for inspiration. The channel of Paul Soares Jr. was a particular inspiration, since his videos are entertaining, inspiring and I really got to try out some things I did not do so far.

My house :)

Lava source blocks + water = Obsidian

My very first Nether portal

The Nether was a little scary to me, once an unfriendly Ghast deactivated my portal and I had to really go some creative ways to make it all right again.

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:

See the Pen Roman numeral converter by Daniela (@undefinedsymbol) on CodePen.

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.