Handling date operations is crucial in any application. Therefore, every programming language has built-in methods for handling dates. JavaScript is one of these languages and provides a date object with its useful methods.

Let's dive into this object and its functional methods:

## Creating a JavaScript Date Object

The Date object can be created using the new keyword followed by the Date() constructor. This creates a new instance of the Date object with the current date and time.


```js
const today = new Date();
console.log(today);
// Fri Mar 17 2023 22:11:09 GMT+0300 (GMT+03:00)
```

Alternatively, you can create a Date object with a specific date and time by passing in the desired values for year, month, day, hour, minute, second and millisecond to the Date() constructor.


```js
const birthday = new Date(2000, 11, 25);
console.log(birthday);
Mon Dec 25 2000 00:00:00 GMT+0200 (GMT+03:00)
```

## Working with Dates and Times

The Date object provides a wide range of methods and properties that allow us to work with dates and times. Some of the most commonly used methods and properties include:

```js
// Get the current date and time
var today = new Date();

// Get the year
var year = today.getFullYear();

// Get the month (0-11)
var month = today.getMonth();

// Get the day of the month (1-31)
var day = today.getDate();

// Get the day of the week (0-6)
var dayOfWeek = today.getDay();

// Get the hours (0-23)
var hours = today.getHours();

// Get the minutes (0-59)
var minutes = today.getMinutes();

// Get the seconds (0-59)
var seconds = today.getSeconds();

// Get the milliseconds (0-999)
var milliseconds = today.getMilliseconds();
```

## Formatting Dates and Times

The Date object also provides a range of methods for formatting dates and times for display. These methods allow developers to format dates and times in a wide range of formats, including ISO 8601, UTC and localized formats.

```js
const today = new Date();
// Format the date as ISO 8601
const isoDateString = today.toISOString();
// 2023-03-17T19:17:01.978Z 3/17/2023

// Format the date as a string in the local timezone
const localDateString = today.toLocaleString();
// 10:17:01 PM 3/17/2023


```

These methods allow us to format dates and times in a wide range of custom formats, including date and time separators, timezones and custom formatting strings.

## Handling Timezones

One of the most important considerations when working with dates and times in JavaScript is handling timezones. The Date object provides methods for handling timezones, including setting and getting the UTC date and time.


```js
const today = new Date();

// Get the current UTC date and time
const utcDate = today.toUTCString();
// Fri, 17 Mar 2023 19:22:58 GMT 3/17/2023

// Format the date as a string in the specified timezone
const timezoneDateString = today.toLocaleString("en-US", {
  timeZone: "America/New_York",
});
// 3:22:58 PM

```



## Conclusion

Javascript has a wide range of built-in method from date object for handling time and date properly.  These methods can be used get current date, handling timezone and formmatting date and time.

Thank you for reading.





Handle date and time in javascript with date object and its built-in methods that allow you to handle date format, manage timezone and get current time

large_the only time.jpg

medium_the only time.jpg

small_the only time.jpg

thumbnail_the only time.jpg

the only time.jpg

JavaScript Date Object and Its Useful Methods

HTML, or hypertext markup language,  is a standard markup language for creating web pages, which introduced in 1989. 
 
This guide focuses on the basics of HTML to help you understand its structure and features with ease. Before you start, let's tell a bit this article's intent.

<input type="hidden" name="IL_IN_ARTICLE">


This article will focus core of the HTML beacuse it is not necessary to thoroughly grasp a new programming language or tool from the start, as the challenges you encounter while working on projects can be easily overcome through searching, allowing for faster progress. 

So, let's get started with what HTML is 

## What is HTML

To put it simply, HTML instructs web browsers on what to display on a page, such as text, images, or links, using elements written in angle brackets and defined by opening and closing tags.

HTML have mainly two root parts, **head** and **body** tag. Let's discover them.


## HTML Main Structure

A HTML document is composed of a root <html\> tag, and two sections, <head\> and <body\>.

The <html\> tag defines the document as a HTML file, while the <head\> tag contains information related to the current page, such as the document's title, and the <body\> tag contains the elements that will be displayed on the page.

![HTML file main structure including head and body tags](https://api.gobrain.net/uploads/html_main_structure_963e9f9827.png)


## HTML Elements

A browser understand what to display on page through elements which is defined a open and close tag. HTML offers a wide variety of elements that can be used to create a website, but some of the most commonly used elements in a page are links, images, text, and container elements.

An element can have certain attributes that control its behavior. For example, a <a\> link tag can have an 'href' attribute, which tells the browser where to go when the link is clicked.

![element structure in HTML](https://api.gobrain.net/uploads/element_structure_in_html_19d2fb6474.png)

## # Heading

Heading elements is defined as h1, h2... h6 according to the importance of its content.
For example, the <h1\> tag can be used for title while <h2\> and  <h3\> tags can be used for subtitles.

![HTML heading (h) elements](https://api.gobrain.net/uploads/html_heading_cd7e14afd2.png)


## # Paragraph

A paragraph element is defined as <p\> tag. As its name says, it is used for text content to display on page.

![HTML paragraph tag](https://api.gobrain.net/uploads/html_p_tag_0c7637bbc5.png)


## HTML Elements: Image

The <img\> tag defines an image element, which is used to display images on a page. Unlike most elements, which are defined using both an opening and closing tag, an image tag can be defined using only one tag, as shown below. 

As for its attributes, the two most commonly used attributes for an image tag are src and alt. The src attribute specifies the source of the image, while the alt attribute provides alternative text for the image.


![HTML image (img) tag](https://api.gobrain.net/uploads/html_image_tag_797619f287.png)

## # Link

The <a\> tag, which stands for link, is used to create a hyperlink to either an internal or external page. The <a\> tag, used with its "href" attribute, specifies the URL or route of the link.

A hyperlink, defined using the <a\> tag, can include text or an image, which when clicked by a user, redirects them to another page.


![html anchor(a, link) tag](https://api.gobrain.net/uploads/html_a_tag_bd27b48138.png)


## # Div

The <div\> element is a container that is used for grouping elements together. With the help of <div\> element, using CSS and JavaScript, the appearance or behavior of grouped elements can be specifically altered.


![HTML div element](https://api.gobrain.net/uploads/html_div_element_6cd5b73b21.png)



## Styling The HTML Web Page With CSS

Each element in a HTML document has a default appearance, including size, color, placement, etc. This visual appearance of elements can be modified using CSS (Cascading Style Sheets).

To style elements in an HTML document, a style element must be included, which can be done in three ways: as an external stylesheet, an internal stylesheet, or inline styles.


![Include css to html](https://api.gobrain.net/uploads/html_css_tag_ba7c2a1c4e.png)

## Adding Functionality To The HTML Web Page With JavaScript

In addition to modifying the appearance of elements, functionality can also be added to them using JavaScript, a programming language.

To achieve that, you need to also include a javascript code to your HTML file which can also can be done in two ways: as an external script and internal script.

![Add javascript your html file with script tag](https://api.gobrain.net/uploads/html_script_tag_bb3fc1d1b1.png)


## Conclusion

This guide has discussed the basics of HTML for beginners, which is introduced in 1989 and is  a standard markup language for creating web pages.

Thank you for reading.




HTML, or hypertext markup language,  is a standard markup language for creating web pages with elements such as heading, paragraph, link, so on

Screenshot 2023-03-18 at 10.54.24 PM.png

A Beginner's Guide to HTML Fundamentals

## Introduction

HTML forms are an essential component in any web pages, allowing users to input data and interact with websites. They enable you to obtain information from users and send it to a server for processing, managing and storing. 

In this article, we will cover the basics of HTML forms, including how to create them and handle user input.

## Creating a Form

To create a form, HTML provides a wrapper **<form\>** tag, within which other form elements are placed. We will be discussing later these elements. Now, Let's see the form tag itself and its main attributes.

```xml
<form action="/submit-form" method="POST">
  
</form>
```

As you can see, there are two exclusive attributes in a html form:

- action: specifies where the form data should be submitted, 
- method: determines the HTTP method used to submit the data

Simply put, when the form above is submitted, it sends a post request to the /submit-form endpoint on the server, so that the server can process the form data that is obtained from the user via form elements, which we will discover in the next step.

## HTML FORM ELEMENTS

HTML provides several types of form elements, each with its own set of attributes and behaviors. Here are some of the most common form elements:

### Input Fields

As its name suggests, input fields are used to gather user input from users. The type attribute determines the behavior and functionality of the input tag. Let's discover each in a code snippet.

```xml
<input type="text" name="username" />
<input type="password" name="password" />
<input type="email" name="email" />
<input type="number" name="age" />
<input type="checkbox" name="agree" />
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
```
You can see the appearance of each in the following image:

![Html Form Elements Example](https://api.gobrain.net/uploads/html_form_elements_1e2c1972c9.png)

### Select Fields

Select fields allow users to select an option from a dropdown list. The option tags specify the available options.

```xml
<select name="country">
  <option value="usa">United States</option>
  <option value="canada">Canada</option>
  <option value="uk">United Kingdom</option>
</select>
```
Here is the select element grouping different countries:

![html select element for grouping](https://api.gobrain.net/uploads/html_select_a71d06a3fa.png)


### Textarea Field

Textarea fields allow users to enter multiple lines of text.

```xml
<textarea name="comments"></textarea>
```

![textarea-in-html.png](https://api.gobrain.net/uploads/textarea_in_html_2d0d243504.png)

### Submit Button
Submit buttons are used to submit the form data to the server.
```xml
<button type="submit">Submit</button>
```

## Handling Form Data

Once a user submits a form, the data is sent to the server for processing. The server then typically responds with a new page or a message indicating whether the form submission was successful or not.

To handle form data, you can use a server-side programming language such as PHP, Python, or Ruby. Alternatively, you can use client-side JavaScript to perform form validation and submission without requiring a server-side component.

### Handling Form Data with JavaScript

There are several ways to handle form data with JavaScript, depending on the task at hand. Let's explore some of the most common methods.

#### Form Validation

Form validation is the process of checking whether the user input is valid before sending it to the server. This can help to reduce server load and improve the user experience by catching errors before the user submits the form.

JavaScript provides several methods for form validation, such as the checkValidity() method, which checks whether the form is valid, and the setCustomValidity() method, which sets a custom error message for the form element.

Here is an example of how to use the checkValidity() method:

```js
<form id="myForm">
  <input type="text" required>
  <input type="submit" value="Submit" onclick="validateForm()">
</form>

<script>
function validateForm() {
  const form = document.getElementById("myForm");
  if (form.checkValidity() === false) {
    alert("Please fill out all required fields");
    return false;
  }
}
</script>
```
In this example, the checkValidity() method is called on the form element when the submit button is clicked. If any required fields are empty, an alert is shown to the user, and the form is not submitted.

#### Using AJAX (Asynchronous JavaScript and XML)

Once the form data has been validated, it's time to handle the data submission. In modern web development, the most common way to handle form submission is by using AJAX (Asynchronous JavaScript and XML) to submit the form data to the server without refreshing the page.

To do this, we can use the fetch API or any other library like axios or jQuery. Let's take a look at an example of how to use the fetch API to submit form data:


```js
const form = document.querySelector('#myForm');
const formData = new FormData(form);

fetch('/submit', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log('Form submitted successfully', data);
})
.catch(error => {
  console.error('There was a problem submitting the form', error);
});
```

In this example, we first select the form element using the querySelector method. We then create a new FormData object with the form element as its argument. This allows us to easily retrieve all the form data as key-value pairs.

We then use the fetch API to send a POST request to the server with the form data as the request body. The server can then process the data and return a response.

The fetch method returns a promise which resolves with the server's response. We can then check if the response was successful and parse any JSON data returned by the server.

Handling form data with JavaScript can be a complex task, especially when it comes to validation and security. It's important to ensure that all user input is properly validated on both the client and server side to prevent malicious attacks.


## Conclusion

HTML forms are an essential component of web development, allowing users to input data and interact with websites. By understanding how to create and handle form data, you can create powerful and engaging web applications that provide a great user experience.

Thank you for reading.

HTML form element and its input tags | Send Form To Server And Handle Inputs

HTML FORM ELEMENTS.jpg

HTML Form Elements

JavaScript is a programming language that provides a variety of loops to execute a set of code multiple times.  The most popular loops mechanisms are **for** and **forEach** , **for in** and **for of**. Although they may appear similar, there are differences between the two that make them suitable for different use cases. In this article, we will compare **for** loops and **forEach** loops and discuss when to use each.

## For Loops

The for loop is a traditional loop that is widely used in JavaScript. It consists of three parts: 

- The initialization statement initializes a variable that will be used in the loop. 
- The condition checks if the loop should continue executing. 
- The update statement is executed after each iteration and is used to update the loop variable.

Here is a simple example of a for loop that prints the numbers 0 to 9:


```js
for (let i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2 ... 9
}
```

### WHEN TO USE

The for loop is suitable for iterating over arrays and objects with a known length. It allows for more fine-grained control over the iteration, such as **skipping iterations** or **breaking out of the loop early**.


## ForEach

The forEach loop is a higher-order function that is available on arrays in JavaScript. It executes a provided function once for each element in the array. The provided function accepts three parameters: 

- the current element, 
- the index of the element, 
- the array itself.

Here is an example of a forEach loop that prints the numbers 0 to 9:


```js
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

numbers.forEach(function(number) {
  console.log(number);
});
```

### WHEN TO USE

The forEach loop is suitable for iterating over arrays and performing a set of operations on each element. It is more expressive than for loops, making it easier to read and write.




## For ... In

The for...in loop is a type of loop used in JavaScript to iterate over the properties of an object. It is also known as an enumeration loop. The loop iterates over each enumerable property of an object, executing the code block for each property.


```js
var person = {
  name: "John",
  age: 30,
  gender: "Male"
};

for (var key in person) {
  console.log(key + ": " + person[key]);
}
/*
name: John
age: 30
gender: Male
*/
```

## For ... Of 

In JavaScript, the for...of loop is used to iterate over iterable objects such as arrays, strings, maps, sets and other collections.

Here's an example of using for...of to loop over an array of numbers:

```js
const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
```

## For vs Foreach vs For In vs For of

### Control Over Iteration

In general, for loops are suitable for iterating over arrays and objects with a known length and requiring more control over the iteration. They are also suitable for cases where the loop variable needs to be manipulated within the loop.

### Array Length

On the other hand, forEach and for in loops are suitable for iterating over arrays and performing a set of operations on each element. They are also suitable for cases where the length of the array is not known in advance and where the loop variable does not need to be manipulated.

### Performance

for loops are generally faster than other loops, especially when working with large arrays. This is because for loops are compiled and optimized by the JavaScript engine, and they provide direct access to the index and length of the array. forEach, on the other hand, has more overhead because it involves creating a new function for each iteration.

However, for small arrays or when performance is not a critical factor, the difference between for and forEach may not be noticeable. 

### readability

One of the advantages of using forEach, for of and for in is that it can be more concise and easier to read than a for loop, especially if you're just performing a single action on each element.

## Conclusion

In conclusion, for loops, forEach, for in and for of are two popular loop constructs in JavaScript. They have different features and capabilities, making them suitable for different use cases. Understanding the differences between the two can help you choose the right loop for your specific use case, resulting in more efficient and maintainable code.

Thank you for reading.

Learn about the differences between for loop and forEach loop in JavaScript. Discover differences in their syntax, performance and readiblty.

JAVASCRIPT DATE OBJECT AND ITS USEFUL METHODS

Creating a JavaScript Date Object

Working with Dates and Times

Formatting Dates and Times

Handling Timezones

Conclusion

A Beginner's Guide to HTML Fundamentals

HTML Form Elements

For Loop vs ForEach in JavaScript