Score App using Laravel and Livewire

Hello Readers...

Today in this blog I am going to give an example of score app using laravel and livewire. In previous post we have seen how to install and use laravel and livewire. You can see the post here.

How to install Laravel and Livewire

Snehal Rajeev Moon ・ Mar 8 '22

#laravel #webdev #beginners #codenewbie

We have also created one livewire component which displays welcome message after you logged in.

So in todays’ blog post we will see the working of livewire with simple score app example. It is very easy to use and I loved to use livewire for my project when it is not big enough.

So let’s start with coding part.

Execute the following command.
php artisan make:livewire ScoreCounter

It will create two files one is Class file and another is view file which you can find under resources/views/livewire folder.

Step 1 - open view file - resources/views/livewire/score-counter and add the below code

<div>
    {{-- In work, do what you enjoy. --}}
    <div class="flex flex-row text-center">
        <div class="w-1/2 p-10">
            <h1 class="mb-5 text-2xl">
                Team A
            </h1>
            <h1 class="mb-9 text-5xl text-fuchsia-600 font-extrabold">
                {{ $scoreA }}
            </h1>
            <div class="text-white">
                <button wire:click="increment('teamA')" class="text-2xl border border-indigo-600 bg-indigo-500 rounded mx-2 px-10 py-1 mb-2">+</button>
                <button wire:click="decrement('teamA')" class="text-2xl border border-red-400 bg-red-600 rounded mx-2 px-10 py-1">-</button>
            </div>
        </div>
        <div class="w-1/2 p-10 border-l-2">
            <h1 class="mb-5 text-2xl">
                Team B
            </h1>
            <h1 class="mb-9 text-5xl text-fuchsia-600 font-extrabold">
                {{ $scoreB }}
            </h1>
            <div class="text-white">
                <button wire:click="increment('teamB')" class="text-2xl border border-indigo-600 bg-indigo-500 rounded mx-2 px-10 py-1 mb-2">+</button>
                <button wire:click="decrement('teamB')" class="text-2xl border border-red-400 bg-red-600 rounded mx-2 px-10 py-1">-</button>
            </div></div>
    </div>
</div>

Step 2 - Open class file named as ScoreCounter which is in app/Http/Livewire/ScoreCounter.php and add below code

    public $scoreA = 0, $scoreB = 0;

    public function increment($team)
    {
        $team == 'teamA' ? $this->scoreA++ : $this->scoreB++;
    }

    public function decrement($team)
    {
        $team == 'teamA' ? $this->scoreA-- : $this->scoreB--;
    }

The full code will look like this,

<?php
namespace App\Http\Livewire;

use Livewire\Component;

class ScoreCounter extends Component
{
    public $scoreA = 0, $scoreB = 0;

    public function increment($team)
    {
        $team == 'teamA' ? $this->scoreA++ : $this->scoreB++;
    }

    public function decrement($team)
    {
        $team == 'teamA' ? $this->scoreA-- : $this->scoreB--;
    }

    public function render()
    {
        return view('livewire.score-counter');
    }
}

render() method will render a view component for score app where we show the score for Team A and Team B.

Firstly we have created two public variable scoreA and scoreB and assigned it with initial value as 0. These public variable is now accessible everywhere.

Secondly we have defined two methods.
increment() and decrement() with team_name as param.

When increment button is clicked it passes to the class file with team name for which button is clicked, it will check the team_name with the param and if it matches it will increment the score for that particular team. Same procedure is used for decrement the score counter.

Example if I click increment button for team B then the score for teamB is incremented and vice vera for team A.

Please refer the screenshot for final output.

Happy Coding..
Thank you for reading... 🦄 ❤️ 🦄