added Join feature in HomePage.

index.html

@@ -78,12 +78,12 @@
               <div class="meetbuttontext">New meeting</div>
             </button>
           </form>
-          <form action="" method="GET">
+          <form id="meetingcodeform" action="" method="GET">
             <div class="meetingcodefield">
               <input id="meetingcode" placeholder="Enter a code or link" />
             </div>
           </form>
-          <div class="divider"></div>
+          <div class="Join"></div>
         </div>
       </div>
       <div class="bodyRight">

public/Styles/RoomStyle.css

@@ -62,6 +62,7 @@ body {
   border-radius: 50%;
   background-color: rgb(61, 64, 67);
   margin-left: 15px;
+  cursor: pointer;
 }
 
 .right-button {
@@ -70,6 +71,7 @@ body {
   padding: 5px;
   border-radius: 50%;
   margin-left: 10px;
+  cursor: pointer;
 }
 
 .main_right_controls {

public/Styles/style.css

@@ -139,7 +139,7 @@
   background-repeat: no-repeat;
   font-size: 17px;
   font-family: "Noto Sans JP", sans-serif;
-  margin: 50px 30px 0 0;
+  margin: 50px 10px 0 0;
   padding: 12px 20px 12px 40px;
   background-position: 10px 13px;
   height: fit-content;
@@ -205,3 +205,10 @@
   text-align: center;
   max-width: 412px;
 }
+
+.Join {
+  display: flex;
+  align-self: center;
+  margin-top: 50px;
+  cursor: pointer;
+}

public/scripts/Roomscripts.js

@@ -200,3 +200,13 @@ function DisplayVideoMuteIcon() {
   //removing video slash icon meaning video is now on
   VideoButton.classList.remove("fa-video-slash");
 }
+
+//disconnect from the call
+const disconnectCall = document.getElementById("disconnectCall");
+
+//adding event listener
+disconnectCall.addEventListener("click", DisconnectFromTheCall);
+
+function DisconnectFromTheCall() {
+  //Disconnect from the call;
+}

public/scripts/scripts.js

@@ -107,3 +107,21 @@ function LoadContent(currentConcept) {
   text.innerHTML = slideshowHeads[currentConcept];
   infotext.innerHTML = slideshowTexts[currentConcept];
 }
+
+const meetingcode = document.getElementById("meetingcode");
+const joinClass = document.querySelector(".Join");
+meetingcode.addEventListener("input", renderJoin);
+
+function renderJoin() {
+  if (meetingcode.value) {
+    joinClass.innerHTML = `Join`;
+  } else {
+    joinClass.innerHTML = ``;
+  }
+}
+
+joinClass.addEventListener("click", TurnColorBlue);
+
+function TurnColorBlue() {
+  joinClass.style.color = "blue";
+}

views/room.ejs

@@ -66,6 +66,7 @@
         <i class="button fas fa-share-square fa-lg"></i>
         <i class="button fas fa-ellipsis-v fa-lg"></i>
         <i
+          id="disconnectCall"
           style="background-color: rgb(217, 81, 64)"
           class="button fas fa-phone-alt fa-lg"
         ></i>