DEV Community: Sam-Wisdoms Amenyenu

The Difference Between textContent, innerText and innerHTML in JavaScript

Sam-Wisdoms Amenyenu — Wed, 13 Dec 2023 14:00:35 +0000

In JavaScript Document Object Model(DOM) manipulation, we can use the textContent
, innerText, and innerHTML properties to read the text, and we can also use them to update/set the text of an element.

In this blog post, you will learn about how these properties are used to read and update the text of an HTML element.

Let's start!

What is `textContext` property in JavaScript DOM manipulation

textContent is a JavaScript DOM property that displays only the text inside of an HTML tag. Thus, it ignores all HTML tags and returns only the text inside the tags.

Let's see an example using the below HTML markup;

  <div id="mylinks">
        This is my <b>text content</b>:
        <ul>
          <li><a href="www.sam.com">Hello <b>friend</b> </a></li>
          <li><a href="www.myblogs.com">Welcome to my <b>blogs page</b></a></li>
        </ul>
      </div>

Using the textContent property, let's see what the textContent property will print to the console when we apply it to the above HTML markup.

let divEl = document.getElementById('mylinks').textContent
console.log(divEl)

Below is what the textContent property will print to the console.

 This is my text content:

          Hello friend 
          Welcome to my blog page

Let us see another example with the textContent property.

    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>

Let's apply textContent on the above HTML markup.

let divEl = document.getElementById('inner').textContent
console.log(divEl)

Below is what the textContent property for the above HTML markup will print to the console.

     Click here

Thus, textContent will return the texts inside the targeted element. It is important to note, however, that the textContent property does not take into account CSS properties and style applied to an element.

How to set the text of an HTML element using `textContent`

Let's see how we can use textContent to set the text of the below HTML markup.

<div id='outer'>
    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>
</div>

let divEl = document.getElementById('inner').textContent
console.log(divEl) // Click here

divEl = 'Submit me instead!'
console.log(divEl) // Submit me instead!

What is the `innerText` property in JavaScript?

The innerText property takes into account "human-readable" elements. This property behaves like the textContent property except that the innerText property takes into account CSS properties and styling and won't return any text of "hidden" elements.

Let's see an example with the innerText property using the HTML markup below.

<div>
  <h1>First display</h1>
  <h3>Second display</h3>
  <h3>Third display</h3>
  <h3 style="display: none">**Fourth display</h3>
</div>

const divEl = document.querySelector('div').innerText
console.log(divEl)

The innerText property for the above HTML markup will print to the console the below text.

First display
Second display
Third display

NB:
When you apply the textContent property on the same HTML markup above, it will also display the texts inside the last

tag with the style of display set to none because the `textContent` unlike the `innerText` property does not take into account "hidden" elements.

Try it out and see the result for yourself!

How to set the text of an HTML element using `innerText`.

Let's see how we can use innerText to set the text of the below HTML markup.

    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>

let divEl = document.getElementById('inner').innerText
console.log(divEl) // Click here

divEl = 'Submit me instead!'
console.log(divEl) // Submit me instead!

What is `innerHTML` property in JavaScript DOM manipulation?

innerHTML just as textContent and innerText can also be used to read or update HTML elements.

To insert the HTML into a document rather than replace the contents of an element, use the method insertAdjacentHTML().

NB: innerHTML will return the texts inside an HTML element together with their respective tags.

Using the HTML markup example below, we will see what the innerHTML property will return inside the console.

<div>
  <h1>First display</h1>
  <h3>Second display</h3>
  <h3>Third display</h3>
  <h3 style="display: none">Fourth display</h3>
</div>

Let's see what the above HTML markup will return when we use innerHTML on it.

const divEl = document.querySelector('div').innerHTML
console.log(divEl)

Below is what will be printed in the console as we apply innerHTML property to the code above.

 <h1>First display</h1>
      <h3>Second display</h3>
      <h3>Third display</h3>
      <h3 style="display: none">Fourth display</h3>

Thus, innerHTML will return all the texts of an element and their respective tags.

Conclusion
In this blog article, we have seen that the three ways by which we can read or update the text of an HTML element are;

textContent is a JavaScript DOM property that displays only the text inside of an HTML tag. It does not take into account CSS properties and styling. It will return the text of hidden elements or elements with display set to none.
innerText property behaves like the textContent property except that the innerText property takes into account CSS properties and styling and will not return any text of "hidden" elements.
innerHTML just as textContent and innerText can also be used to read or update HTML elements.
innerHTML will return the texts inside an HTML element together with their respective tags.

If you enjoy this blog post, please don't forget to like, comment and share.

To read more, check MDN
freeCodeCamp
w3schools

How to Convert a String to a Number in JavaScript

Sam-Wisdoms Amenyenu — Wed, 29 Nov 2023 01:34:52 +0000

When it comes to converting string to number in JavaScript, there are many ways by which you can achieve that.
In this article, we are going to explore; five(5) ways by which you can convert a string to a number in JavaScript.

How to convert a string to a number using the plus (+) operator.

One of the ways by which you can convert a string into a number in JavaScript is by using the unary plus (+) operator or simply by using the plus symbol.

Let's see an example of how this looks like in code.

In this example, we are using the let keyword to declare a variable called stringToNumber with a value of "25" which is a string.

Let's see how to convert the string "25" to a number,

let stringToNumber = "25";
console.log(+stringToNumber);// 25
console.log(typeof stringToNumber) // string

Assuming you have a variable called word set to a value of "I am a word" which is a string as below;

let word = "I am a word"
console.log(word) // I am a word
console.log(typeof word) // string

Try to convert the word into a number, using the plus (+) operator as below;

let word = "I am a word"
console.log(+word)// NaN (Not a Number)
console.log(typeof word) // string

Converting string to a number using the number() method or function.

Let's see in code how this works:

let stringToNumber = "25";

From our earlier example, we know

console.log(typeof stringToNumber); // string

Now, when we do

console.log(Number(stringToNumber)); // 25

Keep in mind the Number() is case sensitive so Number() is not the same as number().

Let's see what will be printed to the console using the **Number() method if it is a word using our let word = "I am a word" variable declaration as above.

let word = "I am a word";
console.log(Number(word)); // NaN just as in the case of the plus(+) operator above.

Try it yourself.

Converting a string to a number using the parseInt() function method.

Another way of converting a string to a number is by using the parseInt() function.
Check it out in the code below using our stringToNumber example:

let stringToNumber = "25";
console.log(parseInt(stringToNumber); // 25.

parseInt() method using our word example:

let word = "I am a word"
console.log(parseInt(word))// NaN.

Note, however, that the parseInt() function can take in two arguments; the string you are passing in and an optional radix.
A radix is a number between 2 and 36 which represents the base in a numeral system. For example, a radix of 2 would represent the binary system, while a radix of 10 represents the decimal system.

Converting a string to a number using the Math.floor() function

Using the let stringToNumber = "25", let's see the output of the Math.floor() method in code;

let stringToNumber = "25";
console.log(Math.floor(stringToNumber)); // number

Math.floor() will return NaN using the let word = "I am a word" variable declaration.
Check it below;

let word = "I am a word"
console.log(Math.floor(word))// NaN

Converting a string to a number using the Math.ceil() function

The Math.ceil function can also be used to convert a string to a number by rounding the number to the nearest integer if the number is a decimal.

Let's see in code;

let stringToNumber = "25.7"
console.log(Math.ceil(stringToNumber)) // 26 thus rounding the number to the nearest integer.

Another example to show something

let stringToNumber = "25.1"
console.log(Math.ceil(stringToNumber)) // 26

Math.ceil() will return NaN with our *word variable declaration.

let word = "I am a word"
console.log(Math.ceil(word))// NaN

Thank you for reading.

Please don't forget to comment, like, and click here to share
.

To read about other methods of converting a string to a number in JavaScript, please read from the freeCodeCamp website.

The Difference Between an ID and a Class in HTML.

Sam-Wisdoms Amenyenu — Tue, 28 Nov 2023 14:21:44 +0000

Every time, we make the decision to learn something new, we will be faced with difficulties of one kind or the other. Understanding the concept of what we want to learn is important.

Today, we are going to learn about two of the commonly used concepts you will come across every day when you are a programmer or developer. That is the concept of ID and CLASS.

An understanding of them is as, however, important as acquiring a passport if you wish to travel abroad.

First of all, what is an ID? In plain English, ID stands for Identity Document. Everyone has some sort of Identity and can be identified as such. For example, if a person is tall among many others who are short, he can be described or identified as “the tall one” and the other members will know the very person that is been referred to so the height of that person can be used to identify him or her among the other members.

Now, let’s drill it down further. When a person acquires a birth certificate, passport, residence card, National Insurance Number etcetera, these are all different types of identity documents as these documents can be used to specifically identify, trace, or point at them.

No two persons will have exactly the same identities. In the identity documents analogy that is explained above, when two or more persons have exactly the same identity name, document number, date of birth, etc, it means something is wrong somewhere and needs to be rechecked and corrected.

In the HTML document IDs are written as for example; ID = sam; whereas in the CSS, they are denoted with the # Symbol so the ID = sam above in the CSS will be written or targeted as #sam.

Class on the other hand is loose. A class can be applied to many different elements or items using the same class name. From the identity document analogy, where two or more persons, cannot have the same identity document features exactly the same, classes don’t care.

With Class, different people can have exactly the same features such as name, number, date of birth etcetera and everything will still be fine.

In my own words, I will describe classes as being loose and flexible. They don’t care about specificity.

If for example we have 4 people with the names; Sam, Ben, Fenya, and Mary and we want to target all of them as one, we can do so by putting them all together in a class and applying a common name on all of them.

For instance, if we want to apply a class to the above name by giving them a common name, we can do so by giving them the same class name individually in the HTML document as class = name.
In the CSS, classes are targeted by using the full-stop or dot (.) symbol.

Take a look at an example of how class and ID are written in HTML when you are writing code.

     <div class="single-project" id="calculator"></div>

Take a look at how the ID items or elements in the HTML are targeted in the CSS.

#calculator { background-image: url(../images/02-portfolio-2.jpg); }

#led-wall { background-image: url(../images/02-portfolio-1.jpg); }

Take a look at how the Class items or elements in the HTML are targeted in the CSS.

.single-project{ border-style: solid; border-color: aquamarine; }

.project-container { background-color: aqua; align-items: flex-start; }

I believe this blog post helps you to get a better understanding of the concept of CLASS and ID in programming.
If this blog post helps you, please like, share, and comment.
Want to read more resources, read more from the Mozilla Developers Network site.

NB: Are you looking for a good technical writer or someone for your website project? Contact me by email at: asamwisdoms@gmail.com.

Understanding the Difference Between an ID and a Class and How They are Used in Web Development.

Sam-Wisdoms Amenyenu — Tue, 21 Nov 2023 22:44:32 +0000

Every time, we make the decision to learn something new, we will be faced with difficulties of one kind or the other. Although the difficulties we encounter sometimes when learning new things may seem simple when we see other people who are knowledgeable handle the same difficulties with ease, it is not always the case.
There may be several underlying factors that can make learning something new difficult. The reason may simply be that things seem difficult just because we are just starting out and it is normal that we have difficulty understanding.
What is helpful in navigating this stage if we have just started out is a lot of practice and over time, we will become experienced thus making those things that once seem difficult becoming easy. As the common saying goes, practice makes perfect.
Sometimes too, the reason why learning something new can seem difficult can also be because, we lack understanding of the basic concepts that underly what we are learning so again, practice and trying to understand the basic concepts that underly what we are learning will be helpful.
It is important to note, however, that every new thing you set out to learn needs time, consistency, and practice to break into understanding.
Today, you are fully going to understand two of the commonly used concepts you will come across every day when you are a programmer or developer. That is the concept of ID and CLASS. In your career life as a programmer or developer, you cannot avoid coming across these two concepts on a daily basis. An understanding of them is as, however, important as acquiring a passport if you wish to travel abroad.
First of all, what is an ID? In plain English, ID stands for Identity Document. Everyone has some sort of Identity and can be identified as such. For example, if a person is tall among many others who are short, he can be described or identified as “the tall one” and the other members will know the very person that is been referred to so the height of that person can be used to identify him or her among the other members.
Now, let’s drill it down further. When a person acquires a birth certificate, passport, residence card, National Insurance Number etcetera, these are all different types of identity documents as these documents can be used to specifically identify, trace, or point at them.
No two persons will have exactly the same identities. In the identity documents analogy that is explained above, when two or more persons have exactly the same identity name, document number, date of birth, etc, it means something is wrong somewhere and needs to be rechecked and corrected.

The same concept is what is at play in the world of programming.
IDs are applied to an element when you don’t want them to change. That is if you don’t want an item to change or belong to the class of the masses, then the best thing you can do is to apply an ID to that item or element so that, you can use the ID name you have given to that element or item to identify them specifically out of 1 million and more other items.
In the HTML document IDs are written as for example; ID = sam; whereas in the CSS, they are denoted with the # Symbol so the ID = Sam above in the CSS will be written/targeted as #sam.
Class on the other hand is loose. A class can be applied to many different elements or items using the same class name. From the identity document analogy, where two or more persons, cannot have the same identity document features exactly the same, classes don’t care. With Class, different people can have exactly the same features such as name, number, date of birth etcetera and everything will still be fine. In my own words, I will describe classes as being loose and flexible. They don’t care about specificity.
If for example we have 4 people with the names; Sam, Ben, Fenya, and Mary and we want to target all of them as one, we can do so by putting them all together in a class and applying a common name on all of them. For instance, if we want to apply a class to the above name by giving them a common name, we can do so by giving them the same class name individually in the HTML document as class = name.
In the CSS, classes are targeted by using the full-stop or dot (.) symbol.
Take a look at an example of how class and ID are written in HTML when you are writing code.

        <h3>Led Wall</h3>
        <p>Node/IOT</p>

    </div>   
    <div class="single-project" id="calculator">
      <div class="project-container">
        <h3>Calculator</h3>
        <p>React/JavaScript/CSS</p>
      </div>
    </div>   
    <div class="single-project" id="pastel-puzzle">
      <div class="project-container">
        <h3>Pastel Puzzle</h3>
        <p>Mern Stack</p>
      </div>

Take a look at how the ID items or elements in the HTML are targeted in the CSS.

surf-report {

calculator {

led-wall {

Take a look at how the Class items or elements in the HTML are targeted in the CSS.
.single-project{
border-style: solid;
border-color: aquamarine;
padding-block: 100px;
width: 1500px;
bottom: 20px;
flex-basis: calc(50% - 1em);
margin: 0.5em;
align-items: flex-end;
}

.project-container {
background-color: aqua;
width: 150px;
align-items: flex-start;
}

Know the Git Flow Commands in Just Five (5) Minutes.

Sam-Wisdoms Amenyenu — Fri, 13 Oct 2023 04:26:32 +0000

Run the following commands to achieve that but make sure you spend two (3) minutes and read the entire blog post for very important explanations and other information. We assume that we have a directory called champions.

cd champions (to be on the champions directory which is the directory you are pushing from) .
git status (to confirm you are on the right directory you want to push from).
git add –A (to stage all your changes to be committed).
git commit –m “Add brief message to describe the push” (to commit your changes to GitHub).
git pull origin main (To check if your directory/branch is up to date).
git push origin champions (to push your changes to GitHub)

**If **you are new to programming, it is normal to feel overwhelmed by the many new terminologies and commands you must live with for the rest of your working life, especially if your goal is to become a software developer or a Software Engineer.

I must say that if other people have mastered these terminologies and commands. You can master them too.

It is a fact that everything you set out to do or learn for the first time can feel very challenging. One thing that is worth remembering when faced with challenges while learning a new skill is; “the people you view in the field as professionals and experts were once like you. They, also, once or twice felt intimidated when they were just starting out like you”. Go on then to encourage yourself and say to yourself; “if others have started it before me and went on to become experts/professionals, I can also start it, attach seriousness to it and one day, I will be viewed by those behind me as an expert/professional.

What is important is that instead of feeling constantly overwhelmed and stressed about the many information you had to comprehend in a field you are not familiar with, try to find strategies/techniques that can help you to adapt quickly into the new environment.

The focus of this blog post is to help you understand the Git Flow process in just 5 minutes.

The Git Flow process is the various processes / commands you run in the terminal when you are pushing a file from your local machine to GitHub.

Before you start to run your commands, make sure you are on the right directory from where you want to push to GitHub.

You can check the directory you are on by running the cd command in your terminal.

In this blog post, let us assume that we have a directory called champions and we want to push changes we have made in this directory on our local machine to GitHub.

To check if we are on the champions directory, we will run the command, cd champions.

Next, run git status command in the terminal to confirm if you have successfully navigated to the champions directory with your first command.

If you notice that you are on the champions directory it is now time to start pushing your changes to GitHub.

Next type the command git add -A in the command line/terminal to stage your changes ready to commit.

Next type the command git commit -m “champions” to commit your changes to the repository on GitHub.

Next make sure your current branch is up to date before you proceed to open a pull request. Check this by typing the command git pull origin main in the command line.

The output from the git pull origin main command should read; “Already up to date” which is a confirmation that your current branch is up to date.

After you have confirmed that your current branch is up to date, it is now time to do the final step in the Git Flow process that will push your change to GitHub.

To do that type the command git push origin champions.

After this command, a pull request will be created on GitHub. Proceed to GitHub to complete the pull request.

NOTE:

Now you must make sure that your GitHub is in sync with your local machine so run the following commands to achieve that and to return to the main directory of your local machine.

git checkout main

git pull origin main.

USEFUL LINK
https://coding-boot-camp.github.io/full-stack/git/getting-started-with-git

The most important thing to know before you start the actual programming/coding if you are a beginner.

Sam-Wisdoms Amenyenu — Thu, 05 Oct 2023 22:03:00 +0000

To many people, learning something new can feel both exciting and challenging. However, it is a fact that learning is not exciting to everyone. It can be more challenging than the excitements that come with it. From my own personal experience, there are various factors that can contribute to good learning experience and there are various factors that can contribute to bad/struggling learning experience.

When you are venturing into a new area of study such as programming, the challenges can even be more, especially if you don’t have any background prior.

To deviate a little bit into religion about what the Bible says about confronting challenges during periods of difficulty; declare “I can do all things through Christ who strengthens me. (Philippians 4:13) and believe in yourself that you will confront the challenges head on, you will win, and you shall find the excitement that you wish to achieve in the end.

Every win comes with having a good strategy in place. Before you start to write codes as a beginner the number one question from my point of view which I believe you should ask yourself is which code editor will I feel more comfortable using to write my codes? Which other code editors are there that I can comfortably use or learn to use very quickly.

In this blog post, we are going to explore three (3) code editors that you can consider using as a beginner when starting to learn programming.

Visual Studio Code

Visual Studio Code is a lightweight, but powerful opensource code editor developed by Microsoft. The name is common among developers as it is a code editor that is easy to use and it is used by millions of developers world-wide.

Visual Studio code has a lot of customization features that make it user friendly and appealing for users.

Visual Studio code has a powerful IntelliSense; a feature that helps you to write code faster and accurately. VS Code have support for almost every major programming language. For example, JavaScript, C++, Python, TypeScript, CSS, and HTML are all supported. More rich language extensions can be found in the VS Code Marketplace.

If you are looking for a code editor that is easy to use, more customizable, is open source and most importantly with a lot of resources easily available to lay your hands on, then I will highly recommend VS Code.

Click here to Download VSCode that is compatible with your operating system for free from the VSCode website.

ATOM
Atom is a text editor that supports collaboration among developers thereby allowing for cross platform editing so developers can also collaborate across different operating systems. Developers can code together using the Teletype tool which is available in beta form.

The programming languages that are supported by Atom are C, C++, COBOL, HTML, CSS, Java, PHP, Ruby, Scala, and SQL.

The operating systems that this code editor support include Windows, macOS, and Linux. It is a free code editor so if you are looking for a code editor which offers a lot of features for ease of collaboration on projects, then Atom may be the right choice for you.

Click here to Download Atom for free from their website.

Sublime Text

Sublime Text editor is a code editor that encompasses complete development environment as it groups code, markup, and prose in a single tool. C++, Python, PHP, Rails, are some of the languages supported by this code editor.

This code editor is made to handle large projects and heavy coding. For instance, it can open a 7 MB source code file and scroll through 200,000 lines of code seamlessly. Sublime Text lets users to also quickly jump between files and functions using the go to feature.

Download sublime Text here which of course is not for free.

Please note that there are other types of code editors, and I will encourage you as a beginner to research the different code editors and their features so that you can decide on which one is best and more suitable for you to use.