Typewriter

Add text to div one character at a time.

by jhorvath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js">
</script>
<script>
  hljs.initHighlightingOnLoad();

</script>


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/vs.min.css">
<h2>
  Visual Studio STYLE
</h2>
<pre>
	<code class="hljs cs">
using System;
using System.Web;
using Hangfire;
using Hangfire.Dashboard;
using Hangfire.SqlServer;
using Microsoft.Owin;
using Owin;
using WebSched.Infrastructure;

[assembly: OwinStartup(typeof(WebSched.Startup))]

namespace WebSched
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            SqlServerStorageOptions sqlSrvOptions =
                new SqlServerStorageOptions { QueuePollInterval = TimeSpan.FromSeconds(1.0) };

            GlobalConfiguration.Configuration
                .UseSqlServerStorage("WebSchedulerDb", sqlSrvOptions)
                .UseFilter(new LogFailureAttribute()).UseNLogLogProvider();

            var dashOpts = new DashboardOptions
            {
                // Make `Back to site` link working for subfolder applications
                AppPath = VirtualPathUtility.ToAbsolute("~"),
                // this specifies to return TRUE if 
                Authorization = new IDashboardAuthorizationFilter[] { 
                    new BsnSportsAuthorizationFilter(), 
                }
            };

            app.UseHangfireDashboard("/hangfire", dashOpts);
            app.UseHangfireServer();
        }
    }
}</code>
</pre>

<code class="hljs cs">
using System.Text;
  <div id="message"></div>
</code>

CSS

#text {
    width: 400px;
}

JavaScript

var res = `using System;
public record class Account {
  public Guid Id { get; }
  public string Name { get; init; }
  
  public Account(Guid id) {
    _ = id == Guid.Empty ? throw new ArgumentException(nameof(id), "Empty guid is not a valid account id.") : id;
    
    Id = id;
  }
}`;
var placeHolder = 0;

					var textAdder = setInterval(function(){
              var currentChar = res.charAt(placeHolder);
              if(currentChar == '\n') {
              	document.getElementById("message").innerHTML += "</br>";  
              }
          
	    				document.getElementById("message").innerHTML += currentChar;
					    if (++placeHolder == res.length){
					        clearInterval(textAdder);
					        $("#message").trigger($.Event("keypress", { keyCode: 13 }));
					    }
					}, 25);