<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Functional App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2980b9;
--background-color: #f5f7fa;
--text-color: #2c3e50;
--card-bg: #ffffff;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--border-radius: 12px;
--success-color: #2ecc71;
--danger-color: #e74c3c;
--warning-color: #f39c12;
--info-color: #3498db;
}
.default-theme {
--primary-color: #3498db;
--secondary-color: #2980b9;
--background-color: #f5f7fa;
--text-color: #2c3e50;
--card-bg: #ffffff;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark-theme {
--primary-color: #9b59b6;
--secondary-color: #8e44ad;
--background-color: #1a1a2e;
--text-color: #e6e6e6;
--card-bg: #16213e;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.green-theme {
--primary-color: #2ecc71;
--secondary-color: #27ae60;
--background-color: #ecf0f1;
--text-color: #2c3e50;
--card-bg: #ffffff;
}
.orange-theme {
--primary-color: #e67e22;
--secondary-color: #d35400;
--background-color: #fef9e7;
--text-color: #2c3e50;
--card-bg: #ffffff;
}
.purple-theme {
--primary-color: #8e44ad;
--secondary-color: #6c3483;
--background-color: #f4ecf7;
--text-color: #2c3e50;
--card-bg: #ffffff;
}
.pink-theme {
--primary-color: #e84393;
--secondary-color: #fd79a8;
--background-color: #ffeaa7;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.sunset-theme {
--primary-color: #e17055;
--secondary-color: #d63031;
--background-color: #fab1a0;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.ocean-theme {
--primary-color: #0984e3;
--secondary-color: #00cec9;
--background-color: #dfe6e9;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.forest-theme {
--primary-color: #00b894;
--secondary-color: #55efc4;
--background-color: #b2bec3;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.midnight-theme {
--primary-color: #6c5ce7;
--secondary-color: #a29bfe;
--background-color: #2d3436;
--text-color: #dfe6e9;
--card-bg: #34495e;
}
.coffee-theme {
--primary-color: #a1887f;
--secondary-color: #8d6e63;
--background-color: #d7ccc8;
--text-color: #4e342e;
--card-bg: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--background-color);
color: var(--text-color);
transition: all 0.3s ease;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo i {
font-size: 24px;
color: var(--primary-color);
}
.logo h1 {
font-size: 24px;
font-weight: 700;
}
.theme-selector {
position: relative;
}
.theme-toggle {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 15px;
border-radius: 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.theme-dropdown {
position: absolute;
top: 100%;
right: 0;
background: var(--card-bg);
border-radius: 10px;
box-shadow: var(--shadow);
padding: 15px;
margin-top: 10px;
width: 200px;
display: none;
z-index: 100;
}
.theme-dropdown.active {
display: block;
}
.theme-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.theme-option:hover {
background: rgba(0, 0, 0, 0.05);
}
.theme-option.active {
background: var(--primary-color);
color: white;
}
.theme-preview {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid white;
}
.app-container {
display: flex;
gap: 30px;
margin-top: 30px;
}
@media (max-width: 768px) {
.app-container {
flex-direction: column;
}
.functions-sidebar {
width: 100%;
}
}
.functions-sidebar {
width: 250px;
background-color: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 20px;
height: fit-content;
position: sticky;
top: 20px;
}
.functions-sidebar h2 {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 10px;
}
.function-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.function-btn {
padding: 15px;
border: none;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
text-align: left;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.function-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.function-btn.active {
background-color: var(--primary-color);
color: white;
}
.main-content {
flex: 1;
}
.card {
background-color: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 25px;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.card-title i {
color: var(--primary-color);
}
.calculator-display {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
text-align: right;
font-size: 24px;
font-weight: 600;
min-height: 70px;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
flex-direction: column;
}
.calculator-main-display {
font-size: 32px;
width: 100%;
}
.calculator-expression {
font-size: 16px;
opacity: 0.7;
width: 100%;
min-height: 20px;
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.calc-btn {
padding: 12px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
}
.calc-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.calc-btn.operator {
background-color: var(--primary-color);
color: white;
}
.calc-btn.operator:hover {
background-color: var(--secondary-color);
}
.calc-btn.function {
background-color: #95a5a6;
color: white;
}
.calc-btn.function:hover {
background-color: #7f8c8d;
}
.calc-btn.equals {
background-color: var(--secondary-color);
color: white;
grid-column: span 2;
}
.calculator-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 10px;
}
.calculator-tab {
padding: 10px 20px;
border: none;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}
.calculator-tab.active {
background-color: var(--primary-color);
color: white;
}
.calculator-content {
display: none;
}
.calculator-content.active {
display: block;
}
.basic-calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.bmi-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
@media (max-width: 480px) {
.bmi-inputs {
grid-template-columns: 1fr;
}
}
.bmi-input-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.bmi-input {
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 16px;
}
.bmi-result {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
margin-top: 20px;
text-align: center;
font-size: 24px;
font-weight: 600;
color: var(--primary-color);
}
.currency-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
@media (max-width: 480px) {
.currency-container {
grid-template-columns: 1fr;
}
}
.currency-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.currency-input {
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 16px;
}
.currency-select {
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 16px;
}
.currency-result {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
margin-top: 20px;
text-align: center;
font-size: 24px;
font-weight: 600;
color: var(--primary-color);
}
.tasbeeh-counter {
text-align: center;
padding: 20px;
}
.counter-display {
font-size: 80px;
font-weight: 700;
color: var(--primary-color);
margin: 20px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.counter-btn {
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
width: 120px;
height: 120px;
font-size: 24px;
font-weight: 700;
cursor: pointer;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.counter-btn:hover {
transform: scale(1.05);
background-color: var(--secondary-color);
}
.counter-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.control-btn {
padding: 10px 20px;
border: none;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}
.control-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.tasbeeh-list {
margin-top: 30px;
}
.tasbeeh-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
transition: all 0.2s;
}
.tasbeeh-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.add-tasbeeh {
margin-top: 20px;
display: flex;
gap: 10px;
}
.add-tasbeeh input {
flex: 1;
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 30px;
background-color: var(--card-bg);
color: var(--text-color);
}
.add-tasbeeh button {
padding: 12px 25px;
border: none;
border-radius: 30px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.add-tasbeeh button:hover {
background-color: var(--secondary-color);
}
.stopwatch-display {
font-size: 48px;
font-weight: 700;
text-align: center;
color: var(--primary-color);
margin: 20px 0;
}
.stopwatch-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.stopwatch-btn {
padding: 12px 25px;
border: none;
border-radius: 30px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.stopwatch-btn:hover {
background-color: var(--secondary-color);
}
.stopwatch-btn.reset {
background-color: #95a5a6;
}
.stopwatch-btn.reset:hover {
background-color: #7f8c8d;
}
.laps-container {
margin-top: 20px;
max-height: 200px;
overflow-y: auto;
}
.lap-item {
display: flex;
justify-content: space-between;
padding: 10px 15px;
margin-bottom: 10px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
}
.water-goal {
text-align: center;
margin-bottom: 20px;
}
.water-progress {
height: 20px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.water-progress-bar {
height: 100%;
background-color: var(--primary-color);
width: 0%;
transition: width 0.5s;
}
.water-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}
@media (max-width: 480px) {
.water-buttons {
grid-template-columns: repeat(2, 1fr);
}
}
.water-btn {
padding: 15px;
border: none;
border-radius: 10px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.water-btn:hover {
background-color: var(--secondary-color);
}
.water-history {
margin-top: 20px;
}
.water-history-item {
display: flex;
justify-content: space-between;
padding: 10px 15px;
margin-bottom: 10px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.calendar-nav {
display: flex;
gap: 10px;
}
.calendar-nav-btn {
padding: 8px 12px;
border: none;
border-radius: 5px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.calendar-day {
text-align: center;
padding: 10px 5px;
font-weight: 600;
color: var(--text-color);
opacity: 0.7;
}
.calendar-date {
text-align: center;
padding: 10px 5px;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
}
.calendar-date:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.calendar-date.today {
background-color: var(--primary-color);
color: white;
}
.calendar-date.selected {
background-color: var(--secondary-color);
color: white;
}
.calendar-date.other-month {
opacity: 0.4;
}
.notes-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
margin-top: 20px;
}
.note {
background-color: var(--card-bg);
border-radius: 10px;
padding: 15px;
box-shadow: var(--shadow);
border-left: 4px solid var(--primary-color);
}
.note-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.note-date {
font-size: 12px;
opacity: 0.7;
}
.note-content {
margin-bottom: 10px;
}
.note-actions {
display: flex;
gap: 10px;
}
.note-btn {
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
}
.add-note {
margin-top: 20px;
}
.add-note textarea {
width: 100%;
padding: 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--text-color);
resize: vertical;
min-height: 100px;
margin-bottom: 10px;
}
.settings-panel {
display: grid;
gap: 20px;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
}
.loader {
display: none;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4px solid var(--primary-color);
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--card-bg);
color: var(--text-color);
padding: 15px 20px;
border-radius: 10px;
box-shadow: var(--shadow);
display: none;
z-index: 1000;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
</style>
</head>
<body class="default-theme">
<div class="container">
<header>
<div class="logo">
<i class="fas fa-cube"></i>
<h1>Multi-Functional App</h1>
</div>
<div class="theme-selector">
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-palette"></i>
Theme
<i class="fas fa-chevron-down"></i>
</button>
<div class="theme-dropdown" id="themeDropdown">
<div class="theme-option active" data-theme="default-theme">
<div class="theme-preview" style="background-color: #3498db;"></div>
Default
</div>
<div class="theme-option" data-theme="dark-theme">
<div class="theme-preview" style="background-color: #9b59b6;"></div>
Dark
</div>
<div class="theme-option" data-theme="green-theme">
<div class="theme-preview" style="background-color: #2ecc71;"></div>
Green
</div>
<div class="theme-option" data-theme="orange-theme">
<div class="theme-preview" style="background-color: #e67e22;"></div>
Orange
</div>
<div class="theme-option" data-theme="purple-theme">
<div class="theme-preview" style="background-color: #8e44ad;"></div>
Purple
</div>
<div class="theme-option" data-theme="pink-theme">
<div class="theme-preview" style="background-color: #e84393;"></div>
Pink
</div>
</div>
</div>
</header>
<div class="app-container">
<div class="functions-sidebar">
<h2><i class="fas fa-th"></i> Tools</h2>
<div class="function-list">
<button class="function-btn active" data-tool="calculator">
<i class="fas fa-calculator"></i> Calculator
</button>
<button class="function-btn" data-tool="tasbeeh">
<i class="fas fa-hands-praying"></i> Tasbeeh Counter
</button>
<button class="function-btn" data-tool="converter">
<i class="fas fa-exchange-alt"></i> Currency Converter
</button>
<button class="function-btn" data-tool="stopwatch">
<i class="fas fa-stopwatch"></i> Stopwatch
</button>
<button class="function-btn" data-tool="water">
<i class="fas fa-tint"></i> Water Tracker
</button>
<button class="function-btn" data-tool="calendar">
<i class="fas fa-calendar"></i> Calendar
</button>
<button class="function-btn" data-tool="notes">
<i class="fas fa-sticky-note"></i> Notes
</button>
<button class="function-btn" data-tool="bmi">
<i class="fas fa-weight-scale"></i> BMI Calculator
</button>
</div>
</div>
<div class="main-content">
<div class="card" id="calculator-tool">
<div class="card-header">
<div class="card-title">
<i class="fas fa-calculator"></i>
Calculator
</div>
<div class="calculator-tabs">
<button class="calculator-tab active" data-calc="basic">Basic</button>
<button class="calculator-tab" data-calc="scientific">Scientific</button>
<button class="calculator-tab" data-calc="programmer">Programmer</button>
</div>
</div>
<div class="calculator-content active" id="basic-calc">
<div class="calculator-display">
<div class="calculator-expression" id="calcExpression">0</div>
<div class="calculator-main-display" id="calcDisplay">0</div>
</div>
<div class="basic-calculator-buttons">
<button class="calc-btn function" data-action="clear">C</button>
<button class="calc-btn function" data-action="backspace">⌫</button>
<button class="calc-btn function" data-action="percentage">%</button>
<button class="calc-btn operator" data-operator="/">÷</button>
<button class="calc-btn" data-number="7">7</button>
<button class="calc-btn" data-number="8">8</button>
<button class="calc-btn" data-number="9">9</button>
<button class="calc-btn operator" data-operator="*">×</button>
<button class="calc-btn" data-number="4">4</button>
<button class="calc-btn" data-number="5">5</button>
<button class="calc-btn" data-number="6">6</button>
<button class="calc-btn operator" data-operator="-">−</button>
<button class="calc-btn" data-number="1">1</button>
<button class="calc-btn" data-number="2">2</button>
<button class="calc-btn" data-number="3">3</button>
<button class="calc-btn operator" data-operator="+">+</button>
<button class="calc-btn" data-number="0">0</button>
<button class="calc-btn" data-number=".">.</button>
<button class="calc-btn equals" data-action="equals">=</button>
</div>
</div>
<div class="calculator-content" id="scientific-calc">
<div class="calculator-display">
<div class="calculator-expression">Scientific Calculator</div>
<div class="calculator-main-display">Coming Soon</div>
</div>
</div>
<div class="calculator-content" id="programmer-calc">
<div class="calculator-display">
<div class="calculator-expression">Programmer Calculator</div>
<div class="calculator-main-display">Coming Soon</div>
</div>
</div>
</div>
<div class="card" id="tasbeeh-tool" style="display: none;">
<div class="card-header">
<div class="card-title">
<i class="fas fa-hands-praying"></i>
Tasbeeh Counter
</div>
</div>
<div class="tasbeeh-counter">
<div class="counter-display" id="tasbeehCount">0</div>
<button class="counter-btn" id="countBtn">
<i class="fas fa-plus"></i>
</button>
<div class="counter-controls">
<button class="control-btn" id="resetBtn">Reset</button>
<button class="control-btn" id="saveBtn">Save</button>
<button class="control-btn" id="loadBtn">Load</button>
</div>
<div class="tasbeeh-list" id="tasbeehList">
</div>
<div class="add-tasbeeh">
<input type="text" id="newTasbeehName" placeholder="Enter tasbeeh name">
<button id="addTasbeehBtn">Add New</button>
</div>
</div>
</div>
<div class="card" id="converter-tool" style="display: none;">
<div class="card-header">
<div class="card-title">
<i class="fas fa-exchange-alt"></i>
Currency Converter
</div>
</div>
<div class="currency-container">
<div class="currency-group">
<input type="number" class="currency-input" id="amountInput" placeholder="Amount" value="1">
<select class="currency-select" id="fromCurrency">
<option value="USD">USD - US Dollar</option>
<option value="EUR">EUR - Euro</option>
<option value="GBP">GBP - British Pound</option>
<option value="JPY">JPY - Japanese Yen</option>
<option value="CAD">CAD - Canadian Dollar</option>
<option value="AUD">AUD - Australian Dollar</option>
<option value="CHF">CHF - Swiss Franc</option>
<option value="CNY">CNY - Chinese Yuan</option>
</select>
</div>
<div class="currency-group">
<div class="currency-input" id="resultDisplay">0</div>
<select class="currency-select" id="toCurrency">
<option value="EUR">EUR - Euro</option>
<option value="USD">USD - US Dollar</option>
<option value="GBP">GBP - British Pound</option>
<option value="JPY">JPY - Japanese Yen</option>
<option value="CAD">CAD - Canadian Dollar</option>
<option value="AUD">AUD - Australian Dollar</option>
<option value="CHF">CHF - Swiss Franc</option>
<option value="CNY">CNY - Chinese Yuan</option>
</select>
</div>
</div>
<div class="currency-result">
1 USD = 0.85 EUR
</div>
</div>
<div class="card" id="stopwatch-tool" style="display: none;">
<div class="card-header">
<div class="card-title">
<i class="fas fa-stopwatch"></i>
Stopwatch
</div>
</div>
<div class="stopwatch-display" id="stopwatchDisplay">00:00:00.00</div>
<div class="stopwatch-controls">
<button class="stopwatch-btn" id="startBtn">Start</button>
<button class="stopwatch-btn" id="pauseBtn" disabled>Pause</button>
<button class="stopwatch-btn reset" id="resetStopwatchBtn">Reset</button>
<button class="stopwatch-btn" id="lapBtn">Lap</button>
</div>
<div class="laps-container" id="lapsContainer">
</div>
</div>
<div class="card" id="water-tool" style="display: none;">
<div class="card-header">
<div class="card-title">
<i class="fas fa-tint"></i>
Water Tracker
</div>
</div>
<div class="water-goal">
<h3>Daily Goal: <span id="waterGoal">2000</span> ml</h3>
<div class="water-progress">
<div class="water-progress-bar" id="waterProgress"></div>
</div>
<div id="waterPercentage">0%</div>
</div>
<div class="water-buttons">
<button class="water-btn" data-ml="250">250 ml</button>
<button class="water-btn" data-ml="500">500 ml</button>
<button class="water-btn" data-ml="750">750 ml</button>
<button class="water-btn" data-ml="1000">1000 ml</button>
<button class="water-btn" id="customWaterBtn">Custom</button>
<button class="water-btn" id="resetWaterBtn">Reset Day</button>
</div>
<div class="water-history" id="waterHistory">
</div>
</div>
<div class="card" id="calendar-tool" style="display: none;">
<div class="card-header">
<div class="card-title">
<i class="fas fa-calendar"></i>
Calendar
</div>
<div class="calendar-header">
<button class="calendar-nav-btn" id="prevMonth"><i class="fas fa-chevron-left"></i></button>
<h3 id="currentMonth">January 2024</h3>
<button class="calendar-nav-btn" id="nextMonth"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
<div class="calendar-grid" id="calendarGrid">
</div>
</div>
<div class="card" id="bmi-tool" style="display: none;">
<div class="card-header">
<div class="card-title">
<i class="fas fa-weight-scale"></i>
BMI Calculator
</div>
</div>
<div class="bmi-inputs">
<div class="bmi-input-group">
<label for="heightInput">Height (cm)</label>
<input type="number" class="bmi-input" id="heightInput" placeholder="e.g., 170" value="170">
</div>
<div class="bmi-input-group">
<label for="weightInput">Weight (kg)</label>
<input type="number" class="bmi-input" id="weightInput" placeholder="e.g., 70" value="70">
</div>
</div>
<button class="calc-btn equals" style="width: 100%; margin-top: 10px;" id="calculateBMI">Calculate BMI</button>
<div class="bmi-result" id="bmiResult">
Enter your height and weight
</div>
</div>
<div class="card" id="notes-tool" style="display: none;">
<div class="card-header">
<div class="card-title">
<i class="fas fa-sticky-note"></i>
Notes
</div>
</div>
<div class="notes-container" id="notesContainer">
</div>
<div class="add-note">
<textarea id="newNote" placeholder="Write your note here..."></textarea>
<button class="calc-btn equals" style="width: 100%;" id="addNoteBtn">Add Note</button>
</div>
</div>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
const state = {
currentTheme: 'default-theme',
activeTool: 'calculator',
calculator: {
display: '0',
expression: '0',
firstOperand: null,
operator: null,
waitingForSecondOperand: false
},
tasbeeh: {
count: 0,
counters: []
},
stopwatch: {
running: false,
startTime: 0,
elapsedTime: 0,
laps: []
},
water: {
current: 0,
goal: 2000,
history: []
},
notes: [],
calendar: {
currentDate: new Date()
}
};
document.addEventListener('DOMContentLoaded', function() {
const themeToggle = document.getElementById('themeToggle');
const themeDropdown = document.getElementById('themeDropdown');
const themeOptions = document.querySelectorAll('.theme-option');
themeToggle.addEventListener('click', function() {
themeDropdown.classList.toggle('active');
});
themeOptions.forEach(option => {
option.addEventListener('click', function() {
const theme = this.getAttribute('data-theme');
document.body.className = theme;
state.currentTheme = theme;
themeOptions.forEach(opt => opt.classList.remove('active'));
this.classList.add('active');
themeDropdown.classList.remove('active');
localStorage.setItem('appTheme', theme);
showToast('Theme changed to ' + theme.replace('-theme', ''));
});
});
const savedTheme = localStorage.getItem('appTheme');
if (savedTheme) {
document.body.className = savedTheme;
state.currentTheme = savedTheme;
themeOptions.forEach(opt => {
if (opt.getAttribute('data-theme') === savedTheme) {
opt.classList.add('active');
}
});
}
const functionBtns = document.querySelectorAll('.function-btn');
const toolCards = document.querySelectorAll('.main-content > .card');
functionBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tool = this.getAttribute('data-tool');
functionBtns.forEach(b => b.classList.remove('active'));
this.classList.add('active');
toolCards.forEach(card => card.style.display = 'none');
document.getElementById(`${tool}-tool`).style.display = 'block';
state.activeTool = tool;
if (tool === 'calendar') {
generateCalendar();
}
});
});
const calcDisplay = document.getElementById('calcDisplay');
const calcExpression = document.getElementById('calcExpression');
const calcButtons = document.querySelectorAll('.calc-btn');
const calcTabs = document.querySelectorAll('.calculator-tab');
const calcContents = document.querySelectorAll('.calculator-content');
calcTabs.forEach(tab => {
tab.addEventListener('click', function() {
const calcType = this.getAttribute('data-calc');
calcTabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
calcContents.forEach(content => content.classList.remove('active'));
document.getElementById(`${calcType}-calc`).classList.add('active');
});
});
calcButtons.forEach(button => {
button.addEventListener('click', function() {
const number = this.getAttribute('data-number');
const operator = this.getAttribute('data-operator');
const action = this.getAttribute('data-action');
if (number !== null) {
inputNumber(number);
} else if (operator !== null) {
inputOperator(operator);
} else if (action !== null) {
handleAction(action);
}
updateCalculatorDisplay();
});
});
function inputNumber(number) {
const { display, waitingForSecondOperand } = state.calculator;
if (waitingForSecondOperand) {
state.calculator.display = number;
state.calculator.waitingForSecondOperand = false;
} else {
state.calculator.display = display === '0' ? number : display + number;
}
}
function inputOperator(nextOperator) {
const { display, firstOperand, operator } = state.calculator;
const inputValue = parseFloat(display);
if (operator && state.calculator.waitingForSecondOperand) {
state.calculator.operator = nextOperator;
state.calculator.expression = firstOperand + ' ' + nextOperator;
return;
}
if (firstOperand === null) {
state.calculator.firstOperand = inputValue;
} else if (operator) {
const result = performCalculation();
state.calculator.display = String(result);
state.calculator.firstOperand = result;
}
state.calculator.waitingForSecondOperand = true;
state.calculator.operator = nextOperator;
state.calculator.expression = state.calculator.display + ' ' + nextOperator;
}
function performCalculation() {
const { firstOperand, display, operator } = state.calculator;
const inputValue = parseFloat(display);
switch (operator) {
case '+': return firstOperand + inputValue;
case '-': return firstOperand - inputValue;
case '*': return firstOperand * inputValue;
case '/': return firstOperand / inputValue;
case '%': return firstOperand % inputValue;
default: return inputValue;
}
}
function handleAction(action) {
switch (action) {
case 'clear':
resetCalculator();
break;
case 'backspace':
handleBackspace();
break;
case 'equals':
handleEquals();
break;
case 'percentage':
handlePercentage();
break;
}
}
function resetCalculator() {
state.calculator = {
display: '0',
expression: '0',
firstOperand: null,
operator: null,
waitingForSecondOperand: false
};
}
function handleBackspace() {
if (state.calculator.display.length > 1) {
state.calculator.display = state.calculator.display.slice(0, -1);
} else {
state.calculator.display = '0';
}
}
function handleEquals() {
if (state.calculator.operator && !state.calculator.waitingForSecondOperand) {
const result = performCalculation();
state.calculator.display = String(result);
state.calculator.expression = state.calculator.expression + ' ' + state.calculator.display + ' =';
state.calculator.firstOperand = null;
state.calculator.operator = null;
state.calculator.waitingForSecondOperand = false;
}
}
function handlePercentage() {
const currentValue = parseFloat(state.calculator.display);
state.calculator.display = String(currentValue / 100);
}
function updateCalculatorDisplay() {
calcDisplay.textContent = state.calculator.display;
calcExpression.textContent = state.calculator.expression;
}
document.addEventListener('keydown', function(event) {
if (state.activeTool === 'calculator') {
const key = event.key;
if (/[0-9]/.test(key)) {
inputNumber(key);
updateCalculatorDisplay();
} else if (['+', '-', '*', '/'].includes(key)) {
inputOperator(key);
updateCalculatorDisplay();
} else if (key === 'Enter' || key === '=') {
handleEquals();
updateCalculatorDisplay();
} else if (key === 'Escape' || key === 'Delete') {
resetCalculator();
updateCalculatorDisplay();
} else if (key === 'Backspace') {
handleBackspace();
updateCalculatorDisplay();
} else if (key === '%') {
handlePercentage();
updateCalculatorDisplay();
} else if (key === '.') {
if (!state.calculator.display.includes('.')) {
inputNumber('.');
updateCalculatorDisplay();
}
}
}
});
const tasbeehCount = document.getElementById('tasbeehCount');
const countBtn = document.getElementById('countBtn');
const resetBtn = document.getElementById('resetBtn');
const saveBtn = document.getElementById('saveBtn');
const loadBtn = document.getElementById('loadBtn');
const newTasbeehName = document.getElementById('newTasbeehName');
const addTasbeehBtn = document.getElementById('addTasbeehBtn');
const tasbeehList = document.getElementById('tasbeehList');
const savedCounters = localStorage.getItem('tasbeehCounters');
if (savedCounters) {
state.tasbeeh.counters = JSON.parse(savedCounters);
updateTasbeehList();
}
countBtn.addEventListener('click', function() {
state.tasbeeh.count++;
tasbeehCount.textContent = state.tasbeeh.count;
animateButton(this);
});
resetBtn.addEventListener('click', function() {
state.tasbeeh.count = 0;
tasbeehCount.textContent = '0';
showToast('Counter reset to 0');
});
saveBtn.addEventListener('click', function() {
const name = prompt('Enter a name for this counter:', `Tasbeeh ${state.tasbeeh.counters.length + 1}`);
if (name) {
state.tasbeeh.counters.push({
name: name,
count: state.tasbeeh.count,
date: new Date().toLocaleDateString()
});
localStorage.setItem('tasbeehCounters', JSON.stringify(state.tasbeeh.counters));
updateTasbeehList();
showToast('Counter saved successfully');
}
});
loadBtn.addEventListener('click', function() {
if (state.tasbeeh.counters.length > 0) {
let options = state.tasbeeh.counters.map((counter, index) =>
`${index + 1}. ${counter.name} (${counter.count})`
).join('\n');
const choice = prompt(`Select a counter to load:\n${options}\n\nEnter number:`);
const index = parseInt(choice) - 1;
if (index >= 0 && index < state.tasbeeh.counters.length) {
state.tasbeeh.count = state.tasbeeh.counters[index].count;
tasbeehCount.textContent = state.tasbeeh.count;
showToast(`Loaded ${state.tasbeeh.counters[index].name}`);
}
} else {
showToast('No saved counters found');
}
});
addTasbeehBtn.addEventListener('click', function() {
const name = newTasbeehName.value.trim();
if (name) {
state.tasbeeh.counters.push({
name: name,
count: 0,
date: new Date().toLocaleDateString()
});
localStorage.setItem('tasbeehCounters', JSON.stringify(state.tasbeeh.counters));
updateTasbeehList();
newTasbeehName.value = '';
showToast(`Added new tasbeeh: ${name}`);
}
});
function updateTasbeehList() {
tasbeehList.innerHTML = '';
state.tasbeeh.counters.forEach((counter, index) => {
const item = document.createElement('div');
item.className = 'tasbeeh-item';
item.innerHTML = `
<div>
<strong>${counter.name}</strong>
<div style="font-size: 12px; opacity: 0.7;">${counter.date}</div>
</div>
<div>
<span style="color: var(--primary-color); font-weight: bold;">${counter.count}</span>
<button class="control-btn" style="margin-left: 10px; padding: 5px 10px;" onclick="loadTasbeehCounter(${index})">Load</button>
<button class="control-btn" style="margin-left: 5px; padding: 5px 10px; background-color: var(--danger-color);" onclick="deleteTasbeehCounter(${index})">Delete</button>
</div>
`;
tasbeehList.appendChild(item);
});
}
window.loadTasbeehCounter = function(index) {
state.tasbeeh.count = state.tasbeeh.counters[index].count;
tasbeehCount.textContent = state.tasbeeh.count;
showToast(`Loaded ${state.tasbeeh.counters[index].name}`);
};
window.deleteTasbeehCounter = function(index) {
if (confirm('Are you sure you want to delete this counter?')) {
state.tasbeeh.counters.splice(index, 1);
localStorage.setItem('tasbeehCounters', JSON.stringify(state.tasbeeh.counters));
updateTasbeehList();
showToast('Counter deleted');
}
};
const amountInput = document.getElementById('amountInput');
const fromCurrency = document.getElementById('fromCurrency');
const toCurrency = document.getElementById('toCurrency');
const resultDisplay = document.getElementById('resultDisplay');
const exchangeRates = {
USD: { EUR: 0.85, GBP: 0.73, JPY: 110.5, CAD: 1.25, AUD: 1.35, CHF: 0.92, CNY: 6.45 },
EUR: { USD: 1.18, GBP: 0.86, JPY: 130.0, CAD: 1.47, AUD: 1.59, CHF: 1.08, CNY: 7.59 },
GBP: { USD: 1.37, EUR: 1.16, JPY: 151.0, CAD: 1.71, AUD: 1.85, CHF: 1.26, CNY: 8.83 },
JPY: { USD: 0.0090, EUR: 0.0077, GBP: 0.0066, CAD: 0.0113, AUD: 0.0122, CHF: 0.0083, CNY: 0.058 },
CAD: { USD: 0.80, EUR: 0.68, GBP: 0.58, JPY: 88.5, AUD: 1.08, CHF: 0.74, CNY: 5.16 },
AUD: { USD: 0.74, EUR: 0.63, GBP: 0.54, JPY: 82.0, CAD: 0.93, CHF: 0.68, CNY: 4.78 },
CHF: { USD: 1.09, EUR: 0.93, GBP: 0.79, JPY: 120.5, CAD: 1.35, AUD: 1.47, CNY: 7.02 },
CNY: { USD: 0.155, EUR: 0.132, GBP: 0.113, JPY: 17.24, CAD: 0.194, AUD: 0.209, CHF: 0.142 }
};
function convertCurrency() {
const amount = parseFloat(amountInput.value) || 0;
const from = fromCurrency.value;
const to = toCurrency.value;
if (from === to) {
resultDisplay.textContent = amount.toFixed(2);
return;
}
let result;
if (exchangeRates[from] && exchangeRates[from][to]) {
result = amount * exchangeRates[from][to];
} else if (exchangeRates[to] && exchangeRates[to][from]) {
result = amount / exchangeRates[to][from];
} else {
result = amount;
}
resultDisplay.textContent = result.toFixed(2);
document.querySelector('.currency-result').textContent =
`1 ${from} = ${(exchangeRates[from] && exchangeRates[from][to] ? exchangeRates[from][to] : (1/(exchangeRates[to][from] || 1))).toFixed(4)} ${to}`;
}
amountInput.addEventListener('input', convertCurrency);
fromCurrency.addEventListener('change', convertCurrency);
toCurrency.addEventListener('change', convertCurrency);
convertCurrency();
const stopwatchDisplay = document.getElementById('stopwatchDisplay');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetStopwatchBtn = document.getElementById('resetStopwatchBtn');
const lapBtn = document.getElementById('lapBtn');
const lapsContainer = document.getElementById('lapsContainer');
let stopwatchInterval;
function formatTime(time) {
const hours = Math.floor(time / 3600000);
const minutes = Math.floor((time % 3600000) / 60000);
const seconds = Math.floor((time % 60000) / 1000);
const milliseconds = Math.floor((time % 1000) / 10);
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
}
function updateStopwatch() {
if (state.stopwatch.running) {
state.stopwatch.elapsedTime = Date.now() - state.stopwatch.startTime;
stopwatchDisplay.textContent = formatTime(state.stopwatch.elapsedTime);
}
}
startBtn.addEventListener('click', function() {
if (!state.stopwatch.running) {
state.stopwatch.running = true;
state.stopwatch.startTime = Date.now() - state.stopwatch.elapsedTime;
stopwatchInterval = setInterval(updateStopwatch, 10);
startBtn.disabled = true;
pauseBtn.disabled = false;
lapBtn.disabled = false;
}
});
pauseBtn.addEventListener('click', function() {
if (state.stopwatch.running) {
state.stopwatch.running = false;
clearInterval(stopwatchInterval);
startBtn.disabled = false;
pauseBtn.disabled = true;
}
});
resetStopwatchBtn.addEventListener('click', function() {
state.stopwatch.running = false;
state.stopwatch.elapsedTime = 0;
state.stopwatch.laps = [];
clearInterval(stopwatchInterval);
stopwatchDisplay.textContent = '00:00:00.00';
startBtn.disabled = false;
pauseBtn.disabled = true;
lapBtn.disabled = true;
lapsContainer.innerHTML = '';
showToast('Stopwatch reset');
});
lapBtn.addEventListener('click', function() {
if (state.stopwatch.running) {
const lapTime = state.stopwatch.elapsedTime;
state.stopwatch.laps.push(lapTime);
const lapItem = document.createElement('div');
lapItem.className = 'lap-item';
lapItem.innerHTML = `
<span>Lap ${state.stopwatch.laps.length}</span>
<span>${formatTime(lapTime)}</span>
`;
lapsContainer.prepend(lapItem);
}
});
const waterGoal = document.getElementById('waterGoal');
const waterProgress = document.getElementById('waterProgress');
const waterPercentage = document.getElementById('waterPercentage');
const waterButtons = document.querySelectorAll('.water-btn');
const customWaterBtn = document.getElementById('customWaterBtn');
const resetWaterBtn = document.getElementById('resetWaterBtn');
const waterHistory = document.getElementById('waterHistory');
const savedWaterData = localStorage.getItem('waterData');
if (savedWaterData) {
const data = JSON.parse(savedWaterData);
if (new Date().toDateString() === new Date(data.date).toDateString()) {
state.water.current = data.current;
state.water.history = data.history;
updateWaterDisplay();
updateWaterHistory();
}
}
waterButtons.forEach(button => {
if (button.id !== 'customWaterBtn' && button.id !== 'resetWaterBtn') {
button.addEventListener('click', function() {
const ml = parseInt(this.getAttribute('data-ml'));
addWater(ml);
});
}
});
customWaterBtn.addEventListener('click', function() {
const ml = prompt('Enter amount in ml:', '250');
if (ml && !isNaN(ml) && ml > 0) {
addWater(parseInt(ml));
}
});
resetWaterBtn.addEventListener('click', function() {
if (confirm('Reset today\'s water intake?')) {
state.water.current = 0;
state.water.history = [];
updateWaterDisplay();
updateWaterHistory();
saveWaterData();
showToast('Water intake reset for today');
}
});
function addWater(ml) {
state.water.current += ml;
state.water.history.push({
amount: ml,
time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
});
updateWaterDisplay();
updateWaterHistory();
saveWaterData();
showToast(`Added ${ml} ml of water`);
}
function updateWaterDisplay() {
const percentage = Math.min((state.water.current / state.water.goal) * 100, 100);
waterProgress.style.width = `${percentage}%`;
waterPercentage.textContent = `${Math.round(percentage)}% (${state.water.current}/${state.water.goal} ml)`;
if (percentage >= 100) {
waterProgress.style.backgroundColor = 'var(--success-color)';
showToast('🎉 You reached your daily water goal!');
} else if (percentage >= 75) {
waterProgress.style.backgroundColor = 'var(--warning-color)';
} else {
waterProgress.style.backgroundColor = 'var(--primary-color)';
}
}
function updateWaterHistory() {
waterHistory.innerHTML = '';
if (state.water.history.length === 0) {
waterHistory.innerHTML = '<div style="text-align: center; opacity: 0.7;">No water intake recorded today</div>';
return;
}
state.water.history.slice().reverse().forEach(entry => {
const item = document.createElement('div');
item.className = 'water-history-item';
item.innerHTML = `
<span>${entry.time}</span>
<span>${entry.amount} ml</span>
`;
waterHistory.appendChild(item);
});
}
function saveWaterData() {
const data = {
current: state.water.current,
history: state.water.history,
date: new Date().toISOString()
};
localStorage.setItem('waterData', JSON.stringify(data));
}
const currentMonth = document.getElementById('currentMonth');
const calendarGrid = document.getElementById('calendarGrid');
const prevMonthBtn = document.getElementById('prevMonth');
const nextMonthBtn = document.getElementById('nextMonth');
const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
function generateCalendar() {
const year = state.calendar.currentDate.getFullYear();
const month = state.calendar.currentDate.getMonth();
currentMonth.textContent = new Date(year, month).toLocaleDateString('en-US', {
month: 'long',
year: 'numeric'
});
calendarGrid.innerHTML = '';
daysOfWeek.forEach(day => {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
dayElement.textContent = day;
calendarGrid.appendChild(dayElement);
});
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const daysInMonth = lastDay.getDate();
const firstDayIndex = firstDay.getDay();
for (let i = 0; i < firstDayIndex; i++) {
const emptyCell = document.createElement('div');
emptyCell.className = 'calendar-date other-month';
emptyCell.textContent = new Date(year, month, -firstDayIndex + i + 1).getDate();
calendarGrid.appendChild(emptyCell);
}
const today = new Date();
for (let day = 1; day <= daysInMonth; day++) {
const dateElement = document.createElement('div');
dateElement.className = 'calendar-date';
dateElement.textContent = day;
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate()) {
dateElement.classList.add('today');
}
dateElement.addEventListener('click', function() {
document.querySelectorAll('.calendar-date.selected').forEach(el => {
el.classList.remove('selected');
});
this.classList.add('selected');
showToast(`Selected ${month + 1}/${day}/${year}`);
});
calendarGrid.appendChild(dateElement);
}
const totalCells = 42;
const remainingCells = totalCells - (firstDayIndex + daysInMonth);
for (let i = 1; i <= remainingCells; i++) {
const emptyCell = document.createElement('div');
emptyCell.className = 'calendar-date other-month';
emptyCell.textContent = i;
calendarGrid.appendChild(emptyCell);
}
}
prevMonthBtn.addEventListener('click', function() {
state.calendar.currentDate.setMonth(state.calendar.currentDate.getMonth() - 1);
generateCalendar();
});
nextMonthBtn.addEventListener('click', function() {
state.calendar.currentDate.setMonth(state.calendar.currentDate.getMonth() + 1);
generateCalendar();
});
const heightInput = document.getElementById('heightInput');
const weightInput = document.getElementById('weightInput');
const calculateBMIBtn = document.getElementById('calculateBMI');
const bmiResult = document.getElementById('bmiResult');
calculateBMIBtn.addEventListener('click', function() {
const height = parseFloat(heightInput.value) / 100;
const weight = parseFloat(weightInput.value);
if (height > 0 && weight > 0) {
const bmi = weight / (height * height);
let category = '';
let color = '';
if (bmi < 18.5) {
category = 'Underweight';
color = '#3498db';
} else if (bmi < 25) {
category = 'Normal weight';
color = '#2ecc71';
} else if (bmi < 30) {
category = 'Overweight';
color = '#f39c12';
} else {
category = 'Obese';
color = '#e74c3c';
}
bmiResult.innerHTML = `
<div style="font-size: 32px; margin-bottom: 10px;">${bmi.toFixed(1)}</div>
<div style="color: ${color}; font-weight: bold;">${category}</div>
<div style="font-size: 14px; margin-top: 10px; opacity: 0.8;">Height: ${heightInput.value}cm, Weight: ${weightInput.value}kg</div>
`;
showToast(`BMI calculated: ${bmi.toFixed(1)} (${category})`);
} else {
bmiResult.textContent = 'Please enter valid height and weight values';
}
});
const notesContainer = document.getElementById('notesContainer');
const newNote = document.getElementById('newNote');
const addNoteBtn = document.getElementById('addNoteBtn');
const savedNotes = localStorage.getItem('notes');
if (savedNotes) {
state.notes = JSON.parse(savedNotes);
updateNotesDisplay();
}
addNoteBtn.addEventListener('click', function() {
const content = newNote.value.trim();
if (content) {
const note = {
id: Date.now(),
content: content,
date: new Date().toLocaleString(),
color: getRandomColor()
};
state.notes.push(note);
localStorage.setItem('notes', JSON.stringify(state.notes));
updateNotesDisplay();
newNote.value = '';
showToast('Note added');
}
});
function updateNotesDisplay() {
notesContainer.innerHTML = '';
if (state.notes.length === 0) {
notesContainer.innerHTML = '<div style="text-align: center; opacity: 0.7; grid-column: 1 / -1;">No notes yet. Add your first note!</div>';
return;
}
state.notes.slice().reverse().forEach(note => {
const noteElement = document.createElement('div');
noteElement.className = 'note';
noteElement.style.borderLeftColor = note.color;
noteElement.innerHTML = `
<div class="note-header">
<div class="note-date">${note.date}</div>
<div class="note-actions">
<button class="note-btn" style="background-color: var(--danger-color); color: white;" onclick="deleteNote(${note.id})">Delete</button>
</div>
</div>
<div class="note-content">${note.content.replace(/\n/g, '<br>')}</div>
`;
notesContainer.appendChild(noteElement);
});
}
window.deleteNote = function(id) {
if (confirm('Are you sure you want to delete this note?')) {
state.notes = state.notes.filter(note => note.id !== id);
localStorage.setItem('notes', JSON.stringify(state.notes));
updateNotesDisplay();
showToast('Note deleted');
}
};
function getRandomColor() {
const colors = [
'#3498db', '#2ecc71', '#e74c3c', '#f39c12',
'#9b59b6', '#1abc9c', '#d35400', '#34495e'
];
return colors[Math.floor(Math.random() * colors.length)];
}
function animateButton(button) {
button.style.transform = 'scale(0.95)';
setTimeout(() => {
button.style.transform = 'scale(1)';
}, 100);
}
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.style.display = 'block';
setTimeout(() => {
toast.style.display = 'none';
}, 3000);
}
updateWaterDisplay();
generateCalendar();
setTimeout(() => {
showToast('Welcome to Multi-Functional App! All tools are ready to use.');
}, 1000);
document.addEventListener('click', function(event) {
if (!event.target.closest('.theme-selector')) {
themeDropdown.classList.remove('active');
}
});
});
</script>
</body>
</html>