DEV Community: Umapreethi Santhanakrishnan

What are var, let, const and their difference?

Umapreethi Santhanakrishnan — Mon, 06 Dec 2021 04:57:33 +0000

In JavaScript, we can declare variables using three keywords var, let and const. Let’s see about the scope and difference of these three variable declarations.

All the three keywords are used to declare a variable. var is ES5, where let and const are introduced in ES6.

Variable Declarations

Let’s see what is a variable declaration.

Using var, let and const you can declare varaible.

var x = 10; // variable decalartion
let y = 11;
const z = 100;

What happens if we declare the variable without a value.

var x;
console.log(x); // undefined
let y;
console.log(y); // undefined
const z; // Uncaught SyntaxError: Missing initializer in const declaration

If we want to update the variable value, we don’t need to redeclare it again. We can only update var and let, where const can be updated. If we try to redeclare it, will produce a type error.

let can be reassigned, but cannot be redeclared in the same scope.
const cannot be reassigned and cannot be redeclared in the same scope.
var can be reassigned and redeclared.

x = 15;// reassigning the variable var x
y = 20; // reassigning the variable let y
z = 200; // Uncaught TypeError: Assignment to a constant variable
var x = 20; // when you give assign different values to same varaible browser will accept the latest value when declared in var
let y = 30; // Uncaught SyntaxError: Identifier 'y' has already been declared

Since, we can redeclare the variable in var keyword, for a small number code there won’t be an issue in finding if we redeclare it. But when in large number of lines of code, it will mess up the work. That’s why most of the developers use let and const.

use let when plan to reassign the value to a variable.
use const when planned to not reassigning the values to a variable.

Learn more

Javascript , CSS Clock

Umapreethi Santhanakrishnan — Tue, 07 Sep 2021 19:17:13 +0000

Creating Html and Css for Clock

Create a div for clock and create three div for the hour, minute and second hand.

 HTML
 <div class="body">
        <h1>Clock</h1>
        <div class="clock">
            <div class="hand hour"></div>
            <div class="hand min"></div>
            <div class="hand sec"></div>
        </div>
 </div>

Use CSS to Create the Clock background

.clock {
    max-width: 500px;
    border: 3px solid white;
    margin: 0px auto;
    margin-top: 100px;
    height: 500px;
    border-radius: 50%;
    position: relative;
}

Use CSS to create the three hour, minute and second hand

.hand {
    width: 50%;
    height:4px;
    margin:5px;
    background-color: #fff;
    position: absolute;
    top:50%;
    transform: rotate(90deg);
    transform-origin: 100%;
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1,2.7,0.58,1);
}

Check transition property for more information.

Js Code

First select the second hand to make process. new date() function will give the current date with time. getSeconds() function will give the current seconds, we have to convert it to the degree, once it is converted apply it to the hand using css. Follow the same procedure for minute hand and hour hand. Use setInterval to call the function every 1ms.

const secondHand = document.querySelector(".sec");
const minuteHand = document.querySelector(".min");
const hourHand =  document.querySelector(".hour");

function setDate(){
    const now = new Date();
    const seconds = now.getSeconds();

    //seconds
    const secondDeg = ((seconds / 60) * 360) + 90;
    secondHand.style.transform = `rotate(${secondDeg}deg)`;

    // minutes
    const minute = now.getMinutes();
    const minDeg = ((minute / 60) * 360) + 90; 
    minuteHand.style.transform = `rotate(${minDeg}deg)`;

    // hours
    const hour = now.getHours();
    const hourDeg = ((hour / 12) * 360) + 90; 
    hourHand.style.transform = `rotate(${hourDeg}deg)`;
}
setInterval(setDate, 1000);

Changing Background Color in JS(project for beginners)

Umapreethi Santhanakrishnan — Sun, 21 Mar 2021 20:53:39 +0000

This is an easy project for beginners.

Step 1: Create a basic HTML and CSS with a button and give a default background color.

<div id="background">
    <h1>Changing Background Color</h1>
    <button onclick="clickFunction()">Click Me</button>
</div>

Step 2: Add a event listener or onclick function to button.
Step 3: Create an Array of colors and once button is clicked the background will change. Use Math.random() to pick color randomly.

function clickFunction()
 {
    let bg = document.getElementById('background');
    console.log(bg);
    let colors = ["red", "green", "blue", "yellow"];

    const colorIndex = parseInt(Math.random()*colors.length);
    bg.style.backgroundColor = colors[colorIndex];
 }

Difference between display:none and visibility:hidden

Umapreethi Santhanakrishnan — Thu, 04 Feb 2021 04:13:39 +0000

The display property helps us to specify the display behavior of an element.

Difference between `display:none` and `visibility:hidden`

We can hide elements using both properties but there is a difference between them.

Let's say we have three balls in red, green and blue color.

Css code

If I set display:none for the green ball.

#green {
  background-color:green;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: none;
}

Now, our green ball is removed, but it still exists on HTML structure and display:none property makes it look like deleted. The blue ball moved up and took the green ball place.

Let's see what happen when we set `visibility:hidden` for the same green ball.

#green {
  background-color:green;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  visibility: hidden;
}

visbility:hidden property does not remove the green ball, makes it invisible

HTML elements

Umapreethi Santhanakrishnan — Wed, 27 Jan 2021 04:43:17 +0000

HTML describes the structure of the website.When creating the web page, you can add tags(Markup).

Structural Markup
Semantic Markup

Structural Markup: the elements that we can use to describe the headings and paragraphs.
Semantic Markup: the elements which provides more information and helpful for SEO purposes.

HTML elements:

<h1></h1> to <h6></h6>. The browser displays the heading in different sizes. <h1> is the largest and <h6> is the smallest.
<p></p> used to display the paragraph tag.
<b></b> display text in bold.
<strong></strong> used to display the content which has importance. By default, the browser displays the content in bold.
<i></i> display text in italics.
<em></em> used to emphasize the content(show it's importance). By default, the browser displays the content in italics.
<sup></sup> used to contain characters that should be superscript such raising power of 2.
<sub></sub> used to contain characters that should be subscript.
<br /> break tag helps to show each new paragraph or heading on a new line.
<hr /> gives a horizontal rule between sections.
<blockquote></blockqoute> used for longer quotes.
<q></q> used for shorter quotes.
<abbr></abbr> - Abbreviation.
<acronym></acronym> - Acronym.
<cite></cite> used to indicate where the citation is from.
<address></address> used to indicate the address and displays the content in italics.
<ins></ins> used to show the content that has been inserted to the document.
<del></del> used to show the content that has been deleted from the document.
<s></s> used to show the content that is no longer relevant.

Empty Elements:
There are few elements that don't have a child node.
They are:
<area>,<base>,<br>,<col>,<embed>,<hr>,<img>,<input>,<keygen>,<link>,<meta>,<param>,<source>,<track>,<wbr>

Palindrome checker using Html,Css,Js

Umapreethi Santhanakrishnan — Mon, 25 Jan 2021 21:42:33 +0000

Sixth day of my challenge.

Palindrome checker:

A palindrome is a word, number, phrase, or other sequence of characters which reads the same backward as forward, such as madam or racecar or the number 10801.

Steps:

Type - 1:

Get the input value using DOM methods.
Convert the string to lowercase.
Create a empty variable to store the reverse string.
Using for loop, store the values to the variable.
Check the reverse string and input value are equal using if condition.
- If both are equal, then display It is a Palindrome
- If both are not equal, then display It is not a Palindrome

const inputVal = document.getElementById("inputVal").value;
const input = inputVal.toLowerCase();
console.log(input);
let reverseVal = "";
for (let i= input.length-1; i>=0; i--) {
     reverseVal += input[i];
 }
console.log(reverseVal);

//Condition to check the palindrome
  if (reverseVal == input) {
    result.innerHTML = "It is a Palindrome!!!";
  } else {
    result.innerHTML = "It is  not a Palindrome";
  }

Type - 2:

Follow first two steps from type-1.
Split the inputValue using split().
Then, reverse the inputValue using reverse() function.
Then join the inputValue using join() function.
Finally follow the last step as in Type-1(check the palindrome using if condition).

function palChecker(event) {
  event.preventDefault();

  const inputVal = document.getElementById("inputVal").value;
  const input = inputVal.toLowerCase();
  console.log(input);

  const split = input.split("");
  let reverse = split.reverse();
  let revWord = reverse.join("");
  const result = document.getElementById("result");

  //Condition to check the palindrome
  if (revWord == input) {
    result.innerHTML = "It is a Palindrome!!!";
  } else {
    result.innerHTML = "It is  not a Palindrome";
  }
}

References:

Accordion using Html,Css,Js

Umapreethi Santhanakrishnan — Mon, 25 Jan 2021 00:24:24 +0000

Fifth day of my 100 days of code.

Html Code:

We have to create buttons and give contents below in div.

<h1>Accordion</h1>
    <h3>Click the button</h3>
    <div class="accordion">
      <button type="button" class="acc">What is Html?</button>
      <div class="panel">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

    <div class="accordion">
      <button type="button" class="acc">What is CSS?</button>
      <div class="panel">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

Js code:

Access your button by using Classname and add eventlistener 'click' to all button.
Access your content by using nextSiblingElement and write the condition to display the content.

let acc = document.getElementsByClassName('acc');

for(let i=0; i< acc.length; i++){
    acc[i].addEventListener('click', function() {
        this.classList.toggle("active");
        let panel = this.nextElementSibling;
        if(panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    })
}

Css Code:

Add the plus and minus sign using before property.

body {
  height: 100vh;
  background-color: #eee;
}

button {
  text-align: left;
  padding: 10px;
  margin-right: 5px;
  cursor: pointer;
  width: 50%;
  border-color: 1px solid #ccc;
}

button::before {
  content: "+";
  padding: 10px;
}

.active {
  background-color: #2c2b2b;
  color: #fff;
}
.active::before {
  content: "-";
  padding: 10px;
}

.panel {
  display: none;
  width: 50%;
 padding-left: 10px;
}

Creating Tabs using Html,css,js

Umapreethi Santhanakrishnan — Sun, 24 Jan 2021 05:09:03 +0000

Fourth day of 100 days of code.

HTML Code:

 <div class="tabs">
      <button id="tab1" onclick="open(event, 'html')" type="button">
        HTML
      </button>
      <button id="tab2" onclick="open(event, 'css')" type="button">
        CSS
      </button>
      <button id="tab3" onclick="open(event, 'js')" type="button">
        JS
      </button>
    </div>
    <div id="cont"></div>

Index.js

function open(event, skill) {
  event.preventDefault();

  const content = document.getElementById("cont");
  content.classList.add("content");
  if (skill == "html") {
    content.innerHTML =
      "HTML is the standard markup language for Web pages.With HTML you can create your own Website.";
  }
  if (skill == "css") {
    content.innerHTML =
      "CSS is the language we use to style an HTML document.CSS describes how HTML elements should be displayed.";
  }
  if (skill == "js") {
    content.innerHTML =
      "JavaScript is the worlds most popular programming language.JavaScript is the programming language of the Web.";
  }
}

Through onclick event, pass the skill and if the skill matches the button value, update your innerHTML.

Digital Clock using HTML,CSS,JS

Umapreethi Santhanakrishnan — Fri, 22 Jan 2021 23:54:39 +0000

Third day of my 100 days of code.
Digital Clock:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital clock</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <h1>Digital Clock</h1>
    <div id="clock">10:24:35</div>
    <script src="index.js"></script>
</body>
</html>

We need to add a div with a time which can be replaced by .innerHTML

JS Code:

function showTime() {
    let today = new Date();
    let hours = today.getHours();
    let minutes = today.getMinutes();
    let seconds = today.getSeconds();
    let period = 'AM';
    console.log(today);
    console.log(hours);
}
showTime();

Create a function showTime() and new Date() will give the current date. Get hours, minutes and seconds using function and check the current time in console.The hours will be displayed in 24 hour format.

const time = `${hours} : ${minutes} : ${seconds}  ${period} `;
    document.getElementById('clock').innerHTML = time;

Display the time in UI by replacing the div value.Now the time is displayed in 24 hr format but each time for updating the time, need to reload the page.

setInterval(showTime,1000);

For that purpose we are using setInterval.This function evaluates the function for every 1s.
To display in 12 hr format set the condition:

// Set the clock in 12 hr format
    // If hours is equal to 0 at midnight, we set to 12, and if greater than 12, we will
    //subtract it from 12.
    if (hours == '0')
    {
        hours = 12;
    }
    if (hours > 12) {
        hours -= 12;
        period = 'PM';
    }

    // when the hrs is less than 10, we are concantenate with 0, otherwise leave it hrs.
    hours = hours <10 ? `0${hours}` : hours;
    minutes = minutes <10 ? `0${minutes}` : minutes;
    seconds = seconds <10 ? `0${seconds}` : seconds;

To view the full code, check Github

To-do list App using HTML,CSS,JS

Umapreethi Santhanakrishnan — Thu, 21 Jan 2021 21:43:59 +0000

Second day of my 100 days of code.
I created a To-do list app using HTML,CSS,JS.

The user can add a task, mark the task as checked and delete the task.
Before creating the to-do list app, create the logic and write it down.

Step 1: Create a input text box and add the button with onclick function.

  <h1>todo's</h1>
    <div class="to-do" id="to-do">
      <input type="text" id="content" />
      <button onclick="newElement()" class="addBtn">Add</button>
    </div>

Step 2: To check the onclick function is working on button, get the input value from user using document.getElementById() and check it using console.log().

const inputVal = document.getElementById("content").value;
console.log(inputVal);

Step 3: Once we got input from the user, we have to display it in the UI. For displaying the input value in UI, create a div with id/class and append the list to the div.

<div id="myList"></div>

In index.js ,

 // Creating a list
  const list = document.createElement("li");
  const text = document.createTextNode(inputVal);
  list.appendChild(text);
  const myList = document.getElementById("myList");

document.createTextNode creates a new TEXT node. We are creating the node for appending the child node.

So far, we can create a to-do list, to mark the task as checked and delete the task please refer to the Github resource

Animated skill bar using html,css,jquery

Umapreethi Santhanakrishnan — Wed, 20 Jan 2021 21:24:12 +0000

Hi everyone,

I am starting my 100 days of code challenge today.
I am going to create a small functionality or project on daily basis.

Day 1 - Animated Skill bar

Check the code - Github

Creating localhost using Node.js and Express

Umapreethi Santhanakrishnan — Fri, 15 Jan 2021 00:36:14 +0000

What is Node.js?

Node.js uses to create a backend using javascript. In a simple way, Node.js is a javascript complier/interpreter which is used to run javascript outside of the browser.We can use Node.js to create Server-side applications(API, Web server) and Desktop applications like Atom.
If Node is not installed in your computer, check this link to download.
The most useful feature of Node is that it comes pre-installed with package manager called NPM(Node Package Manager). There are thousands of packages in Node and NPM gives access to all of the packages. One of the package we need for setting up localhost is Express.

To install a package using the command line:

npm install package-name

Steps to create a localhost:

Create a server.js file in your root directory.
Install Express using the command

npm install express

In server.js file,

// Express to run server and routes
const express = require('express');
// set up an instance of app
const app = express();

// Initialize the main project folder(remember to save all html,css,js files into this folder)
app.use(express.static("folder_name"));

// Initialize the route with callback function
app.get("/", sendData);

// Callback function
function sendData(request,response) {
    response.sendFile(path.join(__dirname + '/index.html'));
}

// Initialize port
 const port = 3000;

// Spin up the server
  const server = app.listen(port,listening);
  function listening() {
  console.log(`running in localhost: ${port}`);
}

require() function is used to import the express module.
To learn more about Express:
Express

DEV Community: Umapreethi Santhanakrishnan

What are var, let, const and their difference?

Variable Declarations

Javascript , CSS Clock

Creating Html and Css for Clock

Js Code

Changing Background Color in JS(project for beginners)

Difference between display:none and visibility:hidden

Difference between display:none and visibility:hidden

Css code

Let's see what happen when we set visibility:hidden for the same green ball.

HTML elements

HTML elements:

Palindrome checker using Html,Css,Js

Palindrome checker:

Steps:

Type - 1:

Type - 2:

References:

Accordion using Html,Css,Js

Html Code:

Js code:

Css Code:

Creating Tabs using Html,css,js

HTML Code:

Digital Clock using HTML,CSS,JS

HTML Code:

JS Code:

To-do list App using HTML,CSS,JS

Animated skill bar using html,css,jquery

Day 1 - Animated Skill bar

Creating localhost using Node.js and Express

What is Node.js?

Difference between `display:none` and `visibility:hidden`

Let's see what happen when we set `visibility:hidden` for the same green ball.