DEV Community: Kiran Raj R

Useful JavaScript Code Snippets

Kiran Raj R — Sun, 02 Jan 2022 02:59:01 +0000

Calculate mouse position with respect to an element.

Element.getBoundingClientRect() method returns a DOMRect object. DOMRect object represents a smallest rectangle which contains the entire element including its padding and border-width, which also contain information about size of the element like the width and height and position of the element relative to the viewport.

To calculate the position of mouse click event with respect to an element on which the event occur, first we need the position of the click event with respect to the main element(here it is the document). e.clientX and e.clientY will help you to get that value, it will return the x axis and y axis value with respect to the top left corner of the main element. Secondly we need to get the position of the element with respect to the main element, left and top properties of the getBoundingClientRect() method will help to get that value. Substracting the left/top values from clientX/clientY values will give the position of mouse click with respect to the element.

element.addEventListener('mousedown', function(e) {
    const target = e.target;
    const rectVal = target.getBoundingClientRect();
    const x = e.clientX - rectVal.left;
    const y = e.clientY - rectVal.top;
});

Get the position of an element relative to the document


const rect = ele.getBoundingClientRect();
// Here ScrollLeft / ScrollTop measures the width and height of the document even if some part of the document is scrolled out. 
const top = rect.top + document.body.scrollTop;
const left = rect.left + document.body.scrollLeft;

Toggle password show function

Input type "password" make the entered text hidden by replacing each letter with an asterisk ("*") or a dot ("•"). If we change the type of the input into text we will be able to see the actual text. This approach is used to make the password text visible, we use a button, when clicked, will checks the attribute of the input field. If it is "password" we will set it to "text" and the password will be visible, when button is clicked again we will set the type back to password.

html
<input type="password" classs="pass" />
<button class="tbtn">Toggle</button>

JavaScript
const passInput = document.querySelector('.pass');
const toggleBtn = document.querySelector('.tbtn');

toggleBtn.addEventListener('click', function() {
    const inputType = passInput.getAttribute('type');
    if(inputType === 'password'){
        passInput.setAttribute('type', 'text')
    else if(inputType === 'text'){
        passInput.setAttribute('type', 'password')
    }
});

Scroll to top of the page

ScrollTo(x,y) method cause the web page to scroll to the value specified by the method with respect to the document's top left corner. i.e. window.scrollTo(0, 0), cause the page to scroll to a position which is 0px from left and 0px from top relative to the document's top left corner.

window.scrollTo(0, 0);

Toggle visibility of an element

We can remove an element from the DOM just by setting the CSS display property of the element into "none", we can create a toggle to set the display value from none to block or block to none using the conditional operator in JavaScript. Conditional operator takes three operands: a condition followed by a question mark, then an expression to execute if the condition is truth followed by a colon and then an expression to execute if the condition is false.

const visibility = function(e) {
    const displayType = e.style.display;
    e.style.display = displayType === 'none' ? 'block' : 'none';
};

Detecting Dark mode in browser

First we detect if matchMedia object exists in the browser, if not that means the browser does not support dark mode. Next we need to check the current color scheme, window.matchMedia('(prefers-color-scheme: dark)').matches will return true if dark mode is enabled.

const isDarkMode = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)')
.matches;

Feedback welcomed, Thanks in advance.

Navigation Bar using CSS and JavaScript

Kiran Raj R — Sat, 01 Jan 2022 16:13:15 +0000

I created some navigation bar using CSS and JavaScript, all are simple beginner level codes. Hope this will help you some day, I did not make the design complicated, you can use your skills on these to create awesome designs.

You can find my Navigation Design Collection in codepen here. If you have time please provide feedbacks, I did not take accessibility features into considerations and these are not optimized for production, just want to experiment with code as I am trying to gain more knowledge in web development.

Simple CSS Text Animations

Kiran Raj R ・ Dec 25 '21

#css #webdev #codenewbie #beginners

CSS Hover Effects

Kiran Raj R ・ Dec 13 '21

#css #webdev #beginners #javascript

Simple CSS Text Animations

Kiran Raj R — Sat, 25 Dec 2021 18:20:00 +0000

Hi, I made some simple CSS text effects that can be used in your projects, these are beginner level animations. The code is not optimized and accessibility is not taken into account. I just want to show that animations like these can be made using CSS. You can use these simple animations with your creativity to make awesome text animations, hope you will like this. Happy Coding !!

My collection of text effects in codepen.

CSS Hover Effects

Kiran Raj R — Mon, 13 Dec 2021 10:12:33 +0000

Hi, fellow friends, I have creates some button hover effect using CSS, in rarest case JavaScript is also used. All these are experimental, accessibility is not consider as these are not developed keeping production scenario in mind. I just want to show that we can use CSS to create different animations. I would like to have your feedback to these effects, both positive and negative comments are welcomed.

Please use your creative minds to make more beautiful animations using CSS so that it can be inspirations for others to make the web more beautiful. Hope you will like these. All the animations are included in this codepen collection. A few of the effects are attached below. Happy coding.

Hover Effects Using CSS For Beginners

Kiran Raj R ・ Jul 30 '21

#css #beginners #webdev #codenewbie

Simple Pre Loaders Using CSS --Wave Style

Kiran Raj R ・ Nov 29 '21

#css #webdev #beginners #codenewbie

A Quick Note On CSS Pseudo Elements

Kiran Raj R — Mon, 13 Dec 2021 09:19:29 +0000

CSS pseudo-elements creates a new virtual element that represents a part of the element which can be manipulated like regular elements with some limitations. Pseudo-elements are only visible to users, they are not available in the document element tree i.e. they are not real elements. Pseudo-elements are mainly used to style specific parts of an element to which the pseudo-element is attached. Double colon is prepended before the pseudo-element to distinguish it from pseudo-class, but for backward compatibility we can also use single colon. Commonly used CSS pseudo-elements are:

::after
::before
::first-letter
::first-line
::marker
::placeholder
::selection
::backdrop

/* Basic Syntax */

selector::pseudo-element{
    property: value;
}

::after & ::before

::after / ::before creates a child element inside a element to which the pseudo class is attached. You must specify the content property of ::after / ::before to make the pseudo element to be visible, the content property can be an empty string. Both before and after pseudo-element has default display value of inline. In the “after” pseudo element the “content” created by the pseudo element is inserted after the main element, for "before" pseudo element the content is insert before the main element.

Check the below example, the black circle is created using before and after pseudo elements.


.para {
  position: relative;
  background: #aaa;
  padding: 20px;
}

.para::before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  left: -50px;
  top: -50px;
}

.para::after {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  right: -50px;
  bottom: -50px;
}

Example on Codepen

::first-letter

First-letter pseudo element can be used to style the first letter of the first line, without using any extra html tags. For the first-letter pseudo element to work as expected the element should be of type display: block;, and the first letter should not be preceded by any other contents, for example images. Not all properties as supported by first-letter pseudo element, a limited set of font properties, margin property, padding property, border property and some background properties support first-letter pseudo element.


.para::first-letter{
  color:#fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 30px;
  background: #000;
  padding: 5px 10px;
  margin-right: 5px;
}

::first-line

First line pseudo element is used to style the first line of a text in a block element. First-line pseudo element supports font, color, text and background properties only.


.para::first-line{
  color:red;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
}

Example on Codepen

::marker

Marker pseudo element helps to style the marker box of any element whose display property is set to list-item, it also helps to style the arrow of the summary elements. Marker pseudo element mainly supports color property and font properties.


<ul class="list">
  <li class="item">One</li>
  <li class="item">Two</li>
  <li class="item">Three</li>
  <li class="item">Four</li>
</ul>


.item::marker {
  color: lime;
  font-size: 25px;
}

Example on Codepen

::placeholder

Placeholder pseudo element helps to style the placeholder attributes of html input tags.

.text1::placeholder {
  font-size: 18px;
  padding-left: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f00;
  text-decoration: underline;
}

Example on Codepen

::selection

Selection pseudo element helps to style text selected / highlighted by the user. Few properties like text shadow, background color and color properties are supported.

.para::selection{
  color:#fff;
  background: #f00;
}

Example on Codepen

::backdrop

Helps to style the backdrop area of video / dialog html
elements when viewed in full screen mode.

.video::backdrop {
  background: yellow;
  color: black;
}

Example on Codepen.io

CSS Hamburger Menu Icons

Kiran Raj R — Thu, 09 Dec 2021 14:07:39 +0000

Hi,
I created some hamburger menu icon animations using CSS. Since there are a few designs, I created a collection in this codepen collection.

A few pens from the collected is linked below. Take a look, I just used CSS, to mimic the use of checkbox effect I used JavaScript.

Simple Pre Loaders Using CSS --Wave Style

Kiran Raj R — Mon, 29 Nov 2021 13:38:09 +0000

Here are some examples of simple pre loaders using CSS. These are based on waves, I would like to know your feedbacks. These codes are not optimized, there are just experiments. Hope you will like it.

CSS Pre Loaders --Circular Components --CSS only

Kiran Raj R ・ Nov 29 '21

#css #webdev #beginners #loaders

CSS Pre Loaders --Circular Components --CSS only

Kiran Raj R — Mon, 29 Nov 2021 04:38:02 +0000

I created some beginner level CSS pre loaders using CSS, the code is not optimized, just made by adjusting various CSS animation properties. Take a look if you have time, I would like to get feedbacks, which will be helpful to improve my skills.

The below codepen was part of my previous post.

Hover Effects Using CSS For Beginners

Kiran Raj R — Fri, 30 Jul 2021 14:13:01 +0000

Here is a list of few card hover effects created using CSS. They are created only using CSS, the logic behind it is too simple, hope it will be useful to beginners in web development.

You can find some text effect using CSS here

Hope it will be useful.

35+ Simple CSS Based Pre Loaders

Kiran Raj R ・ May 28 '21

#css #productivity #beginners #webdev

30+🔥 Awesome CSS Animation Resources

Kiran Raj R ・ May 24 '21

#css #beginners #javascript #webdev

🔥Awesome Resource For Your Web Projects: 75+ Background Resources🔥

Kiran Raj R ・ May 19 '21

#beginners #css #webdev #javascript

Simple Text Effects Using CSS

Kiran Raj R — Thu, 29 Jul 2021 13:44:55 +0000

Here is a list of few text effects created using CSS, they are simple, I think it will be good for beginners.

Hope it will be useful.

JavaScript Useful Code Snippets Part1: Date And Time

Kiran Raj R — Thu, 03 Jun 2021 03:20:11 +0000

I like to start a series based on JavaScript which will have a collection of code snippets that will help to do a specific task. Each post will be related to one particular topic in JavaScript, I hope the snippets will help beginners to find ways to achieve certain tasks.

Here is the part one which consists of code snippets based on Date object in JavaScript. If you like to know more about time and dates you can use this.

1.Code to find yesterday: Method 1

// Find Yesterday Method 1
function getYesterday(){
    let today = new Date();
    let yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    console.log(`Today: ${today.toDateString()} Yesterday: ${yesterday.toDateString()}`);
}
getYesterday();
//Today: Tue May 18 2021 Yesterday: Mon May 17 2021

getDate() will return the current date, substracting one will give the yesterday's date as a number data type, when we provide the value to the setDate() method we get the yesterday's time/date info. Use toDateString() method to get the date part in string.

Code to find yesterday: Method 2

// Find Yesterday Method 2 
const yesterday1 = (today1 => new Date(today1.setDate(today1.getDate() - 1)))(new Date);
console.log(yesterday1);

2.Code to find tomorrow: Method 1

// Find Tomorrow
function getTomorrow(){
    let today = new Date();
    let tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    console.log(`Today: ${today.toDateString()} Tomorrow: ${tomorrow.toDateString()}`);
}
getTomorrow();
//Today: Tue May 18 2021 Tomorrow: Wed May 19 2021

The method is same as finding yesterday the only difference is instead of substracting one from the getDate() value we add one to the value.

Code to find tomorrow: Method 2

const tomm1 = (today1 => new Date(today1.setDate(today1.getDate() + 1)))(new Date);
console.log(tomm1);

3.Code to print current day.

// Print Day
function printWeekday(){
    let names = ['Sunday', 'Monday', 
    'Tuesday', 'Wednesday', 'Thursday', 
    'Friday', 'Saturday'];
    console.log(`Today is ${names[new Date().getDay()]}`);
}
printWeekday();
//Today is Tuesday

getDay() method returns the current day in number form 0 to 6, where 0 represents Sunday. The value is used as the index of day names array which starts with Sunday at index 0.

4.Code to print current month

// Print Month
function printMonthName(){
    let names = ['January', 'February', 'March', 'April', 'May', 
    'June','July', 'August', 'September', 'October',' November', 
    'December'];
    console.log(`The month is ${names[new Date().getMonth()]}`);
}
printMonthName();
//The month is May

getMonth() method returns the current month in number form 0 to 11, where 0 represents January. The value is used as the index of array of month names which starts with January at index 0.

5.Code to print first and last day of month

// Get first and last day of month
function firstLastDay(year,month){
    let dateFirst = new Date(year,month-1,1);
    let dateLast = new Date(year,month,0);
    console.log(dateFirst.toLocaleDateString(), dateLast.toLocaleDateString());
}
firstLastDay(2021, 1);   // 1/1/2021 1/31/2021
firstLastDay(2021, 2);   // 2/1/2021 2/28/2021
firstLastDay(2021, 5);   // 5/1/2021 5/31/2021

To get the first day create a new Date object with year and month whose first day you want to get, remember month stars from 0 to 11, you can skip the date part or you can use one. If you need to know the last day create a new Date object with year, number representing the next month, and zero, since there is no date 0, the output will be the last day of previous month.

6.Code to print number of days in a month

// Print Number of days in a month             
// Month starts from 0, so (year,month, 0) gives last day of month-1
function getDaysInMonth(year,month){
    let days = new Date(year, month,0).getDate();
    console.log(`Number of days in ${month}/${year}: ${days}`);
}
getDaysInMonth(2021, 1);  // Number of days in 1/2021: 31
getDaysInMonth(2021, 2);  // Number of days in 2/2021: 28
getDaysInMonth(2021, 5);  // Number of days in 5/2021: 31

If you need to know the last day; create a new Date object with year, number representing the next month and zero, since there is no date of 0, the output will be the last day of previous month, get the date from the output using getDate() method.

7.Code to print time in AM/PM format

// Find AM or PM time in hh:mm:ss format
function amOrpm(t){
    let time = t.split(" ")[0].split(':');
    if(parseInt(time[0]) >= 12){
         parseInt(time[0]) === 12 ? 12 : parseInt(time[0] % 12);
         time.push("PM")
    }else{
         time.push("AM")
    }
    console.log(`${time[0]}:${time[1]}:${time[2]} ${time[3]}`);
}

amOrpm(new Date().toTimeString()); // 17:31:07 PM

To add AM/PM manually to time, first get the time part, split it when ':' is found, check the hour part, if the hour part is greater than or equal to twelve find the modulus of the hour value with 12 and add 'PM'. If the hour part is less than 12 append 'AM' to the value.

8.Code to calculate number of days between two dates

// Calculate number of days between two dates
function noDates(first, last){
    let difference = Math.ceil((last - first) / (1000*60*60*24));
    console.log(`The number of days between ${first.toLocaleDateString()} and ${last.toLocaleDateString()} is ${Math.abs(difference)} days`);
}

noDates(new Date('2018-1-1'), new Date('2021-05-15'))
//The number of days between 1/1/2018 and 5/15/2021 is 1231 days

In JavaScript Date objects are based on the milliseconds elapsed since 1st January 1970, so when we do arithmetic operations between dates the output will be in milliseconds. Here we try to find the difference between two dates, we get the difference as milliseconds, to convert that into dates we divide it with milliseconds equal to one day(24*60*60*24).

9.Code to calculate number of months between two dates

// Calculate number of months between two dates
function numMonths(first, last){
    let yearToMonths = [last.getFullYear() - first.getFullYear()] * 12;
    let months  = [yearToMonths + (last.getMonth() + 1)] - (first.getMonth() + 1); 
    console.log(`Number of months between ${first.toLocaleDateString} and 
            ${last.toLocaleDateString} is ${months}`);
}


numMonths(new Date('2018-05-21'), new Date('2021-05-21'));
// Number of months between 5/21/2018 and 5/21/2021 is 36

The number of dates between two days can be found by

finding the difference in years between two dates
multiply the difference with 12
add the number of months in the recent date to it
substract the number of months of second date from the value.

In the above method the days are not considered, while calculating the months, you can add more accuracy by considering the dates also.

24 HTML Tags you may not know.

Kiran Raj R ・ May 4 '21

#tutorial #css #webdev #productivity

10 Awesome GitHub Repos For Web Developers

Kiran Raj R ・ Apr 26 '21

#javascript #beginners #productivity #webdev

The Ultimate Web Developer Resources List 🔥Awesome 200+ Resources

Kiran Raj R ・ May 6 '21

#css #javascript #webdev #beginners

🔥 75 Awesome Resources For Web Developers 🔥

Kiran Raj R ・ May 14 '21

#css #webdev #beginners #javascript

9 Simple Full Screen Navigation Menu Using CSS

Kiran Raj R — Thu, 03 Jun 2021 03:18:29 +0000

I created 9 simple full screen navigation menu for beginners using CSS and JavaScript. These are just beginner level, you can play with to create your own designs. These designs are not made responsive.