DEV Community: Shivani tiwari

Authentication Using React-hook-form

Shivani tiwari — Sat, 25 May 2024 15:34:52 +0000

Hey Everyone,

Today I discuss the REACT HOOK FORM it is easy to use for validating forms, shows the error message and you can easily update the form value as well

so there are some steps which you have to follow -

you can also go through the official website of React Hook form here the link - https://react-hook-form.com/get-started
Install the react hook form by using this link - https://www.npmjs.com/package/react-hook-form
create your Login or signup form first
then use the useForm() hook you can so this through the official website for this

Example-

import React from 'react'
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { useForm } from 'react-hook-form';

const Register = ({ history }) => {
    const {
    handleSubmit,
    formState: { errors },
    trigger,
    register,
    watch
    } = useForm();

    async function onhandleSubmit(data) {
     //console.log(data)
        try {
        await createUserWithEmailAndPassword(
        auth, data.email, data.password, data.name)
        history.push("/");
        alert ("User Created Successfully")
        } catch (error) {
        console.log(error)
        alert ("User created failed")
        alert(error);
      }
    }

 return (
  <div>
    <Form onSubmit={handleSubmit(onhandleSubmit)}>
      <h5>Create an account</h5>
      <div>
        <div>
         <label>Your email address</label>
          <input
            id="email"
            name="email"
            type= 'email'
            required={true}
            {...register("email", {
            required: "Email is Required!!!" ,
            pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "Invalid email address",
            }})}
            error={Boolean(errors.email)}
          ></input>
          {errors.email && (
          <small className="text-danger">{errors.email.message}</small>
          )}
        </div>
      <div>
        <label>Your password</label>
        <input
           name='password'
           id="password"
           type= 'password'
           autoComplete='off'
           className={`form-control ${errors.password && "invalid"}`}
           required={true}
           {...register("password", {
           required: "You must specify a password",
           pattern: {
           value: '^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){    1,})(?!.*\s).{8,}$',
           message: "Password should contain at least one number and one    special character"
           },
          minLength: {
          value: 8,
          message: "Password must be more than 8 characters"
          },
          maxLength: {
          value: 20,
          message: "Password must be less than 20 characters"
          },
          })}
        ></input>
          {errors.password && (
          <small className="text-danger">{errors.password.message}</small>
          )}
      </div>
      <div>
        <label>Confirm your password</label>
        <input
           id="confirmPassword"
           name="confirmPassword"
           type='password'
           {...register( 'confirmPassword', {
           validate: value =>
           value === watch("password", "") || "The passwords do not match"
           })}
           autoComplete='off'
           onPaste={(e) =>{
           e.preventDefault();
           return false
           }}
           error={Boolean(errors.confirmPassword)}
           className={`form-control ${errors.confirmPassword && "invalid"}`}
           required={true}
         />
           {errors.confirmPassword && (
           <small className="text-danger">{errors.confirmPassword.message}    </small>
           )}
      </div>
      <div>
        <label>Your full name</label>
        <input
           name='name'
           type="name"
           className={`form-control ${errors.name && "invalid"}`}
           required={true}
           defaultValue=""
          {...register("name", { required: "Fullname is Required!!!" })}
          {errors.name && (
          <small className="text-danger">Fullname is Required!!!</small>
         )}
        </div>
        <div>
          <button>Create an account</button>
        </div>
      </div>
    </Form>
  </div>
)}
export default withRouter(Register)

here is the example please go through and if you like this article like my article and follow for more updates

Phone Otp login using react Js

Shivani tiwari — Fri, 25 Aug 2023 07:41:41 +0000

Hey Every one 🙋‍♀️

Today I want to share with you Phone OTP login using react

there is some Features which you have to include

Create Project - npx create-react-all projectName
Install react-router-Dom -npm i react-router-dom
install react-icon- npm install react-icons --save
Install Firebase using -npm i react-firebase
react-phone-input-2 - install this package For Input Field
react-otp-input install this package For Input OTP .
react hot toast - install this package For Beautiful Notification

After Install All these let code here

Firebase.config,js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDs5ConzFDM2yGvweN-sZdAPFAlowyCDhE",
  authDomain: "reactmoviepp.firebaseapp.com",
  projectId: "reactmoviepp",
  storageBucket: "reactmoviepp.appspot.com",
  messagingSenderId: "719848561957",
  appId: "1:719848561957:web:254facecfb591921474ecc",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Login.jsx

import React, { useState } from "react";
import Style from "../Auth/login.module.css";
import bgimg from "../Asset/Img/back.jpg";
import { BiSolidPhoneCall } from "react-icons/bi";
import { BsFillShieldLockFill } from "react-icons/bs";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import OtpInput from "react-otp-input";
import { auth } from "../firebase.config";
import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import { Toaster, toast } from "react-hot-toast";
const Login = () => {
  const [otp, setOtp] = useState("");
  const [ph, setPh] = useState("");
  const [showOtp, setShowOtp] = useState(false);
  const [loading, setLoading] = useState(false);
  const [user, setUser] = useState(false);

  function onCaptchaVerify() {
    if (!window.RecaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        auth,
        "recaptcha-container",
        {
          size: "normal",
          callback: (response) => {
            onSignup();
          },
          "expired-callback": () => {},
        }
      );
    }
  }

  function onSignup(event) {
    event.preventDefault();
    setLoading(true);
    onCaptchaVerify();
    const appVerifier = window.recaptchaVerifier;
    const phoneNumber = "+" + ph;

    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        setLoading(false);
        setShowOtp(true);
        toast.success("OTP Sended Sucessfully");
      })
      .catch((error) => {
        setLoading(false);
        toast.error(error.message);
      });
  }

  function onOtpverify() {
    window.confirmationResult
      .confirm(otp)
      .then(async (result) => {
        // User signed in successfully.
        const user = result.user;
        setUser(user);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error.message);
        toast.error(error.message);
      });
  }

  return (
    <div className={`d-flex justify-content-center`}>
      <Toaster toastOptions={{ duration: 4000 }} />
      <img src={bgimg} alt="bgimg" className={` ${Style.loginimg}`} />
      {!user ? (
        <div className={`row position-absolute mt-5  `}>
          <div className="signuppage mt-5 bg-dark text-white p-5 ">
            {showOtp ? (
              <div className="optvarificationcontent">
                <span className="d-flex justify-content-center">
                  <BsFillShieldLockFill size={40} />
                </span>
                <h6 className="text-center mt-3">Enter Your OTP </h6>
                <OtpInput
                  value={otp}
                  onChange={setOtp}
                  numInputs={6}
                  shouldAutoFocus
                  renderInput={(props) => (
                    <input
                      {...props}
                      style={{
                        width: "30px",
                        marginRight: "12px",
                      }}
                    />
                  )}
                ></OtpInput>
                <div className="d-flex justify-content-center">
                  <button
                    className="btn btn-primary mt-3 w-75 "
                    onClick={onOtpverify}
                  >
                    {loading && (
                      <span
                        className="spinner-border spinner-border-sm"
                        style={{ marginRight: "10px" }}
                      ></span>
                    )}
                    <span> Verify OTP</span>
                  </button>
                </div>
              </div>
            ) : (
              <div>
                <span className="d-flex justify-content-center">
                  <BiSolidPhoneCall size={40} />
                </span>
                <h6 className="text-center mt-3">Verify Your Phone NUmber </h6>
                <PhoneInput
                  country={"in"}
                  value={ph}
                  onChange={setPh}
                ></PhoneInput>
                <div className="d-flex justify-content-center">
                  <button
                    className="btn btn-primary mt-3 w-75 "
                    onClick={onSignup}
                  >
                    {loading && (
                      <span
                        className="spinner-border spinner-border-sm"
                        style={{ marginRight: "10px" }}
                      ></span>
                    )}
                    <span>Send OTP Via SMS</span>
                  </button>
                </div>
                <div id="recaptcha-container" className="mt-6"></div>
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className=" row position-absolute  text-white p-5">
          <p style={{ marginTop: "70%" }}>Login Sucessfully</p>
        </div>
      )}
    </div>
  );
};

export default Login;

I hope you Like this article if you like Appreciate me for more content like this 😃😊

For more Content Check my Instagram - @coders__village

Thank you
ShivaniTiwari

Login Authentication in react js

Shivani tiwari — Thu, 23 Mar 2023 19:44:20 +0000

hey guys 👋

Today I will share with you How to work on Login Authentication in react js

So there is some Points -

✔ Firstly we will open App.js file and create some routers like -
Login page (auth.js),homepage,profilepage
✔ when you create all the component with all show on my GitHub
✔ you have to create context component also which i mention in GitHub

you can the all code on Login Authentication on my GitHub
Click here

I hope you like it and useful for you ♥♥

Thank You
Shivani 😊

JavaScript Quiz App with Source Code

Shivani tiwari — Sun, 05 Feb 2023 17:23:35 +0000

hey..

Today I am going with JavaScript Quiz App

Features of this Quiz app

1) Set timer.
2) Show quiz score as percentage.
3)View correct answer options.
4)Randomize questions.
5)Go back to the previous question.
6)After completing the quiz you will see all the questions and 7)their answers.
8)You can add a JavaScript coding question.

Files Name-

asset (Folder)-> a) index.html b)css -> 1) style.css c)js -> 1) script.js 2)questions.js

First File - question.js (JSON File)

let jsq_questions = [
    {
        "id": 1,
        "question": "Which of the following is the correct syntax to redirect a URL using JavaScript?",
        "options": {
            "a": "window.location='http://www.google.com';",
            "b": "document.location='http://www.google.com';",
            "c": "browser.location='http://www.google.com';",
            "d": "navigator.location='http://www.google.com';"
        },
        "answer": "a"
    },
    {
        "id": 2,
        "question": "Inside which HTML element do we put the JavaScript?",
        "options": {
            "a": "<javascript>",
            "b": "\x3C/script>",
            "c": "<java>",
            "d": "<js>"
        },
        "answer": "b"
    },
    {
        "id": 3,
        "question": "Which of the following is a valid JavaScript file extension?",
        "options": {
            "a": ".java",
            "b": ".script",
            "c": ".js",
            "d": ".javascript"
        },
        "answer": "c"
    },
    {
        "id": 4,
        "question": " What does CSS stand for?",
        "options": {
            "a": "Computer Style Sheet",
            "b": "Common Style Sheet",
            "c": "Colorful Style Sheet",
            "d": "Cascading Style Sheet"
        },
        "answer": "d"
    },
    {
        "id": 5,
        "question": "what will be the output of this code?",
        "code": "console.log(typeof typeof 1);",
        "options": {
            "a": "number",
            "b": "1",
            "c": "string",
            "d": "true"
        },
        "answer": "c"
    }
];

Second File-> index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Quiz</title>
    <link rel="stylesheet" href="./asset/css/style.css">
    <!-- Code Highlighter CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/themes/prism-tomorrow.min.css">
</head>

<body>


    <div class="jsq-container" id="jsq_box">
        <div class="jsq_header" style="display:none;">
            <div class="jsq_head_text">JavaScript Simple Quiz Application</div>
            <div class="jsq_time_left">Time Left <div id="jsq_timer">30</div> </div>
        </div>
        <div class="jsq_body">

            <div id="jsq_ifo_box">
                <div class="jsq_info_head">Some Rules of this Quiz</div>
                <div class="jsq_info_list">
                    <div>1. You only get 30 seconds for each question.</div>
                    <div>2. Once you have selected your option, it cannot be undone.</div>
                    <div>3. You can't select any option once time goes off.</div>
                    <div>4. You can not skip the quiz while playing.</div>
                    <div>5. You will get points based on your correct answers.</div>
                </div>
                <div class="jsq_info_footer">
                    <button class="jsq_btn" id="jsq_start">Start</button>
                </div>
            </div>

            <div class="jsq_main_content" style="display: none;">
                <h1 id="jsq_question"></h1>
                <div id="jsq_code_box"><pre class="language-js"><code></code></pre></div>
                <div id="jsq_options"></div>
            </div>

        </div>

        <div class="jsq_footer" style="display: none;">
            <button class="jsq_btn" id="prev_question">Previous</button>
            <div id="jsq_total">1 of 5 Questions</div>
            <button class="jsq_btn" id="next_question">Next</button>
        </div>
    </div>


    <!-- Code Highlighter JS -->
    <script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1.28.0,npm/prismjs@1.28.0/components/prism-javascript.min.js"></script>
    <script src="./asset/js/questions.js"></script>
    <script src="./asset/js/script.js"></script>
</body>

</html>

Third File -> style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #000;
}

* {
    box-sizing: border-box;
}

.jsq-container {
    border-radius: 5px;
    padding: 0 10px;
    color: #000;
    background-color: #fff;
    background-image: linear-gradient(180deg, #e2e2e2 0%, #aeaeae 100%);
    font-family: 'Open Sans', sans-serif;
    width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.20);
}

.jsq_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: solid 1px #c5c5c5;
}

.jsq_footer {
    border-top: 1px solid #9b9b9b;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* info box */
.jsq_info_head {
    padding: 10px 5px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: solid 1px #aaaa;
}

.jsq_info_list {
    padding: 20px;
}

.jsq_info_list > div {
    font-size: 15px;
    margin: 15px 0;
    margin-top: 0;
}

.jsq_info_footer {
    border-top: solid 1px #919191;
    padding: 10px 10px;
    text-align: right;
}

/* timer */
.jsq_time_left {
    display: flex;
    align-items: center;
}

div#jsq_timer {
    border-radius: 50%;
    font-size: 13px;
    width: 28px;
    min-width: 28px;
    color: #fff;
    height: 28px;
    display: flex;
    background-color: #0064ff;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

/* show all answers list completed quiz*/
div#jsq_all_answers {
    margin: 30px 0;
    text-align: left;
}

.jsq_fnsh_question {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 16px;
}

.jsq_finish {
    font-size: 20px;
    font-weight: 500;
}

.jsq_finish_box {
    padding: 20px;
    text-align: center;
}

.jsq_answer_block {
    padding: 10px 10px;
    background-color: #ffffff66;
    border-radius: 5px;
    margin: 5px 0;
}

.jsq_fnsh_options {
    margin: 10px 0;
    margin-left: 20px;
}

.jsq_answer_block span {
    font-size: 13px;
    margin: 7px 0;
    display: block;
    color: #5b5b5b;
}

.jsq_fnsh_score {
    font-size: 13px;
    font-weight: bold;
    color: #0064ff;
}

.jsq_q_status {
    font-size: 13px;
    color: #9a009d;
    font-weight: bold;
    display: inline-block;
}

/* options */
div#jsq_options {
    margin: 15px;
    text-align: center;
    perspective: 500px;
}

div#jsq_options label {
    margin: 20px 0;
    display: block;
    border-radius: 5px;
    font-size: 15px;
    background-color: #e1ebff;
    color: #000000;
    cursor: pointer;
    text-align: left;
    display: flex;
}

div#jsq_options input[type=radio] {
    display: none;
}

div#jsq_options label:not(.disabled):hover {
    background-color: #cdddff;
}

div#jsq_options label.disabled {
    pointer-events: none;
}

/* incorrect option*/
div#jsq_options label.jsq-incorrect {
    color: #ffffff;
    background-color: #e94f4f;
}

/* correct option */
div#jsq_options label.jsq-correct {
    color: #ffffff;
    background-color: #42b55e;
}

/* options ID ABCD */
div#jsq_options label span:first-child {
    border-right: solid 1px #ffffff70;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    border-radius: 4px 0 0 4px;
    font-weight: bold;
}

/* options text */
div#jsq_options label span:last-child {
    display: inline-block;
    padding: 10px 10px;
}

/* question */
h1#jsq_question {
    font-size: 20px;
    margin: 35px 5px;
    line-height: 1.5;
    text-align: center;
    font-weight: 400;
}

/* code box  */
div#jsq_code_box{
    display: none;
    margin: 15px;
}
div#jsq_code_box pre {
    margin: 0;
    padding: 0;
    background: inherit;
}

div#jsq_code_box code {
    line-height: 1.6em;
    overflow: auto;
    font-size: 14px;
    -moz-tab-size: 4;
    display: block;
    tab-size: 4;
    background-color: #2d2d2d;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    font-family: monospace;
    max-height: 400px;
}

button#next_question, button#prev_question {
    visibility: hidden;
}

button.jsq_btn {
    color: #fff;
    border-radius: 5px;
    background: #007bff;
    border: solid 1px #007bff;
    font-size: 13px;
    padding: 5px 15px;
    cursor: pointer;
}

button.jsq_btn:hover {
    background: #005abd;
    border: solid 1px #005abd;
}

.jsq_score {
    font-size: 25px;
    font-weight: 500;
    color: #102bdc;
    margin-bottom: 40px;
}

.jsq_score b {
    display: block;
    margin: 8px;
    color: #bf28b0;
}

div#jsq_total {
    font-size: 13px;
}

/* animation incorrect option (shaking) */
.jsq_shake {
    animation-name: jsq_shake;
    animation-duration: .8s;
    animation-fill-mode: both;
}

@keyframes jsq_shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }

}

/* options animation */
@keyframes jsq_option_anm {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: rotateX(-180deg);
    }

    100% {
        opacity: 1;
        transform-origin: 0 100%;
        transform: rotateX(0deg);
    }

}

.jsq_anm {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: jsq_option_anm;
    animation-delay: calc(0.1s * var(--jsq_at));
}

Fourth File->script.js

/**
* code generated by https://www.html-code-generator.com/javascript/quiz-generator
* created 2023/02/05
*/
(() => {

    // include question array object;
    let questions = jsq_questions;

    let question_index = 0;
    let score = 0;
    let time_left = 30;
    let timer_fun = '';
    let current_question_completed = false;

    const next_button = document.getElementById("next_question");
    const prev_button = document.getElementById("prev_question");
    const start_button = document.getElementById("jsq_start");

    const replaceHTMLtags = text => text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    const stopTimer = () => {
        clearInterval(timer_fun);
        document.getElementById("jsq_timer").innerHTML = '0';
    };

    const startTimer = (time_value) => {
        timer_fun = setInterval(() => {
            if (time_value <= 0) {
                stopTimer();
                optionSelected();
            }
            document.getElementById("jsq_timer").innerHTML = time_value;
            time_value -= 1;

        }, 1000);
    };

    // get all options radio
    const getAllOptions = () => document.querySelectorAll("input[name=jsq_option]");

    // after selected option disable radio 
    const disableOptions = () => {
        let option_radios = getAllOptions();
        option_radios.forEach(element => {
            element.disabled = true;
            element.nextElementSibling.classList.add("disabled");
        });
    };


    // evaluate the user selected option answer
    const optionSelected = () => {
        let score_set = '0';
        let status = 'time out';
        let answer = questions[question_index].answer;
        let options_radios = getAllOptions();
        options_radios.forEach(element => {

            // correct answer [color green]
            if (element.value == answer) {
                element.nextElementSibling.classList.add("jsq-correct");
            }

            // user selected incorrect answer [color red]. 
            if (element.checked && element.value != answer) {
                element.nextElementSibling.classList.add("jsq-incorrect", "jsq_shake");

                // set user selected option. after preview all answers list
                questions[question_index].user_selected = element.value;
                score_set = 0;

                status = 'incorrect answer';
            }

            // user selected answer correct
            if (element.checked && element.value == answer) {
                score++;
                score_set = 1;

                status = 'correct answer';
            }

        });
        // set question answer status
        questions[question_index].status = status;
        // set score
        questions[question_index].score = score_set;
        // set current question completed
        questions[question_index].completed = true;

        current_question_completed = true;

        disableOptions();
        stopTimer();
        next_button.style.visibility = 'visible';
    };

    // show next question and options
    const showQuestion = () => {
        let current_question = questions[question_index];
        let options_div = '';
        let options = current_question.options;
        let id_number = 0;
        let option_id = ['A', 'B', 'C', 'D'];

        for (let key in options) {
            options_div += '<div class="jsq_anm" style="--jsq_at:' + (id_number + 1) + '">' +
                '<input type="radio" name="jsq_option" id="option_' + id_number + '" value="' + key + '">' +
                '<label for="option_' + id_number + '"><span>' + option_id[id_number] + '</span><span>' + replaceHTMLtags(options[key]) + '</span></label>' +
                '</div>';
            id_number++;
        }

        document.getElementById("jsq_question").innerText = current_question.question;
        document.getElementById("jsq_options").innerHTML = options_div;
        document.getElementById("jsq_total").innerText = '' + (question_index + 1) + ' of  ' + questions.length + ' Questions';
        showCodeBox(current_question);
        let option_radios = getAllOptions();
        option_radios.forEach(element => {
            element.addEventListener("change", optionSelected);
        });
        startTimer(time_left);
        current_question_completed = false;
    };

    // show all question answers
    const showAllAnswers = () => {
        let div = '';
        for (let i = 0; i < questions.length; i++) {
            let question_list = questions[i];
            let options = question_list.options;
            div += '<div class="jsq_answer_block">';
            div += '<div class="jsq_fnsh_question">' + (i + 1) + ', ' + replaceHTMLtags(question_list.question) + '</div>';
            div += '<div class="jsq_fnsh_options">';
            for (let key in options) {

                if (question_list.answer == key) {
                    div += '<span style="color: green;font-weight: bold;">' + replaceHTMLtags(options[key]) + '</span>';
                } else if (question_list.user_selected == key) {
                    div += '<span style="color: red;font-weight: bold;">' + replaceHTMLtags(options[key]) + '</span>';
                } else {
                    div += '<span>' + replaceHTMLtags(options[key]) + '</span>';
                }
            }
            div += '</div>';
            div += '<div class="jsq_q_status">status : ' + question_list.status + '</div>';
            div += '<div class="jsq_fnsh_score">score : ' + question_list.score + '</div>';
            div += '</div>';
        }

        document.getElementById("jsq_all_answers").innerHTML = div;
        document.getElementById("all_answer_btn").remove();
    };

    // If there is coding in this question, it will appear in this code box. show hide box
    const showCodeBox = (current_question) => {
        let code_box = document.getElementById("jsq_code_box");
        let pre_code = document.querySelector("#jsq_code_box code");

        if (current_question.code == undefined) {
            code_box.style.display = 'none';
            pre_code.innerText = '';
        }else{
            code_box.style.display = 'block';
            pre_code.innerText = current_question.code;
        }
        // highlight code 
        pre_code.innerHTML = Prism.highlight(pre_code.innerText, Prism.languages.javascript, 'javascript');
    };
    // question completed show result
    const completedQuiz = () => {
        let div = '<div class="jsq_finish_box">';
        div += '<div class="jsq_finish">You have completed the Quiz!</div>';
        div += '<br>';
        div += '<div class="jsq_score">Your score: <b>' + score + ' out of ' + questions.length + '</b> <b>' + Math.round((100 * score) / questions.length) + '%</b></div>';
        div += ' <button class="jsq_btn" id="all_answer_btn">Check your answers</button>';
        div += '<div id="jsq_all_answers"></div>';
        div += '</div>';
        document.getElementById("jsq_box").innerHTML = div;
        const all_answer_btn = document.getElementById("all_answer_btn");
        all_answer_btn.addEventListener("click", showAllAnswers);
    };


    // go next question
    const nextQuestion = () => {
        // if option not selected
        if (!current_question_completed) {
            return;
        }

        question_index++;
        if (questions.length - 1 < question_index) {
            stopTimer();
            completedQuiz();
            return;
        }

        next_button.style.visibility = 'hidden';

        if (questions[question_index].completed) {
            next_button.style.visibility = 'visible';
        }

        if (question_index > 0) {
            prev_button.style.visibility = 'visible';
        }

        if (questions[question_index].completed) {
            showPrevQuestion();
        } else {
            showQuestion();
        }
    };

    // show previous question and options
    const showPrevQuestion = () => {
        let current_question = questions[question_index];
        let options_div = '';
        let options = current_question.options;
        let id_number = 0;
        let option_id = ['A', 'B', 'C', 'D'];

        for (let key in options) {
            let class_name = '';
            if (key == current_question.answer) {
                class_name = 'jsq-correct ';
            }
            if (current_question.user_selected == key) {
                class_name = 'jsq-incorrect ';
            }
            options_div += '<div>' +
                '<input type="radio" name="jsq_option" id="option_' + id_number + '" value="' + key + '" disabled>' +
                '<label for="option_' + id_number + '" class="' + class_name + 'disabled"><span>' + option_id[id_number] + '</span><span>' + replaceHTMLtags(options[key]) + '</span></label>' +
                '</div>';
            id_number++;
        }
        document.getElementById("jsq_question").innerText = current_question.question;
        document.getElementById("jsq_options").innerHTML = options_div;
        document.getElementById("jsq_total").innerText = '' + (question_index + 1) + ' of  ' + questions.length + ' Questions';
        showCodeBox(current_question);
    };

    // go previous question
    const prevQuestion = () => {
        if (question_index < 1) {
            return;
        }

        question_index--;
        current_question_completed = (questions[question_index].completed ? true : false);
        if (question_index < 1) {
            prev_button.style.visibility = 'hidden';
        }
        if (question_index >= 0 || questions[question_index].completed) {
            next_button.style.visibility = 'visible';
        }
        stopTimer();
        showPrevQuestion();
    };

    // start quiz
    const startQuiz = () => {
        document.querySelector(".jsq_header").removeAttribute("style");
        document.querySelector(".jsq_main_content").removeAttribute("style");
        document.querySelector(".jsq_footer").removeAttribute("style");
        document.querySelector("#jsq_ifo_box").remove();
        showQuestion();
    };

    next_button.addEventListener("click", nextQuestion);
    prev_button.addEventListener("click", prevQuestion);
    start_button.addEventListener("click", startQuiz);
    // code generated by https://www.html-code-generator.com/javascript/quiz-generator

})();

Thank You 😍😍
Shivani Tiwari(Software Developer)

what is a React Hooks?

Shivani tiwari — Wed, 01 Feb 2023 12:44:59 +0000

Hooks were added to React in version 16.8.

Hooks Only allow function components to have access to state and other React features. Because Class Component No longer Needed

The Hook generally replace class components, there are no plans to remove classes from React.

Hook Rules

There Are three Rules -

Hooks only can called inside the React function component

2.Hooks only can called Top of the component

3.Hooks can not be conditional

Example-

Here you must import Hook from React.
Here we are using the **useState **Hook to keep track of the application state.

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

I hope You Like the Article ♥
If you like the Article So follow me 😍

Thank you
Shivani Frontend Developer

LeetCode #206 Reverse Linked List

Shivani tiwari — Thu, 25 Aug 2022 08:59:24 +0000

hey everyone👋

Today We discuss the leetcode #206 problem

Problem

Reverse a singly linked list.

Example:

Input: 1->2->3->4->5->NULL
Output: 5->4->3->2->1->NULL

Follow up:

A linked list can be reversed either iteratively or recursively. Could you implement both?

Solution — Iteration-

Use a pointer that points to a node x which is head at beginning. In each iteration if it has next node y ,move next node to be front of current head and update head pointer to y. Once x has not next node, i.e. it’s tail, end the iteration.


# Python3

# Definition for singly-linked list.
# class ListNode(object):
#     def __init__(self, x):
#         self.val = x
#         self.next = None

class Solution:
    def reverseList(self, head):
        """
        :type head: ListNode
        :rtype: ListNode
        """

        # Iteration approach
        # Run one pointer p in list. At each iteration:
        #     1. n = p.next
        #     2. p.next = n.next, jump cross n
        #     3. n.next = head, n prepend to the front
        #     4. head = n, reassign head

        if head == None:
            return None

        p = head
        while p.next:
            n = p.next
            p.next = n.next
            n.next = head
            head = n

        return head

Complexity-

the time complexity is O(n) if n denotes to counts of nodes in this linked list.

It’s trivial that it only uses O(1) extra space.

Solution — Recursion

# Python3

# Definition for singly-linked list.
# class ListNode(object):
#     def __init__(self, x):
#         self.val = x
#         self.next = None

class Solution:
    def reverseList(self, head):
        """
        :type head: ListNode
        :rtype: ListNode
        """

        # Recursion approach:
        #     take head and reverse list whose head is head.next
        #     then reversely assign the link between them

        if head == None or head.next == None:
            return head

        n = head.next
        h = self.reverseList(n)

        # reverse link
        head.next = None
        n.next = head

        return h

Complexity

At each function call, it’s only takes** O(1) time for assigning link**. And there are n-2 calls if n denotes to counts of nodes in this linked list. Therefore, time complexity will be O(n).

Also, it **uses O(1) extra space **in each function call and there are n-2 calls in calling stack. Hence space complexity is O(n) as well.

Thank you for read this article .I hope its help you to solve this problem
If you like the article so just follow on *@coders_village in instagram *

Thank You
Shivani Tiwari
(Software Developers)

Write a program by creating an 'Employee' class having the following methods and print the final salary.

Shivani tiwari — Fri, 05 Aug 2022 11:06:39 +0000

this is also a question part

1 - 'getInfo()' which takes the salary, number of hours of work per day of employee as parameter

2 - 'AddSal()' which adds 10 to salary of the employee if it is less than 500.

3 - 'AddWork()' which adds 5 to salary of employee if the number of hours of work per day is more than 6 hours.

Hello Everyone 👋

You must be seeing the above question. So here we discuss the problem

There is some few step which we hove do it-

First we will create a Employee class
Create a 3 methods which is mention the about question

. First method getInfo()
. Second method AddSal()
. third method AddWork()

here we create one more method that is final salary() which give use the employee salary

Here is the Ans of this Problem

class Employee:

    def __init__(self,name):
        self.name=name

    def getInfo(self,salary,hours):
        self.salary=salary
        self.hours=hours

    def AddSal(self):
        if self.salary<500:
            self.salary+=10
            return self.salary
    def AddWork(self):
        if self.hours>6:
            self.salary+=5
            return self.salary

    def print_final_salary(self):

        print(self.name,self.salary)


name=str(input("enter name:"))
salary=int(input("Enter Salary:"))
hours=float(input("enter hours:"))

emp=Employee(name)
emp.getInfo(salary,hours)
emp.AddSal()
emp.AddWork()
emp.print_final_salary()

I hope you like will help you for your DSA interview preparation

Thank You
Shivani Tiwari

Python Complex Number

Shivani tiwari — Thu, 14 Jul 2022 12:19:38 +0000

hey Everyone

Today I share you a link where you can read the article related to python complex number

So Go and check it out -

https://codersvillage.com/python/python-complex-number/

Here is the solution of python complex number so check it out
If you like the article so just hit on ❤️

Thank You Everyone
Shivani Tiwari
(software Developer)

Write a program to create a class count objects and calculate the number of objects that has been created in realtime.

Shivani tiwari — Wed, 13 Jul 2022 18:12:42 +0000

Hey Everyone,

so today we discuss about the how can we count the object of any class
There is few steps below-

First we create the class count_objects
Then we will initialize class variable (count=0) because we want to count the objects not methods
Then we create the constructor we create always by using init (constructor)

4.Than Create an object of count_objects class with attributes

5.And Finally print the total number of object available in
count_objects class

here lets see the Example-

# Create a count_objects class
class count_objects:

    # initialise class variable
    count = 0

    # Constructor method

    def __init__(self, name, age):

        # instance variable or object attributes
        self.name = name
        self.age = age

        # incrementing the class variable by 1
        # whenever new object is created
        count_objects.count += 1

    # Create a method for printing details

    def printDetails(self):

        print(self.name, self.age, "years old")

# Create an object of Student class with attributes

student1 = count_objects('Ankit Rai', 22)
student2 = count_objects('Aishwarya', 21)
student3 = count_objects('Shaurya', 21)
student4 = count_objects('shiv', 1)

# Print the total no. of objects cretaed

print("Total number of objects created: ", count_objects.count)

So you can copy that code and print in your editor which editor you use and then see the result .

I hope this Answer will help you to solve your problem so if you like the article so just like and share the post

Follow for more updates and visit -https://codersvillage.com/

Thank you Everyone
Shivani Tiwari

Create a class name with variable and Use Constructors to Assign the value creating an object of the class Student.

Shivani tiwari — Wed, 13 Jul 2022 11:50:24 +0000

Hey Everyone ,

Here we solved the python oops problem. About we can read the question . there is some step which we have to follow below-

What we do first-

We create a class name - That is Student
Then we use two variable -One is string that is name and another is integer that is roll_no
Then Use the Constructors for assign the value- That is 2 and "John"

Solution

class Student:
       def __init__(self, name, roll_no):
              self.name = name
              self.roll_no = roll_no
Student1= Student("john", 2)
print(Student1.name)
print(Student1.roll_no)

I hope it helps you to solve your query .if you like it do one think follow me for more algo ,python oops updates

Read More Article Here -https://codersvillage.com/

Thank you Everyone
Shivani

How to Create an Empty List in python

Shivani tiwari — Sat, 09 Jul 2022 12:18:18 +0000

Python list is a data structure that can store multiple elements of heterogeneous type. At some point in your program, you may need to create an empty list and add items to it in the subsequent steps.

In this tutorial, we shall learn how to create an empty list. In other words, a List with no elements.

To create an empty list in python, assign the variable with empty square brackets.

[] is an empty list.

mylist = []

You can also use list class constructor as shown below to create an empty list.

mylist = list()

Example 1: Create an Empty List

fruits = []
print(type(fruits))

Example 2: Create an Empty List

fruits = list()
print(type(fruits))

Read more articles click here -https://codersvillage.com/

I hope you guys understand how to create empty list if like so support me and follow me for more updates

Thank you
Everyone

Python coding interview questions for data scientist

Shivani tiwari — Sat, 09 Jul 2022 11:39:31 +0000

1) How do you debug a Python program?

By using this command we can debug a python program

Example- Copy this code to your compiler

$ python -m pdb python-script.py
2) What is Keyword in Python?

The keyword in Python can turn any function into a generator. Yields work like a standard return keyword.

But it’ll always return a generator object. Also, a function can have multiple calls to the keyword

Example- Copy this code to your compiler

def testgen(index):
weekdays = ['sun','mon','tue','wed','thu','fri','sat']
yield weekdays[index]
yield weekdays[index+1]
day = testgen(0)
print next(day), next(day)
Output: sun mon
Read Article-How to find Count pairs with given sum using python

3) How to convert a list into a string?

When we want to convert a list into a string, we can use the <”.join()> method which joins all the elements into one and returns as a string.

Example- Copy this code to your compiler

weekdays = ['sun','mon','tue','wed','thu','fri','sat']
listAsString = ' '.join(weekdays)
print(listAsString)P

4) How to convert a list into a tuple?

By using Python function we can convert a list into a tuple. But we can’t change the list after turning it into a tuple, because it becomes immutable.

Example- Copy this code to your compiler

weekdays = ['sun','mon','tue','wed','thu','fri','sat']
listAsTuple = tuple(weekdays)
print(listAsTuple)
Read Article-How to Find duplicate elements of an array in python

5) How to convert a list into a set?

User can convert list into set by using function.

Example- Copy this code to your compiler

weekdays = ['sun','mon','tue','wed','thu','fri','sat','sun','tue']
listAsSet = set(weekdays)
print(listAsSet)
6) How to count the occurrences of a particular element in the list?

In the Python list, we can count the occurrences of an individual element by using a function.

Example- Copy this code to your compiler

weekdays = ['sun','mon','tue','wed','thu','fri','sun','mon','mon']
print(weekdays.count('mon'))
7) What is the NumPy array?

NumPy arrays are more flexible than lists in Python. By using NumPy arrays reading and writing items is faster and more efficient.

8) How can you create an Empty NumPy Array In Python?

We can create an Empty NumPy Array in two ways in Python,

1) import numpy
numpy.array([])

2) numpy.empty(shape=(0,0))

9) What is a negative index in Python?

Python has a special feature like a negative index in Arrays and Lists. A positive index reads the elements from the starting of an array or list but in the negative index, Python reads elements from the end of an array or list.

10) What is the output of the below code?

Example- Copy this code to your compiler

import array

a = [1, 2, 3]
print a[-3]
print a[-2]
print a[-1]
The output is: 3, 2, 1

DEV Community: Shivani tiwari

Authentication Using React-hook-form

Example-

Phone Otp login using react Js

Login Authentication in react js

JavaScript Quiz App with Source Code

what is a React Hooks?

Hook Rules

Example-

LeetCode #206 Reverse Linked List

Problem

Example:

Follow up:

Solution — Iteration-

Complexity-

Solution — Recursion

Complexity

Write a program by creating an 'Employee' class having the following methods and print the final salary.

Python Complex Number

Write a program to create a class count objects and calculate the number of objects that has been created in realtime.

here lets see the Example-

Create a class name with variable and Use Constructors to Assign the value creating an object of the class Student.

*What we do first- *

Solution

How to Create an Empty List in python

Example 1: Create an Empty List

Example 2: Create an Empty List

Python coding interview questions for data scientist

What we do first-