Understanding and Implementing Schemas in Python

Understanding and Implementing Schemas in Python Introduction In the world of programming, particularly in the context of data management and validation, schemas play a vital role. A schema is essentially a blueprint or a predefined structure that defines the expected format, data types, and constraints for a given data entity. In this blog, we will delve into the concept of schemas in Python, exploring what they are, why they are important, and how you can implement them in your projects. What is a Schema? A schema serves as a contract between different components of a system, ensuring that data is consistent, valid, and well-structured. It defines the rules for how data should be organized, what fields it should contain, and what types of values those fields can hold. In essence, a schema acts as a set of rules that data must adhere to in order to be considered valid. Why Are Schemas Important? Data Validation: Schemas provide a way to validate incoming data. When data is received o...

Auto Increment, Decrement, Reset and Pause counter in React Js | Interview Question

Auto Increment, Decrement, Reset & Pause counter in React Js | Interview Question

In this post, I am going to cover one interview question & following is the functionality of the application. I hope you may have come across such situation especially in react interview.

counter
Counter in React Js

There are four functionality covered in the application:

A) Increment

B) Decrement

C) Reset

D) Pause

Sample Code:

A) App.js

import React, { useStateuseEffect } from 'react';
import './style.css';
export default function App() {
  const [countsetCount] = useState(0);
  const [actionsetAction] = useState(false);
  const [operationsetOperation] = useState('');

  useEffect(() => {
    if (action) {
      const timeOunt = setTimeout(() => {
        operation == 'INC' ? setCount(count + 1) : setCount(count - 1);
      }, 1500);
      return () => {
        clearTimeout(timeOunt);
      };
    }
  }, [count]);

  return (
    <div id="mainDiv">
      <div id="label">
        <label>{count}</label>
      </div>
      <div id="btnGroup">
        <button
          id="inc"
          type="submit"
          onClick={() => {
            setOperation('INC');
            setCount(count + 1);
            setAction(true);
          }}
        >
          Increment
        </button>
        <button
          id="dec"
          type="submit"
          onClick={() => {
            setOperation('DEC');
            setCount(count - 1);
            setAction(true);
          }}
        >
          Decrement
        </button>
        <button
          id="reset"
          type="submit"
          onClick={() => {
            setAction(false);
            setCount(0);
          }}
        >
          Reset
        </button>
        <button
          id="pause"
          type="submit"
          onClick={() => {
            setAction(false);
          }}
        >
          Pause
        </button>
      </div>
    </div>
  );
}

CSS:

B) style.css

#mainDiv{
  width350px;
  height50px;
  border1px solid black;
  padding20px;
  background-colororange;
}
#label{
  text-aligncenter;
  margin2px;
}
#inc#dec#reset#pause{
 floatleft;
 margin8px;
 border-radius:20px;
}


Happy Learning!! Happy Coding!!



Comments

Popular posts from this blog

useNavigate and useLocation hooks react-router-dom-v6

Localization in React Js

How to implement error boundaries in React Js

Pass data from child component to its parent component in React Js

Create a Shopping Item App using React Js and Xstate

How to fetch data using Axios Http Get Request in React Js?

How to fetch data from an API using fetch() method in React Js

Create a ToDo App in React Js | Interview Question

Routing in React using React-Router Version 6