Building feedback web part user experience

The FeedbackWebPart.ts file has the render method, which is at the core of user experience. We want there to be an icon, a text field with hint text, and a button. There are many ways to do that. This time we are building DOM elements by first inserting some HTML and then binding event handlers, and so on. In Chapter 9, Using React and Office UI Fabric React Components, and Chapter 10, Working with Different JavaScript Frameworks and 3rd Party Frameworks, you will see different approaches, such as React and various JavaScript libraries.

We start from the src\webparts\feedback\Feedback.module.scss file. Replace the contents of the file with the following simple CSS definition and save the file.

.input { 
    border: 1px solid gray; 
    width: 50%;     
    margin: 0px 10px 0px 10px; 
} 
.successIndicator { 
    border: 0px; 
} 

The reason we can get away with such simple CSS is that we are using classes from Office UI Fabric.

Next, open FeedbackWebPart...