@extends('layouts.front-layout')
@section('title') Home @endsection

@section('content')

    <style>
        body {
            font-family: Arial, sans-serif;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        button {
            margin-left: 10px;
        }
    </style>

    <h1>Counter Application</h1>
    <div id="counter">0</div>
    <button id="increase">Increase</button>
    <button id="decrease">Decrease</button>
    <button id="reset">Reset</button>



    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Enter a new task">
    <button id="addTask">Add Task</button>
    <ul id="taskList"></ul>
<script>
    let counterValue = 0;
    const counterDisplay = document.getElementById("counter");
    const increaseBtn = document.getElementById("increase");
    const decreaseBtn = document.getElementById("decrease");
    const resetBtn = document.getElementById("reset");



    increaseBtn.addEventListener('click',function (){
        counterValue++;
        counterDisplay.textContent = counterValue;
    })

    decreaseBtn.addEventListener('click',function (){
        counterValue--;
        counterDisplay.textContent = counterValue;
    })

    resetBtn.addEventListener('click',function (){
        counterValue =  0;
        counterDisplay.textContent = counterValue;
    })


</script>
@endsection