+
+
+ Digital Detox Calculator
+ + +
+
+
+ Digital Detox Calculator
+ +## Description :- + +Calculates the amount of time we spend on digital devices and suggests a plan for a balanced digital detox. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + + diff --git a/Calculators/Digital-Detox-Calculator/assets/left-image.jpg b/Calculators/Digital-Detox-Calculator/assets/left-image.jpg new file mode 100644 index 000000000..49851ebcc Binary files /dev/null and b/Calculators/Digital-Detox-Calculator/assets/left-image.jpg differ diff --git a/Calculators/Digital-Detox-Calculator/assets/right-image.jpg b/Calculators/Digital-Detox-Calculator/assets/right-image.jpg new file mode 100644 index 000000000..16c1c8abd Binary files /dev/null and b/Calculators/Digital-Detox-Calculator/assets/right-image.jpg differ diff --git a/Calculators/Digital-Detox-Calculator/index.html b/Calculators/Digital-Detox-Calculator/index.html new file mode 100644 index 000000000..b27f4508e --- /dev/null +++ b/Calculators/Digital-Detox-Calculator/index.html @@ -0,0 +1,32 @@ + + + + + + +
+
+ Please enter valid inputs.
"; + return; + } + + const weeklyUsage = hoursSpent * daysPerWeek; + const monthlyUsage = weeklyUsage * 4; + const yearlyUsage = weeklyUsage * 52; + + const detoxRecommendation = hoursSpent > 5 ? "Consider reducing your daily screen time gradually." : + hoursSpent > 3 ? "Your screen time is moderate, but it's good to take regular breaks." : + "Your screen time is within healthy limits."; + + resultDiv.innerHTML = ` +Weekly Device Usage: ${weeklyUsage.toFixed(2)} hours
+Monthly Device Usage: ${monthlyUsage.toFixed(2)} hours
+Yearly Device Usage: ${yearlyUsage.toFixed(2)} hours
+${detoxRecommendation}
+ `; +} diff --git a/Calculators/Digital-Detox-Calculator/style.css b/Calculators/Digital-Detox-Calculator/style.css new file mode 100644 index 000000000..30cd9bbfe --- /dev/null +++ b/Calculators/Digital-Detox-Calculator/style.css @@ -0,0 +1,95 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(to right, #246d8a, #cc65cf); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.main-container { + display: flex; + align-items: center; + justify-content: center; + width: 90%; + height: 90%; +} + +.side-image { + flex: 1; + max-width: 25%; + height: 100%; + object-fit: cover; + margin: 0 60px; + border-radius: 4%; + transition: transform 0.3s ease, filter 0.3s ease; +} + +.side-image:hover{ + transform: scale(1.05); + filter: brightness(1.1); +} +.container { + background-color: #ffffff; + padding: 25px 30px; + border-radius: 10px; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); + width: 60%; + max-width: 450px; + text-align: center; + z-index: 1; +} + +h1 { + font-size: 28px; + margin-bottom: 25px; + color: #00796b; +} + +.form-group { + margin-bottom: 20px; + text-align: left; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; + color: #004d40; +} + +input { + width: calc(100% - 20px); + padding: 10px; + border: 1px solid #b0bec5; + border-radius: 5px; + outline: none; + font-size: 16px; +} + +input:focus { + border-color: #4db6ac; +} + +button { + background-color: #00796b; + color: white; + padding: 10px 25px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #004d40; +} + +#result { + margin-top: 25px; + font-size: 18px; + color: #004d40; + line-height: 1.5; +} diff --git a/index.html b/index.html index defeb2705..e0adff36e 100644 --- a/index.html +++ b/index.html @@ -1030,6 +1030,20 @@
+