Sarcastic Text Generator pt.1 - Getting Started

angular Jan 23, 2021

"wElL mEaNiNg PhRaSe WrItTeN sArCaStIcAlLy"

Too often I find myself enduring the mammoth task that is alternately holding down the shift key when typing something sarcastically to my friends (whom I do have, I swear). Rather than use any of the countless options already available online, or, you know, start being nicer to people, I decided to over-complicate the process and build the tool myself, which I figured would also be a nice training exercise (and the actual real reason I'm doing this). The finished app is viewable here.

Choosing the Right Language

First things first, lets define what we want this tool to do. When a user types a string of text, we want that text to alternate the capitalization of letters. As a nice bonus, it should do this translation "live" without requiring the user to press  a button when they're done typing. So what should we use for this? The simplest option is something client side so we can host it statically. JavaScript alone would probably be enough to do this, but I want to use something a bit more fun that will let me build a nice UI as well, so lets go with AngularJS.

Building the Tool

Lets start off by coming up with the basic layout we want for the tool, which should be fairly straightforward. We need a box for the user to type into, somewhere for the output to be displayed, and as a nice bonus, lets put in a button that will copy the output to the users' clipboard.

Basic App Setup

I don't want to go into the specific workings of Angular, because many sites already have that well covered. So I'll go through the commands we needed to run to get the basic shell of an app up and running.

First things first, lets assume all the necessary dependencies are installed, and run the command to setup the workspace and project.

ng new angular-sarcastic-text-gen

We'll get asked a couple of questions, you can hit enter to accept all the defaults. Boom, now we've got a skeleton app (spooky) ready for us to configure! You don't really need an IDE for something like this, so a nice text editor like Visual Studio Code will do fine (seriously, if you're not using it already, you should give it a try).

Before doing any configuration, lets make sure everything is running fine as is. Running the following command will build and run the app, starting a development server, and open the page for the app in your default browser.

cd angular-sarcastic-text-gen 
ng serve --open

Because this command runs a development server, you can make changes to your Angular files, and the changes will be reloaded live (in almost all cases).

Configuring the App

Now we've got the basic blank app running, lets start making some modifications. Before that, a quick note on the files that we'll need to modify. If you've looked in the created folder already, you'll see an overwhelming number of files (welcome to using a framework for coding). For now, we can happily ignore most of them, the three files we're concerned with comprise a single "component" and are

  1. app.component.ts - TypeScript class code, the logic of the component
  2. app.component.html - the HTML template used to render the component
  3. app.component.css - the CSS styles for the component

There is also an app wide CSS file located in src/styles.css, for styles you want to be used across the app.

These files form the core basis of the Angular app we're building. While we could modify them directly, adding our logic, lets try and be semi-professional about this. We might want to add more features to our app in the future, and trying to add all that logic to the same three files might get messy, so lets make a new component, which will hold all our amazing production-ready code.

ng generate componont sarcastic-text

This command will create a new folder in src/app/sarcastic-text, with three files, Typescript, HTML, and CSS, which we'll use for our app logic. We have one more step to do before we get to the fun bit, and that's to reference this new component in the root app.component.html file, so it will be rendered. To do this, we'll add the element <app-sarcastic-text> to the root HTML file, and add a reference to the component in our root app.module.ts file.

<h1>Angular App</h1>
<app-sarcastic-text></app-sarcastic-text>
Root HTML file with reference to new component
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SarcasticTextComponent } from './sarcastic-text/sarcastic-text.component';

@NgModule({
  declarations: [
    AppComponent,
    SarcasticTextComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
Core App file

Ok, we're now ready to actually start really coding (finally!).

Coding the App

Overall, we'll need some HTML that lets a user type into a box, converts that text, and displays the converted text.

Firstly, we'll need some object that will hold the text we're typing in, so we can manipulate it in some way. Is that the best way to do this? Who knows! Lets plow on and figure it out later. We can do this fairly simply by make a new file called text-object.ts.

export interface Text_Object {
    inputText: string;
}

Now, lets open the sarcastic-text.component.ts file, and a reference to our shiny new text object. Most of the lines in this file have been auto-generated, the custom ones are on lines 2, and 11-13.

import { Component, OnInit } from '@angular/core';
import { Text_Object } from '../text-object';

@Component({
  selector: 'app-sarcastic-text',
  templateUrl: './sarcastic-text.component.html',
  styleUrls: ['./sarcastic-text.component.css']
})
export class SarcasticTextComponent implements OnInit {

  sarcastic_text: Text_Object = {
    inputText: ""
  }

  constructor() { }

  ngOnInit(): void {
  }

}

We probably don't need the reference to OnInit but lets keep it for now in case I change my mind and want to do something fancy with it later.

We've got our basic code for the component built, now lets write some HTML to let us set the value inputText. It's going to be relatively straightforward for now, just a text box for input, something for output, and some data binding.

<h2>Sarcastic Text Generator</h2>
<div>
  <label>Input:
    <input [(ngModel)]="sarcastic_text.inputText" placeholder="name"/>
  </label>
  <label>Output: {{sarcastic_text.inputText}}
  </label>
</div> 

So what we've got now is a box we can type into, and the text is mirrored on the page immediately after the input box. Once this has been done you may need to reload your test Angular server, and this is a good point to make sure everything builds and works correctly. It's also a good point to finish this post, and leave some of the fun for part 2.

sarcastic text generator screenshot that shows text being copied when the user types it
It's so pretty and....functional

In this post we've set up a basic Angular app, added a component, added some logic that lets a user type in text and see that text output in real time, and we've added the elements of a pipe to transform the input text. In the next post, we'll add the logic for actually transforming the text, making it look nicer, and later we'll cover deploying the finished app.

Tags