Adding a Star Rating with Hotwire

• turbo-movies

  2 4 2.6 Ruby

  A single page movie application implemented with hotwire-turbo

This post walks through the process of adding a rating system to a Turbo powered single page application. The application in question was built up in a previous post. If you want to follow along with the post, you can grab the repo at the starting point or just read the pull request.

• inline_svg

  1 685 5.6 Ruby

  Embed SVG documents in your Rails views and style them with CSS

The best way to style an SVG icon (which is one of the big advantages of the format, in my opinion) is to embed the SVG in the HTML document (render it inline with the rest of the HTML) and from there apply CSS styles as you might expect. There's a gem called inline_svg that we'll make use of to make that easier.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,278 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

The next step in creating our star bar is the stars! We're going to use icons from the wonderful heroicons which is a suite of beautiful SVG icons from the makers of TailwindCSS.

• heroicons

  78 20,637 7.2 JavaScript

  A set of free MIT-licensed high-quality SVG icons for UI development.

  

The next step in creating our star bar is the stars! We're going to use icons from the wonderful heroicons which is a suite of beautiful SVG icons from the makers of TailwindCSS.

Suggest a related project