mathmeticalTools/numberSeriesGenerator/numberSeriesGenerator.html

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#6610f2">
    <link rel="icon" type="image/ico" href="../../favicon.ico" />
    <title>Number Series Generator</title>
    <link rel="stylesheet" href="numberSeriesGenerator.css">
    <link href="https://fonts.googleapis.com/css2?family=Varela&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!--Scripts-->
    
    <script src="numberSeriesGenerator.js"></script>

</head>

<body style="background-color: rgba(173, 216, 230, 0.3);
  font-family: 'Multi', sans-serif;">
    <!--  Navbar  -->
    <nav class="site-header sticky-top py-1 text-light">
        <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center" id="uNavbar">
            <a class="py-2 text-light" href="../../index.html">
                <i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
            </a>

            <!--    Dynamic Navbar Elements        -->

            <div class="btn-group d-none d-md-block py-2">
                <button type="button" class="btn btn-link text-light text-decoration-none"><a href="https://backgroundgradients.com/" class="text-light">Background Gradients</a> </button>
            </div>

        </div>
    </nav>
    <!--  Navbar End  -->
    
    <section class="hero-section overflow-hidden py-3 mb-3 text-center text-md-left text-light">
        <div class="container-xl">
            <div class="row">
                <div class="col-0">
                    <div class="hero-section__graphic position-relative m-auto">
                        
                    </div>
                </div>
                <div class="col align-self-center text-center">
                    <h1 class="text-white mb-2">Number Series Generator</h1>
                </div>
            </div>

        </div>
    </section>
    <section style="align-items: center; margin: 5%; justify-content: center;">

        <div class=" align-items-center align-self-center text-center ct1">

            <div class="cont">
                <div style="margin-top:4px; align-items: center; justify-content: center;">
                    <div class="row justify-content-start">
                        <div class="col justify-content-start">
                            <div class="row">
                                <input type="radio" name="series" onclick="disableInputFactorAndInitialValue()" value="Fibonacci" style="margin-right: 2%;"> Fibonacci</input>
                            </div>
                            <div class="row">
                                <input type="radio" name="series" onclick="enableInputFactorAndInitialValue()" value="GP" style="margin-right: 2%;">Geometric Progression</input>
                            </div>
                            <div class="row">
                                <input type="radio" name="series" onclick="enableInputFactorAndInitialValue()" value="AP" style="margin-right: 2%;">Arithmetic Progression</input>
                            </div>
                            <div class="row">
                                <input type="radio" name="series" onclick="enableInputFactorAndInitialValue()" value="HP" style="margin-right: 2%;">Harmonic Progression</input>
                            </div>
                            <div class="row">
                                <input type="radio" name="series" onclick="disableInputFactorAndInitialValue()" value="PSS" style="margin-right: 2%;">Perfect Square Series</input>
                            </div>
                            <div class="row">
                                <input type="radio" name="series" onclick="disableInputFactorAndInitialValue()" value="TNS" style="margin-right: 2%;">Triangular Number Series</input>
                            </div>
                            <div class="row">
                                <input type="radio" name="series" onclick="disableInputFactorAndInitialValue()" value="PNS" style="margin-right: 2%;">Pentagonal Number Series</input>
                            </div>
                            <div class="row">
                                <input type="radio" name="series" onclick="disableInputFactorAndInitialValue()" value="HNS" style="margin-right: 2%;">Hexagonal Number Series</input>
                            </div>
                        </div>
                        <div class="col justify-content-start">
                            <div class="col-12">

                                <div class="row">
                                    <div class="form-group mb-2">
                                        <input type="text" readonly class="form-control-plaintext" id="txtAmountItems"
                                            value="Number of terms:">
                                    </div>
                                    <div class="form-group mx-sm-3 mb-2">
                                        <input type="number" min="1" maxlength="2"  class="form-control" id="valueAmountItems">
                                    </div>

                                    <div class="form-group mb-2">
                                        <input type="text" readonly class="form-control-plaintext" id="txtInitialValue"
                                            value="First term (a1):">
                                    </div>
                                    <div class="form-group mx-sm-3 mb-2">
                                        <input type="number" class="form-control" id="valueInitialValue">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group mb-2">
                                        <input type="text" readonly class="form-control-plaintext" id="txtFactor"
                                            value="Common ratio:">
                                    </div>
                                    <div class="form-group mx-sm-3 mb-2">
                                        <input type="number" class="form-control" id="valueFactor">
                                    </div>
                                </div>

                                <div class="row">
                                    <button id="buttonGenerate" onclick="generateSeries()" class="btn btn-primary mb-2"
                                        disabled>Generate Series</button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row justify-content-start">
                        <output id="idResult" type="text" class="form-control"
                            aria-label="Text input with dropdown button" style="max-width: 1000px;
                            overflow-x: auto;
                            height: 56px;"></output>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!--  Footer  -->
    <footer class="border-top py-3 px-4">
        <div class="row align-items-center">
            <div class="col-md-6">
                <p class="m-0">Copyright &copy; 2020 codeezzi</p>
                <p class="m-0">Page Created by <a href="https://github.com/ramonborges15" target="_blank">Ramon
                        Borges</a></p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#" class="text-dark">Terms of Use</a>
                <span class="text-muted mx-2">|</span>
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>
        </div>
    </footer>
    <!--  Footer End  -->
        <!-- Global Scripts: Should load in all pages -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <script src="../../assets/config/categories.js"></script>
        <script src="../../assets/config/tools.js"></script>
        <script src="../../assets/scripts/templates.js"></script>
        <script src="../../assets/scripts/app.js"></script>
        <!-- END of Global Scripts -->
</body>

</html>