DEV Community: Akshay R

Recursion - Data Structures and Algorithms

Akshay R — Sun, 15 Aug 2021 17:43:04 +0000

I am planning to write a series of posts covering complete Data Structures and algorithms in beginner friendly way. I will be using java to explain the examples.

In Data Structures and Algorithms Recursion is one of the first concept which is very important to understand, since it makes you think in cycles.Its like a fractal but it should have an end.

Example Problems on Recursion:
https://github.com/akshayrak/Data-Structures-and-Algorithms/tree/main/src/recursion

Important points to remember in Recursion:

1.Recursive function is a function that calls itself.

public static int factorial(int n) {
        return n*factorial(n-1);
    }

2.Recursive function should cover all the conditions that could arise.

public static int factorial(int n) {
        if(n==1||n==0) {
            return 1;
        }
        return n*factorial(n-1);
    }

3.We should also take care of exceptional situations also.

public static int factorial(int n) {
        if(n==1||n==0) {
            return 1;
        }
        if(n<0) {
            return -1;
        }
        return n*factorial(n-1);
    }

4.It uses Stack Memory to remember the functions it has called, so once the last function is executed, it keeps popping out the functions in Last in First out order.
Note: Stack is one of the data structure that follows first in last out or last in first out, just think about stack of books

5.All the problems that can be solved using Recursion can also be solved using iteration, iteration is efficient when you compared to space and time complexity of recursion but recursion is easy to code than iteration.

public static int factorial(int n) {
                int count = 1;
        for(int i = 2;i<=n;i++){
                   count = count*i;
           }
           return count;
    }

6.So we can use recursion only when code clarity is more important than the time and space complexity, so we wont be using recursion in time critical cases (devices where life depends on time) and low storage cases (low stack memory devices).

7.We commonly use recursion in trees.

8.Recursion can be very slow if not implemented properly.

Let me know if I need to add anything else or in case of any doubts comment down below

Photo by Mika Korhonen on Unsplash

Learn CSS by Playing Games - No Nightmares

Akshay R — Tue, 10 Aug 2021 18:15:24 +0000

Every frontend developers nightmare is not able to positioning or align an element where it needs to be and when you try to do something UI starts to break.

Flexbox and CSS Grid Layout are really good and easy way to solve the issues related to aligning, position and bringing responsiveness to the webpage.

But the problem is we humans can't remember all the properties of Flexbox and Grid, but we can train ourselves to remember by doing it again and again. But it is no fun and we often get bored and google each and every time to figure out how a text is aligned.

What if there is a way to master CSS in a fun way, what if it was a game. Most of the developers faced same issue when it comes to tutorials, they are no fun. So some of the smart developers came up with some of the following Games to master CSS.

Here is the list:

Flexbox Froggy - Game to master Flexbox
Flexbox Defense - Game to master Flexbox
CSS Diner - Game to master CSS selectors
Flexbox Zombies - Game to master Flexbox (Must Try)
Grid Garden - Game to master CSS Grid Layout

There is one more game to master CSS Grid but I didn't try since was little bit priced high

Grid Critters - Game to master CSS Grid

These are some of the quick list of CSS games, there are lot of such games to master many of the technology.
Let me know if I missed any.

Photo by Pankaj Patel on Unsplash

This Is All The HTML You Need To Know

Akshay R — Wed, 04 Aug 2021 06:24:02 +0000

Everyone who are into front-end web development will have this question, "How much HTML should I know?", well here is the answer.
There are some tags that are most commenly used, which can get your 90% of the job done, so if you just know these 90%, rest 10% you can google.

So just go through the below code and if you could understand it your most of the work is done

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Akshay">
        <meta name="description" content="mostly used html tags">
        <meta name="keywords" content="html, complete html, beginners">
        <title>Title</title>
    </head>
    <body>
        <h1>This is h1</h1>
        <h2>This is h2</h2>
        <h3>This is h3</h3>
        <h4>This is h4</h4>
        <h5>This is h5</h5>
        <h6>This is h6</h6>
        <br/>
        horizontal line 
        <hr/>
        <!-- This is a comment which can only be seen in code,browsers ignores it, useful for the developers to understand the code better -->
        <p>This is a paragraph tag</p>
        <b>this is bold</b>
        <i>Italic</i>
        <u>underlined</u>
        <sub>subscript</sub>
        <sup>superscript</sup>
        <header>
            <nav></nav>
        </header>
        <main>
            <article>
                <section>
                    <img width="100" height="100" src="http://link" alt="image text" />
                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                    <ol type="A">
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>  
                    </ol>
                    <dl>
                        <dt>Item1</dt>
                        <dd>description of item1</dd>
                        <dt>Item2</dt>
                        <dd>description of item2</dd>
                    </dl>
                    <table>
                        <thead>
                            <caption>Table Title</caption>
                            <tr>
                                <th>title1</th>
                                <th>title2</th>
                                <th>title3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                            <tr>
                                <td colspan="2">item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                        </tbody>
                    </table>
                    <hr>
                    <span>text1</span>
                    <span>text2</span>
                    <hr>
                    <div>text1</div>
                    <div>text2</div>
                </section>
                <section>
                    <aside>
                        <video src="somevideo.mp4" loop poster="thumbnail.jpg" autoplay controls width="100" height="100">some video text</video>
                        <iframe src="http://link" width="100" height="100" frameborder="0" allowfullscreen></iframe>
                    </aside>
                    <form action="">
                        <label for="">something</label>
                        <input type="text" value="something" placeholder="something" >
                        <input type="password">
                        <input type="date">
                        <input type="email">
                        <input type="range">
                        <input type="file">
                        <input type="checkbox">
                        <input name ="gender" type="radio" value="male">
                        <input name ="gender" type="radio" value="female">
                        <select name="itemSelect" id="itemSelect">
                            <option value="item1">item1</option>
                            <option value="item2">item2</option>
                            <option value="item3">item3</option>
                            <option value="item4">item4</option>
                        </select>
                        <textarea name="textarea" id="" cols="30" rows="10">some text</textarea>
                        <input type="submit">
                        <button type="submit">click here</button>
                    </form>
                </section>
            </article>
        </main>
        <footer>
            <a href="http://google.com">google</a>
            <a href="http://google.com" target="_blank">google in new tab</a>
        </footer>
    </body>
</html>

If you didn't understand something, just go through the explanation.

Explanation:

<html></html>

It is the container for all the html tags

<head></head>

It is used to represent head of the document, this is where all the metadata goes

<meta>

It is used to inform the browsers and web crawlers what the document is about and how it need to be represented, meta tags are really important for for SEO purposes

<title></title>

It is used to declare the title of the webpage

<body></body>

This where the actual content of the webpage resides

        <h1>This is h1</h1>
        <h2>This is h2</h2>
        <h3>This is h3</h3>
        <h4>This is h4</h4>
        <h5>This is h5</h5>
        <h6>This is h6</h6>

These are the tags used to write the headings and sub heading in the webpage, h1 is the main or bigger heading h6 is the smaller

 <br/>

It is a break tag used to give a one line break and it is a block level tag

<hr/>

It is a horizontal line tag and it is also a block level element

<p>This is a paragraph tag</p>

This tag is used to write a paragraph text, for example in a blog post we can use p tag for writing main content of the blog post.

        <b>this is bold</b>
        <i>Italic</i>
        <u>underlined</u>

These tags are used to format text into bold, italic and underlined, we can use all three of them on a single text

        <sub>subscript</sub>
        <sup>superscript</sup>

These are subscript and superscript
subscript Example: H2O
superscript Example: a²+b²

        <header>
            <nav></nav>
        </header>

header and nav tags are used to create a header and navigation bar

<main></main>

It is to write the main content of the webpage

<article></article>

It is used to write a article, may be a blog post

<section></section>

It is used to create a section, most of the time we need more than one section to write or display on an webpage

<aside></aside>

This is used to display content that is not directly related to the main objective of the webpage, one example might be for displaying advertisement we can use aside tag

                    <ul>
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>
                    </ul>
                    <ol type="A">
                        <li>item1</li>
                        <li>item2</li>
                        <li>item3</li>  
                    </ol>
                    <dl>
                        <dt>Item1</dt>
                        <dd>description of item1</dd>
                        <dt>Item2</dt>
                        <dd>description of item2</dd>
                    </dl>

ul is used to display unordered list, it displays the list in bullet points
li is nothing but a list item, which explains itself
ol is used to display ordered list, it displays list in numerical order or alphabetical order
dl is used to display a descriptive list
dt is a descriptive term
dd is a descriptive description for descriptive term

                 <table>
                        <thead>
                            <caption>Table Title</caption>
                            <tr>
                                <th>title1</th>
                                <th>title2</th>
                                <th>title3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                            <tr>
                                <td colspan="2">item1</td>
                                <td>item2</td>
                                <td>item3</td>
                            </tr>
                        </tbody>
                    </table>

`
note: will be explained

Let me know if there is something I missed.

Resources:

Photo by Pankaj Patel on Unsplash

Simple Calculator App in React

Akshay R — Thu, 22 Jul 2021 18:23:59 +0000

Simple Calculator is the best way to build a good understanding of react concepts. Let me know if there is any best way in which the same code can be implemented
So please do comment on what you think.

Following are the links to source code:
GitHub: https://github.com/akshayrak/react-simpl-calculator1234.git
StackBlitz: https://stackblitz.com/edit/react-simpl-calculator1234?file=src/App.js

Application link: https://react-simpl-calculator1234.stackblitz.io

I have started it by creating a simple form

<form>
        <input
          type="text"
          onChange={e => setInput(e.target.value)}
          value={input} 
         />
</form>

we can use useState hook to maintain the state of the form

const [input, setInput] = useState("0")

Default value will be zero

For the buttons we can create a variable and put all the symbols in an array

 const symbols = [
    'c',
    '<-',
    '%',
    '/',
    '7',
    '8',
    '9',
    'X',
    '4',
    '5',
    '6',
    '-',
    '1',
    '2',
    '3',
    '+',
    '.',
    '0',
    '='
  ];

so now we can use 'map' method in js to loop through all the elements and return a array of button elements

<div>
        {symbols.map((symbol, i) => (
          <button key={i} onClick={()=>handleSymbol(symbol)}>
            {symbol}
          </button>
        ))}
</div>

At this point it should look somewhat like this

This is all the UI we want, now we can implement the logic for calculations.

whenever a button is clicked "handleSymbol" method is triggered and the respective "symbol" is passed as an argument. Now we need to check what that symbol is and what should we do with it.

So here I am using "input" state for maintaining the state of the form and also displaying the result in the same TextField. so we just need to set the final answer to "input".

Now to get the answer we need to do few checks,
check1: whether to Concatenate or to backspace or to delete or to calculate
This can be done simply using if else statements

if (symbol != 'c' && symbol != '<-' && symbol != '=') {
//concatenate
}else if(symbol == 'c') {
//delete
} else if (symbol == '<-' && input != '0'&&input!='') {
//backspace
} else if (symbol == '=') {
//calculate
}

if it is Concatenate than we need to check what it is

if (symbol == '.') {
        let temp = input.match(/[\d\.]+|\D+/g);//separate the string and the integer
        temp==null?temp=["0"]:null  //sets 0 if temp is null

         //checks whether dot exists or not in the last element (we can't have two dots in the same number)
        if (!temp[temp.length - 1].includes('.')) {
        //checks whether dot is typed after a symbol
          if (temp[temp.length - 1] == '+' ||
          temp[temp.length - 1] == '-' ||
          temp[temp.length - 1] == 'X' ||
          temp[temp.length - 1] == '/' ||
          temp[temp.length - 1] == '%') {
            //if it is typed after a symbol than it adds '0.' (so that it looks like a number)
            setInput(prev => prev + '0.')
        }
          else {
            setInput(prev => prev + symbol)
          }
        }
      }

if its not a don't and if its some thing else than

else{
 let temp = input.match(/[^\d]+|\d+/g);//separate the string and the integer
        temp==null?temp=["0"]:null //sets 0 if temp is null

        //these two if blocks checks whether the previously typed and current typed are operators (you can't put two operators next to each other)
        if (
          temp[temp.length - 1] == '+' ||
          temp[temp.length - 1] == '-' ||
          temp[temp.length - 1] == 'X' ||
          temp[temp.length - 1] == '/' ||
          temp[temp.length - 1] == '%'
        ) {
          //checks whether its a symbol or number
          if (
            symbol == '+' ||
            symbol == '-' ||
            symbol == 'X' ||
            symbol == '/' ||
            symbol == '%'
          ) {
            //if symbol than remove the previous one and concatenate the new one
            setInput(prev => prev.slice(0, -1));
            setInput(prev => prev + symbol);
          } else {
           //if number than concatenate
            setInput(prev => prev + symbol);
          }
        } else {
         //if previous one is a number than concatenate the current one too
          setInput(prev => prev + symbol);
        }
      }

now if its a backspace or a delete than its simple

 else if (symbol == 'c') {
      setInput('0');
    } else if (symbol == '<-' && input != '0'&&input!='') {
      setInput(prev => prev.slice(0, -1));
    }

if its an equals symbol than we need to calculate

else if (symbol == '=') {
     let temp = input.match(/[^\d]+|\d+/g);//separate the string and the integer
        temp==null?temp=["0"]:null //sets 0 if temp is null

//checks if the late typed character is a operator
      if (
        temp[temp.length - 1] == '+' ||
        temp[temp.length - 1] == '-' ||
        temp[temp.length - 1] == '/' ||
        temp[temp.length - 1] == 'X'
      ) {
//if its a operator than remove
        temp.pop();
      }

//Now we are using simple BODMAS rule to calculate


//if % exists than divide the number by 100 and multiply with the following number
      while (temp.includes('%')) {
        const index = temp.indexOf('%');
        const num1 = parseFloat(temp[index - 1]);
        let tempResult = (num1 / 100).toFixed(2).toString();
        temp.splice(index, 1, 'X');
        temp.splice(index - 1, 1, tempResult);
      }

//if '/' exists than divide the two numbers and remove them and replace the result
      while (temp.includes('/')) {
        const index = temp.indexOf('/');
        const num1 = parseFloat(temp[index - 1]);
        const num2 = parseFloat(temp[index + 1]);
        const tempResult = (num1 / num2).toFixed(2).toString();
        temp.splice(index, 1);
        temp.splice(index, 1);
        temp.splice(index - 1, 1, tempResult);
      }

//if 'X' exists than multiply the two numbers and remove them and replace the result
      while (temp.includes('X')) {
        const index = temp.indexOf('X');
        const num1 = parseFloat(temp[index - 1]);
        const num2 = parseFloat(temp[index + 1]);
        let tempResult = (num1 * num2).toFixed(2).toString();
        temp.splice(index, 1);
        temp.splice(index, 1);
        temp.splice(index - 1, 1, tempResult);
      }


//if '+' exists than add the two numbers and remove them and replace the result
      while (temp.includes('+')) {
        const index = temp.indexOf('+');
        const num1 = parseFloat(temp[index - 1]);
        const num2 = parseFloat(temp[index + 1]);
        let tempResult = (num1 + num2).toFixed(2).toString();
        temp.splice(index, 1);
        temp.splice(index, 1);
        temp.splice(index - 1, 1, tempResult);
      }

//if '-' exists than subtract the two numbers and remove them and replace the result
      while (temp.includes('-')) {
        const index = temp.indexOf('-');
        const num1 = parseFloat(temp[index - 1]);
        const num2 = parseFloat(temp[index + 1]);
        let tempResult = (num1 - num2).toFixed(2).toString();
        temp.splice(index, 1);
        temp.splice(index, 1);
        temp.splice(index - 1, 1, tempResult);
      }

//result can be set to input so that we can show it in the same textBox in which we type
      setInput(temp[0]);
    }

I have included most of the explanation as comments, so in case if you don't understand let me know.

And if you can make it better let me know as well.

Thanks
Akshay

ToDo List App for Beginners in React

Akshay R — Mon, 19 Jul 2021 17:29:50 +0000

Todo list is a simple list of things that you might want to do, basically which can be written on a piece of paper. ToDo list app is really good and simple way to understand the fundamentals of React.

In this post let's see how it is done, before that these are the links of source code and app on StackBlitz.

GitHub link: https://github.com/akshayrak/react-todo-app.git
StackBlitz codeLink: https://stackblitz.com/edit/react-todo-app-1234?file=src/components/todo.js
Application link: https://react-todo-app-1234.stackblitz.io/?inputTodo=hello

import React, { useState } from 'react';

const Todo = () => {

  const [input, setInput] = useState();
  const [items, setItems] = useState([]);

  const addHandler = e => {
    e.preventDefault();
    if(input){
      setItems([...items,input]);
      setInput('')
    }
  }

  const deleteHandler = (ele) =>{
    setItems(items.filter((x)=>x!==ele))
  }

  return (
    <div>

      <form onSubmit={addHandler}>
        <input
          type="text"
          id="inputTodo"
          name="inputTodo"
          placeholder="type a task"
          onChange={(e) => setInput(e.target.value)}
          value={input}
        />
        <button type="submit">Add</button>
      </form>

      <div>
        {items.map((ele, i) => {
          return (
            <div key={i}>{ele}
             <button onClick={()=>deleteHandler(ele)}>X</button>
            </div>
        )})}
      </div>

    </div>
  );
};
export default Todo;

We start it with importing React and useState hook, and create a functional component.

For taking input create a small form with a submit button

<form onSubmit={addHandler}>
        <input
          type="text"
          id="inputTodo"
          name="inputTodo"
          placeholder="type a task"
          onChange={(e) => setInput(e.target.value)}
          value={input}
        />
        <button type="submit">Add</button>
      </form>

we create input state for holding the single todo

const [input, setInput] = useState();

and items for holding the entire todo list

const [items, setItems] = useState([]);

so in the form we assign input to value attribute and set the onChange event to setInput() using event.target.value

onChange={(e) => setInput(e.target.value)}
value={input}

when ever the form is submitted we submit it to addHandler method

onSubmit={addHandler}

In the addHandler method we check whether something is typed or not so that we don't create empty items, since we have assigned the value of the input tag to 'input' state we can do this check.

const addHandler = e => {
    e.preventDefault();
    if(input){
      setItems([...items,input]);//spreed operator for existing items
      setInput('')//set the input to empty string, so that input box is empty after adding the item
    }
  }

Now we create some more code for displaying and deleting the items with the help of map method

<div>
        {items.map((ele, i) => {
          return (
            <div key={i}>{ele}
             <button onClick={()=>deleteHandler(ele)}>X</button>
            </div>
        )})}
      </div>

    </div>

Once we click the delete button it triggers the deleteHandler function by passing the element as parameter in which we delete the item just by filtering out the sent element and setting the remaining items to setItem()

const deleteHandler = (ele) =>{
    setItems(items.filter((x)=>x!==ele))
  }

That is the complete app, let me know if there is any better way to implement the same.

Image used in this post is a Photo by Glenn Carstens-Peters on Unsplash