diff --git a/Calculators/Book-Reading-Time-Calculator/Readme.md b/Calculators/Book-Reading-Time-Calculator/Readme.md new file mode 100644 index 000000000..456dac9a6 --- /dev/null +++ b/Calculators/Book-Reading-Time-Calculator/Readme.md @@ -0,0 +1,21 @@ +#

Book Reading Time Calculator

+ +## 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 new file mode 100644 index 000000000..941014277 Binary files /dev/null and b/Calculators/Book-Reading-Time-Calculator/images/pic.jpg differ diff --git a/Calculators/Book-Reading-Time-Calculator/images/pic1.jpg b/Calculators/Book-Reading-Time-Calculator/images/pic1.jpg new file mode 100644 index 000000000..e35658ed8 Binary files /dev/null and b/Calculators/Book-Reading-Time-Calculator/images/pic1.jpg differ diff --git a/Calculators/Book-Reading-Time-Calculator/index.html b/Calculators/Book-Reading-Time-Calculator/index.html new file mode 100644 index 000000000..39e33fde3 --- /dev/null +++ b/Calculators/Book-Reading-Time-Calculator/index.html @@ -0,0 +1,32 @@ + + + + + + Book Reading Time Calculator + + + + + + +
+
+

BOOK READING TIME CALCULATOR

+
+
+ + + + + + +

+

+ +
+ + + \ No newline at end of file diff --git a/Calculators/Book-Reading-Time-Calculator/script.js b/Calculators/Book-Reading-Time-Calculator/script.js new file mode 100644 index 000000000..a0598b380 --- /dev/null +++ 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`; + + +} \ No newline at end of file diff --git a/Calculators/Book-Reading-Time-Calculator/style.css b/Calculators/Book-Reading-Time-Calculator/style.css new file mode 100644 index 000000000..44799634c --- /dev/null +++ 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%; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 834ce0fb0..b8281dc47 100644 --- a/index.html +++ b/index.html @@ -1681,6 +1681,20 @@

Calculates the Quotient and Remainder.

+
+
+

Book Reading Time Calculator

+

Calculates the time required to finish reading a book.

+
+ + + + + Source Code + +
+
+