JSFiddle - React, Tailwind, and code Playground

by vednig12

HTML

<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<html><body style="align-content: center;align-items: center;text-align: center;vertical-align: middle;background-color: blueviolet;" onload="start()">
<div>Time Left:<div id="timer"></div></div>
    <div>Last Date:<div id="last-date"></div></div> 
        <div>    Total Marks:<div id="marks-total"></div>
        <div class="ht"style="margin:2cm;background-color:violet;color:black;max-width:80%;align-self: centre;align-items: center;align-content: center;text-align: center;text-align-last: justify;text-justify: inter-word;">
        <div id="content">
            <div style="margin-left: 45%;"><code><h1>Instructions</h1></code></div>
            <div id="instructions" style="text-align: center;text-emphasis:circle;">Attempt The Test By Selecting Options </div>
            <input id="name" type="text" placeholder="Your Name" class="form-control" autocomplete="off">
            <input id="numbern" name="nub" placeholder="Your Roll No." class="form-control" autocomplete="off">
            <input id="Phone Number" type="number" placeholder="Phone Number(Optional)" class="form-control">
        </div>
        
        <form id="value" method="POST" action="submit()"></form>
  
  </div>
        <button onclick="submit()" class="btn btn-info">Submit</button>
        </div>             
        </body>
        </html>

JavaScript

var numb=0;
var responsen=[];
uid=123;
function submit() {
    for (var index = 0;index<numb; index++){
            var form = document.getElementById("value");
            var name=index+1;
            const query='#'+name
            var radval=document.querySelector(query).value;
            responsen.push(radval)
            console.log(name)
            console.log(responsen)
        }
    ref1=firebase.database().ref('beta/' + 'uid/'+ code1+"/"+"simplesheet/"+"0/")
    ref1.once("value", function(snapshot){
        var numb=snapshot.val().num.count;
        console.log(responsen)
    });
    document.getElementsByClassName("ht")[0].innerText="YOUR RESPONSE HAS BEEN SUBMITTED" 
    //zzzzz
    firebase.database().ref('beta/' + 'uid/'+ code1 +"/"+"simplesheet/"+"0/"+"answers/"+uid+"/").set({
    response:responsen.toString(),
    endtime:0
     })
     console.log(responsen)
}
//

var d = new Date();
var n = d.getTime();
function start(){
    var starttime=n;
    return starttime;
    };
pathname=code1;
        
var firebaseConfig = {
    apiKey: ,
    authDomain: ,
    databaseURL: ,
    projectId: ,
    storageBucket: ,
    messagingSenderId: ,
    appId: ,
    measurementId: 
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics;
  var database = firebase.database;
  var code1="fvmnju";
  var ref = firebase.database.ref("/beta/uid/"+code1+"/simplesheet/0/");
    ref.once("value", function(snapshot) {
        document.title=snapshot.val().num.info + "|JoInTest";
        document.getElementById("last-date").innerText=snapshot.val().num.lastdate;
        document.getElementById("timer").innerText=snapshot.val().num.time;
        numb=snapshot.val().num.count;
        document.getElementById("marks-total").innerText=numb;
        document.getElementById("info").innerHTML="<h1>"+snapshot.val().num.info+"</h1>"+"Powered by JoInTest"
 for (index = 0; index < snapshot.val().num.count; index++) {
   ...