JS: TOGGLE HIDE + ARRAY

  <style>

        .ET1, .ET2, .ET3 {

            display: none;

        }

    </style>

 <script>

        // Define an array of ID-class pairs

        var idClassPairs = [

            { id: 'ET1', class: 'ET1' },

            { id: 'ET2', class: 'ET2' },

            { id: 'ET3', class: 'ET3' }

            // Add more pairs as needed

        ];

        // Add click event listeners dynamically based on the array

        idClassPairs.forEach(function(pair) {

            var triggerElement = document.getElementById(pair.id);

            var hiddenElement = document.querySelector('.' + pair.class);

            triggerElement.addEventListener('click', function() {

                hiddenElement.classList.toggle(pair.class);

            });

        });

    </script>

CSS: display grid of card 3 in a row

         .product-list-container {

            display: grid;

            grid-template-columns: repeat(3, 1fr); /* Three cards per row */

            grid-gap: 20px; /* Adjust the gap between cards as needed */

        }

SVG + JAVASCRIPT + CSS : CLICK AREA, OPEN CLOSE TOGGLE CLASS ELEMENT TO SHOW CONTENT

SVG TOGGLE OPEN AREA #SVG 

SVG TOGGLE OPEN AREA #SVG 

<style>

.toggle-path.grayarea {

  fill: purple !important; /* Add !important to override any inline styles */

}

.toggle-path.grayarea:hover {

  fill: green !important; /* Add !important to override any inline styles */

}

</style>

<svg width="969" height="969" viewBox="0 0 969 969" fill="none" xmlns="http://www.w3.org/2000/svg">

  <path class="toggle-path grayarea" data-content="gray-content" d="M496 357L282 147.5L215 309.5L248.5 457L339 728.5L420 762H496L553.5 581L496 357Z" />

  <path class="toggle-path" data-content="blue-content" d="M497.5 358.5L282 147.5L577.5 125L754 358.5L553 586.5L497.5 358.5Z" fill="#0778FC" />

  <path class="toggle-path" data-content="green-content" d="M100 100L200 200L300 100" fill="#00FF00" />

  <!-- Add more paths and specify the associated data-content attribute -->

</svg>

<div class="toggle-container">

  <div class="toggle-content gray-content" style="display: none;">

    <!-- Content for grayarea -->

    <p>Gray Area Content</p>

  </div>

  <div class="toggle-content gray-content" style="display: none;">

    <!-- Content for grayarea -->

    <p>Gray Area Content</p>

  </div>

  <div class="toggle-content gray-content" style="display: none;">

    <!-- Content for grayarea -->

    <p>Gray Area Content</p>

  </div>

  <div class="toggle-content blue-content" style="display: none;">

    <!-- Content for bluearea -->

    <p>Blue Area Content</p>

  </div>

  <div class="toggle-content green-content" style="display: none;">

    <!-- Content for greenarea -->

    <p>Green Area Content 1</p>

  </div>

  <!-- Add more content containers for other areas -->

</div>

<script>

  const togglePaths = document.querySelectorAll(".toggle-path");

  const toggleContents = document.querySelectorAll(".toggle-content");

  togglePaths.forEach((path, index) => {

    path.addEventListener("click", function () {

      // Hide all content elements

      toggleContents.forEach((content) => {

        content.style.display = "none";

      });

      

      // Show the content associated with the clicked path

      const contentClass = path.getAttribute("data-content");

      const contentToShow = document.querySelectorAll(.${contentClass});

      if (contentToShow) {

        contentToShow.forEach((content) => {

          content.style.display = "block";

        });

      }

    });

  });

</script>

WHAT WE TRY TO DO?

WE TRY TO MAKE SVG PATH AS A BUTTON TO OPEN ELEMENT WITH CLASSES TOGGLE

Gray Area Content

Gray Area Content

Gray Area Content

Blue Area Content

Green Area Content 1

Laravel Model CRUD

Step 1: Create the 'Task' model

• Open your command prompt or terminal and navigate to your Laravel project's directory
• Run the following command to create the 'Task' model:

arduino
php artisan make:model Task -m

• This command will create a new model named 'Task' and also create a migration file for the 'tasks' table in the database.

Step 2: Define the 'tasks' table schema

• Open the newly created migration file located in the 'database/migrations' directory and define the 'tasks' table schema:

php
public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description')->nullable();
        $table->timestamps();
    });
}

• This schema will create a 'tasks' table with an auto-incrementing 'id' column, a 'title' column of type string, a 'description' column of type text and nullable, and two timestamp columns named 'created_at' and 'updated_at'.

Step 3: Run the migration

• Run the following command to run the migration:

php artisan migrate

• This command will create the 'tasks' table in the database.

Step 4: Define the 'Task' model attributes

• Open the 'Task' model located in the 'app' directory and define the attributes that correspond to the 'tasks' table columns:

php
namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $fillable = ['title', 'description'];
}

• This model defines two attributes, 'title' and 'description', that are fillable for mass assignment.

Step 5: Create the 'Task' controller

• Run the following command to create a new controller named 'TaskController':

go
php artisan make:controller TaskController --resource

• This command will create a new controller named 'TaskController' with all the necessary CRUD methods.

Step 6: Implement the 'Task' controller methods

• Open the 'TaskController' located in the 'app/Http/Controllers' directory and implement the following methods:

php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }

    public function create()
    {
        return view('tasks.create');
    }

    public function store(Request $request)
    {
        $task = new Task();
        $task->title = $request->input('title');
        $task->description = $request->input('description');
        $task->save();

        return redirect()->route('tasks.index');
    }

    public function show(Task $task)
    {
        return view('tasks.show', compact('task'));
    }

    public function edit(Task $task)
    {
        return view('tasks.edit', compact('task'));
    }

    public function update(Request $request, Task $task)
    {
        $task->title = $request->input('title');
        $task->description = $request->input('description');
        $task->save();

        return redirect()->route('tasks.index');
    }

    public function destroy(Task $task)
    {
        $task->delete();

        return redirect()->route('tasks.index');
    }
}

• These methods correspond to the CRUD operations for the 'Task' model.
• The 'index' method retrieves all the tasks from the database

In Laravel, the view files are usually located in the 'resources/views' directory. You can create a subdirectory inside the 'resources/views' directory with the same name as your controller to organize your views for that controller. For example, if your controller is named 'TaskController', you can create a 'tasks' subdirectory inside the 'resources/views' directory and store all the view files for the 'TaskController' in that directory.

So, for example, you can create the following view files for the 'TaskController':

• 'index.blade.php' located in 'resources/views/tasks/'
• 'create.blade.php' located in 'resources/views/tasks/'
• 'edit.blade.php' located in 'resources/views/tasks/'
• 'show.blade.php' located in 'resources/views/tasks/'

Note that you can name your view files anything you want, as long as they end with '.blade.php' and are located in the 'resources/views' directory or one of its subdirectories. Also, remember to update the view file names in the 'TaskController' methods where necessary.

example of index.blade.php

here is an example of an 'index.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Tasks</h1>
    <a href="{{ route('tasks.create') }}" class="btn btn-primary mb-3">Create Task</a>
    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($tasks as $task)
                <tr>
                    <td>{{ $task->title }}</td>
                    <td>{{ $task->description }}</td>
                    <td>{{ $task->created_at }}</td>
                    <td>
                        <a href="{{ route('tasks.show', $task) }}" class="btn btn-primary">Show</a>
                        <a href="{{ route('tasks.edit', $task) }}" class="btn btn-secondary">Edit</a>
                        <form action="{{ route('tasks.destroy', $task) }}" method="POST" class="d-inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this task?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

This view file displays a table of all the tasks with their title, description, and created_at date. It also includes buttons to show, edit, and delete each task, as well as a button to create a new task.

you can add the following route to your 'routes/web.php' file:

php
Route::resource('tasks', 'TaskController');

This route will create the necessary routes for the 'TaskController', including a route that points to the 'index' method.

here is an example of a 'create.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Create Task</h1>
    <form action="{{ route('tasks.store') }}" method="POST">
        @csrf
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" id="description" class="form-control" rows="5" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
    </form>
@endsection

here is an example of a 'show.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>{{ $task->title }}</h1>
    <p>{{ $task->description }}</p>
    <p>Created At: {{ $task->created_at }}</p>
    <p>Updated At: {{ $task->updated_at }}</p>
    <a href="{{ route('tasks.edit', $task) }}" class="btn btn-secondary">Edit</a>
    <form action="{{ route('tasks.destroy', $task) }}" method="POST" class="d-inline-block">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this task?')">Delete</button>
    </form>
@endsection

here is an example of an 'edit.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Edit Task</h1>
    <form action="{{ route('tasks.update', $task) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="form-control" value="{{ $task->title }}" required>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" id="description" class="form-control" rows="5" required>{{ $task->description }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>
@endsection

This view file displays a form with fields for editing a task's title and description. It also includes an 'Update' button to submit the form.