
How to move the cursor to the beginning or end of an input field using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Move Cursor to Beginning/End of Input Field</title>
  </head>
  <body>
    <label for="myInput">Type something here:</label>
    <input id="myInput" type="text" value="Hello, World!">

    <button onclick="moveCursorToBeginning()">Move Cursor to Beginning</button>
    <button onclick="moveCursorToEnd()">Move Cursor to End</button>

    <script>
      function moveCursorToBeginning() {
        const input = document.getElementById("myInput");
        input.focus();
        input.setSelectionRange(0, 0);
      }

      function moveCursorToEnd() {
        const input = document.getElementById("myInput");
        const length = input.value.length;
        input.focus();
        input.setSelectionRange(length, length);
      }
    </script>
  </body>
</html>
```

In this example, we have an input field with an id of `myInput` and two buttons, each of which calls a JavaScript
function when clicked.

## Move cursor to beginning

The `moveCursorToBeginning` function first gets a reference to the input field
using [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).

It then calls the `focus()` method to set the input field as the active element and brings it into focus.

Finally, it calls
the [setSelectionRange](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange) method to
set the selection range to the beginning of the input field (i.e., from index 0 to index 0).

```js
// Syntax
setSelectionRange(selectionStart, selectionEnd) // 0, 0 moved the cursor to the start
```

## Move cursor to the end

The `moveCursorToEnd` function works similarly, but instead of setting the selection range to the beginning of the input
field, it sets it to the end of the input field by passing in the `length` of the input field's value as both the start
and end index of the selection range.

By using these two functions, you can easily move the cursor to the beginning or end of an input field in JavaScript.

## Useful links

- [caniuse](https://caniuse.com/?search=setSelectionRange)
- [Demo](https://emgbkp.csb.app/)





How to move cursor to the end of input with JavaScript

Move cursor to the end of input


Working with dates is an essential part of web development. At some point, you may need to check if a given date falls
between two other dates. In this article, we will explore how to accomplish this task using JavaScript.

There are a few different approaches to checking if a date is between two other dates, but we will focus on the most
straightforward method using the built-in Date object and its `getTime()` method. The `getTime()` method returns the
number of milliseconds since **January 1, 1970**, which is also known as
the [Unix timestamp](https://en.wikipedia.org/wiki/Unix_time).

Let's start with a simple example:

```javascript
const date = new Date('2022-02-20');
const startDate = new Date('2022-01-01');
const endDate = new Date('2022-12-31');

if (date.getTime() >= startDate.getTime() && date.getTime() <= endDate.getTime()) {
  console.log('The date falls between the start and end dates.');
} else {
  console.log('The date does not fall between the start and end dates.');
}
```

In this example, we first create a new Date object for the date we want to check **2022-02-20**. We then create new
Date objects for the start and end dates **2022-01-01** and **2022-12-31**, respectively.

We then use the `getTime()` method to compare the timestamps of each date. If the timestamp of the date we want to check
falls between the timestamps of the start and end dates, we log a message indicating that the date falls between the
start and end dates. Otherwise, we log a message indicating that the date does not fall between the start and end dates.

It's worth noting that the `Date` object can parse a wide variety of date formats, so you can use this method with dates
in any format that the Date object can parse.

You can also simplify the above code:

```javascript
if (startDate <= date && date <= endDate) {
  console.log('The date falls between the start and end dates.');
} else {
  console.log('The date does not fall between the start and end dates.');
}
```

In this example, we simply check if startDate is less than or equal to date AND date is less than or equal to endDate.
If both conditions are true, we log a message indicating that the date falls between the start and end dates. Otherwise,
we log a message indicating that the date does not fall between the start and end dates.

## Refactor to function

```javascript
const isBetweenDates = (startDate, endDate, date) => {
  return date.getTime() >= startDate.getTime() && date.getTime() <= endDate.getTime();
}
```

```javascript:RESULT
isBetweenDates(
  new Date(2010, 11, 20),
  new Date(2010, 11, 30),
  new Date(2010, 11, 19)
); // false

isBetweenDates(
  new Date(2010, 11, 20),
  new Date(2010, 11, 30),
  new Date(2010, 11, 25)
); // true
```

## Conclusion

Checking if a date falls between two other dates in JavaScript is a straightforward process using the
`Date` object and its `getTime()` method. By comparing the timestamps of the dates, you can easily determine whether a
given date falls between two other dates.


Checks if a date is between two other dates with code examples

Check if date is between two dates


<Image src="css-hero.jpg" alt="Books about coding on the table" />

Custom text selection in CSS refers to the ability to style the text that is highlighted by a user when they select it
on a webpage. This can be a great way to add some visual flair and improve the user experience of your website. In this
article, we will go over the steps to implement custom text selection using CSS.

## Step 1: Select the text you want to style

First, you need to identify the text you want to style. You can do this by using a CSS selector to target a specific
element, such as a paragraph or a heading.

```css
p {
  /* styles for the paragraph */
}
```

## Step 2: Set the selection background color

Next, you can set the background color of the selected text using the ::selection pseudo-element.

```css
p::selection {
  background-color: yellow;
}
```

## Step 3: Set the selection text color

You can also change the color of the selected text using the ::selection pseudo-element.

```css
p::selection {
  background-color: yellow;
  color: black;
}
```

## Step 4: Add other styles as desired

Finally, you can add any other styles you want to the selected text, such as changing the font, font size, or adding a
border.

```css
p::selection {
  background-color: yellow;
  color: black;
  font-weight: bold;
  border: 1px solid black;
}
```

## Conclusion

That's it! With these simple steps, you can create a custom text selection that will make your website stand out and
improve the user experience. Keep in mind that not all browsers support all CSS selectors, so be sure to [test your code
on multiple browsers to ensure compatibility](/blog/cross-browser-testing).


CSS - Custom text selection


I'm currently working on my [Nest.js](https://nestjs.com/) backend project and I needed to add data to the countries
table.

Usually I use [mockaroo.com](https://www.mockaroo.com/) for mocking data, but in this case when you generate schema like
this:

<Image src="mock-schema.png" alt="mockaroo.com example" />

But unfortunately in this case you get a lot of duplicates 🤯.

Therefore, I decided to share a ready-made SQL request for database seeding for countries.

```sql
INSERT INTO countries (code, name)
VALUES ('AF', 'Afghanistan'),
       ('AX', 'Aland Islands'),
       ('AL', 'Albania'),
       ('DZ', 'Algeria'),
       ('AS', 'American Samoa'),
       ('AD', 'Andorra'),
       ('AO', 'Angola'),
       ('AI', 'Anguilla'),
       ('AQ', 'Antarctica'),
       ('AG', 'Antigua and Barbuda'),
       ('AR', 'Argentina'),
       ('AM', 'Armenia'),
       ('AW', 'Aruba'),
       ('AU', 'Australia'),
       ('AT', 'Austria'),
       ('AZ', 'Azerbaijan'),
       ('BS', 'Bahamas'),
       ('BH', 'Bahrain'),
       ('BD', 'Bangladesh'),
       ('BB', 'Barbados'),
       ('BY', 'Belarus'),
       ('BE', 'Belgium'),
       ('BZ', 'Belize'),
       ('BJ', 'Benin'),
       ('BM', 'Bermuda'),
       ('BT', 'Bhutan'),
       ('BO', 'Bolivia'),
       ('BQ', 'Bonaire, Sint Eustatius and Saba'),
       ('BA', 'Bosnia and Herzegovina'),
       ('BW', 'Botswana'),
       ('BV', 'Bouvet Island'),
       ('BR', 'Brazil'),
       ('IO', 'British Indian Ocean Territory'),
       ('BN', 'Brunei Darussalam'),
       ('BG', 'Bulgaria'),
       ('BF', 'Burkina Faso'),
       ('BI', 'Burundi'),
       ('KH', 'Cambodia'),
       ('CM', 'Cameroon'),
       ('CA', 'Canada'),
       ('CV', 'Cape Verde'),
       ('KY', 'Cayman Islands'),
       ('CF', 'Central African Republic'),
       ('TD', 'Chad'),
       ('CL', 'Chile'),
       ('CN', 'China'),
       ('CX', 'Christmas Island'),
       ('CC', 'Cocos (Keeling) Islands'),
       ('CO', 'Colombia'),
       ('KM', 'Comoros'),
       ('CG', 'Congo'),
       ('CD', 'Congo, Democratic Republic of the Congo'),
       ('CK', 'Cook Islands'),
       ('CR', 'Costa Rica'),
       ('CI', 'Cote D''Ivoire'),
       ('HR', 'Croatia'),
       ('CU', 'Cuba'),
       ('CW', 'Curacao'),
       ('CY', 'Cyprus'),
       ('CZ', 'Czech Republic'),
       ('DK', 'Denmark'),
       ('DJ', 'Djibouti'),
       ('DM', 'Dominica'),
       ('DO', 'Dominican Republic'),
       ('EC', 'Ecuador'),
       ('EG', 'Egypt'),
       ('SV', 'El Salvador'),
       ('GQ', 'Equatorial Guinea'),
       ('ER', 'Eritrea'),
       ('EE', 'Estonia'),
       ('ET', 'Ethiopia'),
       ('FK', 'Falkland Islands (Malvinas)'),
       ('FO', 'Faroe Islands'),
       ('FJ', 'Fiji'),
       ('FI', 'Finland'),
       ('FR', 'France'),
       ('GF', 'French Guiana'),
       ('PF', 'French Polynesia'),
       ('TF', 'French Southern Territories'),
       ('GA', 'Gabon'),
       ('GM', 'Gambia'),
       ('GE', 'Georgia'),
       ('DE', 'Germany'),
       ('GH', 'Ghana'),
       ('GI', 'Gibraltar'),
       ('GR', 'Greece'),
       ('GL', 'Greenland'),
       ('GD', 'Grenada'),
       ('GP', 'Guadeloupe'),
       ('GU', 'Guam'),
       ('GT', 'Guatemala'),
       ('GG', 'Guernsey'),
       ('GN', 'Guinea'),
       ('GW', 'Guinea-Bissau'),
       ('GY', 'Guyana'),
       ('HT', 'Haiti'),
       ('HM', 'Heard Island and Mcdonald Islands'),
       ('VA', 'Holy See (Vatican City State)'),
       ('HN', 'Honduras'),
       ('HK', 'Hong Kong'),
       ('HU', 'Hungary'),
       ('IS', 'Iceland'),
       ('IN', 'India'),
       ('ID', 'Indonesia'),
       ('IR', 'Iran, Islamic Republic of'),
       ('IQ', 'Iraq'),
       ('IE', 'Ireland'),
       ('IM', 'Isle of Man'),
       ('IL', 'Israel'),
       ('IT', 'Italy'),
       ('JM', 'Jamaica'),
       ('JP', 'Japan'),
       ('JE', 'Jersey'),
       ('JO', 'Jordan'),
       ('KZ', 'Kazakhstan'),
       ('KE', 'Kenya'),
       ('KI', 'Kiribati'),
       ('KP', 'Korea, Democratic People''s Republic of'),
       ('KR', 'Korea, Republic of'),
       ('XK', 'Kosovo'),
       ('KW', 'Kuwait'),
       ('KG', 'Kyrgyzstan'),
       ('LA', 'Lao People''s Democratic Republic'),
       ('LV', 'Latvia'),
       ('LB', 'Lebanon'),
       ('LS', 'Lesotho'),
       ('LR', 'Liberia'),
       ('LY', 'Libyan Arab Jamahiriya'),
       ('LI', 'Liechtenstein'),
       ('LT', 'Lithuania'),
       ('LU', 'Luxembourg'),
       ('MO', 'Macao'),
       ('MK', 'Macedonia, the Former Yugoslav Republic of'),
       ('MG', 'Madagascar'),
       ('MW', 'Malawi'),
       ('MY', 'Malaysia'),
       ('MV', 'Maldives'),
       ('ML', 'Mali'),
       ('MT', 'Malta'),
       ('MH', 'Marshall Islands'),
       ('MQ', 'Martinique'),
       ('MR', 'Mauritania'),
       ('MU', 'Mauritius'),
       ('YT', 'Mayotte'),
       ('MX', 'Mexico'),
       ('FM', 'Micronesia, Federated States of'),
       ('MD', 'Moldova, Republic of'),
       ('MC', 'Monaco'),
       ('MN', 'Mongolia'),
       ('ME', 'Montenegro'),
       ('MS', 'Montserrat'),
       ('MA', 'Morocco'),
       ('MZ', 'Mozambique'),
       ('MM', 'Myanmar'),
       ('NA', 'Namibia'),
       ('NR', 'Nauru'),
       ('NP', 'Nepal'),
       ('NL', 'Netherlands'),
       ('AN', 'Netherlands Antilles'),
       ('NC', 'New Caledonia'),
       ('NZ', 'New Zealand'),
       ('NI', 'Nicaragua'),
       ('NE', 'Niger'),
       ('NG', 'Nigeria'),
       ('NU', 'Niue'),
       ('NF', 'Norfolk Island'),
       ('MP', 'Northern Mariana Islands'),
       ('NO', 'Norway'),
       ('OM', 'Oman'),
       ('PK', 'Pakistan'),
       ('PW', 'Palau'),
       ('PS', 'Palestinian Territory, Occupied'),
       ('PA', 'Panama'),
       ('PG', 'Papua New Guinea'),
       ('PY', 'Paraguay'),
       ('PE', 'Peru'),
       ('PH', 'Philippines'),
       ('PN', 'Pitcairn'),
       ('PL', 'Poland'),
       ('PT', 'Portugal'),
       ('PR', 'Puerto Rico'),
       ('QA', 'Qatar'),
       ('RE', 'Reunion'),
       ('RO', 'Romania'),
       ('RU', 'Russian Federation'),
       ('RW', 'Rwanda'),
       ('BL', 'Saint Barthelemy'),
       ('SH', 'Saint Helena'),
       ('KN', 'Saint Kitts and Nevis'),
       ('LC', 'Saint Lucia'),
       ('MF', 'Saint Martin'),
       ('PM', 'Saint Pierre and Miquelon'),
       ('VC', 'Saint Vincent and the Grenadines'),
       ('WS', 'Samoa'),
       ('SM', 'San Marino'),
       ('ST', 'Sao Tome and Principe'),
       ('SA', 'Saudi Arabia'),
       ('SN', 'Senegal'),
       ('RS', 'Serbia'),
       ('CS', 'Serbia and Montenegro'),
       ('SC', 'Seychelles'),
       ('SL', 'Sierra Leone'),
       ('SG', 'Singapore'),
       ('SX', 'Sint Maarten'),
       ('SK', 'Slovakia'),
       ('SI', 'Slovenia'),
       ('SB', 'Solomon Islands'),
       ('SO', 'Somalia'),
       ('ZA', 'South Africa'),
       ('GS', 'South Georgia and the South Sandwich Islands'),
       ('SS', 'South Sudan'),
       ('ES', 'Spain'),
       ('LK', 'Sri Lanka'),
       ('SD', 'Sudan'),
       ('SR', 'Suriname'),
       ('SJ', 'Svalbard and Jan Mayen'),
       ('SZ', 'Swaziland'),
       ('SE', 'Sweden'),
       ('CH', 'Switzerland'),
       ('SY', 'Syrian Arab Republic'),
       ('TW', 'Taiwan, Province of China'),
       ('TJ', 'Tajikistan'),
       ('TZ', 'Tanzania, United Republic of'),
       ('TH', 'Thailand'),
       ('TL', 'Timor-Leste'),
       ('TG', 'Togo'),
       ('TK', 'Tokelau'),
       ('TO', 'Tonga'),
       ('TT', 'Trinidad and Tobago'),
       ('TN', 'Tunisia'),
       ('TR', 'Turkey'),
       ('TM', 'Turkmenistan'),
       ('TC', 'Turks and Caicos Islands'),
       ('TV', 'Tuvalu'),
       ('UG', 'Uganda'),
       ('UA', 'Ukraine'),
       ('AE', 'United Arab Emirates'),
       ('GB', 'United Kingdom'),
       ('US', 'United States'),
       ('UM', 'United States Minor Outlying Islands'),
       ('UY', 'Uruguay'),
       ('UZ', 'Uzbekistan'),
       ('VU', 'Vanuatu'),
       ('VE', 'Venezuela'),
       ('VN', 'Viet Nam'),
       ('VG', 'Virgin Islands, British'),
       ('VI', 'Virgin Islands, U.s.'),
       ('WF', 'Wallis and Futuna'),
       ('EH', 'Western Sahara'),
       ('YE', 'Yemen'),
       ('ZM', 'Zambia'),
       ('ZW', 'Zimbabwe');
```

Feel free to use 🫡.


Sql dump of all the countries, country codes

SQL countries table


Initial array:

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

## Using a Set

```js
const uniqueNumbers = [...new Set(numbers)];
```

## Array.prototype.reduce

```js
const uniqueNumbers = numbers.reduce((previousValue, currentValue) => {
  return previousValue.includes(currentValue) ? previousValue : [...previousValue, currentValue];
}, []);
```

If you are not familiar with `reduce`, use
this [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).

## Array.prototype.filter

```js
const uniqueNumbers = numbers.filter((element, index) => {
  return numbers.indexOf(element) === index;
});
```


How to remove duplicates from an Array in JS

Code Snippets

Move cursor to the end of input

Check if date is between two dates

CSS - Custom text selection

SQL countries table

Remove Duplicates from an Array