Forem: Kritika Pattalam Bharathkumar

June Celebrations Globe - A 3D CSS Journey Through Cultural Unity

Kritika Pattalam Bharathkumar — Sat, 28 Jun 2025 20:31:02 +0000

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

June represents a powerful intersection of celebrations that define our shared humanity from the vibrant colors of Pride Month advocating for love and equality, to the profound significance of Juneteenth commemorating freedom, the warmth of Father's Day honoring paternal bonds, and World Environment Day calling us to protect our planet.
As a developer, I wanted to create something that visually captured how these seemingly different celebrations actually orbit around the same core values: respect, love, freedom, and responsibility. The globe concept felt perfect, each celebration gets its own "face" while being part of one unified whole, rotating together in harmony.

Demo

Journey

The Technical Challenge
Building a 3D rotating globe in pure CSS was both fun and challenging. I've been coding for years, but CSS 3D transforms still surprises me with their power and complexity.

Key techniques I used:

transform-style: preserve-3d to create the 3D space
perspective: 1000px for realistic depth perception
Strategic translateZ() positioning for each globe face
Coordinated animation timing across multiple elements
Complex gradient backgrounds respecting each celebration's authentic colors

What I Learned

Color Theory Matters: Each celebration has deeply meaningful color associations. Pride Month's rainbow, Juneteenth's red-green-black symbolism, Father's Day's classic blues, and Environment Day's natural greens. I spent considerable time researching and respecting these choices.
Performance: With multiple animations running simultaneously, I focused on using transform and opacity properties for smooth performance. Most animations use ease-in-out timing for natural motion.
Responsive Design: The globe scales from 400px to 300px on mobile while maintaining all visual relationships and animation timings.

What I'm Proud Of
The unified rotation timing - the globe rotates every 20 seconds while orbital elements move at 15s and 25s intervals, creating a synchronized dance. I also researched each celebration's significance and visual representations to ensure respectful, authentic styling rather than just throwing colors together.

Next Steps
I'd love to extend this concept with:

Interactive controls such as pause rotation, click to focus on specific celebrations
_Sound design _with subtle audio cues for each face transition
Better accessibility: reduced motion preferences, screen reader optimizations

The code uses CSS 3D transforms, strategic animation timing, and responsive design to create this rotating celebration of June's meaningful observances.

Do you know what "use strict" does in JavaScript ?

Kritika Pattalam Bharathkumar — Sat, 19 Nov 2022 20:03:31 +0000

As JavaScript developers, we often have "use strict" - strict mode enabled in our projects. But do we know what does that expression does?. Let's find out.

What is a strict mode?

JavaScript's strict mode makes JS be executed in strict mode, which helps identify common mistakes in coding practices which might lead to potential bugs.

Syntax

"use strict;"

As part of this blog, let's see a list of things to remember while using strict mode in JavaScript

Declaring strict mode
Declaring a variable/object in strict mode
Deleting a variable/object in strict mode
Naming variables in strict mode
Duplicating a parameter in a function
Octal numeric literals are not allowed
Eval function to create a variable
Writing to a read-only property is not allowed
Writing to a get-only property is not allowed
'this' in strict mode

Below is the list of few things which are identified as issues in strict mode vs without one

1. Declaring strict mode

The "use strict" directive/expression is only recognized at the beginning of a script or a function.

Declare strict mode at the top of the file

Strict mode can be declared at the top of the file as the first thing. When declared at the top it takes a global scope.
In the below piece of code, use strict is declared as the first thing on the script file, making it a global scope, causing the strict mode feature to be enabled for the whole file.

"use strict";
alert("I am part of the file");

function test() {
   console.log("javascript use strict is declared at the top of the file");
}
test();

What happens when strict mode is declared inside a function and not at the top?

When used inside a function it has local scope and only that function will execute in strict mode.
In the example below, the strict mode will be enabled only inside the function(local scope), and the code outside it will not follow the strict rules.

function log(x) {
    "use strict;"
    console.log(x);
}
log(5);

What to avoid?

In the example below, use strict is not the first line & should be avoided. Preferably it's better to declare it on the top of the file due to global scope, instead of declaring it inside a function.

alert("I am inside this file");

"use strict;" //not declared as the first line
console.log("javascript use strict is not declared at the first thing");

2. Variable/Object declaring in strict mode

Using a variable/object without declaring it is not allowed in strict mode.
In the example below, myVar variable is assigned a value before declaring, this will throw an error.

What happens strict mode is not enabled? - myVar will just be created as a global variable in that scenario.

"use strict;"
myVar = 5; // This will throw an error
function log(x) {
    console.log(x);
}
log(5);

3. Deleting a variable/object/function

Deleting a variable or object or function when in strict mode enabled is not possible.

use strict;
let myVar = 5; // This will throw an error
function log(x) {
    console.log(x);
}
log(6);
delete log; //throws an error
delete myVar; //throws an error

4. Naming variables in strict mode

When learning JS for the first time, the thing which we are sure often would have read is "Do not use reserved words as variable names".

But at times people do tend to use reserved words without realizing it, in such cases strict mode helps by throwing an error. Just try it out in a chrome developer tool console and one should be able to see the difference.

"use strict;"
var static = "hello";
//static is a reserved word, hence when using strict mode, it will throw below error
// Uncaught SyntaxError: Unexpected strict mode reserved word

5. Duplicating a parameter in a function

In the example below, you will see that the x parameter in the function log has been duplicated. This is not allowed in strict mode.

use strict;
// This will throw an error because "x" parameter is duplicated
function log(x,y,x) {
    console.log(x);
}
log(6,10);

6. Octal numeric literals are not allowed

In the example below, one might assume a preceding zero before 1 does nothing and the value might just be 12, but in JavaScript preceding zero before a number means its Octal numeric.
Strict mode does not allow octal numeric.

'use strict';
 // Will throw an error
 let x = 012;

7. Eval function to create a variable is not allowed

"use strict";
eval("var x = 1");// error

8. Writing to a read-only property is not allowed.

In the example below, we define an object, and in the configurable property, we set the writable value to false, which means that a particular object is read-only.
So when you try to assign a new value to that object, the strict mode will throw an error.

'use strict';
let obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
// Will throw an error
obj.x = 25;

9. Writing to a get-only property is not allowed

In the example below, trying to write to a get-only property throws an error.

'use strict';
let obj = {get x() {return 0} };
// Will throw an error
obj.x = 25;

10. 'this' in strict mode

In non-strict mode, when you call a function that isn't bound to any object "this" will refer to the global window object, whereas in strict mode it returns undefined.

'use strict';
const foo = function() {
  console.log(this); // undefined in strict mode
foo();

Conclusion

The concludes what is strict mode is, how/where to declare it, and the list of few items to keep in mind/expect while using "use strict" in JavaScript.

References

strict

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Create a DOWNLOAD link in a single line of HTML

Kritika Pattalam Bharathkumar — Tue, 07 Dec 2021 21:17:58 +0000

As a website user, one would have come across links or buttons which say "Click to download" or "Download" on a website. Have you ever wondered how can you add one to your website?. Keep reading!!!.

As part of this blog let us see how one can create a download link or button which lets you download an asset (e.g. image, pdf, files, etc.). Do you know what is even more interesting?. This can be done with just a single line of HTML.

How to create a download link or button in HTML

The simple way to achieve this is

create an anchor tag with the text of your choice e.g "Click to download"
to the href attribute add the path to the URL of the asset you want to be downloaded. In the below example, I have added a path to an image.
next comes the more important part, add the* *download **attribute to the anchor tag.

Yay!!! You have created your download link now.

How do I make this look like a button?.

Simply add some CSS to make the anchor tag look like a button.

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download>Click to download</a>

Save the file using a custom name

In the above-given example, when the user clicks on download, it will save the file as "click-me.jpg", since that is the file name specified in the href attribute.

What about if you want to give it a different name?.

Simply add the name as a value for the download attribute. For example in the below code, I have added download = test, hence when the user clicks on download the file will be saved as test.jpg

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download="test">Click to download</a>

Can the asset/href value be of a different domain?

NO, they cannot. Download attribute works only for files from the same Origin URL's (i.e the file should be hosted on the same origin as the site you are trying to implement it in) or blob or data URL files.

In the below example, href value is from twitter.com whereas my site is blog.kritikapattalam.com. In this case, the download button will not work.

<!--- Site origin - https://blog.kritikapattalam.com --->
<a href="https://twitter.com/images/click-me.jpg" download="test">Click to download</a>

Well, that is it for this blog, and by now you should know how to create a download on your website.

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Are you more of a Twitter person?. Then check out the short version of this blog in the below thread.

Kritika 🕸👩‍💻

@kritikapattalam

💡 HTML - Code Snippet💡

Did you know that you can create a DOWNLOAD LINK , with just a single attribute on an anchor tag?.

Check this out.!!!

#webdevelopment #DEVCommunity #HTML #WomenWhoCode

15:30 PM - 11 Jul 2021

Display random quotes from Chuck Norris API

Kritika Pattalam Bharathkumar — Sat, 09 Oct 2021 01:31:16 +0000

What a fun way to learn JavaScript than by building projects. In my previous blog post, I showed how one can build a random quote generator using arrays, it was simple and beginner-friendly. It would have helped one understand how to get started when building projects or how to address a problem.

I thought let me take this one step above and show how one can create a similar random quote generator using an API, and I am going to be using the famous Chuck Norris API for this.

Let's get started.

What will we learn as part of this blog

function declaration vs function expression
window.onload function
Fetch() method
attaching onclick eventlistener to an element

What will be the end result

Create random quotes on button click. The quotes are going to be from the Chuck Norris API
Add a dropdown category filter that will display random quotes from the category chosen.

Project structure

Create the list of files as listed below

index.html
script.js
style.css [ styles if we have any. As part of this blog, I am not going to add any styles.].

HTML

HTML is going to be very simple

Select field for the category- A simple select field with a list of all categories available in the Chuck Norris API. The options from inside the select field are created by the retrieved list from here
Retrieve the categories
https://api.chucknorris.io/jokes/categories
Section to display Quotes - A div "display_facts", is going to have the img tag which is going to have the chuck Norris icon from the API, and a p tag which will be populated with the quote from the API
Generate Quote button - This is the button onclick of which we will generate/retrieve a new quote from the API.

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Random Quote Generator</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
       <div class="outer-container">
           <div class="heading">
                   <h3>Chuck Norris Facts - Select category from the dropdown</h3>
                       <select id="category">
                            <option value="all">All</option>
                            <option value="animal">Animal</option>
                            <option value="career">Career</option>
                            <option value="celebrity">Celebrity</option>
                            <option value="explicit">Explicit</option>
                            <option value="fashion">Fashion</option>
                            <option value="food">Food</option>
                            <option value="history">History</option>
                            <option value="money">Money</option>
                            <option value="movie">Movie</option>
                            <option value="music">Money</option>
                            <option value="political">Political</option>
                            <option value="religion">Religion</option>
                            <option value="science">Science</option>
                            <option value="sport">Sport</option>
                            <option value="travel">Travel</option>
                        </select>
           </div>
           <div class="display_facts">
                <img src="" id="icon" />
                <p id="quote">Author</p>
           </div>
            <button id="generate">Generate</button>
       </div>
    </body>
</html>

JavaScript

Let's break this down into four steps

Create an array inside a function and call that function on window load.
Check what is Chuck Norris API capable of.
Using fetch method retrieve all the results
Generate quote on button click
Let's generate quotes based on the category selected.

1) Create an array inside a function and call that function on window load.

This can be done in two ways using function expression or vs function declaration. Read more about it here .
The main difference with function expression is they are not hoisted, you cannot call the function expression before they are declared.

In the below example, I created a function called generateQuote, which contains a console.log hi.
Next inside window.onload function I call the function generateQuote.

Now save this file, and open index.html in your browser. In the chrome developer tool console, you should see the text "hi". What happens here is, once the entire window including the DOM & assets is loaded, generateQuote function is called.

As per MDN docs, The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links, and sub-frames have finished loading.

const generateQuote = function() {
     console.log("Hi");
}
window.onload = function() {
    generateQuote();
 }

2. Check what is Chuck Norris API capable of.

As part of this step, we are going to retrieve the results from the Chuck Norris API

Let's first see go check out the API

ChuckNorris API

An important tip for anyone trying to use an API is to read the documentation of the API, they usually have answers to all your questions as to how to use them and what is the API capable of doing.

When reading the API docs, what we concur is that the API is capable of doing the following things

Retrieve random quotes
Retrieve a list of random quotes based on a list of categories
Retrieve the list of category
Retrieve quotes based on the text entered by the user.

3. Using fetch method retrieve all the results

As per the docs, the URL to fetch the results in a JSON format is to use the below URL

//Retrieve a random chuck joke in JSON format.
GET https://api.chucknorris.io/jokes/random

Just try opening this URL https://api.chucknorris.io/jokes/random in a browser window, you should see a similar response that is a single random quote with below details

The time when the random joke was created
an icon image of Chuck Norris
id for that particular quote
the updated date
a URL to the quote on the Chuck Norris API page
value - which is actually the quote that will be displayed on our page.

//The result has been formatted for a better view
{
   "categories":[

   ],
   "created_at":"2020-01-05 13:42:24.142371",
   "icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png",
   "id":"DciuboTEQxqEaVG0Qd2T2w",
   "updated_at":"2020-01-05 13:42:24.142371",
   "url":"https://api.chucknorris.io/jokes/DciuboTEQxqEaVG0Qd2T2w",
   "value":"Chuck Norris flashes the peace sign a lot because it's the easiest way to go for the eyes."
}

Now try refreshing the API URL and you should see a different response. Let's go ahead and see how to add this via code and display it on the page.

The fetch method accepts one parameter which is the URL and returns a promise, hence we can use "then" which will return as a raw JSON first, and then once that raw JSON retrieve is successful,

we then retrieve the icon

this.data.icon_url

and the value(which is the quote here)

this.data.value

and display it into the respective DOMS using their HTML id.

If at all there is an error, then the promise will return the console.log inside the catch statement.

const generateQuote = function() {
   let url ="https://api.chucknorris.io/jokes/random";

    fetch(url)
    .then(function(response) {
        return response.json(); 
    }) // Getting the raw JSON data
    .then(function(data) {

        // Storing the quotes internally upon 
        // successful completion of request
        this.data = data; 

        // Displaying the quote When the Webpage loads
        console.log(this.data);
        document.getElementById("icon").src = this.data.icon_url;
        document.getElementById("quote").innerHTML = this.data.value;
}).catch(function() {
   console.log("error");
});

}
window.onload = function() {
    generateQuote();
}

Now, let's run the above piece of code and you should be seeing different quotes every single time you refresh your index.html. When you refresh the page, generateQuote a function inside the window.load gets executed, trying to fetch the new quote every refresh.

4. Generate quote on button click

This can easily be done by adding a click event listener, which calls the generateQuote function onclick.

window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}

5. Let's generate quotes based on the category selected.

To retrieve random quotes the API URL to be used is below

GET https://api.chucknorris.io/jokes/random?category={category}

In this URL, {category} will be the value chosen from the dropdown .e

eg: https://api.chucknorris.io/jokes/random?category=movie

So in order to retrieve the results based on category is going to be done in just a few steps

Retrieve the chosen category value from the dropdown

let category = document.getElementById("category").value;
Pass the value of the category to the URL. The URL to use if you see below is decided based on an if/else condition. On the initial page load or if the user decides to view quotes from all the categories then we use the URL from the else condition, if the category chosen is something other than the option "all" eg. movie or sports then we use the URL inside the "if" condition.

 let url;
   let category =  document.getElementById("category").value;

   if(category !== "all") {
     url ="https://api.chucknorris.io/jokes/random?category=" + category;
   } else {
        url ="https://api.chucknorris.io/jokes/random";
   }

Final JavaScript

const generateQuote = function() {
   let url;
   let category =  document.getElementById("category").value;

   if(category !== "all") {
     url ="https://api.chucknorris.io/jokes/random?category=" + category;
   } else {
        url ="https://api.chucknorris.io/jokes/random";
   }

    fetch(url)
    .then(function(response) {
        return response.json(); 
    }) // Getting the raw JSON data
    .then(function(data) {

        // Storing the quotes internally upon 
        // successful completion of request
        this.data = data; 

        // Displaying the quote When the Webpage loads
        console.log(this.data);
        document.getElementById("icon").src = this.data.icon_url;
        document.getElementById("quote").innerHTML = this.data.value;
}).catch(function() {
   console.log("error");
});

}
window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}

Output - Working Demo

References

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Build a Random Quote Generator using JavaScript

Kritika Pattalam Bharathkumar — Fri, 24 Sep 2021 20:30:48 +0000

The best way to learn to code is by practice and by building small projects. As part of this blog, let's build a beginner-friendly random quote generator in JavaScript.

Check out my previous blog post Build a Simple Clock using JavaScript.

What will we learn as part of this blog

function declaration vs function expression
window.onload function
Math.random()
Math.floor
attaching onclick eventlistener to an element

Let's get started!!!.

Project structure

Create the list of files as listed below

index.html
script.js
style.css [ styles if we have any. As part of this blog, I am not going to add any styles.].

HTML Structure - index.html

HTML is going to be very simple, nothing fancy here.
In the below HTML,

link the stylesheet inside the head tag
link the javascript file inside the head tag
Inside the body tag we are going to have A main outer container div which is going to hold the below elements - a paragraph tag to display the quote - a paragraph tag to display the author - a button - onclick of which we will generate random quotes

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Random Quote Generator</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
       <div class="outer-container">
            <p id="quotes"></p>
            <p id="author"></p>
            <button id="generate">Generate</button>
       </div>
    </body>
</html>

JavaScript

Let's break this down into four steps

Create an array inside a function and call that function on window load.
Retrieve the quotes/author from the array.
Onclick of the button, pick a random quote(index) from the array to display.
Use the index generated to display the quotes and author into the paragraph tag using innerHTML.
Call the function onclick

1) Create an array inside a function and call that function on window load.

In the below example, I created a function called generateQuote, which contains an array called quotes and a console.log hi. I have declared quotes as a const variable because the value of the array is going to be always constant and will never change throughout this project.
Next inside window.onload function I call the function generateQuote.

As per MDN docs, The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links, and sub-frames have finished loading.

const generateQuote = function() {
    const quotes = [
    {
        quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
        author: "Albus Dumbledore"
    },
    {
        quote: "It is impossible to manufacture or imitate love",
        author: "Horace Slughorn"
    },
    {
        quote: "Being different isn't a bad thing. I mean that you are brave enough to be yourself.",
        author: "Luna Lovegood"
    },
    {
        quote: "If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.",
        author: "Sirius Black"
    },
    {
        quote: "Never trust anything that can think for itself if you can’t see where it keeps its brain.",
        author: "Arthur Weasley"
    },
    {
        quote: "Every human life is worth the same, and worth saving.",
        author: "Kingsley Shacklebolt"
    },
    {
        quote: "Have a biscuit, Potter.",
        author: "Minerva McGonagall"
    },
    {
        quote: "Happiness can be found even in the darkest of times if one only remembers to turn on the light.",
        author: "Albus Dumbledore"
    },
    {
        quote: "Socks are Dobby’s favorite, favorite clothes, sir!",
        author: "Dobby"
    }
];
console.log("Hi");
}
window.onload = function() {
    generateQuote();
 }

2. Let's see how to retrieve the quotes/author from the array

First, let's see how to get the array values. Array values can be retrieved by their indexes. The index of an array starts from 0 to arraylength - 1. This means array index 0 will have the below values

 {
    quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
     author: "Albus Dumbledore"
  }

So if you want to print the fourth value, our index would be 3 [Remeber the index starts from 0 ] , so let's try to access the values for quotes and author using the index

//Syntax : arrayVariableName[index]
console.log(quotes[3].quote); // If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.
console.log(quotes[3].author); // Sirius Black

3. Onclick of the button, pick a random quote(index) from the array to display.

The next thing we want to do is pick a random quote from the array. In the previous step we saw that we can access the quote using the index number, so we are going to need a random number to pick the quote.

As per MDN Docs, Math.random() returns a floating-point, pseudo-random number between 0 (inclusive) and 1 (exclusive).

Since math.random returns a floating-point number eg: 0.65 and in order to access the array values we need an integer so let's use math.floor which will give us an integer

As per MDN Docs, Math.floor() returns a number representing the largest integer less than or equal to the specified number.

in order to return a more efficient number let's multiply the random number with the array length and use math.floor which will return us an integer and save that value in a variable.

 let arrayIndex = Math.floor(Math.random() * quotes.length);

4. Use the index generated to display the quotes and author into the paragraph tag using innerHTML

document.getElementById("quotes").innerHTML = quotes[arrayIndex].quote;
document.getElementById("author").innerHTML = quotes[arrayIndex].author;

Now try saving the file, and when you open the index.html in the browser you should see a quote and author being displayed. When you refresh the browser, you should see a different quote

5. Call the function onclick

In the previous step, we were able to see different quotes being displayed every time when we refresh the browser because for every refresh the function gets called, which returns a random index number, displaying a random quote.

So now let's attach a eventlistener onclick to the button, which when clicked will call the generateQuote function

As per MDN docs, The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target.

//Final JavaScript
const generateQuote = function() {
    const quotes = [
    {
        quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
        author: "Albus Dumbledore"
    },
    {
        quote: "It is impossible to manufacture or imitate love",
        author: "Horace Slughorn"
    },
    {
        quote: "Being different isn't a bad thing. I means that you are brave enough to be yourself.",
        author: "Luna Lovegood"
    },
    {
        quote: "If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.",
        author: "Sirius Black"
    },
    {
        quote: "Never trust anything that can think for itself if you can’t see where it keeps its brain.",
        author: "Arthur Weasley"
    },
    {
        quote: "Every human life is worth the same, and worth saving.",
        author: "Kingsley Shacklebolt"
    },
    {
        quote: "Have a biscuit, Potter.",
        author: "Minerva McGonagall"
    },
    {
        quote: "Happiness can be found even in the darkest of times, if one only remembers to turn on the light.",
        author: "Albus Dumbledore"
    },
    {
        quote: "Socks are Dobby’s favorite, favorite clothes, sir!",
        author: "Dobby"
    }
];

    let arrayIndex = Math.floor(Math.random() * quotes.length);
    document.getElementById("quotes").innerHTML = quotes[arrayIndex].quote;
    document.getElementById("author").innerHTML = quotes[arrayIndex].author;

}
window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}

Output - Working Demo

Conclusion

Now you should have a working random quote generator, which generates random quotes onclick of a button. Now go ahead and try to load different quotes every few minutes or an hour. [Tip: Call the function inside setInterval, instead of onclick]

References

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Build a Simple Clock using JavaScript

Kritika Pattalam Bharathkumar — Tue, 14 Sep 2021 14:00:47 +0000

The best way to learn to code is by practice and building small projects.
As part of this blog, let's build a simple clock that will print the local time of the user using JavaScript. This is great for beginners and for someone who has just started with JavaScript.

What will we learn as part of this blog?

Defining a function using function expression vs function declartion
document.getElementById
setInterval
Element.innerHTML
Date.prototype.toLocaleDateString()

Let's get started!!!.

Project structure

Create the list of files as listed below

index.html
script.js
style.css [ styles if we have any. As part of this blog, I am not going to add any styles as such.].

HTML Structure - index.html

In the below HTML,

link the stylesheet inside the head tag
link the javascript file inside the head tag what will be present in those two files we will see later in the post.

The next step is, inside the body tag add an element of your choice with an id attribute. I have added a paragraph as the element with the id value as a clock. This paragraph is where we are going to display our time.

<!Doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple Clock using JavaScript</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Simple Clock - Current Time</h1>
        <p id="clock"></p>
    </body>
</html>

Script - script.js

Let's break this down into steps

Create a function called clock and call the function.
Create a date object and retrieve the local time.
Call the function clock every second so that the clock gets updated with the new value.

1. Create a function called clock and call the function.

In the below example, I have defined a function called clock which has console.log, and then I call the function at the end of the script. Save the script file and when you open the index.html. You should see "Hi" in the developer tool.

//function expression
const clock = function() {
   console.log("Hi");
}
// or
//function declaration
function clock() {
  console.log("Hi");
}
clock();

2. Create a date object and retrieve the local time.

new Date()
When called as a constructor, returns a new Date object.

toLocaleTimeString returns the current local time in a string format.

const clock = function() {
    let getDate = new Date();
    console.log(getDate.toLocaleTimeString());
}

3. Display the time inside the paragraph tag

In the previous step we retrieved the value of the time, now we should display that value inside the paragraph tag.
First, let's grab the element using its ID "clock"

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string.

Into that element let's insert the time value returned by the date object. Using innerHTML we can set the value.

Now let's view this in the browser, what you should be seeing is, the current local time when the browser loaded for the first time. If you refresh the browser, you will see that it updates the time to the current minute. So every single time you want to see the current time, you will have to refresh the browser.

const clock = function() {
    let getDate = new Date();
    document.getElementById('clock').innerHTML = getDate.toLocaleTimeString();
}

4. Call the function using setInterval, for every few seconds.

With the last update, in order to see the current time, we had to refresh the browser every time so that the function gets called on refresh/page load and retrieves the current time. But a clock is supposed to update on its own, which means we will need the clock function to be executed every second to retrieve the current value. This is where we use the setInterval function.

setInterval executes a function continuously for the given milliseconds.

Let's add the clock function inside the setInterval, now the clock function is repeated called for every 1000 seconds.

const clock = function() {
    let getDate = new Date();
    document.getElementById('clock').innerHTML = getDate.toLocaleTimeString();
}
setInterval(function() { clock();}, 1000);

Output

References

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Disable Zoom on pinch in mobile using HTML tag

Kritika Pattalam Bharathkumar — Tue, 07 Sep 2021 16:43:12 +0000

As a user when you open a site in mobile, we tend to pinch and zoom the page to see things more clearly. Have you ever wondered if that feature can be disabled?.

Yes, it can be disabled. What's more interesting is that it can be done by just a single line of code in HTML.

How to disable zoom on pinch

On the head section of the HTML, include the following piece of line which is a meta tag that tells the browser the details of what should happen on a device's viewport

<!doctype html>
<html lang="en">
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0 ,
    maximum-scale=1.0 , user-scalable=no"/>
   ...
 </head>
 <body>...</body>
</html>

name="viewport"

this means that this meta tag is used for device viewport

width=device-width

assigns the width of the device as the viewport width

initial-scale and maximum-scale is set to 1 -

which means it occupies the full 100% of the viewport on page load

user-scalable=no,

setting the value to no or 0 is what tells the browser to prevent the page from scaling(zoom) in/out

Things to keep in mind while using this

This can affect accessibility, people with poor vision will have concerns when visiting the page, since it will prevent them for zooming/out and viewing content closely when required. So use wisely.
iOS or safari still lets the users zoom for the above mentioned accessibility reason, so this fix might not work in those platform.

Lets connect on Twitter | LinkedIn for more web development related chats.

How to add a favicon to a website in a single line of HTML?

Kritika Pattalam Bharathkumar — Tue, 31 Aug 2021 03:32:39 +0000

Each one of us would login to websites or view multiple sites every single day in our life. And most of us are guilty of having more than one tab open in a browser eg: Facebook, Amazon, Google, Gmail, etc and even with so many tabs open we are still able to click on the correct tab by looking at that small icon on the browser tab which gives us an indication as to which site it is.

Have you ever wondered what is that small icon next to the browser title called?.

Well, that is favicon.

As part of this blog, we are going to see,

What is a favicon?
How to identify a favicon on a webpage?
How to add a favicon to a website with just a single line of HTML?.
Does favicon help with SEO?

What is favicon?

A favicon is a small icon associated with a website/page/application which is present next to the webpage title in a browser.

It helps users visually identify websites more easily within browser tabs, bookmarks, shortcuts, and address bars.
Example - When more browser tabs are open by the favicon user can easily identify the tab and click on it to view the webpage or the same goes for when there are more bookmarks are present etc.
With so many tabs/bookmarks open favicon makes it easier for users to identify the site by the image.

How to identify a favicon on a webpage?

The highlighted icon in circle is how it shows on the browser when the tabs are open.
The highlighted icon in the rectangle below is how it shows when the website is bookmarked. You can see a list of favicons for websites bookmarked here eg: Google, Facebook, Gmail etc

How to add favicon to a website?

<head>
    <title> My test site </title>
    <link rel="icon" type="image/png" href="images/favicon.png"/>
    .....
</head>

add a link tag in the head section of your webpage. [Refer to the above code piece.].

link tag should have the rel attribute value as

icon if just using it for favicon next to the browser title/bookmarks/address bars etc.
this same icon will be used when the webpage is saved as a shortcut to your desktop/laptop.

href="images/favicon.png"

add the path to the favicon as the href value
Square icons are expected to be used as favicon. Most used sizes are - 16x16, 32x32 or 48x48.
Back in the days, the image extension for favicon was .ico for old browsers, but in recent times mostly .png or svg type images are used.

Does favicon help with SEO?

The more important question to ask is does favicon helps with search engine optimization(SEO). No, it directly does not influence SEO, but it does help in creating brand awareness among the users visiting the site because most favicons are logos of the particular brand. Users are mostly seen to revisit pages that have the favicon present compared to the ones which does not. Because when people see a website without one, they tend to feel that it's not a genuine site.

Well, that is it for this blog, and by now you should know how to add a favicon to a website and its uses.

Follow me on Twitter | LinkedIn for more web development-related tips and posts. Feedbacks and suggestions are welcome.

Are you more of a Twitter person?. Then check out the short version of this blog in the below thread.

// Detect dark theme var iframe = document.getElementById('tweet-1423059971315535879-674'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1423059971315535879&theme=dark" }

How to add "SKIP TO MAIN CONTENT" to websites

Kritika Pattalam Bharathkumar — Sat, 21 Aug 2021 01:23:37 +0000

As part of this blog post let's see what is web accessibility, and how to add "skip to main content" link for web pages and why?.

Accessibility

As per w3.org

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web
contribute to the Web

For a normal user when he visits a page, he/she directly jumps to the section of the page where they want to read. But if we consider visually impaired users or someone who uses screen reader, the assistive device has to read through the entire page before they can reach a point which interests them.

Let's assume when a user lands on the page , the screen reader will read the entire navigation/header and then goes to the actual content of the page. The user reads through the first page of your website once, now he/she goes to the second page and the screen reader will again start reading the entire navigation for them before they can go to the main content. This is where "SKIP TO MAIN CONTENT" link comes in handy for them.

How to add "SKIP TO MAIN CONTENT" on the page

HTML

Inside the body tag add an anchor tag as the first element.
Add an id to the content you want the screenreader to jump/skip to. eg: 'main-content'
Add the same id as the href value to the anchor tag eg: 'main-content'

<body>
    <a class="skip-link" href="#main-content">SKIP TO MAIN CONTENT</a>
    <header> .....</header>
    <main id="main-content">
         Main Body Content .....
    </main>
    <footer>......</footer>
</body>

CSS

Add CSS to the link to hide it from view. [P.S Do not use display:none or visibility hidden because screen readers will not read the element. Our main focus is for the screen reader to read the link]
When the screenreader focuses on that element, make the element visible and also the screen reader will read the content inside the anchor tag . i.e "SKIP TO MAIN CONTENT" in our example.

.skip-link {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

.skip-link:active, .skip-link:focus {
    color: #000;
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto
}

References

Accessibility

Checkout my other blog posts

Please share your feedbacks and suggestions in the comments below.

Lets connect on Twitter | LinkedIn for more web development related tips & tricks.

2 Uses of concat method when working with arrays in JavaScript

Kritika Pattalam Bharathkumar — Thu, 12 Aug 2021 12:33:02 +0000

Let's see two ways in which concat() method can be used while working with arrays in JavaScript.

1) Merging two or more arrays

Let's now see how we can use the concat method to merge two given arrays, array 1 and array 2

const array1 = [1,2,3,4];
const array2 = [5,6,7];
// merge array 1 into array 2 and store it in a new variable 
const newMergedArray = [].concat(array1, array2);
console.log(newMergedArray); // [1, 2, 3, 4, 5, 6, 7]
console.log(array1); // [1, 2, 3, 4]
console.log(array2); // [5,6,7]

const newMergedArray = [].concat(array1, array2);

In the above line [] creates a new array and the concat methods combine both array1, array2. This can also accept more than 2 arrays for concatenation by just adding them one next to the other

const newMergedArray = [].concat(array1, array2, array 3, arrayN);

Another alternative for merging two arrays is below

const newMergedArray = array1.concat(array2, array 3, arrayN);

2) Flatten single level nested arrays

Let's assume there is a nested array as below, and we would want to flatten it in such a way that the output is [1,2,3,4,5,6,7,8], this can be achieved by using concat() method with the help of spread operator.

const array1 = [1,2,[3,4],[5,6], 7, 8];
const flattened = [].concat(...array1);
console.log(flattened); // [1,2,3,4,5,6,7,8]

P.S. The above code flattens just a single-level nested array.

References

Check out my other blog posts

Follow me on Twitter | LinkedIn for more web development tips.

How to display content in multiple columns using CSS

Kritika Pattalam Bharathkumar — Fri, 06 Aug 2021 00:21:15 +0000

In this article, we are going to see how or when orphans or widows property in CSS can be used in showing content as multiple columns.

[P.S : Refer the codepen given below to see visually how each property behaves]

Consider that you have a list of paragraphs and you want to show it in 3 or 4 columns and also decide where or how the content can break. Let's see the first step on how you can split the content in a simple way.

Simple steps on how to show content into multiple columns.

Create a div with multiple paragraph tags or a ul with multiple li tags
Add the below code snippet

columns: 3 // should be a positive integer. Here the paragraph will be split into 3 columns.

.split-3-columns {
  display: block;
  columns: 3; // value based on how many columns you want the content to split
  height: 250px; // height of the div as per your need
}

In the above example, columns property accepts a positive integer value.Eg: value 3 means, the paragraphs will be split into 3 columns in the browser.
When the content is split into multiple columns at times the layout or the paragraph might not look as expected.

Eg: You might end up seeing something below, where in the second column, the column begins with the last line of the paragraph and seeing it in just two line looks weird. In this case you might wish that when the content does break you might want to show the last three lines of a paragraph at the start of the column instead of just two lines. This is where widows come into the picture. The same goes for the paragraph for "It was popularised..." the first lines of the paragraph at the bottom of the column is in 2 lines, but you want to change how many lines of a paragraph are shown at the bottom of the column, this can be done using orphans.

Orphans

The orphans property sets the minimum number of lines that can stay by themselves at the bottom of a fragment(columns) before a fragmentation(column) break. The value must be positive and applies to block level container elements. This value typically affects the first line of the paragraph

In the below codepen example , orphan value has been set to 1. Hence if you check the paragraph "It was popularised in the 1960s", it breaks as a single line i.e if the paragraph at the bottom of the column is expected to break at the first few lines then it will make sure that atleast 1 line of paragraph is seen at the bottom of the column(fragment), if there is no enough space to break based on the orphan value then it will rather start in the next column.

.split-3-columns {
  display: block;
  orphans: 1; 
  columns: 3; // value based on how many columns you want the content to split
  height: 250px; // height of the div as per your need
}

Widows

The widow property sets the minimum number of lines that can stay by themselves at the top of a new fragment(column) after a fragmentation(column) break. The value must be positive and applies to block level container elements. This value is typically for the last line of a paragraph

In the below codepen example , widows value has been set to 5. Hence if you check the paragraph "Lorem Ipsum is simply dummy " you would see atleast there are 5 lines of text from the end of the parapgraph is shown at the top of the second new column/fragment.

.split-3-columns {
  display: block;
  widows: 5; 
  columns: 3; // value based on how many columns you want the content to split
  height: 250px; // height of the div as per your need
}

Browser support:

This is supported in all major browsers except for firefox in desktop and android firefox in mobile.
For more details refer the MDN docs given below in the references section.

References

Follow me on Twitter | LinkedIn for more web development related tips and posts.

4 Less used HTML tags and their uses

Kritika Pattalam Bharathkumar — Fri, 30 Jul 2021 00:42:29 +0000

As part of this blog we are going to see 4 less used HTML tags during web development

1) Refresh the browser or redirect the page

Did you know that you can refresh the browser automatically every few seconds with just a single line of code?.

Yes, this can be done using the http-equiv="refresh" attribute on the meta tag.

<meta http-equiv="refresh" content="30">

content value for 30 here means , the page will refresh every 30 seconds. Enter the value you want and see the page refresh every few seconds.
if you add a url value followed by the integer, the page will redirect to the given url after the specified time. eg:

<meta http-equiv="refresh" content="3;url=https://dev.to">

Note: Refresh might have accessibility concerns so use with caution.

2) Calculating with output tag

Output tag is used to represent the result of a calculation. In the below example we can calculate sum of two input fields and display it in the output field directly.

for attribute eg: for="a b"
is used to tell the output tag, which fields are used for the manipulation. In the below code pen for attribute value is the id of the two input fields.
using the name attribute value, the results from the oninput javascript is populated into the output tag. eg: output tag name value is result hence in javascript you can pass the result after calculation using result.value

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50"> +
    <input type="number" id="b" value="100"> =
    <output name="result" for="a b"></output>
</form>

3) base tag

This tag is very useful when your entire webpage points to the same base URL

The base HTML element specifies the base URL to use for all relative URLs in a document. There can be only one element in a document.

<head>
     <base href="https://kritika-pattalam.hashnode.dev/" target="_blank">
</head>
<body>
      <a href="2-simple-ways-you-can-truncate-text-using-css">Click on this url</a>
</body>

How to use it ?.

In the below codepen, I have specified the base href attribute to my hashnode main blog page. eg: https://kritika-pattalam.hashnode.dev/
In the anchor tag instead of specifying the absolute URL, I have used the relative URL of my blog post eg : 2-simple-ways-you-can-truncate-text-using-css And the entire blog URL is : https://kritika-pattalam.hashnode.dev/2-simple-ways-you-can-truncate-text-using-css

4) Template tag in HTML - The Content Template element

The HTML template tag permits you to declare pieces of HTML sections that can be cloned and embedded into the DOM using script.
The contents of the template tag are not added to the DOM on page load, they are only inserted based on some user interaction. Eg: Lets say there is an image inside the template tag, the image does not get downloaded until the template is cloned and inserted into the DOM structure.

Leave me a comment below if you know about other rarely used HTML tags.

References - mdn docs

Lets connect on Twitter | LinkedIn for more web development related chats.