Habit Tracker - Copy this React, Tailwind Component to your project
<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Habit-Tracker-App</title>-<script-src="https://cdn.tailwindcss.com"></script>-<link-rel="stylesheet"-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>-<link-href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"-rel="stylesheet">-</head>-<body-class="font-roboto-bg-gray-100-flex-flex-col-h-screen">-<div-class="flex-grow-container-mx-auto-p-4-relative">-<h1-class="text-3xl-font-bold-text-center-mb-8">Habit-Tracker-App</h1>-<div-id="content"-class="grid-grid-cols-1-gap-4-overflow-y-auto-h-full-pr-4">-<!---Habits-Section--->-<div-id="habitsSection"-class="bg-white-p-4-rounded-lg-shadow-md">-<h2-class="text-2xl-font-bold-mb-4">Habits</h2>-<button-id="addHabitBtn"-class="bg-blue-500-text-white-px-4-py-2-rounded-lg-mb-4">+-Add-Habit</button>-<div-id="habitsList">-<!---Habit-items-will-be-added-here-dynamically--->-</div>-</div>-<!---Achievements-Section--->-<div-id="achievementsSection"-class="bg-white-p-4-rounded-lg-shadow-md-hidden">-<h2-class="text-2xl-font-bold-mb-4">Achievements</h2>-<ul>-<li-class="mb-2">Achievement-1</li>-<li-class="mb-2">Achievement-2</li>-<li-class="mb-2">Achievement-3</li>-<li-class="mb-2">Achievement-4</li>-<li-class="mb-2">Achievement-5</li>-<li-class="mb-2">Achievement-6</li>-<li-class="mb-2">Achievement-7</li>-<li-class="mb-2">Achievement-8</li>-<li-class="mb-2">Achievement-9</li>-<li-class="mb-2">Achievement-10</li>-<li-class="mb-2">Achievement-11</li>-<li-class="mb-2">Achievement-12</li>-<li-class="mb-2">Achievement-13</li>-<li-class="mb-2">Achievement-14</li>-<li-class="mb-2">Achievement-15</li>-</ul>-</div>-<!---History-Section--->-<div-id="historySection"-class="bg-white-p-4-rounded-lg-shadow-md-hidden">-<h2-class="text-2xl-font-bold-mb-4">History</h2>-<ul>-<li-class="mb-2">History-Item-1</li>-<li-class="mb-2">History-Item-2</li>-<li-class="mb-2">History-Item-3</li>-<li-class="mb-2">History-Item-4</li>-<li-class="mb-2">History-Item-5</li>-<li-class="mb-2">History-Item-6</li>-<li-class="mb-2">History-Item-7</li>-<li-class="mb-2">History-Item-8</li>-<li-class="mb-2">History-Item-9</li>-<li-class="mb-2">History-Item-10</li>-<li-class="mb-2">History-Item-11</li>-<li-class="mb-2">History-Item-12</li>-<li-class="mb-2">History-Item-13</li>-<li-class="mb-2">History-Item-14</li>-<li-class="mb-2">History-Item-15</li>-</ul>-</div>-</div>-</div>-<!---Bottom-Navigation-Bar--->-<div-class="fixed-bottom-0-left-0-right-0-bg-white-shadow-md">-<div-class="flex-justify-around">-<button-id="habitsNav"-class="p-4-text-blue-500">-<i-class="fas-fa-list-text-2xl"></i>-<p>Habits</p>-</button>-<button-id="achievementsNav"-class="p-4-text-gray-500">-<i-class="fas-fa-trophy-text-2xl"></i>-<p>Achievements</p>-</button>-<button-id="historyNav"-class="p-4-text-gray-500">-<i-class="fas-fa-history-text-2xl"></i>-<p>History</p>-</button>-</div>-</div>-<!---Modal-for-Adding/Editing-Habit--->-<div-id="habitModal"-class="fixed-inset-0-bg-gray-800-bg-opacity-50-flex-items-center-justify-center-hidden">-<div-class="bg-white-p-6-rounded-lg-shadow-lg-w-11/12-md:w-1/2-lg:w-1/3-relative">-<div-class="flex-justify-between-items-center-mb-4">-<h2-class="text-2xl-font-bold"-id="habitModalTitle">Add-New-Habit</h2>-<div>-<button-type="submit"-form="habitForm"-class="text-green-500-text-2xl"><i-class="fas-fa-save"></i></button>-<button-type="button"-id="cancelBtn"-class="text-gray-500-text-2xl-ml-2"><i-class="fas-fa-times"></i></button>-</div>-</div>-<form-id="habitForm"-class="overflow-y-auto-h-96-pr-4">-<div-class="mb-4">-<label-for="habitName"-class="block-text-gray-700">Habit-Name</label>-<input-type="text"-id="habitName"-class="w-full-px-3-py-2-border-rounded-lg"-required>-</div>-<div-class="mb-4">-<label-for="totalTarget"-class="block-text-gray-700">Total-Target</label>-<input-type="number"-id="totalTarget"-class="w-full-px-3-py-2-border-rounded-lg"-required>-</div>-<div-class="mb-4">-<label-for="unit"-class="block-text-gray-700">Unit</label>-<input-type="text"-id="unit"-class="w-full-px-3-py-2-border-rounded-lg"-required>-</div>-<div-class="mb-4">-<label-for="rewardPoints"-class="block-text-gray-700">Reward-Points-(Rupees)</label>-<input-type="number"-id="rewardPoints"-class="w-full-px-3-py-2-border-rounded-lg"-required>-</div>-<div-class="mb-4">-<label-for="deadline"-class="block-text-gray-700">Deadline</label>-<input-type="date"-id="deadline"-class="w-full-px-3-py-2-border-rounded-lg"-required>-</div>-<div-class="mb-4">-<label-for="habitTime"-class="block-text-gray-700">Habit-Time</label>-<select-id="habitTime"-class="w-full-px-3-py-2-border-rounded-lg"-required>-<option-value="Morning">Morning</option>-<option-value="Evening">Evening</option>-<option-value="Night">Night</option>-</select>-</div>-</form>-</div>-</div>-<!---Modal-for-Updating-Today's-Achievement--->-<div-id="updateModal"-class="fixed-inset-0-bg-gray-800-bg-opacity-50-flex-items-center-justify-center-hidden">-<div-class="bg-white-p-6-rounded-lg-shadow-lg-w-11/12-md:w-1/3-lg:w-1/4-relative">-<div-class="flex-justify-between-items-center-mb-4">-<h2-class="text-2xl-font-bold">Update-Today's-Achievement</h2>-</div>-<form-id="updateForm"-class="overflow-y-auto-h-48-pr-4">-<div-class="mb-4">-<label-for="todayAchievement"-class="block-text-gray-700">Today's-Achievement</label>-<input-type="number"-id="todayAchievement"-class="w-full-px-3-py-2-border-rounded-lg"-required>-</div>-<div-class="flex-justify-center-space-x-4">-<button-type="submit"-class="bg-green-500-text-white-px-4-py-2-rounded-lg"><i-class="fas-fa-save"></i>-Save</button>-<button-type="button"-id="cancelUpdateBtn"-class="bg-gray-500-text-white-px-4-py-2-rounded-lg"><i-class="fas-fa-times"></i>-Cancel</button>-</div>-</form>-</div>-</div>-<script>-let-currentEditHabit-=-null;-let-habits-=-JSON.parse(localStorage.getItem('habits'))-||-[];-function-saveHabits()-{-localStorage.setItem('habits',-JSON.stringify(habits));-}-function-renderHabits()-{-const-habitsList-=-document.getElementById('habitsList');-habitsList.innerHTML-=-'';-habits.forEach((habit,-index)-=>-{-const-habitItem-=-document.createElement('div');-habitItem.classList.add('mb-4',-'p-4',-'border',-'rounded-lg',-'bg-gray-50');-habitItem.innerHTML-=-`-<div-class="flex-justify-between-items-center">-<h3-class="text-xl-font-bold-habit-name">${habit.name}</h3>-<div>-<button-class="editHabitBtn-text-blue-500-mr-2"><i-class="fas-fa-edit"></i></button>-<button-class="deleteHabitBtn-text-red-500"><i-class="fas-fa-trash"></i></button>-</div>-</div>-<p><i-class="fas-fa-bullseye"></i>-<span-class="total-target">Total-Target:-${habit.totalTarget}-${habit.unit}</span></p>-<p><i-class="fas-fa-rupee-sign"></i>-<span-class="reward-points">Reward-Points:-${habit.rewardPoints}-Rupees</span></p>-<p><i-class="fas-fa-calendar-alt"></i>-<span-class="deadline">Deadline:-${habit.deadline}</span></p>-<p><i-class="fas-fa-clock"></i>-<span-class="habit-time">Habit-Time:-${habit.habitTime}</span></p>-<p><i-class="fas-fa-trophy"></i>-<span-class="best-achievement-${habit.bestAchievement->-0-?-'text-green-500'-:-''}">Best-Achievement:-${habit.bestAchievement}-${habit.unit}</span></p>-<p><i-class="fas-fa-tasks"></i>-<span-class="remaining-target">Remaining-Target:-${habit.remainingTarget}</span></p>-<div-class="w-full-bg-gray-200-rounded-full-h-4-mb-4">-<div-class="progress-bar-h-4-rounded-full-${getProgressBarColor(habit.progressPercentage)}"-style="width:-${habit.progressPercentage}%"></div>-</div>-<div-class="flex-justify-between-text-sm-text-gray-600">-<span>0-${habit.unit}</span>-<span>${habit.totalTarget}-${habit.unit}</span>-</div>-<button-class="bg-green-500-text-white-px-4-py-2-rounded-lg-updateAchievementBtn">Update-Today's-Achievement</button>-`;-habitsList.appendChild(habitItem);-habitItem.querySelector('.updateAchievementBtn').addEventListener('click',-function()-{-document.getElementById('updateModal').classList.remove('hidden');-const-updateForm-=-document.getElementById('updateForm');-updateForm.onsubmit-=-function(event)-{-event.preventDefault();-const-todayAchievement-=-parseInt(document.getElementById('todayAchievement').value);-habit.remainingTarget--=-todayAchievement;-habit.progressPercentage-=-((habit.totalTarget---habit.remainingTarget)-/-habit.totalTarget)-*-100;-if-(todayAchievement->-habit.bestAchievement)-{-habit.bestAchievement-=-todayAchievement;-}-if-(habit.remainingTarget-<=-0)-{-alert(`Congratulations!-You've-completed-the-habit:-${habit.name}`);-if-(confirm('Do-you-want-to-restart-this-habit?'))-{-habit.remainingTarget-=-habit.totalTarget;-habit.progressPercentage-=-0;-}-}-saveHabits();-renderHabits();-document.getElementById('updateModal').classList.add('hidden');-updateForm.reset();-};-});-habitItem.querySelector('.editHabitBtn').addEventListener('click',-function()-{-currentEditHabit-=-index;-document.getElementById('habitModalTitle').textContent-=-'Edit-Habit';-document.getElementById('habitName').value-=-habit.name;-document.getElementById('totalTarget').value-=-habit.totalTarget;-document.getElementById('unit').value-=-habit.unit;-document.getElementById('rewardPoints').value-=-habit.rewardPoints;-document.getElementById('deadline').value-=-habit.deadline;-document.getElementById('habitTime').value-=-habit.habitTime;-document.getElementById('habitModal').classList.remove('hidden');-});-habitItem.querySelector('.deleteHabitBtn').addEventListener('click',-function()-{-habits.splice(index,-1);-saveHabits();-renderHabits();-});-});-}-function-getProgressBarColor(progressPercentage)-{-if-(progressPercentage-<=-30)-{-return-'bg-red-500';-}-else-if-(progressPercentage-<=-70)-{-return-'bg-orange-500';-}-else-{-return-'bg-green-500';-}-}-document.getElementById('addHabitBtn').addEventListener('click',-function()-{-document.getElementById('habitModalTitle').textContent-=-'Add-New-Habit';-document.getElementById('habitForm').reset();-currentEditHabit-=-null;-document.getElementById('habitModal').classList.remove('hidden');-});-document.getElementById('cancelBtn').addEventListener('click',-function()-{-document.getElementById('habitModal').classList.add('hidden');-});-document.getElementById('habitForm').addEventListener('submit',-function(event)-{-event.preventDefault();-const-habitName-=-document.getElementById('habitName').value;-const-totalTarget-=-document.getElementById('totalTarget').value;-const-unit-=-document.getElementById('unit').value;-const-rewardPoints-=-document.getElementById('rewardPoints').value;-const-deadline-=-document.getElementById('deadline').value;-const-habitTime-=-document.getElementById('habitTime').value;-const-newHabit-=-{-name:-habitName,-totalTarget:-totalTarget,-unit:-unit,-rewardPoints:-rewardPoints,-deadline:-deadline,-habitTime:-habitTime,-bestAchievement:-0,-remainingTarget:-totalTarget,-progressPercentage:-0-};-if-(currentEditHabit-!==-null)-{-habits[currentEditHabit]-=-newHabit;-}-else-{-habits.push(newHabit);-}-saveHabits();-renderHabits();-document.getElementById('habitModal').classList.add('hidden');-});-document.getElementById('cancelUpdateBtn').addEventListener('click',-function()-{-document.getElementById('updateModal').classList.add('hidden');-});-document.getElementById('habitsNav').addEventListener('click',-function()-{-document.getElementById('habitsSection').classList.remove('hidden');-document.getElementById('achievementsSection').classList.add('hidden');-document.getElementById('historySection').classList.add('hidden');-this.classList.add('text-blue-500');-this.classList.remove('text-gray-500');-document.getElementById('achievementsNav').classList.add('text-gray-500');-document.getElementById('achievementsNav').classList.remove('text-blue-500');-document.getElementById('historyNav').classList.add('text-gray-500');-document.getElementById('historyNav').classList.remove('text-blue-500');-});-document.getElementById('achievementsNav').addEventListener('click',-function()-{-document.getElementById('habitsSection').classList.add('hidden');-document.getElementById('achievementsSection').classList.remove('hidden');-document.getElementById('historySection').classList.add('hidden');-this.classList.add('text-blue-500');-this.classList.remove('text-gray-500');-document.getElementById('habitsNav').classList.add('text-gray-500');-document.getElementById('habitsNav').classList.remove('text-blue-500');-document.getElementById('historyNav').classList.add('text-gray-500');-document.getElementById('historyNav').classList.remove('text-blue-500');-});-document.getElementById('historyNav').addEventListener('click',-function()-{-document.getElementById('habitsSection').classList.add('hidden');-document.getElementById('achievementsSection').classList.add('hidden');-document.getElementById('historySection').classList.remove('hidden');-this.classList.add('text-blue-500');-this.classList.remove('text-gray-500');-document.getElementById('habitsNav').classList.add('text-gray-500');-document.getElementById('habitsNav').classList.remove('text-blue-500');-document.getElementById('achievementsNav').classList.add('text-gray-500');-document.getElementById('achievementsNav').classList.remove('text-blue-500');-});-renderHabits();-</script>-</body>-</html>
