DEV Community: ARUN

useEffect Hook💥 in React

ARUN — Tue, 24 Oct 2023 13:01:49 +0000

React Hooks are a feature introduced in version 16.8 of React. They allow function components to have access to state and other React features, such as lifecycle methods, without the need for class components.

Today we are seeing about useEffect hook in react.

The useEffect Hook allows you to perform side effects in your components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

<function> — inside the function we write a callBack function.

<dependency> — inside the dependency we should give a dependency array.

the below example have contents in app.js

import './App.css';
import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(()=>{
    // this hook will run at the time when our component mounts.

    console.log('the count is',count);

    // this is optional return statement, is that what will happen when
    // the component unmounts.

    return () =>{
        console.log('the component was unmounted')
    }

    // what we are using inside of useEffect we must metion that 
    // inside of dependency array. 
    // the code inside the useeffect will execute once, aftee that it 
    // won't execuded when we forget to give values inside the dependency array

  }, [count]);

  return (
    <div className='App'>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
    </div>
  );
}

export default App;

Here we should know that how useEffect works, it will execute the code at the component mounts after that at every time we update the values inside the dependency array the component will destroy and rebuild again,
that is the return function inside the useEffect hook will execute at the time.

The output for this above code will be,

you will see the changes in the console by inspecting that webpage

the console will be,

At every time the count value changes the component will destroy and again it would mount in the component tree.

I hope that you will have a better understanding of useEffect, If you have any doubts comment in this post.

Thank you, Have a nice day 💖…….

Flask Calculator

ARUN — Thu, 02 Mar 2023 01:12:46 +0000

At first many of them create their first project as Calculator, Now here I will explain how I do a calculator project using flask.

Flask is a Framework in python, Which was lightweight and everyone has quickly learn about flask. Now for this you must have basic knowledge of html, css, javaScript, and python.

The Following html code is the UI for calculator which contains css and javaScript file also.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
</head>
     <style>
        table {
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
        }

        button {
            width: 100%;
            padding: 20px 40px;
            background-color: grey;
            color: white;
            font-size: 24px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
        }

        input[type="text"] {
            padding: 20px 20px;
            font-size: 20px;
            border-radius: 5px;
            border: 2px solid black;
        }
    </style>
    <script>
        function dis(val) {
            document.getElementById("result").value += val
        }

        function clr() {
            document.getElementById("result").value = ""
        }
    </script>
</head>
<body>
<form method="post">
    <table cellspacing="5">
        <tr>
            <td><button type="button" onclick="clr()">del</button></td><td colspan="3" > <input type="text" id="result" name="result" value="{{ answer }}"></td>
        </tr>
        <tr>
           <td><button type="button" onclick="dis('1')">1</button></td><td><button type="button" onclick="dis('2')">2</button></td><td><button type="button" onclick="dis('3')">3</button></td><td><button type="button" onclick="dis('+')">+</button></td>
        </tr>
        <tr>
            <td><button type="button" onclick="dis('4')">4</button></td><td><button type="button" onclick="dis('5')">5</button></td><td><button type="button" onclick="dis('6')">6</button></td><td><button type="button" onclick="dis('-')">-</button></td>
        </tr>
        <tr>
            <td><button type="button" onclick="dis('7')">7</button></td><td><button type="button" onclick="dis('8')">8</button></td><td><button type="button" onclick="dis('9')">9</button></td><td><button type="button" onclick="dis('*')">*</button></td>
        </tr>
        <tr>
            <td><button type="button" onclick="dis('.')">.</button></td><td><button type="button" onclick="dis('0')">0</button></td><td><button type="submit">=</button></td><td><button type="button" onclick="dis('/')">/</button></td>
        </tr>
    </table>
</form>


</body>
</html>

This was an simple UI. When we click = then this form will submit and then python file will run, then it gives result and it will show in the main page.

from flask import Flask, render_template, request
app = Flask(__name__)


@app.route('/')
def home():
    return render_template('index.html')


@app.route('/', methods=['POST'])
def result():
    ans = 0
    if request.method == 'POST':
        try:
            ans = eval(str(request.form.get("result")))
        except:
            ans = "Invalid opertaion"

    return render_template('index.html', answer=ans)


if __name__ == "__main__":
    app.run(debug=True)

for Flask you need to create a folder template and then write your html file inside of it.

In this python file at first I import Flask, then create name for app then make the default route / then home() renders our html file.

Then create a function called result, which receives the request from post method and then it calculates the result value by using eval() in python. In main function I run my app.

you can find my source code here.

If you can't understand this you could learn some basics and then come back and see this, consistent learning definitely gives you success.

THANK YOU ❤️.....

Age Calculator in Flutter

ARUN — Sun, 26 Feb 2023 01:32:47 +0000

In this post I will share about Age Calculator in Flutter, this Calculator finds the Age in years, months, days, hours.

Let's get Started...

Overview

Get the Birth day of user by using datepicker, then find the difference between birthday and current day.

void _showPicker() {
showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: DateTime(2023),
lastDate: DateTime.now()).then((DateTime? dt) {
selectedYear = dt?.year;
selectedDay = dt?.day;
selectedMon = dt?.month;
calculateAge();
});
}

this function is used to get the birthdate of user

age = (2023 - selectedYear).toDouble();

this line is used to find the age in years.

DateTime date1 = DateTime(selectedYear, selectedMon, selectedDay);
day = double.parse(date2.difference(date1).inDays.toString());
month = double.parse((date2.difference(date1).inDays / 30).floor().toString());
hours = day*24.0;

this line is used to find the age in months, days, hours, And these calculations are approximate values.

@override
void initState() {
animationController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1500));
animation = animationController;
animation1 = animationController;
animation2 = animationController;
animation3 = animationController;
super.initState();
}

@override
void dispose() {
animationController.dispose();
super.dispose();
}

And I use some Animations to visualize the results.

animation = Tween(begin: animation.value, end: age).animate(
CurvedAnimation(
curve: Curves.fastOutSlowIn, parent: animationController));
animation1 = Tween(begin: animation.value, end: month).animate(
CurvedAnimation(
curve: Curves.fastOutSlowIn, parent: animationController));
animation2 = Tween(begin: animation.value, end: day).animate(
CurvedAnimation(
curve: Curves.fastOutSlowIn, parent: animationController));
animation3 = Tween(begin: animation.value, end: hours).animate(
CurvedAnimation(
curve: Curves.fastOutSlowIn, parent: animationController));
animationController.forward(from: 0.0);

These lines are used to show the result in animated view.

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Age Calculator"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OutlinedButton(
onPressed: _showPicker,
child: Text(selectedYear != null
? selectedYear.toString()
: "Select your year of birth"),
),
const Padding(
padding: EdgeInsets.all(20.0),
),
AnimatedBuilder(
animation: animation,
builder: (context, child) => Text(
"Your Age in years ${animation.value.toStringAsFixed(0)}"
"\nYour Age in months ${animation1.value.toStringAsFixed(0)}"
"\nYour Age in days ${animation2.value.toStringAsFixed(0)}"
"\nYour Age in hours ${animation3.value.toStringAsFixed(0)}",
style: const TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic),
),
)
],
),
),
);
}


This was the build method for our project.

And the following is the entire code for `main.dart` file

import 'package:flutter/material.dart';
import 'package:age_calculator/age_calculator.dart';

void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.grey),
home: MyHomePage()));

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State with SingleTickerProviderStateMixin {
double age = 0.0;
double month = 0.0;
double day = 0.0;
double hours = 0.0;
final date2 = DateTime.now();
var selectedYear ; // for setting year
var selectedDay ; // for setting date
var selectedMon ; // for setting month
late Animation animation; // this denoting age animation
late Animation animation1; // this denoting month animation
late Animation animation2; // this denoting date animation
late Animation animation3; // this denoting hour animation
late AnimationController animationController;

@override
void dispose() {
animationController.dispose();
super.dispose();
}

void calculateAge() {
setState(() {
age = (2023 - selectedYear).toDouble();
DateTime date1 = DateTime(selectedYear, selectedMon, selectedDay);
day = double.parse(date2.difference(date1).inDays.toString());
month = double.parse((date2.difference(date1).inDays / 30).floor().toString());
hours = day*24.0;

  animation =  Tween<double>(begin: animation.value, end: age).animate(
       CurvedAnimation(
          curve: Curves.fastOutSlowIn, parent: animationController));
  animation1 = Tween<double>(begin: animation.value, end: month).animate(
      CurvedAnimation(
          curve: Curves.fastOutSlowIn, parent: animationController));
  animation2 = Tween<double>(begin: animation.value, end: day).animate(
      CurvedAnimation(
          curve: Curves.fastOutSlowIn, parent: animationController));
  animation3 = Tween<double>(begin: animation.value, end: hours).animate(
      CurvedAnimation(
          curve: Curves.fastOutSlowIn, parent: animationController));
  animationController.forward(from: 0.0);
});

}


Here i use one external package called `Age_Calculator`.

dependencies:
flutter:
sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
age_calculator: ^1.0.0 # include here

So you need to insert that in your `pubspec.yaml` file.

---

This was the final result.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k2m61ygyd6azagppbsy.png)
You can also check this by [here](https://arun.engineer/Age_Calculator/).

If you Like this, then put Likes and If you have any Queries then Comment your queries.

Thank you