const dropSwingKeyframes = keyframes` 0% { transform: translateY(-300px); } 5% { transform: translateY(-290px); } 10% { transform: translateY(-250px); } 15% { transform: translateY(-160px); } 20% { transform: translateY( 0px); } 30% { transform: rotate(-16deg); transform-origin: 50% -100%; } 50% { transform: rotate( 12deg); transform-origin: 50% -100%; } 70% { transform: rotate( -8deg); transform-origin: 50% -100%; } 90% { transform: rotate( 4deg); transform-origin: 50% -100%; } 100% { transform: rotate( 0deg); transform-origin: 50% -100%; } `; const LoseResultDiv = styled.div` text-align: center; animation-name: ${dropSwingKeyframes}; animation-delay: 0.2s; animation-duration: 2.0s; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; animation-direction: normal; grid-column: 2; grid-row: 2; `; class LoseScreen extends Component { render() { const { usage, blanks } = this.props; const { lang, clickPlayAgain, clickQuit } = this.props; return ( ); } }

Introduction

Basic Client Pages with React

Dynamic Client-Side Pages with React

Server-Side API Creation with Flask

Database Definition and Creation with SQLAlchemy

Code Documentation with Sphinx

An Introduction to Code Testing

UI Testing

API Testing

Database Integrity Testing

Automatically Testing Every Update

Design a Web Application

Build the Data Model

Build the REST API

Build the React Client

Finishing Touches for the App

Web Authentication

Deploy the Application

Conclusion

Appendix

Screens: Lose

Lose screen