Forem: Salma

JavaScript Date: Get Date methods

Salma — Mon, 26 Dec 2022 17:27:23 +0000

To create and manipulate a particular date, we will have to create a date type object which is a built-in object in JavaScript.

To learn how to create a date type object check the following tutorial:Create Dates in JavaScript

The Date object has many methods that can be classified into different groups: the methods that allow us to obtain a date, those that allow us to define a date, others that allow us to get the current time, etc.

In this tutorial we will go through different methods to get the date, month, year, time, minutes, seconds...So the methods we're going to use are called "getters" because they all start with "get".

getFullYear() Method

The getFullYear() method returns the complete year of a date.

getMonth() Method

The getMonth() method returns the month of a date. This month is returned as a number.

Here the number of the month returned is 2. It does not mean that the month is February, but 2 represents the month's index.

Because if we were to add all the months from January to December to an array, then the index of January would be 0, and the index of December will be 11.

So here the getMonth() method returned 2 as an index for the month of March.

In general, getMonth() method is used to return the current month.

getDate() Method

The getDate() method returns the day of a date. The day is returned as a number.

getHours() Method

The getHours() method returns the hours of a date. The hours are between 0 and 23.

getMinutes() Method

The getMinutes() method returns the minutes of a date. The minutes are between 0 and 59.

getSeconds() Method

The getSeconds() method returns the seconds of a date. The seconds are also between 0 and 59.

getDay() Method

The getDay() method returns the day of a date (day of month or day of week). The day is returned as a number and this number is between 0 and 6.

The number returned here is 4. 4 refers to Thursday.

If we add all the days of the week to an array like this : ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

the index 0 will refer to Sunday, and that is because in JavaScript, the first day of the week is Sunday. So index 1 represents Monday, 2 represents Tuesday etc...

getTime() Method

The getTime() method returns the number of milliseconds since January 1, 1970.

getUTCFullYear() Method

The getUTCFullYear() returns the complete UTC year of a date. The difference between getFullYear() and getUTCFullYear() methods is around new Year time. If the day date is December 31 or January 1, the return value of getUTCFullYear() and getFullYear() may be different as the getUTCFullYear() returns the Year according to the universal time.

getUTCMonth() Method

The getUTCMonth() returns the UTC Month.

getUTCDate() Method

The getUTCDate() returns the UTC Date.

getUTCDay() Method

The getUTCDay() returns the UTC Day as a number. This number is between 0 and 6.

The 22nd of December is a Thursday. Here the number returned is 4, and 4 refers to Thursday as explained in the getDay() method.

getUTCHours() Method

The getUTCHours() returns the UTC Hour. If you use getHours() instead getUTCHours() method, you will get the local time that is on your computer. Because getHours() returns the local time.

However if you use the getUTCHours(), you will get the UTC time instead.

The UTC time might be different from the local time due to the time difference.

So here the UTC time is 3PM while on my computer I have 4 PM. So my time zone is UTC+1.

getUTCMinutes() Method

The getUTCMinutes() returns UTC minutes.

getUTCSeconds() Method

The getUTCSeconds() returns UTC seconds.

Conclusion

To retrieve date properties like hours, minutes, seconds, time… the Date() object allows us to do that through the get methods.

The following get methods get back the local hours, minutes, seconds, day, time…:

getDate()
getFullYear()
getMonth()
getDay()
getHours()
getMinutes()
getSeconds()

The following get methods get back the UTC (Universal time and date) hours, minutes, seconds, day, time…:

getUTCDate()
getUTCFullYear()
getUTCMonth()
getUTCDay()
getUTCHours()
getUTCMinutes()
getUTCSeconds()

JavaScript Date: Create Dates in JavaScript

5 ways to declare a function in JavaScript

How to loop through an array in JavaScript?

Understanding JavaScript Objects: From Basic Concepts to Practical Usage

Object constructor functions: How does the Javascript constructor work?

Fetch API: Send data from front-end to back-end

How Long Does It Take to Learn JavaScript?

Salma — Sun, 11 Dec 2022 14:52:09 +0000

JavaScript is a programming language that allows web developers to create interactive websites. If you want to become a web developer, learning JavaScript is essential.

It is a very versatile language. It can be used to build desktop applications, mobile apps, games, and even embedded systems. In addition, it is also widely supported across browsers and operating systems.

JavaScript has evolved over time, and now supports several new features such as object-oriented programming, event handling, data types, and dynamic typing. This makes it easier to develop applications using the language.

However, the most popular question among beginners and people who want to start building something nice like a website or an app is : How long does it take to learn JavaScript?

In this article we will understand first what “Learn” means as many people get “learning” confused with “mastering“, and then we will break down how much time exactly is needed to master JavaScript and start doing something with it.

1)- Learning

Learning means gaining or acquiring knowledge of something after studying it or being taught to you.

This means when you learn something, you become knowledgeable in this subject and have a basic understanding of what this subject is.

But in no case learning means mastering.

Same thing for JavaScript. When you ask the question: How long does it take to learn JavaScript? What you’re asking actually is how long you need to have a basic understanding of JavaScript concepts and start understanding how the language works.

And the answer to this question is it depends.

It depends on what you would ask?

Well, it depends on if you’re a self-taught person – Like me 😃 – Or if you’re enrolled in some sort of program or Bootcamp or university…

But either way, stick around to see exactly the difference between these 2 methods and how much time you will need depending on which situation you’re in.

a)- Self-taught way
If you’re learning JavaScript all by yourself, then this might take you a little bit longer than expected.

Usually self-taught people need around 1 year and half to 2 years to grasp the basics of JavaScript.

And when I say “grasp the basics“, I’m not talking about peeking or skimming the course or the concepts quickly while you’re watching TV and talking to your friend at the same time on the phone while having an eye on the course and the other eye on the computer.

When I say “grasp the basics” I mean learn JavaScript enough to start feeling comfortable using it because you stuck with it enough to understand the concepts at a deeper level.

Because to achieve this level of comfort, knowing how a for loop works is not enough. Instead, you should know how a for loop works, and how nested loops work, and how to use a for loop with an object to create various instances of an Object, and if you use a for loop inside a function what will happen, and if you use a function inside a for loop what will happen and so on and so on…

So you see, just for one concept, which is for loops, there is a lot to understand.

Of course these are not fixed numbers, we’re all different and for some they might need more than 1 year and half and for others less. But this is the average duration that it takes.

For me personally, I started feeling comfortable using JavaScript around 2 years and half. It was a long way, and I had to put in a tremendous amount of effort and hard work.

Also when I’m talking about the “basics“, I really mean the “basics“, like for loops, functions, objects, arrays… I’m not even talking about advanced concepts like how to make an AI, or how to make a blockchain….Because those, once you understand the “basics”, they become very easy to work on.

But why is it hard to learn JavaScript by yourself?
Simply because you have to figure out everything all alone.

You have to check hundreds of websites, watch thousands of videos, select the right courses for you by yourself, make your own mistakes, google them hoping you’ll find someone who already had the same problem and found the solution, join forums so that you can ask questions there and see if there is anyone ready to help, understand the code or others code…

That’s pretty tedious and can quickly become overwhelming and discouraging because you feel lonely and there is nobody you can turn to for help.

Not to mention that nowadays, there are millions of resources out here, so when you are a beginner and trying to figure out things by yourself, you get lost quickly, because everyone says that this video is the best, or this course is the best, or this website is the best. So you don’t know which one really to trust.

b)- Guided way
A guided way to learn JavaScript generally involves a tutor, a coach, a teacher, or paid bootcamps…

Using this method speeds up the learning process tremendously and has many advantages. But it requires financial investment

But don’t let that stop you because learning JavaScript pays substantial dividends that make the effort more than worth it…

Using this method you will need between 6 to 9 months to learn deeply the concepts of JavaScript as the courses and training you will enroll in usually have this duration length.

There are some platforms you can join that have many JavaScript, HTML, and CSS courses, and you get a certificate by the end of the training period.

One of them is eudureka! platform. I like this platform because it has courses not only about HTML, CSS, and JS but also about Cloud computing, cyber security, BI…So if you’re interested in any other course you can take it as well. All it requires is an enrollment to your favorite course and you get access to it with the certificate at the end.

2)- Mastering

On the other hand, we have mastering.

Mastering means knowing the subject sufficiently that not only you feel comfortable using it or talking about it, but it becomes a second nature to you.

Mastering JavaScript does not mean you don’t make mistakes anymore, but rather you are able now to build real websites and apps because not only you understood well the tips and tricks, but you are at a stage where you can understand other people’s code and spot errors, pick up new tricks or lessons quickly, help others and why not tutoring them and discuss anything about JavaScript with ease.

This phase does not have a timeframe because simply JavaScript is so wide that even if by any chance you master all of it, a new version of JS will change it all as there are always updates and new libraries and frameworks.

However, you can master a part of JavaScript, and that is when you know exactly what you want to do and start working on it from the beginning.

For example, if you know that you love games, and you want to build a career as a game developer, then you know which part of JavaScript you’ll need to learn and focus on the most. And for those who are fond of Blockchain, for sure they will not focus on the same techniques and libraries as a game developer, they will have to concentrate on other types of libraries, but that is what will make them masters in their area, which is Blockchain.

And to be a master in an area or a part of JavaScript, the minimum duration is one year depending on which area you chose to focus on. But still, the truth is, when it comes to mastering, the process is a never-ending with JavaScript.

3)- What should I know before starting to learn JavaScript?

To learn JavaScript, you don't have to know any other programming language, but it would be better if you know HTML and CSS first.

JavaScript is used to create dynamic websites, so it makes sense to have a basic familiarity with other web page building blocks like HTML and CSS.

Also, don't forget that you will be manipulating DOM elements with JavaScript, and DOM elements simply mean HTML elements.

4)- How Much Time You Have to Dedicate to Learning JS?

It’s no secret that the more time you dedicate to learning, the quicker you’ll be able to pick up the skills needed to code with JavaScript.

Learning how to program requires dedication. You must put in the time to practice and develop your coding skills. However, if you do not take advantage of a structured course, you may find yourself struggling to keep pace with others who are better versed in JavaScript. A structured course provides a curriculum that slowly builds upon your knowledge. By enrolling in a course, you begin with basic concepts and move through them one step at a time. Instructors also help you out when you run into trouble. They can offer guidance and assistance so that you can master the material.

How to Start Coding in HTML, CSS, and JS: The Ultimate Guide for Beginners

How to make money as a web developer?(7 income sources)

Fetch API: Send data from front-end to back-end

Send form data to the back-end (Node JS)

5 ways to declare a function in JavaScript

20 JavaScript Array Methods

Salma — Fri, 09 Dec 2022 20:08:52 +0000

Arrays are one of the most important concepts in JavaScript.

Arrays are objects that enable storing a collection of items and data under a single variable name and have the capability to perform a certain operation.
In this article, we'll go through 20 methods we can use with an array to manage the data we have.

1)- pop()

One of the array methods is the pop() method.

The pop() method removes the last element of an array.

If we console.log the array, it becomes:

2)- push()

Unlike pop() method, push() method adds an element to the end of an array.

The array now becomes:

3)- shift()

shift() method removes the first element of an array.

The array becomes then:

4)- unshift()

unshift() method adds an element at the beginning of an array.

The array becomes:

5)- splice()

To add or remove elements to/from a specific position in the array the splice() method allows us to do that.

a)- Add an element to a specific position

To add an element to a specific position we use splice() method. It takes 3 parameters at least:

The first parameter is where, or at what position we want to add our elements. In this example we want to add them at position 2, which means after "Iphone", hence "2" is added as first parameter of splice().
The second parameter reflects how many elements we want to delete. In this example we don't want to delete any element, so we added "0" as second parameter of splice().
The third parameter and beyond are the elements that we want to add.

So the array becomes:

b)- Remove a specific element

splice() method, unlike pop() and shift() methods, allows us to remove any element from an array. All we have to do is to specify its position.

To remove a specific element from the array we use splice() method. It takes 2 parameters:

The first parameter is where, or at what position we want to add our elements. But here we will use the first parameter to specify from where the "delete" operation should start. In this example it should start from position 2.
The second parameter is to specify how many elements should be removed. In this example we want to remove one element.

At the end we have the following array:

6)- map()

map() method generally accepts a function as argument. This function runs through each element of the array and returns a new array based on these elements.

So here the function took every element of the array "numbers" and multiplied it by 2, and at the end returned a new array with the new results.

7)- filter()

filter() method returns a new array that contains all the elements that pass the test.

Here the function returns the age if the age is greater than 30 and stores it in the new array.

8)- concat()

concat() method helps us merge arrays to get one array.

The new array is:

9)- fill()

To fill an array with a static value we use fill() method.

The array becomes:

We can also add the static value at a specific position of the array.

The array becomes:

To add static values to specific positions of the array we pass the fill() method some parameters:

The first parameter is the static value, in this example it is "Kiwi".
The second parameter is starting from which position this value should be added, in this example it should be added starting from position 2.
The third value is at what position w should stop adding the static value. In this example it is at position 4.

10)- join()

join() method joins the elements of the array and returns a string.

In the browser we have:

join() method accepts a separator that is added between the parenthesis. In this example we chose the backslash "/" as separator, we can choose any separator we want.

If we choose a hyphen as separator the code will be:

And so the results will be:

11)- IndexOf()

indexOf() method returns the first index at which a given element can be found in the array. If the element is not in the array, then the method returns -1.

In the browser we have:

Here the index of "Kiwi" is 2. Because indexOf() returns the index of the first occurrence of the element. If we try this with "apple" we'll have 3 as an index.

However, what about if we have the same element repeated twice or 3 times or more in the array, and we want to know the index of the second occurrence or third or fourth occurrence?

Let's see that with "Kiwi". "Kiwi" is repeated twice. So the index of the first "Kiwi" is 2. To know the index of the second "Kiwi" we'll add:

3 represents the start point from where the array should start looking. And here it should start after the first "Kiwi", which means at position 3.

In the browser we have:

12)- includes

includes() helps to check if an element is in the array. If so, it returns true.

13)- reverse()

reverse() method reverses the order of the array elements.

In the browser we have:

14)- every()

every() method returns true if all the elements of the array pass the test. This method accepts a function that runs through all the array's elements.

15)- some()

some() is a method that returns true if at least one element in the array passes the test given by the function passed as argument.

16)- at()

at() returns the element that is in the index specified in the parenthesis.

In the browser we have:

17)- of()

This method creates a new array from a variable number of arguments, regardless of number or type of the arguments.

In the browser we have an array that is created:

18)- slice()

slice() method returns a slice or a part of the array.

The new portion of the array will be:

The first argument that the slice() method takes is the beginning the returned array should start from. Here the returned array should start from index 1.

The second argument is the end where the returned array should stop. Here it should stop at index 3.

The end is not included, which means if we want the slice() method to stop at index 3, then the returned array will contain elements until index 2.

19)- Array.isArray()

This method returns true if the declared variable is an array.

20)- delete()

This methods deletes an element from the array by specifying the index we want to be deleted. However, the **delete() **method leaves undefined or empty holes in the array after the element is deleted.

Which means even if the element is deleted, the length of the array does not change.

If for example the length of the array is 5, then after an element is being deleted the length will stay 5.

In the browser we have:

It is not advisable to use this method to delete elements from an array.

To delete an element from an array use splice() method instead.

HTML tags CheatSHeet

What are the different types of inputs in HTML forms?

Understanding JavaScript Objects: From Basic Concepts to Practical Usage

How to loop through an array in JavaScript?

5 ways to declare a function in JavaScript

Salma — Thu, 01 Dec 2022 19:34:07 +0000

JavaScript functions are used to perform actions when certain events occur. They are also called methods.

A JavaScript function is usually a block of code that contains a group of instructions to execute.

There are many ways to declare a simple function in JavaScript. In this tutorial, we will explore them with some examples.

1)- Ways to declare functions

a)- Function declaration
Also called a function statement or a function definition, is the most common way of declaring a function in JavaScript.

The function declaration method simply means that we will declare the function using the keyword function followed by the name of the function itself like below:

So here “function” is the keyword, and “course” is the name of the function.

If we want to call the function all we have to do is write its name followed by the parenthesis like below:

A function can take arguments. If we have dynamic data, we can pass the function as many parameters as we want.

Let’s say that for function course() whenever we call it we want it to display “Welcome to this tutorial” plus the name of the student.

The name of the student can change, as we can have 10 or 20 or 30 students….

So to do that we will pass a parameter called “studentName” to the function.

So now for the function to display what we want, at the moment when we will call it we should pass it the name of the student.

Let’s say that the student’s name is Thomas.

So the code will be:

b)- Anonymous function
When a function is declared anonymously, it means that the function does not have any name.

Unlike in the general declaration function where a name is given to a function, in the anonymous function there is no name.

An anonymous function is declared using the function keyword only, like below:

As you can see, the function does not have any name. That’s why it is called anonymous.

However, as an anonymous function is not accessible after its initial creation, and as it can only be accessed via a variable, we will store it in a variable that we’ll call course, and this is what we’ll see in the next paragraph.

c)- Function expression
The function expression method allows us to create an anonymous function that doesn’t have any function name.

Below is an example of an anonymous function expression. let’s see the code:

Here the variable course stores an anonymous function.

So the anonymous function is invoked by calling out the variable with trailing parenthesis and semicolons.

The code below will call the function:

d)- Arrow function
This method is a cleaner way of creating JavaScript functions.

So instead of declaring a function like this:

We can declare it like this:

However, as the arrow function does not have a name, it should be stored in a variable if we want to invoke it later, just like the function expression.

So the code will be:

Arrow functions provide a concise syntax for defining anonymous functions. An arrow function expression has a shorter syntax compared to other ways of declaring functions.

An Arrow function can also have arguments like this:

When creating an arrow function, the parenthesis pairs and curly braces are optional for a single function parameter and a single statement.

If there are many instructions that the function should execute, then these instructions should be wrapped inside curly braces:

e)- Constructor function
Another way to declare a function is by using the Function constructor with the new keyword.

Let’s have a look at the syntax first:

JavaScript has a built-in constructor Object called Function that can be used to declare and create functions.

This constructor can take any number of arguments. For this example we passed it 2 arguments which are “a” and “b“.

The last parameter is where the instructions that the function is supposed to execute should be added. It is there where goes the function body.

The general syntax is:

So in this example we created a function using the Function object, its name is sum().

2)- Which way is better?

There is no answer to this question because all depends on the situation and the function code.

You can use any method or function type you want and all of them will give you the same results.

so if you’re comfortable with either approach, feel free to pick whichever you prefer. However, I’d recommend sticking with the arrow function type whenever possible, as it offers better performance and readability.

Object constructor functions: How does the Javascript constructor work?

Send form data received in the backend to the database (MongoDB)

Send form data to the back-end (Node JS)

Get the data back from the database (MongoDB) and display it on the front-end

How to send data from back-end(Node JS) to MongoDB database?

Audio and Video HTML Tutorial – Learn how to add sound effects, videos and Youtube videos to your website

Salma — Sat, 26 Nov 2022 16:32:55 +0000

Is it possible to embed audio and video files into web pages without using Flash or other plugins?

HTML5 is a new standard for creating websites and apps. It was developed by the World Wide Web Consortium (W3C) and aims to provide developers with better tools for building cross-platform applications. The W3C has also created a specification called Web Audio API that allows developers to create interactive audio experiences within their sites.

Audio files, as well as video files, are now part of HTML5, allowing you to add audio content and videos to your site without having to rely on external plug-ins. This means that you don’t need to download additional software to play music or listen to podcasts. Just some custom controls are enough to add the media.

1)- Video

In HTML, to add a video to your website all you have to do is use the <video></video> tag.

Let’s take a simple HTML page with only a heading and a video.

The code is:

Inside the <video></video> tag we added the <source></source> tag.

The <source></source> tag is used to specify which video should be displayed, or in other words, to determine the source element of the video.

For that, the <source></source> tag accepts one essential attribute which is the src attribute. The src attribute is the one that takes in the name of the video we want to display plus the extension of the video.

Another attribute can be added to determine the type of the video, this attribute is type but it is optional.

So in the browser we have:

As you can see here, the video is now added to the browser. But there are 2 main problems here:

The first problem is that the video is taking up too much space, and the second problem is that there are no controls. So if we want to play the video or pause it or turn up the volume, we can’t.

Let’s see how to fix these problems.

For the first one, regarding the width of the video, we will just set a width using CSS. You can also set a height if you want , but in this example, we will add a width only:

So the video now looks like this:

Now, let’s solve the second problem, which is to add the video controls.

To add video controls simply we will add the controls attribute inside the <video></video> tag like this:

So the video now becomes:

As you have noticed at the bottom of the video you have now this bar where you can play, pause the video, turn up the volume(volume controls)…

There are other attributes you can add to the <video></video> tag to have more control over the video.

a)- muted

To play the video without any sound the muted attribute should be added like this:

Now if you refresh the browser and play the video, you will see that the sound is muted.

b)- autoplay

autoplay attribute makes the video play automatically when the page is displayed. However, there are some “autoplay policies”: Recently, many browsers allow the video to be automatically played only if it is muted, and that is because when the user loads the page and the video is suddenly played the sound can be annoying. So to counter this problem, browsers now authorize the video to be played automatically if the sound is muted. Which is the case for Chrome autoplay policies for example.

The code is:

Now if you refresh the page you will see that the video plays on the page load.

c)- loop

To play the video again and again in a loop you can add the loop attribute.

Now if you refresh the page and play the video, at the end you will see that the video will be played once again automatically, you don’t have to do anything.

That makes the video playback easy.

d)- poster

poster attribute allows us to add an image to the video that will be shown as long as the video is not played yet or while the video is downloading.

It is like a thumbnail for Youtube videos for example.

Let’s say that for this video I want an image of a dog to be shown.

In the browser we have:

So as you can see, as long as the user does not hit the play button, the dog picture will be shown. But if the user plays the video, then the dog picture will disappear.

2)- Audio

To add an audio to the HTML page we’ll use the same code we used to add a video, except this time instead of using <video></video> tag we’ll use <audio></audio> .

So the code is:

Here the src attribute takes in the audio source.

And the type attribute gives more information about the type of the audio file. So if the audio was an MP3 file for example, we would have added type=audio/mpeg.

The type attribute changes according to the type of the file formats

Now if you refresh the browser you will not see anything, and that is because to display the audio elements we need to add the controls.

So to add audio controls we’ll use the controls attribute.

Now we can see the audio file add to the browser:

As for <video></video> tag, we can use the same attributes to have more control over the audio file.

a)- muted

To play the audio without any sound the attribute muted should be added like this:

If you refresh the browser and play the audio, you will notice that the sound is now muted.

b)- autoplay

Audio autoplay attribute makes the audio play automatically when the page is displayed. However if you use Chrome, you will not be able to get the audio displayed automatically even if it is muted, and that is because Chrome has forbidden this.

But, if you try with Firefox, you will see that the audio can be played automatically if it is muted.

So the code is:

So the muted autoplay audio works well in Firefox.

c)- loop

To play the audio again and again in a loop you can add the loop attribute.

You can refresh the browser and see that the audio will be played again and again in a loop.

That makes the audio playback easy.

3)- YouTube video

Sometimes instead of adding a video directly to the web page, it would be better if we upload it to YouTube first and then add the link to the video to the web page. This will help avoid slowing down the loading of the web page and giving the user a bad experience.

So to insert a YouTube video all we have to do is to use the <iframe></iframe> tag.

The src attribute accepts the link to the YouTube video we want to add to our website.

However, if you notice, the link of the YouTube video is not a “watch” link, but it is an “embed” link. Because inside the link there is this “/embed/” keyword.

So where can we find this “embed” link?

Simply by going to the YouTube video of your choice and click on the Share button.

When you click on the share button you will have this box of choices you can choose from, either you can share the video via WhatsApp or Facebook or Twitter…But you will also have at the beginning the “Embed” button like below:

So now if you click on the “Embed” button you will have this window:

So now you will see on the right the <iframe></iframe> tag we’re learning about in this tutorial.

This is how YouTube inserts the videos and this is exactly what we will do.

So if you want you can either copy/paste the <iframe></iframe> tag as it is to your code editor and you’re ready to go.

Or if you don’t want all the attributes that are inside the <iframe></iframe> tag then you can just copy the “embed” link as below and paste it to your code editor:

So in the browser we have:

You can of course adjust the width and the height of the video either by adding the width and height attributes inside the <iframe></iframe> tag, But the best practice is to keep HTML separated from CSS, so we will do that through CSS:

So now we have a bigger video on the screen:

Let’s see some attributes that we can use to have more control over the video.

a)- allowfullscreen

To display the video full screen there is an attribute for that, and that is allowfullscreen.

If we add the “embed” link only without this attribute then this feature below will be disabled.

But if we add the allowfullscreen attribute then the feature will be enabled.

Now if we refresh we’ll have:

This is the full screen video Mode.

b)- mute

To make the video muted we’ll use the mute attribute.

The mute attribute is added inside the link, and it is given a value of 1.

If you refresh the browser and play the video, you will see that the sound is muted now.

c)- autoplay

To play the video automatically it should be muted first.

The attribute that will help us to play the video automatically is autoplay.

This attribute will also be added to the link and given a value of 1.

The mute and autoplay attributes will be separated by an ampersand “&”.

Now if you refresh the browser, the video will start playing with a muted sound.

d)- loop

If you want to play the video over and over again, then loop attribute will help you do that.

However, this attribute will not be added directly after the link like mute and autoplay attributes.

The syntax will be:

As you notice, we added the “playlist” keyword first and we set the value of this keyword to the exact string value that comes after “embed/“, and then we added an ampersand “&” and the loop attribute.

You can refresh the browser and see that the video will be played in a loop.

e)- controls

To display the video without any controls you can use the controls attribute and set the value to 0.

The default value of the controls attribute is 1.

4)- Conclusion

Adding sound files and videos to the web page enhances the user experience.

In this tutorial we’ve seen how to add these media to a website using different tags and default controls and attributes to have more control over the elements.

We can add different audio formats and sound content to the website using audio tags.

We can add a video directly to the website or through YouTube as well as some features using the video elements attributes.

tables in HTML

How to make a dropdown list in HTML?

Make forms with HTML

How to make a navigation bar?

HTML ordered and unordered lists

Project: Digital Clock

Salma — Tue, 22 Nov 2022 20:22:37 +0000

In this project we will see how to create a digital clock like below:

As you can see, the clock is not a static clock that shows the current time and stops, but it is a dynamic clock that keeps ticking just like your watch.

We’ll use a little bit of HTML, CSS, and JavaScript.

So let’s see how to accomplish this project.

Part 1: HTML

To start this project we’re going to create a <div></div> that will contain all our elements and we will give it a class of container.

So the HTML code will be:

After that, we will create 3 <div></div> tags inside the container <div></div>.

Let’s give the first <div></div> a class name of title, and put inside it an <h1></h1> tag.

Let’s give the second <div></div> a class name of date and add inside it a date just that you can see for the moment what it looks like.

And let’s give the third <div></div> a class name of time and add inside it a time.

So the final HTML code is:

In the browser you’ll have:

Part 2: CSS

Now let’s add some CSS.

All our elements are inside the <div></div> that has a class name of container.

So let’s start by centering vertically the elements inside the <div></div>.

To do that first of all we should give the <div></div> a height. Here we’ll give it a height of 400px and the elements will be arranged inside this height of 400px.

So to arrange and center the <div></div> elements we will change the display property to flex, and add justify-content and align-center properties.

As a background, we want an image. So we’ll use background-image property to add the image. And as we want the image to be centered and we don’t want it to be repeated, we’ll add background-repeat and background-position properties.

We’ll add also background-size to resize the image.

So the code will be:

In the browser we have:

However, we want the elements to be one under another, not one next to another.

As we added the display property and we set it to flex, we can determine the main line for the elements.

The main line simply means the line that will contain the elements. The line is either horizontal or vertical.

So as we want the elements to be in a vertical line and not a horizontal one, we’ll add the flex-direction property and set it to column.

So the code will be:

And then in the browser this will look like this:

If you noticed, we also added the position property, and that is because we will position the rest of the elements, but we need a reference to which we will position them. And this reference in the container <div></div>.

To understand more CSS position and relative and absolute positions check this tutorial: absolute and relative positions: What’s the difference?

So let’s add some styling to the rest of elements and position them.

For the second <div></div> that has a class name of title we will add a background color and center the text in the middle of the <div></div>.

We will also set a width and change the color of the text to white and add a bottom space.

So the code is:

In the browser it looks like:

Let’s style now the 2 remaining <div></div> tags.

We’ll add a background color for each, center the text in the middle, add some padding and set a width and a position.

So the CSS code will be at the end:

In the browser that will be:

3)- Part 3: JavaScript

a)- Setting the date
First, let’s display the current day in the <div></div> that has a class name of date.

To do that we will work with the Date() object and its methods.

The code will be:

Let’s explain the code.

First we selected the <div></div> with the class name of date because we’re going to need it later and we stored it inside the variable dateDiv.

Then we created a Date object using the new Date() constructor that contains different methods to get the day, the month, the year…

Inside the function displayDate() we extracted the day, the month, the year and the date using the different methods getDay(), getMonth(), getFullYear(), getDate(). The values are stored in the variables day, month, year and dayNumber.

As the getDay() method returns a number from 0 to 6, with 0 being Sunday and 6 being Saturday, we added an array of weekDay where we stored the days of the week. this way if for example today.getDay() returns 2, then weekday[2] is Tuesday, which means weekday[day] is Tuesday.

Same thing for the months, the method getMonth() returns a number from 0 to 11, with 0 being the month of January, and 11 being the month of December. That’s why we also created an array of all the months of the year.

Finally we return the value of weekDay, dayNumber, yearMonths and year.

At the end we just put the value that the function returns inside the <div></div> we stored inside the variable dateDiv.

b)- Setting the time
Now, let’s display the current time in the <div></div> that has a class name of time.

So the code is:

Let’s explain the code.

First we selected the <div></div> with a class name of time and stored it in variable that we named timeDiv because we will use it later.

Then we created a function displayTime().

Inside this function we created another object using the new Date() constructor once again.

Then we extracted the hours, minutes and seconds using the getHours(), getMinutes() and getSeconds() methods and we stored them in h, m and s variables.

After that we set the variable t to “AM” so that we can change between “AM” and “PM“.

We added a condition to make the clock a 12 hour clock, because the getHours() method returns a number from 0 to 23, but if we want a 12 hour clock we have to subtract 12 from 24 as we have 24 hours in a day.

At the same time we said if the hours are greater than 12, which will then be the afternoon, then instead of “AM” it should be “PM“.

Finally, we added the zero in front of the the hours the hours, minutes and seconds if they are less than 10, because the time will be normally displayed like this: 8: 6: 5 AM. So if we want it to be displayed like this instead 08: 06: 05 AM, we have to add a condition and say if the number is less than 10 then add a zero if not then keep the time as is. And this condition we added it using the ternary operator to make the code cleaner.

At the end we added the setInterval to repeat the function
very 1000 ms to see it incrementing.

The final JavaScript code is:

Project: Password Generator
Project: How to make piano sounds with computer keyboard
How to make money as a web developer(7 sources of income)
How to Start Coding in HTML, CSS, and JS: The Ultimate Guide for Beginners

How to Start Coding in HTML, CSS, and JS: The Ultimate Guide for Beginners

Salma — Sat, 19 Nov 2022 20:06:33 +0000

Coding is the language of computers. It allows us to create programs that automate tasks, such as sending emails, creating spreadsheets, or even playing games. The good thing about coding is that anyone can learn it.

Learning to code is a great way to get started in the tech field. There are plenty of resources out there to teach you how to program and become a web developer. In addition, there are also numerous opportunities for those who already have experience in web development to earn extra income through freelance projects.

Learning programming requires patience and practice. There are no shortcuts. The good news is that once you get started, you'll see immediate benefits.

In this article, we'll see the different steps that you should follow to get into web development and develop your coding skills.

1)- Make a decision

The first step to do before starting anything is to make a decision.

Programming is very difficult. It takes time to grasp even the basic concepts of the programming language which is Javascript.

And when I say that, I’m not talking about someone who wants only to take a look at the lines of codes to have a general idea of what programming looks like and move forward. When I say that programming takes time I’m talking about mastery, about someone who wants to master the game and create beautiful and meaningful things from what they learned to serve people.

Before jumping into programming, and specifically web development, ask yourself if this is really what you want to learn. Ask yourself if you’re doing it because you really love it or if you’re doing it just for the sake of earning money because you heard jobs in web development pay very well. Or maybe you’re doing it just to show off because you heard that all people who are into programming are some kind of “geniuses“?

Because you will face a lot of challenges down the road. There will be moments when you’ll write the code and it will not work, and you will not even understand why or what. There will be nobody there to help except your best friend “Google“, and even by looking in “Google” sometimes you will not find the answer to your problem.

Programming is a lonely road, if you are serious about it and want to become successful it will require a lot of sacrifices, like any other area of life.

For example as a sacrifice, you should cut off this “Going out” with your friends every single day and waste time.

I’m sorry to break it down to you but if you are serious about programming, you should sit every day for a certain amount of time, 2 hours, or 3 hours or 4 hours, whatever you feel comfortable with, and work on your programming skills. Because if you don’t revise what you learned yesterday and use the programming language every day, especially in the beginning, you will quickly forget it.

A programming language is like English, French, or Spanish…

Imagine you’re learning Spanish, you start the first day, and then on the second and third and fourth day you did not revise anything, and you expect to remember everything the fifth day and be successful, isn’t this the pure definition of insanity?

So if you’re planning to go out with your friends every day and waste time, that you don’t have enough of by the way but you prefer to waste it anyway, then programming might not be for you. You should be able to say “No” when you’re friends invite you to go somewhere because your friends don’t have the same expectations as you. Your friends don’t dream big and are not mature enough to understand that this time that’s going to be wasted is actually precious and should be invested in what would benefit you and your family in the future.

I’m not saying don’t have a social life either, but most of your time should be spent in programming, that is if you’re serious about it of course.

That’s why I’m saying that programming is a lonely road because most of the time you will be lonely, in your room or office, typing lines and lines of code and trying to understand the language by yourself.

With all this in mind, that’s why you have to make a decision first before you start coding. You should weigh what is really important for you and what sacrifices are required for success, and see if you’re ready to abide by the rules. Because if you start programming just for the sake of showing off for example, you will not last that long.

If you don’t like programming and you’re doing it in spite of yourself, then this is the quickest way to failure.

2)- Adopt the right state of mind

Before jumping into programming I would like to talk about having the right state of mind first.

A lot of blogs and websites and videos out there talk only about the technical part and the books and courses you should buy to become the best programmer of 2022, but they don’t really shed the light on the truth of becoming a programmer and what it really takes from A to Z.

So one of the requirements of learning how to code is to have the right state of mind. And to achieve the right state of mind there are 2 keys: meditation and personal development.

What do meditation and personal development have to have with programming?

Most people when you ask them about meditation they will say it will help you relax and calm down. But what do relax and calm down mean exactly?

Because there is more to meditation than just “relax” and “calm down”.

The scientific explanation of what meditation is and how it really helps the brain we can find it in personal development, specifically the neuroscience area of personal development.

I will explain quickly the science behind that and how it relates to programming.

The human brain has 5 types of waves that we call brain waves:

Delta waves: When the brain has delta waves we say that the brain or the human being is in a delta state. Delta state is when the brain activity is very very slow. Generally, we are in a delta state when we are sleeping. Babies are always in the delta state that’s why they’re sleeping most of the time.
Theta waves: Theta waves are a little bit quicker than delta waves. Theta state is this state just right before you fall asleep. Before you go to bed you start feeling tired first and you start yawning and your eyes feel a little bit heavier. So this is the Theta state. When we are in theta state we feel very relaxed and we have this inward focus, and this is the state for creativity.
Alpha waves: Alpha waves are quicker than theta waves. When we are in alpha state we feel very relaxed and we have this passive attention, and this is the best state for learning. Because when you learn in this state, your brain becomes like a sponge, it absorbs whatever comes its way easily.
Beta waves: Beta waves are quick. And the beta state is the state we’re in every single day, at the office, at home, outside, when driving… It is this state where we have heightened attention, for example when you are in a meeting, you have your eyes open, you’re active and you pay attention.
Gamma waves: Gamma waves are the quickest. Scientists found something interesting about these waves. When we are in the gamma state, although the waves are very quick, this state of mind is where this super intelligence that everybody’s looking for happens. When you are in this state you process information real quick, you don’t struggle at all as everything becomes clear and everything makes sense. Gamma brain waves are associated with higher brain functions like cognition and memory and high levels of thought and focus.

I hope the picture is clear now. Meditation will help you achieve any state of mind you want. With a little bit of training, you will be able to decide whether you want to be in alpha state or theta state, or gamma state…

Meditation is very important, and having the right state of mind before starting your programming session is crucial.

You cannot start programming when you are angry or sad or upset. You have to calm down first and be in the right state of mind, and then you can start coding.

Personally, I find that being between theta and alpha state is really very helpful. I always try to be between these 2 states when I know that I will be learning a new lesson or a new chapter.

3)- Do some research

Start coding or programming is something that you might be looking forward to doing ASAP.

When you first get this idea to start programming, you get so excited, and you feel this boost of motivation and energy and this sensation that you can take on the world.

So you start with the intention that you will learn everything, and this is the mistake that most people, especially beginners do.

If we take web development for example, web development is so wide.

You can do a lot of things with HTML, CSS and JavaScript. That’s why you should do some research to see which area you would like to learn exactly.

Would you like to make static websites? Because in this case you will not need to learn JavaScript. HTML and CSS are enough to make a static website. Or would you like to make dynamic websites? in which case you need to learn JavaScript as well.

Or maybe you want to make apps, you want to be an app developer. Or perhaps you’re interested in machine learning and AI more than anything else, and in this case you should learn JavaScript and other libraries that will allow you to build artificial intelligence.

So you see, there are many areas in web development, and if you want to learn them all from the beginning, you will get overwhelmed.

That’s why you should do some research first and narrow it down so that you can choose your first pick to start with and concentrate all your energy on it.

4)- Start small

Many people when they start programming at the beginning they want immediately start making the next Facebook or the next Netflix or Instagram.

The guaranteed way to failure is exactly this. Because when you start, you’re like a baby, you don’t know anything and you’re here to learn. So if you start putting these barriers and obstacles from the beginning in your way, and jump right into the big things like making the next Facebook whilst you’re still learning the basics of the programming language, then what are you expecting exactly?

Imagine if we ask a baby to run or participate in a marathon. You get the idea right?

Of course you can make the next Facebook and the next snapshot if you want. Although they seem complex, in reality nothing is complex.

Because what is a definition of complex? What do we call a complex app, or complex website, or complex system in general?

A complex system is just the add-up of simple systems. Same thing, a complex website is just the add-up of simple principles and methods.

For example, let’s say you want to make a blog website. If you take a closer look at what a blog website is exactly, it is just the addition of some simple HTML pages, combined with the storage of data in the backend, combined with some routing so that the user can be directed to the correct URL and some styling to make the website attractive.

But to build such a website, you have to learn the basics, and the basics are HTML, CSS, and JavaScript, and then add to it the API part of JavaScript, and then the database part, and then you’re done.

You can achieve anything you want, and you can make any website or app you want, but you have to start small.

You can start for example by making a static website that has one page, about for example a biography of a certain well-known person. Once you feel comfortable you can add to it a small function that will greet the user when they enter the website. And stop there.

And once you feel comfortable you can add to it a small form to ask the user for their name, phone number and email, and so on until you build a completely functional beautiful page.

5)-Use internet resources

There are a lot of free resources out there, especially in this day and age.

Many websites and blogs like this one offer free tutorials and courses to get you started with web development and coding in general. You just have to choose your pick.

From Freecodecamp to W3schools to Codecademy, there are a lot of choices. All these platforms explain the basics of many programming languages in a simple way.

Also, there are many communities that can answer your questions like stack overflow and Quora. So if you ever get stuck, just type your question in Google search bar and chances are you will find an answer to your problem.

You can also post your questions in these communities and people will respond to you.

If you are not much of a reader, then Youtube videos might be the best for you. Videos are fun and engaging and Youtube platform is saturated with all programming educational videos, so you can pick any Youtube video and get started.

6)- Use books and online courses

Although there are a lot of free resourses to learn programming and web development, the truth is there is nothing better than books and online courses.

A simple Internet search for “how to add a function with javascript” will provide you with many answers. You will find tens, hundreds of articles on different websites with a couple of thousands words each, a handful of bullet points and a “recipe for success”, guaranteed to help you achieve your goals.

But that barely scratches the surface of what you should be learning about functions and the tricks and tips to master them and become a great programmer.

A book about Javascript will contain not only hundreds of pages of valuable information, but this information will be structured in an easily understandable manner and with a lot more context, which will help you better understand the topic than a couple of bullet points.

Also, books and online courses are made by experts and people who have many years of experience, people who understood the real problem that others face because they’ve worked with so many students, and they’re trying now to come up with a better solution and make the process easier for you.

Also, what nobody tells you is that, valuable information, that will really help you to become a master, you will not find it for free on the internet. Unfortunately, this is how it works in real life. You can start of course with free videos and tutorials, but at a certain point, you should invest in yourself for a better futur.

7- Complete projects and exercices

Once you go through your favorite resources and understand the basics and the lessons , the best way to consolidate the information is by completing some programming projects and exercises around the same topic you learned.

Because unless you put what you learned into practice, the ideas won’t fully materialize in your mind. That’s where projects come in.

Coding problems and puzzles help you develop your programming skills. They also provide an opportunity to practice solving challenging problems.

There are many websites that offer a wide range of exercises you can choose from. And they suggest also their source code as a solution.

So be consistent and do the exercises every day.

8- Conclusion

Learning web development languages gives you the opportunity to create applications that run inside any browser. You can use JavaScript to build things like games, animations, and even entire websites!

Before you begin learning JavaScript, you need to understand what the basics of computer science are. Computer science is the study of algorithms, data structures, and problem-solving techniques. To become a good programmer, you need to understand these fundamental concepts.

Once you have learned enough about JavaScript to feel comfortable coding and understood the abstract-concepts, you should try building something yourself. If you want to build a website, you could use HTML, CSS, and JavaScript to create a simple page. Or if you wanted to build a game, you could use JavaScript to control the movement of objects on the screen.

How to make money as a webd developer?

Inline vs Inline-Block vs Block CSS properties

Salma — Thu, 17 Nov 2022 23:42:01 +0000

CSS has become one of the most important aspects of web design. Displaying elements in the web browser is one of the basics that every front-end programmer must know.

There are 3 types of CSS display properties that characterize every HTML elements: inline, block and inline-block properties. So which one to choose and why?

This article explains the differences between these three methods and gives examples of each.

1)-Block element

A block element, as the name indicates, is an element that occupies all the block, or in other words, all the space.

As a block element takes all the place, it does not accept any other element next to it.

As an example is better than words, let’s take an example of a simple paragraph.

So this is a simple paragraph that looks in the browser like this:

Let’s see the behavior of a block element.

To do that we have to access the development tool of the browser.

So Right click on the mouse and go to the “Inspect” area, click on “Inspect” and once clicked the browser console will open.

Once opened go to “Elements” instead of “Console”, and there you will see all your HTML code.

Another way to open the development tool without right click is to click on ctrl + shift + i.

Once in the “Elements” tab just go and hover over your paragraph. You will see the following results:

What does all that mean?

As you can see, after hovering over the paragraph in the development tool, on the browser we can clearly see that the paragraph is inside a blue space or rectangle, and this blue space is surrounded by an orange space.

And what does this orange space mean?

The orange space means the margin. It is the margin set between this paragraph and other HTML elements. And you can see the explanation of the orange space in the box on the right in the development tool. Just go to the right and scroll a little bit down:

So the orange space means “margin”, the yellow “border”, and the green “padding”.

And it is this orange space that makes an element a block element. It is this orange space that does not let any other element to be in the same line as the paragraph, and the paragraph occupies all the block because of this orange space, because as you see, the orange space takes all the width of the page.

Other way to view things, we can say that a block element is arrogant and does not let anyone approach it. What a difficult guy ! 😤

An element is a block element because by default the CSS property display is set to block.

2)- Inline element

On the other hand there is the inline element.

Unlike block element, inline element is modest, and accepts other HTML elements to be next to it. 😀

Let’s take an image as an example:

So here I took a simple image and I resized it using the following CSS code because it is so big:

So at the end I have the following image:

Now same thing, we’ll go to the development tool and open the “Elements” tab, and we will hover over the image HTML code.

So in the browser we’ll have:

As you have probably noticed by now, when we hover over the image in the development tool, on the browser the image is inside a blue space, and there is no orange space that surrounds it.

That’s why the image is an inline element. Because it occupies only the space tailored to its width, and not the width of the entire page.

In the absence of the orange space, the HTML element can accept other HTML elements to be next to it.

So if we want for example to add another image next to the cat image we can. Let’s add another image:

I will resize the second image as well. So we’ll have:

In the browser we have:

As you can see, the two images are side by side now.

However if you try to add a paragraph next to the image it will not work, because as we said, the paragraph is a block element, and a block element is arrogant.

So it will generate a return to a new line, and then the paragraph will be created in the new line.

An element is an inline element because by default the CSS property display is set to inline.

3)- Inline-block element

Now let’s say that we want the 2 images and the paragraph to be in one line. How to do that?

Well, here comes the CSS property inline-block.

Let’s give the paragraph the property of inline-block.

The CSS part will be:

In the browser we have:

So now we have the 3 elements aligned. But how does this work behind the scenes?

Let’s go one more time to the development tool and open it.

What is interesting is when you hover over the paragraph. You will see this:

As you can see, the orange space that is responsible for the paragraph being arrogant is reduced now with the inline-block property. And once it is reduced it allows to the paragraph that was a block element before, taking all the space to itself, to share the space with other HTML elements and accept elements to be next to it.

But why we chose inline-block property? Why we did not just set the display CSS property of the paragraph to inline instead of inline-block? Because it would have worked also and all the elements would have been aligned as well.

To answer this question read the next paragraph.

4)- Difference between inline and inline-block

Let’s take an example of a long paragraph.

So in the browser that will look like this:

Now let’s set the display property to inline and add some left, right, top and bottom margins to the paragraph.

So in the browser we have:

When we added the inline property the paragraph became an inline element.

As you can see, an inline element does not respect the top and bottom margins, and in this particular case neither the left and right margins.

Although the first line moved a little bit to the left, but still the other lines did not move at all, not to mention the space between the first line and the top of page. There is no space at all.

whereas if we set the display property of the paragraph to inline-block we’ll have this result:

Which is the result expected. All the margins are respected.

Another difference is the width and the height properties.

Let’s remove the margin property and go back to our paragraph which has inline as CSS property.

So now if we want to set a width and a height to our paragraph we’ll add the following code:

If you refresh the browser you’ll see nothing has changed.

However, if we set the display property of the paragraph to inline-block and we add a width and a height:

In the browser our paragraph will be:

So what we can conclude is that with inline-block property we can set a width and a height and margins, and they all will be respected.

But with inline property, even if we set width and height and margin properties, they are not respected.

That’s why we use inline-block over inline property when we want to make all the elements aligned, to preserve the HTML element’s properties in case if we want to add width or height or margin.

So to make the the 2 images and the paragraph aligned, we will set display property of all the elements to inline-block.

5)- Conclusion

To sum up there are 3 types of display properties for an HTML element:

inline
block
inline-block inline property does not respect the width, height or margin if they’re added, whilst inline-block and block properties do.

So best practice is to have inline-block elements in your code.

How to add CSS animation to a website?
Absolute and relative positions: What's the difference?
CSS margin and padding: What are they and how do we use them?
List style type CSS
CSS border: How to add a border and make it rounded?

Object constructor functions: How does a constructor in javascript work?

Salma — Tue, 15 Nov 2022 22:05:15 +0000

JavaScript object constructors allow us to build objects dynamically. They provide a convenient alternative to creating objects manually. They also provide a convenient way to initialize variables when creating objects.

In this article we’ll see how to create an object using JavaScript object constructor method, we’ll see also when exactly we can use this method to create objects.

To see the other methods to use to create an object check my tutorial: Understanding Javascript Objects.

1)- How to create an object using JavaScript object constructor method?

As in real life, an object has many properties.

If we take as an example a car, a car have properties such as color, weight, number of seats, speed, mileage, year of construction….

Same thing if we take a pen. A pen can have as properties color, price, ink….

In short, you can look at the properties as the things that describe the object.

On the other hand, there are methods.

The methods is what the object can do.

For example for the car, it can drive, it can stop, it can crash….

Same thing for the pen, it can write, it can break, it can dry…

So to create an object using the JavaScript constructor method the syntax will be:

Let’s see in details what all this code means.

a)- Part 1 of the code:

The first part of the code is this one:

What is happening here is that we used the constructor object function to create a template for our objects.

Let’s say that we want to create many objects. For example 10 companies.

We know that all companies will have some properties in common. They will all have a name, they will all have employees, they will all have salaries, they will all have a cafeteria and so on….

So instead of creating each company apart, we will create a general or original object that will serve as a template for these companies.

This general object will have the common properties that all companies have. And this general object’s name is the constructor object.

If we have to name the constructor object “Company“, then the code will be:

The “Company” constructor object will take some arguments. It can take as many arguments as you want, there are no limits.

But what do these arguments represent?

The arguments represent the values that we’re going to associate to the properties of the “Company” constructor object.

For example if the name is one of the company properties, then we’ll have to give a name to this company.

Same thing for employees, if the company has employees, we’ll have to say how many employees the company has.

As we don’t want the values to be static but dynamic, we will give a name to each value. So the constructor properties will be:

Now it is time to give a name to our properties.

We said that the company has a name, employeesNumber and cafeteriaNumber as properties. So we’ll name our properties this way. You can give the properties any name you want.

The code becomes:

So here we gave a name to our properties and associated the values to the properties at the same time.

But wait, what does the keyword “this” mean?

What does the keyword “this” mean?

In this particular case, and when used with objects, this keyword refers to the object itself.

In other words, and simply, instead of this.name or this.employeesNumber you can see it as Company.name or Company.employeesNumber, which reminds us of the object literal notation.

So this replaces Company.

Now that we got this out of the way there is one last thing about the function constructor object and that is the constructor object function can have methods.

In other words, the object constructor function can have some functions that it will execute. And these functions are called methods.

Let’s go crazy and imagine that the Company talks, and whenever it pays the employees it says: “Yay! I finally paid my 5 employees” or

“Yay! I finally paid my 7 employees” or “Yay! I finally paid my 123 employees”, depending on the number of employees.

Let’s name the method “pay”, so the code becomes:

So here the name of the method is “pay” and we declared it with an anonymous function.

b)- Part 2 of the code

Now that our template is ready, it is time we create our 10 companies from it.

We said that the properties our 10 companies have are those our template has.

So to create a company, let’s call it “company1“, the code will be:

Wow, what happened here? How does this code work?

What does the keyword “new” mean?

The keyword ‘new‘ simply means that you want to instantiate (create) a new object. So when you write: new Company() that simply means you want to create a new object using the “Company” object constructor. Which means using the template “Company“. So you call the object constructor function (as it is a function) using the keyword “new“.

Our object constructor “Company” accepts 3 arguments: companyName, numberOfEmployees and numberOfCafeteria.

So for the “company1” to have its own properties we have to replace these arguments with the real values of the “company1“.

Here “company1” has a name of Google, and a number of employees of 150028 and a number of cafeterias of 800, so we replaced the arguments of the constructor object with these values.

Behind the scenes this works as follow:

As we called the function constructor object “Company“, The arguments companyName, numberOfEmployees and numberOfCafeteria will be replaced with the values “Google”, “150028”, “800” like this:

As these values are associated to the properties, the properties will be:

That’s how the object “company1” is created from the function object constructor “Company“.

Now if we want to create the remaining 9 companies all we have to do is to call the object constructor function “Company” and pass it some values.

2)- How to access objects properties and methods?

To access an object property or an object method, it is very simple. All you have to do is to use the dot notation.

Meaning the following syntax: objectName.property or objectName.method().

Let’s say that we want to display the number of employees of IBM as well as the name of the company.

So the code will be:

In the browser console we’ll have:

Now let’s say we want to access the method “pay”. The code will be:

In the browser we’ll have:

3)- How to add properties and methods to an object?

Sometimes we want to add properties and methods to an object, that are specific to that particular object.

Let’s say here that although we created common properties to all the companies, we want to add a property that is specific to Tesla company and that does not exist in other companies, which is the type of car.

so to add a property to this company the code will be:

We used the exact notation as when we wanted to access the properties, which means the dot notation.

We added a property, its name is carType, and we gave it a value, which is Electrical cars.

Now if we display this in the browser we’ll have:

As you can see, carType has became now one of the company6 properties.

4)- Conclusion

Javascript has become very popular over the years because of its simplicity and ease of use. The language itself is quite simple and easy to master. However, sometimes it gets confusing when dealing with objects.

In this tutorial we’ve seen what an object constructor is and how to create it. The constructor function is a special method that allows you to define properties and methods on a newly created object. In other words, it lets you customize the behavior of a particular object at runtime.

What are the different types of inputs in HTML forms?

Salma — Sun, 13 Nov 2022 16:13:25 +0000

Form inputs are used to collect data from users. They include text boxes, checkboxes, radio buttons, file upload fields, password inputs, date pickers, and so much more. Learn how they work and what each element does.

To know more how to create a form from scratch check my tutorial: Make forms with HTML.

In this article we’ll take a look at the different inputs that a form can have.

Different Form inputs

a)- input type text
The input type text defines a text input that the user should enter.

In the browser we have:

b)- input type password
the input type password allows to the user to enter their password.

In the browser we have:

c)- input type checkbox
input type checkbox creates checkboxes in case if there are multiple choices to offer to the user.

In the browser we have:

d)- input type radio
Similar to input type checkbox, input type radio creates radio buttons in case if there are multiple choices to offer to the user.

In the browser we have:

e)- input type email
input type email is used for input fields that should contain email. If the input containes other thing than an email the form will not be submitted.

In the browser we have:

f)- input type file
input type file allows the user to upload documents and images.

In the browser we have:

g)- input type color
input type color is used to choose a color.

In the browser we have:

h)- input type date
input type date is used toselect a date.

In the browser we have:

i)- input type month
input type month allows the user to select a month and a year.

In the browser we have:

j)- input type week
week input allows the user to select a week and a year.

In the browser we have:

k)- input type url
input type url is used to add a URL.

In the browser we have:

l)- input type time
time input allows the user to choose a time, either AM or PM.

In the browser we have:

m)- input type tel
input type tel is used to add a phone number.

In the browser we have:

n)- input type range
range input allows the user to choose a number between 0 and 100.

In the browser we have:

o)- input type search
search input acts like a search bar.

In the browser we have

p)- input type reset
reset input will create a reset button that, when clicked, will refresh the form values. So no need to refresh the browser to reset the form values.

In the browser we have:

q)- input type submit
A submit input will create a button that, when clicked, submits the form to the server.

In the browser we have:

r)- input type image
image input creates an image as a submit button.

In the browser we have:

Conclusion

In conclusion, forms allow users to submit information about themselves to websites. They’re also used by search engines to index sites and understand their structure.

You should now know the different inputs that you can use with a Form.

Understanding JavaScript Objects: From Basic Concepts to Practical Usage

Salma — Fri, 11 Nov 2022 12:23:32 +0000

1)- What is an object in JavaScript?

In JavaScript, objects are a fundamental data structure that represent collections of data.

In the real world, there are many objects that have many properties and behaviors like pen, pencil, car, knife, fork…. Same thing in JavaScript, objects have a number of properties and methods that allow them to be manipulated and queried.

JavaScript objects can be created from any type of data, including arrays and strings.

2)- How do you create and use objects in JavaScript?

In JavaScript, there are few ways to create objects. Let’s have a look at each one of them:

a)- Object Literal
Object literal is the simplest method used to declare and create a JavaScript object.

Let’s say we want to create a Car object.

As we know, the car has some properties. It has doors, color, brand, speed…

So we will declare a Car object that has these properties like this:

The “name”, “numberOfDoors” and “color” are called properties.

“BMW”, “4” and “White” are called the values of the properties.

So in the object literal method we always define the properties and their values.

We can also declare and create an empty object like this:

b)- Using the new keyword
Another way to create a JavaScript object is to use the new keyword with the constructor Object.

The code will be:
As you can see, an empty object does not contain any properties or values. We can add properties and values as indicated later on in this tutorial in section 3.

By writing this code we have created an empty object.

We will also see later on how to add properties to the object.
c)- Using Object.create() method
This method of creating an object comes in very handy when we want to create an object from another existing object.

The Object.create() method takes 2 parameters:

The first parameter is a mandatory object. It is the one that we will create our object from.
The second parameter is an optional object which contains the properties to be added to the new object. Let’s say that we have a company, and the company name is “Purpose”.

The company object will be:

And we want to create an employee for this company. So th employee works at this company named “Purpose”. As he is an employee of the same company, instead of building another object from scratch that contains the company name and the employee name, age, years of experience… we will use the “company” object we created.

So the code will be:

So now as we created the “employee” object from the “company” object, that means the “employee” object will have access to all properties of the “company” object.

In other words, if we want to know the name of the company of the employee, all we have to do is to access this name this way:

In the browser we have:

d)- Object constructor function
Another way to create an object is to use the object constructor function method.

What is an object constructor function? It is simply a simple function that gives the template of a parent object, or the original object that we will use to create our derivative objects.

For example, let’s say that we want to create many houses objects.

We have one house that has 4 bedrooms, 2 living room, 2 toilets ,1 yard and is located in Florida. Another house that has 3 bedrooms, one living room, 1 toilet, 1 yard and is located in Tokyo. Another house that has 6 bedrooms, 3 living rooms, 4 toilets , 2 yards and is located in London and so on…

So instead of creating 3 separate objects for the 3 houses like this:

What we can do is to create a common template for the houses. Because after all, they all have bedrooms, living rooms, toilets, yards and a location.

So to create this template we will use the object constructor function like this:

Note here that the House constructor starts with an upper-case “H”, and that is because we should always start a function constructor name with an upper-case.

Once we create a function constructor object, we add all the properties inside the function.

In the below section, we’ll see how to add and access JavaScript objects properties and methods. So stay tuned. 😉

But for the moment, let’s suppose that we have all the properties inside the function, how can we create an object for every house?

To create an object for every house all we have to do is to call the function constructor object using the keyword new.

So here by calling the House function constructor, and by passing it the number of bedrooms, living rooms, toilets, yard, location we want for every house, we create an object for every house separately.

The House constructor object is a function that takes in as parameters the values of the object properties.

3)- What are the properties and methods of an object?

You can look at the properties of an object as its description, and a method as an action or a function that the object can perform.

a)- Object Literal
1)- Properties
We’ve seen how to create an object with the Object literal method.

and we said that for the “car” object the “name”, “numberOfDoors” and “color” are the object properties and “BMW”, “4” and “White” are the values of the
properties.

So to add properties with this method it is simple. The syntax is to add the name of the property you want to add, then add colon, and then the value.

Let’s say that later on in your code, for whatever reason, you want to add more properties to the car object. For example you want to add the speed and the mileage properties.

To do that all you have to do is to add the following code:

To add more properties to the object the syntax is to write the object name, here it is “car”, followed by a dot, followed by the name of the property.

If you display the “car” object in the browser’s console you’ll have:

So now, speed and mileage are also car’s properties.

To access the properties of the object, same syntax is used. Always write the name of the object, followed by a dot, followed by the name of the property

So if we want to display the name of the car, or the number of the doors it has or the color…we’ll add the following code:

In the browser you’ll have:

2)- Methods
Now let’s say that this car makes a lot of noise, and we want it whenever it makes noise to say: “I’m a white BMW and I make a lot of noise”.

To do that we’ll add a method to the object which will be a simple function.

So we’ll declare our object like this:

Now when displaying the noise method we have:

As you have probably noticed we used the keyword this in the method. In this scope, the keyword this refers to the object itself which is the car.

So instead of writing car.color or car.name, as we still inside the object and we want to call the object from the inside,
we used this. If we were outside the object, we would have used and called the object by its name which is “car” like we did when we added speed and mileage properties from the outside of the object.

b)- With the new keyword

1)- Properties
As we have seen we can also create an object using the new keyword with the Object constructor.

Now if we want to add some properties to the empty object we’ll follow the same syntax as per the Object literal method.

Meaning we add the name of the property, followed by a colon: followed by the value of the property.

Let’s say we want to add year of construction and the date of purchase properties. So the code will be:

After displaying the results on the browser we have:

Which means yearOfConstruction and dateOfPurchase become now the object properties.
2)- Methods
To add a method to the object in this case we’ll follow the same syntax for adding properties.
So the code will be:

So in the browser we have:

![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a264vy4babvvq3369aao.PNG

c)- Using Object.create() method
1)- Properties
To add a property when using object.create() method we can follow the same syntax as we did before.

Let’s say that for the example we want to add the employee’s salary as a property. So the code will be:

So in the browser we have:

2)- Methods
Same thing, to add a method to our employee object all we have to do is to use the dot notation as for properties.

In the browser we have:

d)- Object constructor function
1)- properties
In our previous example we said that the Object constructor function allows us to create a general template that we can use to create our objects.

And we said that we have 3 houses, each one with its own properties (bedrooms, living rooms…).

In the template that we will create we will say that our objects, which are our houses, in general, they will have these properties (bedrooms, living rooms, toilets…).

So to do that we’ll add the following code:

We added the properties by using this.nameOfTheProperty notation, and as the arguments of the function are the values of the properties, we assigned the values to the properties.

So now we can create our objects like explained previously:

Just to explain what is happening here, for example for The new House (4, 2, 2, 1, Florida), the constructor object House will take the arguments we gave it which are ” numbBedrooms, numbLivingrooms, numbToilets, numbYard, location” and will replace them with “4,2,2,1,Florida” for the first object, and with “3,1,1,1,Tokyo” for the second object and so on…

When the constructor does that what we’ll have after that is : this.bedroom=4, this.livingrooms=2, this.toilets=2, this.yard=1… for the first object. So we have our house1 object initialized with its entire properties.

And the keyword this here refers to House.
2)- Methods
In this example the House constructor does not have any methods, we added the properties only, but no methods.

But what about if we want our house1 object or house2 or house3 to have a method?

Well, we can add methods to our objects without any problem. The way we’ll do it is with the dot notation as always.

Let’s say that we want to add a method which is a function that will say: “Hey, welcome to the house!“.

So the code will be:

So now if we display house1 in the console we’ll have:

So here as you can see, we have the house1 properties displayed and we have also the greet() method, which means that this method is added to our object.

4)- Conclusion

JavaScript Objects are kings of this language. Knowing how to use them is a crucial step in a webdeveloper journey.

In this tutorial we have seen what an object means and how to add and access objects properties and methods.

Hope this tutorial was useful.

For more tutorials check my blog: Purpose Code

Forem: Salma

JavaScript Date: Get Date methods

getFullYear() Method

getMonth() Method

getDate() Method

getHours() Method

getMinutes() Method

getSeconds() Method

getDay() Method

getTime() Method

getUTCFullYear() Method

getUTCMonth() Method

getUTCDate() Method

getUTCDay() Method

getUTCHours() Method

getUTCMinutes() Method

getUTCSeconds() Method

Conclusion

Read More

How Long Does It Take to Learn JavaScript?

1)- Learning

2)- Mastering

3)- What should I know before starting to learn JavaScript?

4)- How Much Time You Have to Dedicate to Learning JS?

Read More

20 JavaScript Array Methods

Read More

5 ways to declare a function in JavaScript

1)- Ways to declare functions

2)- Which way is better?

Read More

Audio and Video HTML Tutorial – Learn how to add sound effects, videos and Youtube videos to your website

1)- Video

2)- Audio

3)- YouTube video

4)- Conclusion

Read More

Project: Digital Clock

Part 1: HTML

Part 2: CSS

3)- Part 3: JavaScript

Read More

How to Start Coding in HTML, CSS, and JS: The Ultimate Guide for Beginners

1)- Make a decision

2)- Adopt the right state of mind

3)- Do some research

4)- Start small

5)-Use internet resources

6)- Use books and online courses

7- Complete projects and exercices

8- Conclusion

Read More

Inline vs Inline-Block vs Block CSS properties

1)-Block element

2)- Inline element

3)- Inline-block element

4)- Difference between inline and inline-block

5)- Conclusion

Read More:

Object constructor functions: How does a constructor in javascript work?

1)- How to create an object using JavaScript object constructor method?

2)- How to access objects properties and methods?

3)- How to add properties and methods to an object?

4)- Conclusion

What are the different types of inputs in HTML forms?

Different Form inputs

Conclusion

Understanding JavaScript Objects: From Basic Concepts to Practical Usage

1)- What is an object in JavaScript?

2)- How do you create and use objects in JavaScript?

3)- What are the properties and methods of an object?

4)- Conclusion