I can replicate the UI. If you can give me an idea of how to add in any of the frameworks, let us say react, that would be useful too.
This is the template.
<div class="cmd">
</div>
This is where terminal logic is supposed to go
import Component from '@glimmer/component';
import jQuery from 'jquery';
export default class CommandLineComponent extends Component {
}
I was able to figure out something by searches and tries. This is the template.
<div id="test"> </div>
<button {{action "pressed"}}>
Press Me
</button>
And this is the component code.
import Component from '@ember/component';
export default Component.extend({
actions: {
pressed: function() {
$("#test").append("<span>hello</span>");
}
}
});
this works fine
import Component from '@ember/component';
import terminal from 'jquery.terminal';
import $ from 'jquery';
export default Component.extend({
actions: {
pressed: function () {
$('#test').terminal(
{
hello: function (what) {
this.echo('Hello, ' + what + '. Wellcome to this terminal.');
},
},
{
greetings: 'My First Web Terminal',
}
);
},
},
}
);