├── Screenshot_2025-06-14-16-40-47-45_254de13a4bc8758c9908fff1f73e3725.jpg ├── Screenshot_2025-06-14-16-41-02-55_254de13a4bc8758c9908fff1f73e3725.jpg ├── index.html ├── script.js ├── style.css └── README.md /Screenshot_2025-06-14-16-40-47-45_254de13a4bc8758c9908fff1f73e3725.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/movie-info-app/main/Screenshot_2025-06-14-16-40-47-45_254de13a4bc8758c9908fff1f73e3725.jpg -------------------------------------------------------------------------------- /Screenshot_2025-06-14-16-41-02-55_254de13a4bc8758c9908fff1f73e3725.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/movie-info-app/main/Screenshot_2025-06-14-16-41-02-55_254de13a4bc8758c9908fff1f73e3725.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Definite Integral Calculator 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Definite Integral Calculator

15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
31 |

Result:

32 |
33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.getElementById('integralForm').addEventListener('submit', function(event) { 2 | event.preventDefault(); 3 | 4 | const func = document.getElementById('function').value.trim(); 5 | const a = parseFloat(document.getElementById('lowerBound').value); 6 | const b = parseFloat(document.getElementById('upperBound').value); 7 | 8 | 9 | if (isNaN(a) || isNaN(b) || func === "") { 10 | alert("Please fill in all fields correctly."); 11 | return; 12 | } 13 | 14 | 15 | const result = calculateDefiniteIntegral(func, a, b); 16 | 17 | 18 | document.getElementById('result').style.display = 'block'; 19 | document.getElementById('resultValue').textContent = `Integral result: ${result.toFixed(6)}`; 20 | }); 21 | 22 | 23 | function calculateDefiniteIntegral(func, a, b) { 24 | const n = 1000; 25 | const h = (b - a) / n; 26 | let sum = 0; 27 | 28 | 29 | const f = (x) => { 30 | try { 31 | 32 | return math.evaluate(func.replace(/x/g, x)); 33 | } catch (e) { 34 | alert("Invalid function format. Please check the syntax."); 35 | return NaN; 36 | } 37 | }; 38 | 39 | 40 | sum += f(a) + f(b); 41 | for (let i = 1; i < n; i++) { 42 | sum += 2 * f(a + i * h); 43 | } 44 | 45 | const result = (h / 2) * sum; 46 | console.log("Integral calculation:", result); 47 | return result; 48 | } 49 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Reset default margins and padding */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Body setup */ 9 | body { 10 | font-family: 'Poppins', sans-serif; 11 | background: linear-gradient(45deg, #1e3c72, #2a5298); 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | color: white; 17 | } 18 | 19 | /* Calculator container */ 20 | .calculator-container { 21 | width: 100%; 22 | max-width: 600px; /* Increased max width for larger form */ 23 | padding: 40px; 24 | background: rgba(255, 255, 255, 0.1); 25 | border-radius: 12px; 26 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); 27 | } 28 | 29 | .calculator { 30 | background: rgba(255, 255, 255, 0.1); 31 | padding: 25px; 32 | border-radius: 12px; 33 | box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); 34 | } 35 | 36 | h1 { 37 | text-align: center; 38 | font-size: 2.5rem; 39 | margin-bottom: 20px; 40 | font-family: 'Roboto', sans-serif; 41 | } 42 | 43 | /* Form Layout */ 44 | form { 45 | display: flex; 46 | flex-direction: column; 47 | gap: 25px; /* Increased gap between form fields */ 48 | } 49 | 50 | /* Input Fields */ 51 | input[type="text"], 52 | input[type="number"] { 53 | padding: 15px; /* Increased padding for more space */ 54 | font-size: 1.1rem; /* Increased font size */ 55 | background: rgba(255, 255, 255, 0.2); 56 | color: white; 57 | border: none; 58 | border-radius: 12px; 59 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 60 | backdrop-filter: blur(10px); 61 | transition: background-color 0.3s ease; 62 | width: 100%; /* Ensures input takes full width of container */ 63 | } 64 | 65 | input[type="text"]:focus, 66 | input[type="number"]:focus { 67 | outline: none; 68 | background: rgba(255, 255, 255, 0.3); 69 | } 70 | 71 | /* Neon Button Design */ 72 | button { 73 | padding: 16px; 74 | font-size: 1.3rem; /* Slightly larger button text */ 75 | color: #fff; 76 | background-color: #00ffff; 77 | border: none; 78 | border-radius: 30px; 79 | cursor: pointer; 80 | box-shadow: 0 0 10px #00ffff, 0 0 30px #00ffff; 81 | transition: all 0.4s ease; 82 | } 83 | 84 | button:hover { 85 | background-color: #33ccff; 86 | box-shadow: 0 0 20px #33ccff, 0 0 40px #33ccff; 87 | } 88 | 89 | /* Result Box with Glassmorphism */ 90 | #result { 91 | margin-top: 30px; /* Increased margin for more spacing */ 92 | display: none; 93 | padding: 25px; 94 | background: rgba(0, 0, 0, 0.3); 95 | border-radius: 12px; 96 | backdrop-filter: blur(10px); 97 | } 98 | 99 | #resultValue { 100 | font-size: 1.6rem; 101 | font-weight: 700; 102 | color: #ffeb3b; 103 | } 104 | 105 | @media (max-width: 600px) { 106 | .calculator-container { 107 | padding: 20px; 108 | width: 100%; 109 | } 110 | 111 | .calculator { 112 | padding: 20px; 113 | } 114 | 115 | h1 { 116 | font-size: 2rem; 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Movie Info App 2 |
3 | DevOpsShack Banner 4 |
5 | A simple and interactive web-based application to fetch and display detailed movie information using HTML, CSS, and JavaScript. The app allows users to search for movies by title and view essential details such as release year, cast, plot summary, and more. 6 | DevOpsShack Banner 7 | 8 | Features 9 | Search functionality: Easily search for movies by title. 10 | Detailed movie info: View movie details including release date, actors, plot summary, ratings, and more. 11 | Responsive design: Optimized for both desktop and mobile views. 12 | External API integration: Fetches movie data using OMDb API, or a similar API. 13 | User-friendly interface: Clean and intuitive design to enhance the user experience. 14 | Demo 15 | You can view the live demo of the Movie Info App [here](URL to live demo, if applicable). 16 | 17 | Technologies Used 18 | HTML: Structure and layout of the application. 19 | CSS: Styling and design for the user interface. 20 | JavaScript: Handling user input, fetching data from the API, and dynamically updating the UI. 21 | OMDb API (or other movie API): To retrieve movie information. 22 | How to Use 23 | Search for a Movie: Type the name of the movie in the search bar. 24 | View Movie Details: After pressing Enter or clicking the search button, the app will fetch movie details and display them below the search bar. 25 | Explore Movie Info: Check out information like the plot, cast, director, release year, ratings, and more. 26 | Installation 27 | To run the project locally: 28 | 29 | Clone the repository: 30 | 31 | bash 32 | Copy 33 | git clone https://github.com/your-username/movie-info-app.git 34 | Navigate to the project directory: 35 | 36 | cd movie-info-app 37 | Open index.html in your preferred browser. 38 | 39 | No additional setup or installation is required. The project is entirely client-side and uses the OMDb API to fetch movie data. 40 | 41 | Usage 42 | Example Search: 43 | Movie Title: "Inception" 44 | Result: Displays movie details such as: 45 | Release Year: 2010 46 | Cast: Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page 47 | Plot: A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a CEO. 48 | Ratings: 8.8/10 49 | API Key Setup (Optional) 50 | If you're using a custom API or the OMDb API, you may need to get your own API key: 51 | 52 | Go to OMDb API and sign up for a free API key. 53 | 54 | Once you have your API key, add it to the JavaScript code in the script.js file (or wherever the API request is made): 55 | 56 | const apiKey = 'YOUR_API_KEY_HERE'; 57 | Save the changes and you should be able to make API requests. 58 | 59 | Contributing 60 | Fork the repository. 61 | Create a new branch (git checkout -b feature-xyz). 62 | Make your changes and commit (git commit -am 'Add new feature'). 63 | Push to the branch (git push origin feature-xyz). 64 | Open a pull request. 65 | License 66 | This project is licensed under the MIT License - see the LICENSE file for details. 67 | 68 | Acknowledgments 69 | OMDb API for providing movie data. 70 | Inspiration from various movie databases and web apps. 71 | 72 | 73 | ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![Fortran](https://img.shields.io/badge/Fortran-%23734F96.svg?style=for-the-badge&logo=fortran&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![Scaleway](https://img.shields.io/badge/SCALEWAY-%234f0599.svg?style=for-the-badge&logo=scaleway&logoColor=white) ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7) 74 | --------------------------------------------------------------------------------