Wordle

An Interview with Winston Chang: Building a Wordle App with Shiny for Python || RStudio

Shiny makes it easy to build interactive web applications with the power of Python’s data and scientific stack.

Nick Strayer || Part IV: Styling a Shiny Wordle App with CSS || RStudio

00:00 Introduction 00:44 Switching from verbatimTextOutput to uiOutput 01:42 Switching from renderText to HTML DOM elements 03:17 In-line styling with divs 07:30 Converting individual letters from block elements to adjacent grids with CSS grid 08:56 Adding CSS at the head of the UI variable in Shiny with tags$head (and wrapping with HTML!) 10:36 CSS targeting of the background color 12:24 Link: Complete Guide to CSS Grid 14:05 Moving text position within each individual div using CSS classes 16:48 Creating a gap between grid elements 17:13 Rounding border edges for letter grids 19:00 Formatting letter grid background color to indicate result “correctness” 21:30 Increasing font size 23:37 Updating the legend to use color, not text indicators 26:40 Adjusting padding to improve app aesthetic 28:08 Formatting the app UI with justified centering 31:56 Adjusting the text input and Go button 34:07 Why Flexbox is the right tool for this task 35:09 Exploring Flexbox Dev Tools in Chrome 39:14 Adjusting the colors of letter grids using Inspect Element 40:40 Making text bold with font-weight 41:04 Hint on how to approach formatting the keyboard

In final installment of this four-part series, RStudio’s Nick Strayer walks through using CSS to stylize our Shiny Wordle app.

Winston Chang || Part III: Adding a Keyboard to a Wordle Shiny App || RStudio

00:00 Introduction 00:25 Setting up a keyboard 00:54 Using an HTML p tag to print out letter indicators 01:56 Back to our keyboard! 03:44 Setting up a search and replace 06:32 Removing letters using regular expressions 08:43 Making guesses a reactiveVal() 11:00 Avoiding an infinite loop with reactiveVal()

In Part III of this four-part series, Winston walks through how to build a keyboard in a Shiny Wordle app.

Winston Chang || Part II: Handling Duplicate Letters in a Shiny Wordle App || RStudio

00:00 Introduction 00:52 Setting up the problem with duplicate letters 02:08 Coding the first pass for exact matches in the correct position 06:29 Re-evaluating how to approach the problem 12:28 Removing only one instance of a letter 13:56 Testing our code 14:54 Setting up the second pass 19:08 Scoping with a double arrow 19:52 Debugging with a browser() statement 21:28 Checking our code

In Part II of this four-part series, Winston walks through how to handle duplicate letters when building your Shiny Wordle app.

Winston Chang || Part I: Build a Basic Wordle App with Shiny || RStudio

00:00 Introduction 00:12 What is Wordle? 00:36 The Wordle app we’ll build by the end of this four-part series 01:08 How to approach the problem 01:38 Word list (link to file below) 01:52 UI function with fluidPage() 02:24 Print out what player guesses using verbatimTextOutput() 03:36 Run app in Viewer Panel 04:04 Adding an action button with actionButton() 04:29 Using bindEvent() with actionButton() 06:02 Limiting guesses to words with five characters 07:40 Using req() and cancelOutput() 08:54 Incorporating the word list 10:13 Matching player guess to word list 11:06 Matching player guess to target word 13:50 Writing a function to match guess to target word with feedback 18:15 Checking word length between guess and target 23:02 Why we’re using intermediary functions 28:51 Printing formatted letter information

In Part I of this four-part series, Winston walks through how to build a basic Wordle app using Shiny!