From c7086bb2f4b5f7194b57a5c959cdbed454f77875 Mon Sep 17 00:00:00 2001
From: joaovictor3g <jvdias79797@gmail.com>
Date: Wed, 24 Apr 2024 14:04:47 -0300
Subject: [PATCH] adds text changes when mode changes

---
 web/assets/js/components/modals/playground-mode.js | 7 +++++++
 web/index.html                                     | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/assets/js/components/modals/playground-mode.js b/web/assets/js/components/modals/playground-mode.js
index 7a4a414..58e2ed2 100644
--- a/web/assets/js/components/modals/playground-mode.js
+++ b/web/assets/js/components/modals/playground-mode.js
@@ -18,6 +18,7 @@ import {
   renderExamplesInSelectInstance,
   renderExpressionContent,
   renderTabs,
+  setCost,
 } from "../../utils/render-functions.js";
 import { ModesService } from "../../services/modes.js";
 import { ExampleService } from "../../services/examples.js";
@@ -183,12 +184,18 @@ function createInputElement(mode) {
 
 function renderUIChangesByMode(mode) {
   const titleEl = document.querySelector(".title.expression__square");
+  const inputTitleEl = document.querySelector(".title.input__square");
   const toggleModeHolder = document.querySelector(".modes__container-holder");
+  const costText = document.querySelector(".cost__text");
+
   titleEl.innerHTML = mode.name;
   toggleModeHolder.innerHTML = mode.name;
+  inputTitleEl.innerHTML = mode.tabs.length > 1 ? "Inputs: " : "Input";
+  costText.innerHTML = mode.tabs.length > 1 ? "Total cost: " : "Cost: ";
 
   ExampleService.getExampleContentById(mode).then((examples) => {
     renderExpressionContent(mode, examples);
+    setCost("");
     renderTabs(mode, examples);
     renderExamplesInSelectInstance(mode, examples);
     applyThemeToEditors();
diff --git a/web/index.html b/web/index.html
index ed6afad..a32e78e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -249,7 +249,7 @@
                         >
                       </div>
                     </div>
-                    <span class="text">Cost:</span>
+                    <span class="text cost__text">Cost:</span>
                   </span>
                   <span id="cost"> - </span>
                 </span>