World Flipper Logo

Coding Challange

Word Flipper is a dynamic web page programmed with JavaScript that takes a word or phrase and displays it on the page reversed.

Try it out! View Code

Tech Stack

JavaScript

I used JavaScript to create interactive elements, validate user input, and enhance user experience through dynamic content, and functionality.

Bootstrap

I used Bootstrap to create responsive and mobile-friendly design. Bootstrap provided a framework for creating consistent layouts, typography, and UI components.

HTML

I used HTML to organize text, images, and other media into a logical and accessible format for users.

CSS

I used CSS to control the color, typography, and other design elements of HTML content to create visually appealing and consistent user interface.

The App

The Code

Seperation of concerns

The solution to this coding challange is split into three sections, each of which will addreress a seperate concern.

Controller, Logic, View

The Controller function is the entry point for the page, it's responsible for getting and validating the inputs as well as handling the logic and view functions.

The Logic function is in charge of all the calculations.

The View function formats and displays data to the page.

//Controller
function getValues()

//Business Logic
function reverseString(message)

//View
function displayString(reverseMessage)
JavaScript

Functions

getValues

Is called when the user clicks reverse.

Calls it's borther functions to reverse string and display string on the page.

function getValues() {
    //Get inputs from the user and decides what to do with it
    let userInput = document.getElementById('inputMessage').value;

    let reversedInput = reverseString(userInput);

    displayString(reversedInput);
}
JavaScript
reverseString

Takes message.

Reverses message.

Returns reversed message.

function reverseString(message) {
    //Take a string, returns string in reverse
    let reverseMessage = '';

    for (let index = message.length -1; index >= 0; index--){
        reverseMessage += message[index];
    }

    //Turns string to lowercase
    reverseMessage = reverseMessage.toLowerCase();

    return reverseMessage;

}
JavaScript
displayString

Takes reverseMessage.

Formats and displaysreverseMessage to the page as an alert.

function displayString(reverseMessage) {
    //Displays string on the page
    document.getElementById('msg').textContent = reverseMessage;
    document.getElementById('results').classList.remove('d-none');
}
JavaScript