Negotiating the conditions.

The past two weeks I’ve been working on FreeCodeCamp challenges. Mostly the algorithms. Struggling with the algorithms actually. Frustratingly large amounts of struggling. But. Oh. My. Lord. When I solve some of the. The glorious feeling of achievement!

And thinking about redoing some of the Intermediate Front End Development Projects. Any maybe, maaaaaybe, starting with the Advanced ones. But it hasn’t gone any further than the thinking.

The main reason for this, I believe, is because I said I wouldn’t include the Freecodecamp challenges in my 100 projects. This was dumb. I literally handed my procrastinator monkey (we all have one, inside of us) a lot of fuel. A lot!

But:

I am This Blog! The Morning and Evening Star; if I say, “day is night”, it will be written! And this challenge will be what I say it is!

So from now on. Freecodecamp is very much in the game.

I enjoy Freecodecamp quite a lot. The concept. The community. Quinzy Larson and all of it. I intend to be among those who has done the whole curriculum.

 

By the way. I fond this guy Mart from Estonia. Also freecodecamping. Also blogging. Just much better than me. I has some really good posts about how he solves the algorithm challenges.

Check out his blog Decodingcode.com!

Project 10: Javascript Click Count

This is a very simple javascript click count. I eventually want to make one of these reaction testing games, but I don’t want to do it with the help of others.

Prepare

Plan

It’s going to be a simple page with a headline, some instructions and a counter. That’s it!

Perform

I Had some difficulties with the part where a message appears when you hit a certain number of clicks. I tried with a switch statement, but couldn’t get it to work.

switch (counter) {
 case 31:
   message.innerHTML = "<h2>It's a 30</h2>";
 case 21:
   message.innerHTML = "<h2>It's a 30</h2>";
 case 11:
   message.innerHTML = "<h2>It's a 30</h2>";
 }

It ended up being all broken. I got frustrated. So I crammed out this semi-gigantic if statement. At least it does what I want it to do.

Perfect

Ridiculously easy. I know. But I got to try the addEventlistener at least.

It’s been a rough couple of weeks with a lot of work, so I’m just happy I got to squeeze in some coding.

I’ve also done some algorithms on Freecodecamp. Almost finished with those. I can’t wait to begin with the Advanced Front End Development Projects. I find my self thinking about them all the time.

About the algorithms though. I struggle a lot with them. I guess I have to do them over and over again. At least a few times.

 

Yeah.. So. Check out Project 10.

Project 9: Javascript Random Number Generator

A fast and easy off day project here.

Prepare

I’m thinking you input the start number, the end number and the number of numbers you want. Et voila you have a range of random numbers. I’d like that. I’d like that a lot.

Lets bring up Math.random from MDN.

Plan

Basically, this is what I want:

  • A function to make an array of number with the input from the DOM
    • Get the min value
    • Get the max value
    • Get the amount of numbers to output
  • Create array of random numbers
    • With a for loop?
      • And push to array?
  • Then display the array to the DOM

Perform

This is what I ended up with:


function makeRandomArray() {
 
   var min = document.getElementById('min').value;
 
   var max = document.getElementById('max').value;
 
   var amount = document.getElementById('amount').value;
 
   var displayOutput = document.getElementById('random-div');
 
   var randomNum = Math.floor(Math.random() * (max - min + 1));
   var randomArray = [];
 
   for (var i = 0; i < amount; i++) {
     randomArray.push(Math.floor(Math.random() * (max - min + 1)));
   }
 
   displayOutput.value = randomArray;

}

function updateTextInput(elem, val) {
   document.getElementById('show'+elem.id).value=val;
}

 

I followed this tutorial on Sitepoint to copy from the input to the clipboard.

The layout is from one of the CSS courses on Treehouse.

Perfect

I’ve been wondering about the input type=”button” element, and the button element Stackoverflow. It seems you can put HTML inside the button element, but there’s some issues with it in IE6, according to peterbe.com.

 

By the way. I’m using prism.js to display code in my blog posts. I found this great guide on crambler.com to help me implement it.

 

So. Yes. To the project!


					
							        
	

Project 8: Simple Javascript Quiz App

Okay. So this is project 8 and by far the most challenging I’ve done on my own. But I did it. In less then a day. A very simple, very little usable, javascript quiz app. It has questions.. and answers.. and points. I’m so happy and proud, it’s a little bit embarrassing.

Anyways. I haven’t done something like this without some sort of guidance. I know, it’s not really that complicated. In fact most of the javascript is very straight forward. But I don’t care. I rock!

Prepare

I spent some time wondering how I could solve this. I knew I could make each question different objects and then make functions to do everything else.

I didn’t have to do much resource gathering other than that. I figured it was going to be pretty basic stuff so I could use MDN and Stackoverflow as I got stuck.

Time for a javascript quiz app!

Plan

So. Objects for the questions.

A function to display the questions in the document.

A function for the answers.

A function to sum it all up when the quiz is finished.

Perform

To begin with I just made the headline and a div to display it all in.

Then I made the first question object and the function to display it with. It wasn’t that much of a hazzle to get it out one the document.

The problems came though. When I tried to verify the question. I had made each answer a key on the object and the value an array with the answer and a boolean.

I didn’t have much use for the boolean. I had to treat it like a string in the end. But I got it to work.

Then I had to work really hard to figure out how I could switch between the question objects. I ended up adding a select menu to manually choose the questions. Thereafter I spent hours debugging the code. Looking at it. Not knwing what was going on. Why it wouldn’t work.

Just moments before I started bothering the good people on Stackoverflow I saw it.  = instead of === inside the if statement. #newbiecoderslife

SS of the javacript quiz

Perfect

  • Used this from stackoverflow to remove the question option when the question was selected.
  • Remove the button and the entire select menu when finished is fired.

 

To the project!

 

freeCodeCamp – Basic Algorithm Scripting

I’ve done many of the freeCodeCamp Algorithm Scripting challenges. I’ve struggled a lot. I’ve cursed coding. I’ve given up. Multiple times. Stayed up all night thinking about them. One time, I even woke up in the middle of the night cause I had an apiffany.

Most of the challenges I’ve inelegantly brute forced my way through.

So. I’ve decided to start over again. This time, I’m going to log it here on my blog. I’ll try to explain my thought process. I’ll write it down. I’ll push it up to github. Show my code to the world (for glory).

fancy fcc picture

But the most important thing. I will learn to test. I will do all the challenges in my own text editor. Aaaaand write my own tests. I’ve heard so much and read so much about testing, TDD, BDD and what not. But I still don’t know how to do it.

I’ve heard about mocha and jasmine(?) and RSpec (that’s ruby, right?).

Now it’s time to do.

You know. Because I’m a doer now. Yeah!

I’m going to do the JavaScript Unit Testing Course on teamTreehouse first. And then it’s on like donkey kong.

(I feel like I should get some money from Treehouse, cause I keep mentioning them all the time. Maybe some day when my blog becomes super famous.. )

Anyways. Onwards!

Project 7: A Simple Javascript Countdown

One of the Free Code Camp projects is to make a pomodoro clock. I guess this is  a preparation towards that one. A very basic javascript countdown. I want to be able to set the time, and start it. That’s it for now.

I found this the other day, from sitepoint. It’s a more complicated timer. I liked it a lot because he really explains what is going on. I haven’t looked at it while I’ve been coding my own countdown. But some of it was, of course, fresh in my memory.

Prepare

I used a template from initializr.

I had an intensive thought process.

I glanced at this page on Mozilla Developer Network for quite some time. It is the  WindowTimers.setInterval() page.

Plan

HTML with a headline, a div for the countdown. A button to start, and an input for the number I want to count down from.

Then I’m making a countdown function. This function takes one argument, the number to count down from.

How do I even decrement the given count argument inside the function?

I’m guessing I have to use setInterval. Though I’m not yet sure how I do that.

The countdown has to stop at some point. Preferably when it hits zero. Will this be a separate function?

Lastly I’ll give it some awesome styling.

Perform

The HTML was easy enough. An other page with minimal markup.

I actually ended up with only one function. I grabbed the input element and the div where I show the count down.

I set the setInterval function to a variable, and made an if statement to stop it when it reached zero. To do this i used clearInterval on the variable. Can’t really explain the mechanics behind it, but thats what worked in the end (after some of tries).

I kept the styling simple. A border radius of 50% with equal width and height, gave it a nice circle look.

And that’s it. A really simple javascript countdown.

javascript countdown

Perfect

I wanted a digital like font on the count down, so I had to download a font. Found this guide on @font-face form CSS-tricks.

And I found this tutorial on setInterval, from javascript.info,  which gave som extended understanding.

 

To the project!

Project 6: Color maker with input range

Okay, so I saw the input range slider thingy when I made the first form.

I’ve seen these all around the web of course (as most probably have), but I haven’t given them much thought. I just wanted to try them out.

So for this project I was thinking about making tree of these inputs with a range type, and a button. And I wanted their function to be adjusting color light of a RGB value. I also wanted it to display a div with the visual result.

Prepare

Colors in general are not my strong suit. I started with the wikipedia article on the RGB Color Model . And learned that:

The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

Nice to know.

There is also the RGBA, with  the A as the “Alpha Channel”. Which again is used for opacity. You could also read about that on CSS-tricks.

I found the input range attributes at the W3C wiki.

Plan

So, basically.

I want three input range sliders. One for each color in RGB.

A button to apply the result to a div.

The input range doesn’t show of the value you are selecting by default, so I need to do something about that.

A javascript function to collect the values, and then apply it to a RGB value.

Some styling.

Perform

I made a container div with the rest of the HTML inside. Easy peasy. I gave the input range elements the following attributes: id, name, type, min, max and value. I also ende up skipping the button. Instead I gave the input range sliders an onchange attribute (and also learned that you can put multiple functions inside it).

I was thinking about making a bubble to show the current value on the input range slider, and found this CSS-tricks article. But I figured it was a bit to complicated for this little project.

Instead I made a new input field under each slider. With a type of text. Found this on Stackoverflow. And with inspiration from this (also Stackoverflow), I made it so I could use the same function on all three of them.

I had some problems getting the range values from the sliders, to the RGB value, but it was just me forgetting to correct concatenating in javascript. It’s funny how such small things eats up so much time.

Perfect

Lazy as I am, I was quite happy when I found a site to style input ranges on CSSPORTAL. Initially, the slider wouldn’t show on mobile devices (at least not in the developer tools). But when I styled it some, it showed up.

One problem though. It seem you have to change all the range slides for the function to fire.  I dont’t know why yet. Anyone?

 

Anyways. Onwards to the project!

Project 5: Reverse string with javascript

I still have so much to learn about HTML and CSS, but I want to do some Javascript as well. The reverse string function is something I’ve done with Free Code Camp. This time I’m displaying the result with HTML. I know. It’s simple and safe, but it’s something. I had fun and I learned som new stuff.

Prepare

I downloaded a simple HTML5 template from Initializr, set up my project folder and added it to my github repository.

Plan

This requires a minimum of HTML. A div with an input element and a button. Below that, a place to output the result.

The javascript is simple as well. I’ve done this before so the function itself I can do without any outside help.

I need to do something cool with the styling. I’m thinking exploring the possibilities of the input element and the label. Since, you know… that is what I got to work with.

Perform

The making of the function was easy enough. But I had some problems displaying the result to the page. It’s seemed the page refreshed every time I pushed the button, and the result only briefly flashed before disappearing.

The answer to this was of course embarassingly easy. I had put the input and the box inside a form element. This ment that the button is linked to the form. And, that every time the button is pushed, it redirects to the page again since I hadn’t set any action attribute.

I struggled a bit to style the placeholder text, but of course I found the answer on CSS-tricks.

Agin with the box shadow. I’m lazy so I used Cssmatic. Cool, cool, cool!

Perfect

To make it a bit more awesome, I removed the submit button and made it so it updates when you type.  This turned out to be a lot simpler than I initially thought…  Just remove the button, and add the onkeyup attribute to the input element. Check it out on MDN.

Then I removed the autocomplete with the autocomplete attribute, turning it off.

So…

To the project!

 

What is? – More ways to retain knowledge!

According to psychotactics.com you retain around 75% of what you learn by practicing it, and 90% by teaching it to someone else.

I don’t know where they got those numbers from, but they kinda make sense. I’ve always remembered large chunks of the stuff I’ve thought others. I think it’s because you need to get your shit together. And, you know, deliver yourself to others.

So far I’ve just been doing really basic stuff. But I’m trying. I’m practicing. I’m struggling. And I’m learning. Every time I have to spend time searching for an answer, and then implementing it. It’s like it burns into my brain. In a good way.

The blog posts are supposed to be my way of process what I do, and in a way try to teach it. But I guess I just, at least so far, explain very basic what I’ve been doing.. I don’t know. It needs to be better to get the teacher effect.

Anyways, I’ve decided to start a “What is?” series. Where I just write up a small post about new topics i encounter. I’ll explain the basics of it, and provide good external resources for further reading.

This is mainly for my own part. You know. To retain better. And hopefully it will be a resource for others as well.

Project 4: Change page title inside the HEAD tag

Can I change the tags in the HTML head with javascript? Especially the title tag?

Prepare

I simply want to be able to write something in an input element, push a button et voila! New page title!

Plan

I’m going to make a simple form. With an input element and a button. That’s it. A few lines of html.

The I have to figure out how I can grab the content of the input element with javascript and use it inside a function to change the page title.

I don’t want to use jQuery for this.

In the end, I will style it fancy shmancy with CSS.

Perform

The HTML

The HTML is simple. A container div, an input element with type of text, a label and a button.

The javascript

To get the input value I used getElementById. I keep forgetting to put document in front of getElementByID… so i get these “not defined blablabla” error messages. To get the content from the input you just use the value attribute. Like this getElementById(“some element”).value (stackoverflow). 

I saved the new title from the input in a variable called newTitle.

To get the title in the head I was thinking about getElementByTagName at first, but document.title was enough. I figured I could have the function set the new title like this: document.title = newTitle.

At first I had some problems. It wouldn’t grab the new title from the input box. To check if the function worked I made it return console.log(“Title Changed”). And to check if document.title = “new title” worked. I set it to something static. It worked.

So why wouldn’t it grab the content from the input box?

I tried to put it inside the console.log. It did not show. The function fired, sure enough. But no new title..

Then I found the answer on stackoverflow. I had the variable where i grabbed the value of the input, outside of my function. This causes it’s value to be null, since it is grabben when the document loads. Learned something new!

The CSS

So, to make the div round, with the content centered. I had some trouble. I found that you could just set the border-radius in percentages. Remember the width of the div when you do this!

At first i made an inner div, and set a margin to get it completely centered. But then I decide to make the div oval. And that was even simpler.

To get the shadows I got some help from cssmatics shadow generator.

The colors of the site itself are inspired by the colors from MDN.

To remove the blue glowing highlight from the input and the button I used the pseudo class :focus and set outline to none. I don’t know much about accessibility yet, but I guess this would be bad for it. I just wanted to try it out.

To change the background color on the button when it is click I used the pseudo class :active

And thats that! I very simple project. But even with this small and simple I learned something. And I could bet a lot of money on me remembering more from this, than from many of the courses I’ve “seen”.

To the project!

© 2017 DevelopingMike

Up ↑