Issue with ‘.before()’

PennController for IBEX Forums Support Issue with ‘.before()’

Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10827
    Larissa_Cury
    Participant

    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 6 months, 1 week ago by Larissa_Cury.
    • This topic was modified 6 months, 1 week ago by Larissa_Cury.
    #10830
    Larissa_Cury
    Participant

    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?

    #10834
    Jeremy
    Keymaster

    This is the way I would do it too

    Jeremy

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.