Script To Generate Random Hex Color Code

Daily post #11 – I just wrote a piece of code to generate a random hex color code. Here’s what it looks like:

Explanation:

  • Create a box and a button
  • Select those using JS
  • Add event listener to the button
  • Connect it with updateButton function
  • This function will generate hex code and insert it inside the box.

My logic was to generate a random number from 0 to 9.

What Is $0 In Google Chrome Developer Tools?

Daily post #9 – If you right click on this page and click inspect element, you’ll notice a $0 symbol next to the element which is currently selected. Here’s a screenshot for reference –

So what is it and what it really does? I haven’t explored it enough but based on what I learned it helps us as a reference point. To understand what this means, you have to click on the console tab in developer tools (or simply press CMD+OPT+J on Mac).

Once you’re in the browser/javascript console, type in $0 and hit enter. This is what you’ll see –

That’s pretty much what it does! (afaik at this point) 🙂

Selecting Random Value From An Array Using JavaScript

Daily post #8 – In this post, I’ll be sharing a simple trick to select or print a random value from a given array. Here’s the code for it:

function randomValueFromArray(array){
  var random = Math.floor(Math.random()*array.length);
  return array[random];
}

My favorite part of this code is the math on the second line – multiplying a random number with the length of the array. This is genius! I’ll explain why –

Math.random function generates a number between 0 and 1 (but never 1). If you multiply such a number with any given number X, the result will never be greater than X. And thus you will never run into an ArrayIndexOutOfBounds error 🙂

Learning JavaScript Using Console

Daily post #7 – I missed writing a post yesterday so I’m going to write two posts today. This one is about using your Google Chrome console to learn JavaScript. Let’s dive into this directly!

First open your Google Chrome console by going to menu bar > view > developer > JavaScript console. Or you can use CMD+OPT+J (because I like keyboard shortcuts).

Once in Console, you can type in any JS code and it’ll execute right there and give you the result at the same time. For example, type in the following code:

 
a = 5
b = 6
a
b

This will print the values of a and b on screen. You can also write multiline code using shift+enter or just by copy pasting code in there. For example:

for (i=0; i<10; i++)
console.log(i)

This will print out numbers from 0 to 9. The best part about this process is you can do this inside your browser while watching a tutorial on YouTube!

That’s all in this post. Going to write another post now! 🙂

Changing Text Using Button With JavaScript

Daily post #5 – Hey there, today I’ll be writing about changing some text on the web page when a button is pressed. All of this done using JavaScript of course!

And it does this:

Very cool, right? Just a button changing some text using JS! Nothing great but pretty Awesome 🙂

Explanation:

We first made JS understand that btn is the button which we click and txt is the paragraph tag containing some text which should change when the button is clicked.

We then added an EventListener to btn so we know as soon as it gets clicked. And that triggers the code inside the function.

That code checks if txt is Awesome, make it Not Awesome and vice versa! That’s all 🙂

Change Text Using JS querySelector

This is my 2nd post for the daily-post project. Today I learned a bit about querySelector in JS. I suggest you copy paste the following code in your Sublime Text and save it as your-desired-filename.html on desktop or your sandbox folder.

This is such a simple trick to turn your static page into a dynamic one!

  1. We basically write `I love Batman` text inside the paragraph tag p.
  2. Then use the querySelector to select the first occurrence of p tag in the source code.
  3. Save that as reference in variable t.
  4. Add an event listener to it which will trigger myFunction when clicked
  5. myFunction will prompt us to enter a name and then modify the content inside the variable t.

That’s all. Simple but useful. Expect more JS in my future posts 🙂