Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CodeSignal

Creating a frontend for the Word Play Game with FastAPI Templates

via CodeSignal

Go to class Write review

Overview

This course introduces learners to the process of building a web interface for the LLM prediction game using HTML, CSS, and JavaScript. By the end, players can interactively play the game, submit guesses, see scores, and compete on a leaderboard.

Syllabus

  • Unit 1: Building the Game Interface
    • Serve HTML Template via FastAPI Root Route
    • Build Basic HTML Template for LLM Prediction Game
    • Build the Game Interface Container
    • Add Start Button to LLM Prediction Game Interface
    • Add Hidden Info Section with LLM Details
    • Add Response Div and Guess Table
    • Add Guess Input Block to Prediction Game
    • Implement Result and Leaderboard Sections
    • Add Static CSS and JS Links to FastAPI Template
  • Unit 2: Styling the Game Interface with CSS
    • Add Basic Body Styling
    • Center and Style the Main Game Container
    • Enhance Heading and Description Styling
    • Style the .response Container
    • Style the Game History Table
    • Improve Guess Input Field Styling
    • Enhance Game Button Styling
    • Add display none to hidden class
  • Unit 3: Making the Game Interactive with Javascript
    • Implement the startGame Function for Game Initialization
    • Implement showNextWord Function
    • Implement Start Button Event Listener
    • Complete the updateGuessTable Function
    • Implement Player Guess Submission Logic
    • Update Guess Handler Display Logic
    • Implement Score Submission Event Listener
    • Add Leaderboard Display Functionality

Reviews

Start your review of Creating a frontend for the Word Play Game with FastAPI Templates

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.