Upload Front end

Front End/QuestionRecommender.vue

+<template>
+<TopBar></TopBar>
+    <div class="question">
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <div class="card">
+          <div class="card-header">Question Recommeder</div>
+          <div class="card-body">
+            <div v-if="error" class="alert alert-danger">{{error}}</div>
+            <form action="#" @submit.prevent="submit">
+              <div class="form-group row">
+                <label for="questions1" class="col-md-4 col-form-label text-md-right">Enter 1st number:</label>
+
+                <div class="col-md-6">
+                  <input
+                    id="questions1"
+                    type="number"
+                    class="form-control"
+                    name="questions1"
+                    value
+                    required
+                    autofocus
+                    v-model="questions1"
+                  />
+                </div>
+              </div>
+
+              <!-- <div class="form-group row">
+                <label for="questions2" class="col-md-4 col-form-label text-md-right">Enter 2nd number:</label>
+
+                <div class="col-md-6">
+                  <input
+                    id="questions2"
+                    type="number"
+                    class="form-control"
+                    name="questions2"
+                    value
+                    required
+                    autofocus
+                    v-model="questions2"
+                  />
+                </div>
+              </div> -->
+
+
+
+              <div class="form-group row mb-0">
+                <div class="col-md-8 offset-md-4">
+                  <button type="submit" class="btn btn-primary">Submit</button>
+                </div>            
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { projectFirestore } from '../firebase/config'
+import TopBar from "../components/TopBar.vue"
+
+export default {
+    name: 'Questions',
+             components:{
+   TopBar
+ },
+
+    data() {
+        return{
+            questions1:'',
+            questions2:''
+        }
+    },
+    methods:{
+        submit(){
+            let questions = {
+                      'Questions':this.questions1
+
+            }
+projectFirestore.collection('Question numbers').doc('selected').update(questions).catch((e) =>{
+  console.log(e) })            
+
+            this.$router.push('/quiz')
+
+        }
+    }
+
+}
+</script>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+  font-family: "Montserrat";
+  min-width: 70% !important;
+  
+}
+section {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column; 
+}
+.card{
+  border: rgb(94, 45, 94) solid;
+  box-shadow: 0px 0px 20px #14021233;
+  border-radius: 8px;
+  background-color: whitesmoke;
+  height: 350px;
+
+}
+
+.question {
+  width: 60%;
+  min-height: 100% !important;
+  margin: 0px auto;
+  padding: 100px;
+  
+}
+.form-group {
+  margin-top: 20px;
+  font-size: 20px;
+  color: #9e9e9e;
+}
+.form-group input,
+.form-group textarea {
+  width : 50% !important;
+  height: 50px !important;
+  padding: 5px;
+  font-size: 18px;
+  border: 1px solid rgba(128, 128, 128, 0.199);
+  margin-top: 5px;
+    margin-bottom: 85px;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  overflow: hidden;
+
+}
+textarea {
+  resize: vertical;
+}
+
+h4 {
+  color: black;
+  font-size:large;
+  text-align: center;
+  
+}
+button{
+    background-color:cornflowerblue;
+}
+.card-header{
+  font-size: 40px;
+}
+
+
+</style>
\ No newline at end of file