Issue with ‘.before()’

[Larissa_Cury]

Hello!
I’m trying to do the following:

Get a name from an inputForm and display “Oi, [name] !😄”. I’m trying to use .before() and .after() for that, but only .after() is showing up.

[...]
newVar("fantasy--name").global()
,
  newTextInput("fantasyNameInput", "")
  .center()
    .css({
            "margin":"1em",  // Add a em margin around this element
            'margin-top': '4.5vh',
            "height":"1.5em",
            'width': '10em',
          //  "width": '500px',
          "border": "8px solid yellow", 
         //   "border":"#FFFCF1",
            "border-radius": "4px",
            "font-size": '55px',
            "background-color": "#E0F7FA"
        })
  //   .once()
    .print()
,
getTextInput("fantasyNameInput").center().print()
,
newButton("submit-fantasy-name-btn", 'COMEÇAR 🚀')
    .center().print()
    // Only validate a click on Start when inputID has been filled
        .wait( getTextInput("fantasyNameInput").testNot.text("")
        .success(newAudio('clickAudio', 'ship.mp3').play().wait('first'))
        .failure( 
            newAudio('nomeFailAud', 'nomeFail.mp3').play().wait('first')
         ))
,
getVar("fantasy--name").set(getTextInput("fantasyNameInput"))
,
getTextInput("fantasyNameInput").remove() // Remove Text Input form
,
newText("welcome--fantasy--name--msg")
  .before(newText("hello", "Oi, "))
  .text(getVar("fantasy--name"))
  .after(newText("exclamation--point", "! 😄"))
  .cssContainer({
        "font-size": "80px",
        'background-color': 'yellow',
        "border-radius": "25px"
    })

[...]

Default text :

defaultText.center().print()
.cssContainer({
          'margin-top': '25vh', // Vertical centering
          'margin-left': '50vh', // Horizontal centering
          'transform': 'translate(-50%, -50%)', // Correct the centering
        //  'margin-top': '3em',
          'text-align': 'center',
          "justify-content": 'center',
          "align-items": 'center' ,
          'font-size': '35px',
          "font-family": " Phantomsans, sans-serif",
          "white-space": "nowrap"})
,

Thanks in advance for any help 🙂

• This topic was modified 8 months, 3 weeks ago by Larissa_Cury.
• This topic was modified 8 months, 3 weeks ago by Larissa_Cury.

[Larissa_Cury]

UPDATE:

It worked like this:

,
newVar("hi--text").set(getVar("fantasy--name")).set(v=>`Olá, ${v} !😄`) // create new var to show text.
,
newText("welcome--fantasy--name--msg").text( getVar("hi--text") ) // show text.
  .cssContainer({
    "font-size": "60px", 
    'color':'white',
    "background-image": "linear-gradient(to top left, #0099CC, #66CCFF)",
    "border-radius": "25px"})

Is this the best way to do it, tho?

[Jeremy]

This is the way I would do it too

Jeremy

[Author]

Posts