Added Book Reading Time Calculator (#538)

Rakesh9100 · Feb 7, 2024 · 6d1ae3e · 6d1ae3e
1 parent f9035aa
commit 6d1ae3e
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 0 deletions.
diff --git a/Calculators/Book-Reading-Time-Calculator/Readme.md b/Calculators/Book-Reading-Time-Calculator/Readme.md
@@ -0,0 +1,21 @@
+# <p align="center">Book Reading Time Calculator</p>
+
+## Overview
+
+It is a simple web application that helps you estimate the time it will take to read a book based on the number of pages and your average reading speed.
+
+## Features
+
+- Calculate estimated reading time based on the number of pages and average reading speed.
+- User-friendly and simple- Book Reading Time Calculator.
+- Responsive design for various devices.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshot :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/24a6e2a3-c9dc-498e-a40f-7838473afef1)
diff --git a/Calculators/Book-Reading-Time-Calculator/images/pic.jpg b/Calculators/Book-Reading-Time-Calculator/images/pic.jpg
diff --git a/Calculators/Book-Reading-Time-Calculator/images/pic1.jpg b/Calculators/Book-Reading-Time-Calculator/images/pic1.jpg
diff --git a/Calculators/Book-Reading-Time-Calculator/index.html b/Calculators/Book-Reading-Time-Calculator/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Reading Time Calculator</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&family=Poppins:ital,wght@0,100;0,400;0,500;1,500&display=swap"
+        rel="stylesheet">
+</head>
+<body>
+  <div class="background-img"></div>
+  <div class="header">
+    <h1>BOOK READING TIME CALCULATOR</h1>
+  </div>
+<div class="container glass">
+    <label for="pages">Number of Pages in Your Book?</label>
+<input type="number" id="pages" placeholder="Enter number of pages">
+<label for="speed">Average Reading Speed? (pages per minute)?</label>
+<input type="number" id="speed" placeholder="Enter reading speed">
+
+<button onclick="calculateReadingTime()">Estimate Book Reading Time</button>
+<div class="output"><p id="response"><span id="result"></span>
+</p></div>
+
+</div>    
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Book-Reading-Time-Calculator/script.js b/Calculators/Book-Reading-Time-Calculator/script.js
@@ -0,0 +1,20 @@
+function calculateReadingTime() {
+
+    let pages = document.getElementById('pages').value;
+    let speed = document.getElementById('speed').value;
+
+     if (!pages || !speed || isNaN(pages) || isNaN(speed) || pages <= 0 || speed <= 0) {
+        alert('Please enter valid values!');
+        return;
+    }
+
+    let approxReadingTime = Math.ceil(pages/speed);
+    let days = Math.floor(approxReadingTime / 1440);
+    let hours = Math.floor((approxReadingTime % 1440) / 60);
+    let remainingMinutes = approxReadingTime % 60;
+
+    // Result:
+    document.getElementById('result').innerText = `${days} Days, ${hours} Hours, and ${remainingMinutes} Minutes`;
+
+
+}
diff --git a/Calculators/Book-Reading-Time-Calculator/style.css b/Calculators/Book-Reading-Time-Calculator/style.css
@@ -0,0 +1,127 @@
+body {
+    font-family: 'Montserrat', sans-serif;
+        font-family: 'Poppins', sans-serif;
+        color: whitesmoke;
+        background-color: rgba(206, 253, 113, 0.375);
+        background-image: url("images/pic1.jpg");
+        background-size:  cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 100vh;
+        display: flex;
+        flex-direction:column ;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        /* overflow-x: hidden; */
+}
+
+
+.header {
+    color: whitesmoke;
+    /* background-color: rgba(255, 0, 132, 0.6); */
+    background-color: rgba(229, 201, 41, 0.78);
+    padding: 15px;
+    text-align: center;
+    width: 100%;
+    backdrop-filter: blur(8px);
+    box-shadow: 0px 8px 5px rgba(69, 4, 48, 0.5);
+    margin: 0px;
+    margin-bottom: 10px;
+
+}
+h1 {
+    margin: 0;
+}
+.container {
+    display: flexbox;
+    margin: auto;
+    margin-top: 50px;
+    align-items: center ;
+    /* background-color: rgba(255, 192, 203, 0.677); */
+    height: 400px;
+    width: 600px; 
+    padding: 20px;
+    /* border-radius: 8px; */
+
+}
+
+.glass {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255,255,255,0));
+    backdrop-filter: blur(25px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border: 1px solid rgba(195, 193, 194,0.1);
+    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.37);
+}
+
+label {
+    font-size: large;
+    display: block;
+    margin-bottom: 8px;
+}
+
+input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+
+}
+
+button {
+    background-color: #7bd1ff97;
+    border: none;
+    text-decoration: none;
+    padding: 10px;
+    border-radius: 50px;
+    cursor: pointer;
+    margin: 30px 140px;
+    align-items: center;
+    text-align: center;
+    padding: 3px;
+    padding-bottom: -13px;
+    border-radius: 50px;
+    font-family: 'Montserrat', sans-serif;
+        font-size: 1em;
+        font-weight: 500;
+        color: whitesmoke;
+
+    width: 50%;
+    height: 55px;
+        /* background-color: #b5e396;
+    border: none;
+    padding: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 18px; */
+}
+
+button:hover {
+    background-color: #bac671de;
+    transform: scale(1.1);
+
+}
+
+
+.output {
+    margin: 30px auto;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));    backdrop-filter: blur(10px);
+    align-items: center;   
+    text-align: center;
+    padding: 3px;
+    padding-bottom: -13px;
+
+    width: 70%;
+    height: 55px;
+}
+
+@media only screen and (max-width: 768px) {
+    .container {
+        width: 90%;
+    }
+
+    button, .output {
+        width: 50%;
+    }
+}
diff --git a/index.html b/index.html
@@ -1681,6 +1681,20 @@ <h3>Calculates the Quotient and Remainder.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Book Reading Time Calculator</h2>
+                <h3>Calculates the time required to finish reading a book.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Book-Reading-Time-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Book-Reading-Time-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Calculator Section Ends Here  -->