├── LICENSE
├── README.md
├── SECURITY.md
├── calculator.js
├── images
    ├── graph_fav.png
    ├── moon.png
    └── sun.png
├── index.html
└── styles.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Alex Sheng
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # IntrepidGraph
 2 | ## A Mathematical Graphing Calculator
 3 | 
 4 | IntrepidGraph is a web-based mathematical graphing calculator that allows you to visualize mathematical equations in the form of graphs. This project contains HTML, CSS, and JavaScript files, along with an "images" folder that holds various images. In this README, we will guide both newcomers and experienced developers through the key aspects of this project.
 5 | 
 6 | Please ⭐ our Repository!
 7 | 
 8 | Big Thank You to everyone who contributed during Hacktoberfest!
 9 | 
10 | ## Table of Contents
11 | - [IntrepidGraph - A Mathematical Graphing Calculator](#intrepidgraph---a-mathematical-graphing-calculator)
12 |   - [Table of Contents](#table-of-contents)
13 |   - [Introduction](#introduction)
14 |     - [Key Features](#key-features)
15 |   - [Getting Started](#getting-started)
16 |   - [Usage](#usage)
17 |   - [Customization](#customization)
18 |   - [Contributing](#contributing)
19 | 
20 | ## Introduction
21 | 
22 | IntrepidGraph is a simple yet powerful tool that enables users to input mathematical equations and instantly see their graphical representations. Whether you are a math enthusiast, a student, or a developer looking to learn and experiment with JavaScript, this project offers something for everyone.
23 | 
24 | ### Key Features
25 | 
26 | - Mathematical equation graphing
27 | - A user-friendly web interface
28 | - Customizable graph appearance
29 | - Real-time graph updates
30 | 
31 | ## Getting Started
32 | 
33 | To start using IntrepidGraph, follow these steps:
34 | 
35 | 1. Clone the repository to your local machine:
36 | 
37 |    ```bash
38 |    git clone https://github.com/your-username/IntrepidGraph.git
39 | 
40 | 2. Open the project directory:
41 | 
42 |     ```bash
43 |     cd IntrepidGraph
44 | 
45 | 3. Open the index.html file in your web browser to access the calculator.
46 | 
47 | ## Usage
48 | For Newbies
49 | If you're new to web development or just want to use the calculator, here's a simple guide:
50 | 
51 | Open the calculator by following the "Getting Started" steps.
52 | 
53 | 1. You'll see an input field labeled "Equation." Enter your mathematical equation here. For example, you can type y = x^2 to graph a simple parabola.
54 | 
55 | 2. Press the "Graph" button, and the graph will appear on the canvas.
56 | 
57 | Experiment with different equations and see how the graph changes in real-time.
58 | 
59 | ## Customization
60 | Experienced developers may want to customize the project further. You can modify the code to change the appearance of the graph, add additional features, or integrate it into other web applications.
61 | 
62 | - The JavaScript code for this project can be found in the calculator.js file. It uses the Chart.js library to create and update the graph.
63 | 
64 | - The code listens for form submissions using jQuery. When the form is submitted, it retrieves the equation from the input field, calculates the corresponding y-values for a range of x-values, and displays the graph using Chart.js.
65 | 
66 | ## Contributing
67 | We welcome contributions to this project. If you'd like to improve IntrepidGraph, fix bugs, or add new features, please follow these steps:
68 | 
69 | 1. Fork the repository to your own GitHub account.
70 | 
71 | 2. Create a new branch for your feature or bug fix.
72 | 
73 | 3. Make your changes and commit them to your branch.
74 | 
75 | 4. Submit a pull request to the main repository.
76 | 
77 | Please ensure that your code follows best practices and includes documentation where necessary.
78 | 
79 | We hope you find IntrepidGraph useful and educational. If you have any questions or need assistance, feel free to reach out to the project maintainers.
80 | 
81 | Happy graphing! 📈🧮
82 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # Security Policy
 2 | 
 3 | ## Supported Versions
 4 | 
 5 | Use this section to tell people about which versions of your project are
 6 | currently being supported with security updates.
 7 | 
 8 | | Version | Supported          |
 9 | | ------- | ------------------ |
10 | | 1.0.0   | :white_check_mark: |
11 | | 1.3.6   | :white_check_mark: |
12 | | 3.0.0   | :white_check_mark: |
13 | | 3.0.4   | :white_check_mark: |
14 | | 3.1.4   | :white_check_mark: |
15 | 
16 | ## Reporting a Vulnerability
17 | 
18 | Report it in Discussions
19 | 


--------------------------------------------------------------------------------
/calculator.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function() {
  2 |     let chart;
  3 |     
  4 |     $('#calculatorForm').submit(function(e) {
  5 |         e.preventDefault();
  6 |         let equations = $('#equations').val().split(','); // Split equations by comma
  7 |         let minX = parseFloat($('#minX').val());
  8 |         let maxX = parseFloat($('#maxX').val());
  9 |         let selectedGraphType = $('#graphType').val(); // Read the selected graph type from the dropdown
 10 | 
 11 |         if (isNaN(minX) || isNaN(maxX) || minX >= maxX) {
 12 |             alert('Invalid range. Please check your input.');
 13 |             return;
 14 |         }
 15 | 
 16 |         let canvas = document.getElementById('graph').getContext('2d');
 17 |         let xValues = [];
 18 |         let datasets = [];
 19 | 
 20 |         for (let equation of equations) {
 21 |             equation = equation.trim(); // Remove leading/trailing spaces
 22 |             let yValues = [];
 23 | 
 24 |             try {
 25 |                 for (let x = minX; x <= maxX; x += 0.1) {
 26 |                     xValues.push(x);
 27 |                     // Replace "^" with "**" and append "Math." to mathematical expressions in the equation
 28 |                     let equationForEval = equation;
 29 |                     equationForEval = equationForEval.replace(/(sin|cos|tan|sqrt|log|exp|pi|e)(?=\()|pi|e/g, 'Math.$&');
 30 |                     equationForEval = equationForEval.replace(/\^/g, '**');
 31 |                     let result = eval(equationForEval);
 32 | 
 33 | 
 34 |                     // Check if the result is a valid number, not NaN
 35 |                     if (!isNaN(result)) {
 36 |                         yValues.push(result);
 37 |                     } else {
 38 |                         // Handle the case where the equation is invalid
 39 |                         throw new Error('Invalid Equation');
 40 |                     }
 41 |                 }
 42 | 
 43 |                 datasets.push({
 44 |                     label: equation,
 45 |                     data: yValues,
 46 |                     borderColor: getRandomColor(),
 47 |                     borderWidth: 2,
 48 |                 });
 49 |             } catch (error) {
 50 |                 // Handle the error and provide feedback to the user
 51 |                 console.error(error);
 52 |                 alert(`Invalid equation: "${equation}". Please check your input.`);
 53 |                 return;
 54 |             }
 55 |         }
 56 | 
 57 |         if (chart) chart.destroy();
 58 | 
 59 |         chart = new Chart(canvas, {
 60 |             type: selectedGraphType,
 61 |             data: {
 62 |                 labels: xValues,
 63 |                 datasets: datasets,
 64 |             },
 65 |             options: {
 66 |                 responsive: true,
 67 |                 maintainAspectRatio: false,
 68 |                 scales: {
 69 |                     x: {
 70 |                         display: true,
 71 |                         title: {
 72 |                             display: true,
 73 |                             text: 'X'
 74 |                         }
 75 |                     },
 76 |                     y: {
 77 |                         display: true,
 78 |                         title: {
 79 |                             display: true,
 80 |                             text: 'Y'
 81 |                         }
 82 |                     }
 83 |                 }
 84 |             }
 85 |         });
 86 | 
 87 |         $('.graphic-container').addClass('active');
 88 |     });
 89 | 
 90 |     $('#resetBtn').on('click', () => {
 91 |         if (chart) chart.destroy();
 92 |         $('.graphic-container').removeClass('active');
 93 |     });
 94 | });
 95 | 
 96 | function getRandomColor() {
 97 |     // Generates a random hexadecimal color
 98 |     return '#' + Math.floor(Math.random()*16777215).toString(16);
 99 | }
100 | 
101 | 
102 | 
103 | 
104 | document.body.style="background-color: var(--bs-dark);transition: 0.5s;"
105 | const sun = "https://www.uplooder.net/img/image/55/7aa9993fc291bc170abea048589896cf/sun.svg";
106 | const moon = "https://www.uplooder.net/img/image/2/addf703a24a12d030968858e0879b11e/moon.svg"
107 | 
108 | var theme = "dark";
109 |   const root = document.querySelector(":root");
110 |   const container = document.getElementsByClassName("theme-container")[0];
111 |   const themeIcon = document.getElementById("theme-icon");
112 |   container.addEventListener("click", setTheme);
113 |   function setTheme() {
114 |     switch (theme) {
115 |       case "dark":
116 |         setLight();
117 |         theme = "light";
118 |         break;
119 |       case "light":
120 |         setDark();
121 |         theme = "dark";
122 |         break;
123 |     }
124 |   }
125 |   function setLight() {
126 |     root.style.setProperty(
127 |       "--bs-dark",
128 |       "linear-gradient(318.32deg, #c3d1e4 0%, #dde7f3 55%, #d4e0ed 100%)"
129 |     );
130 |     container.classList.remove("shadow-dark");
131 |     setTimeout(() => {
132 |       container.classList.add("shadow-light");
133 |       themeIcon.classList.remove("change");
134 |     }, 300);
135 |     themeIcon.classList.add("change");
136 |     themeIcon.src = sun;
137 |   }
138 |   function setDark() {
139 |     root.style.setProperty("--bs-dark", "#000");
140 |     container.classList.remove("shadow-light");
141 |     setTimeout(() => {
142 |       container.classList.add("shadow-dark");
143 |       themeIcon.classList.remove("change");
144 |     }, 300);
145 |     themeIcon.classList.add("change");
146 |     themeIcon.src = moon;
147 |   }


--------------------------------------------------------------------------------
/images/graph_fav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intrepidbird/graphing-calculator/562b08160e34316e334195e8bcd62862466b13be/images/graph_fav.png


--------------------------------------------------------------------------------
/images/moon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intrepidbird/graphing-calculator/562b08160e34316e334195e8bcd62862466b13be/images/moon.png


--------------------------------------------------------------------------------
/images/sun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intrepidbird/graphing-calculator/562b08160e34316e334195e8bcd62862466b13be/images/sun.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>IntrepidBird | IntrepidGraph</title>
 7 |     <!-- Bootstrap CSS -->
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 9 |     <!-- Chart.js -->
10 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11 |     <!-- CSS Stylesheet -->
12 |     <link rel="stylesheet" href="styles.css">
13 |     <!-- Favicon -->
14 |     <link rel="shortcut icon" href="images/graph_fav.png" type="image/x-icon">
15 | 
16 | </head>
17 | <body >
18 |     <!-- Header Section -->
19 |     <header class="bg-dark text-white text-center p-4">
20 |         <img src="images/graph_fav.png" width="50" height="50">
21 |         <h1>Graphing Calculator</h1>
22 |         <div class="theme-container shadow-dark">
23 |             <img id="theme-icon" 
24 |             src="https://www.uplooder.net/img/image/2/addf703a24a12d030968858e0879b11e/moon.svg" alt="ERR">
25 |           </div>
26 |     </header>
27 |     
28 |     <!-- Calculator Section -->
29 |     <section id="calculator" class="container mt-5">
30 |         <div class="row justify-content-center">
31 |             <div class="col-md-6">
32 |                 <h2 class="text-center mb-3">Graph Your Equations</h2>
33 |                 <form id="calculatorForm">
34 |                     <div class="form-group">
35 |                         <label for="equations">Enter Equations (comma-separated):</label>
36 |                         <input type="text" class="form-control" id="equations" placeholder="e.g., y = x^2, y = sin(x)" required>
37 |                         <small class="form-text text-muted">Supported Functions: sin, cos, tan, sqrt, log, exp, pi, e, and more.</small>
38 |                     </div>
39 |                     <div class="form-group">
40 |                         <label for="minX">Min X:</label>
41 |                         <input type="number" class="form-control" id="minX" value="-10">
42 |                     </div>
43 |                     <div class="form-group">
44 |                         <label for="maxX">Max X:</label>
45 |                         <input type="number" class="form-control" id="maxX" value="10">
46 |                     </div>
47 |                     <div class="form-group">
48 |                         <label for="graphType">Graph Type:</label>
49 |                         <select class="form-control" id="graphType">
50 |                             <option value="line">Line Chart</option>
51 |                             <option value="scatter">Scatter Plot</option>
52 |                             <option value="bar">Bar Chart</option>
53 |                             <option value="pie">Pie Chart</option>
54 |                         </select>
55 |                     </div>
56 |                     <button type="submit" class="btn btn-primary btn-block">Graph</button>
57 |                     <div class="reset-container">
58 |                         <button type="reset" class="btn btn-outline-secondary">Reset Equation</button>
59 |                         <button type="button" class="btn btn-info" id="resetBtn">Reset Graph</button>
60 |                     </div>
61 |                 </form>
62 | 
63 |             </div>
64 |         </div>
65 |         <div class="row mt-4 graphic-container">
66 |             <div class="col-md-12">
67 |                 <canvas id="graph" class="w-100"></canvas>
68 |             </div>
69 |         </div>
70 |     </section>
71 | 
72 |     <!-- Bootstrap & jQuery JS -->
73 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
74 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
75 | 
76 |     <!-- Calculator JS -->
77 |     <script src="calculator.js"></script>
78 |     
79 | </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | /* Set the font for the entire document */
  2 | body {
  3 |     padding: 25px;
  4 |     background-color: white;
  5 |     color: black;
  6 |     font-size: 25px;
  7 |     font-family: Arial, sans-serif;
  8 | }
  9 | 
 10 | /* Style for the header */
 11 | header {
 12 |     font-weight: 700;
 13 |     font-weight: bold;
 14 |     border-radius: 20px;
 15 | }
 16 | 
 17 | header:hover{
 18 |     box-shadow: 0 0 11px rgba(33,33,33,.2); 
 19 | }
 20 | 
 21 | button{
 22 |     border-radius: 20px;
 23 |     transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
 24 | }
 25 | 
 26 | button:hover{
 27 |     background-color: rgba(0, 0, 0, 0.1);
 28 |     color: white;
 29 |     box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2); 
 30 |     transform: scale(1.1);
 31 | }
 32 | 
 33 | /* Styling for the graph element */
 34 | #graph {
 35 |     width: 100%;
 36 |     height: 400px;
 37 | }
 38 | #graph:hover{
 39 |     box-shadow: 0 0 11px rgba(33,33,33,.2); 
 40 | }
 41 | 
 42 | /* Style for the header with a specific class name */
 43 | .header-style {
 44 |     font-weight: bold;
 45 | }
 46 | 
 47 | /* Styling for the calculator section with a specific ID */
 48 | #calculator {
 49 |     background-color: #f7f7f7;
 50 |     padding: 40px;
 51 |     border-radius: 10px;
 52 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 53 | }
 54 | 
 55 | .reset-container{
 56 |     margin-top: 10px;
 57 |     display: flex;
 58 |     justify-content: space-between;
 59 | }
 60 | .theme-toggle {
 61 |     background: none;
 62 |     border: none;
 63 |     cursor: pointer;
 64 |     padding: 0;
 65 |     margin: 0;
 66 |     position: relative;
 67 | }
 68 | 
 69 | #theme-icon {
 70 |     width: 30px;
 71 |     height: 30px;
 72 | }
 73 | 
 74 | .graphic-container {
 75 |     display: none;
 76 | }
 77 | 
 78 | .graphic-container.active {
 79 |     display: flex;
 80 | }
 81 | 
 82 | :root{
 83 |     --bs-dark: #000;
 84 |   }
 85 |   
 86 |   .theme-container {
 87 |     width: 70px;
 88 |     height: 70px;
 89 |     border-radius: 50%;
 90 |     position: fixed;
 91 |     bottom: 20px;
 92 |     right: 20px;
 93 |     display: flex;
 94 |     justify-content: center;
 95 |     align-items: center;
 96 |     transition: 0.5s;
 97 |   }
 98 |   
 99 |   .theme-container:hover {
100 |     opacity: 0.8;
101 |   }
102 |   
103 |   .shadow-dark {
104 |     background: linear-gradient(145deg, #23282c, #1e2125);
105 |     border: 2px purple solid;
106 |   }
107 |   
108 |   .shadow-light {
109 |     box-shadow: 7px 7px 15px -10px #bbcfda, -4px -4px 13px #ffffff;
110 |     border: 2px black solid;
111 |   }
112 |   
113 |   @keyframes change {
114 |     0% {
115 |       transform: scale(1);
116 |     }
117 |   
118 |     100% {
119 |       transform: scale(1.4);
120 |     }
121 |   }
122 |   
123 |   .change {
124 |     animation-name: change;
125 |     animation-duration: 1s;
126 |     animation-direction: alternate;
127 |   }


--------------------------------------------------------------------------------