hide input until img clicked

static/index.js

@@ -9,6 +9,7 @@ var pic_taken=false
 var take_pic_btn= document.getElementById("take-pic")
 var clear_pic_btn= document.getElementById("clear-pic")
 var send_pic_btn= document.getElementById("send-pic")
+var item_info_text= document.getElementById("user_item_info")
 var taken_image;
 // Check if webcam access is supported.
 const hasGetUserMedia = () => { var _a; return !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia); };
@@ -80,12 +81,14 @@ function take_pic(){
   console.log(taken_image)
     clear_pic_btn.style.display="inline"
     send_pic_btn.style.display="inline"
+    item_info_text.style.display="inline"
     take_pic_btn.style.display="none"
     
 }
 
 function send_pic(){
   send_frame(taken_image);
+  item_info_text.style.display="none"
   clear_pic_btn.style.display="none"
   send_pic_btn.style.display="none"
   take_pic_btn.style.display="inline"
@@ -94,6 +97,7 @@ function send_pic(){
 }
 
 function clear_pic(){
+  item_info_text.style.display="none"
   clear_pic_btn.style.display="none"
   send_pic_btn.style.display="none"
   take_pic_btn.style.display="inline"

templates/index.html

@@ -29,7 +29,7 @@ box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38); z-index:100">
       </div>
   </div>
   <center>
-  <input class="btn" type="text" id="user_item_info" placeholder="Enter item name...">
+  <input class="btn" type="text" id="user_item_info" placeholder="Enter item name..." style="display:none">
   <button class="btn" id="take-pic">Click</button>
   <button class="btn" id="clear-pic" style="display:none">Clear ✖</button>
   <button class="btn" id="send-pic" style="display:none">Send ➤</button>