I’ve been competing the Udemy course The Web Developer Bootcamp. I’ve upload a completed code along exercise; this one is a guessing game of the RGB colour code.

Check out the completed example here.

This exercise taught a number of key skills. How to use for loops to update arrays.

1
2
3
4
5
6
7
8

for(var i = 0; i < squares.length; i++) {
     if(colors[i]){
         squares[i].style.backgroundColor = colors[i];
     } else {
         squares[i].style.display = "none";
     }
     
 }

How to make random numbers into an array.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function generateRandomColors(num){
    //make an array
    var arr = []
    //repeat num times
     for(var i = 0; i < num; i++) {
         arr.push(randomColor())
        //get random color and push into arr
    }
    //return that array
    return arr;
}


function randomColor() {
    //pick a "red" from 0 - 255
    var r = Math.floor(Math.random() * 256)
    //pick a "green" from 0 - 255
    var g = Math.floor(Math.random() * 256)  
    //pick a "blue" from 0 - 255
    var b = Math.floor(Math.random() * 256)
    return "rgb(" + r + ", " + g + ", " + b + ")";  
}

The examples full code can be found on Github.com.

Using some CSS Grid + some vanilla javascript it makes for a great image gallery.
Check out the completed example here.

Read More

It’s a new year so I thought I’d change a few things up. I’ve started using a new blogging framework. I’ve switched to a static hosted site via AWS’s S3. To do this I started to use Hexo.io. I wanted to change from a complete CMS to something that required me to think. This has made it a little harder to blog and post things but its causing me to use new technolgies along the way. Hexo.io is a static site generator written in npm/nodejs, it crates the site from simple markdown files.

I’ll complie a list of things I’ve used to get the most out of the Hexo.io implementation.

1. I wanted to be able to write the blog from home or whilst I’m out on a laptop, to achive this I’ve created the Hexo server in an EC2 instance.
2. How to setup a Hexo.io box I used these two sites: Site1 and Site2
3. Learnt how to write basic markdown files as I’ve been avoiding this when commiting to Github. Markdown Cheat Sheet
4. Learnt how to use an S3 bucket to host a static site as well as still link it back to my domain name.
5. TODO: Need to learn how to make an S3 bucket HTTPS://.

The problem to solve that requires a couple ‘if/else’ statements.

1
2
3
4
5
6

An electric company measures the amount of electricity its customer use in kilowatt hours (kwh) and charges them
according to the following schedule:
first 12 kwh or less $2.80
next 78 kwh 8 cents each kwh
excess above 90 kwh 6 cents each kwh
Note that the minimum bill is $2.80. Write a program to calculate a customers bill

This is first draft on how it should be worked out pseudo like.

1
2
3
4
5
6

FlatFee 12kwh < $2.80 //will always be charged this.
the NEXT 78kwh (12kwh+78kwh) = 90kwh 0.08 // the wording is to show that its less than 90
>90kwh 0.06 //the rest of the bill.
//if the used was 91kwh... this is the sum.
>> 91kwh = 2.80 + (1x0.08) + (1x0.06)
FlatFee + one instance of the <90 + one instances of the >90.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

int usage = 0;
usage = int.Parse(txtboxUsage.Text);
double cost = 0.0;
double flat = 2.8;


if (usage <= 12)
{
    cost = flat;
    //cost = (usage * 0.8) + 2.8;
}
else if (usage > 12 && usage <= 90)
{
    cost = (usage - 12) * 0.08 - (cost - flat);
}
else if (usage > 90)
{
    cost = flat + 78 * 0.08 + (usage - 90) * 0.06; //hmmm need to work this one out.
} 

cost = double.Parse(cost.ToString());
txtboxBill.Text = cost.ToString();

It’s been a while so here is a basic app that will allow the calculation of how petrol price based on distanced traveled.

This is done via the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

int distance;
            distance = int.Parse(txtboxDistance.Text);
            double price = 0;
                        
            if (distance <= 8)
            {
                price = distance * 0.50;
            }
            else if (distance > 8)
            {
                price = 8 * 0.50 + (distance-8) * .30; 
            }
                        
            price = double.Parse(price.ToString());
            txtboxCost.Text = price.ToString();