project-ideas-frontend/submit.html at master · FDC-Vellore/project-ideas-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="media/fb-favicon.ico" type="image/x-icon">
    <meta name="desciption" content="View and share project ideas in our community - Facebook Developer Circles: Vellore. Our aim is to help and promote developers in our community">
    <meta property="og:image" content="https://fdc-vellore.github.io/project-ideas-frontend/media/share-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="View and share project ideas in our community - Facebook Developer Circles: Vellore. Our aim is to help and promote developers in our community">
    <meta property="og:title" content="Facebook Developer Circles: Vellore - Project Ideas">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="FDC Vellore - Project Ideas">
    <meta name="twitter:title" content="Facebook Developer Circles: Vellore - Project Ideas">

    <title>FDC Vellore - Submit Idea</title>

    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles/formstyles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <!-- navbar starts -->
    <nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
        <nav class="container-fluid">
            <a class="navbar-brand" href="index.html">
                <img src="media/FDC_Logo-Lined.png">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon">
                </span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active ml-auto"><a class="nav-link" href="submit.html">Submit Idea</a></li>
                </ul>
            </div>
        </nav>
    </nav>
    <!-- navbar ends -->

    <div class="container-fluid content">
        <h1>Submit your Idea</h1>
        <div class="desc">Have a project proposal or want to share the project you are currently working on?<br>
        Tell us more!</div>

        <!-- form starts -->
        <form id="ideaForm">
            <div class="form-group">
                <label for="name">Your Name:</label>
                <input required type="text" name="name" id="name" class="form-control col-md-5 col-sm-12" minlength="5" placeholder="Maximilian Robert">
            </div>
            <div class="form-group">
                <label for="email">Your Email Address:</label>
                <input required type="email" name="email" id="email" class="form-control col-md-5 col-sm-12" placeholder="MaxRob@gmail.com">
            </div>
            <div class="form-group">
                <label for="org_name">Your Organisation Name:</label>
                <input type="text" name="org_name" id="org_name" class="form-control col-md-5 col-sm-12" placeholder="Facebook Developer Circles: Vellore">
            </div>
            <div class="form-group">
                <label for="title">Your Project Title:</label>
                <input required type="text" name="title" id="title" class="form-control col-md-5 col-sm-12" minlength="5" maxlength="60" placeholder="Fake News Detector">
                <small id="title-help-text" class="form-text text-muted">Max 60 characters</small>
            </div>
            <div class="form-group">
                <label for="short_desc">Project Short Description:</label>
                <textarea required name="short_desc" id="short_desc" class="form-control col-md-5 col-sm-12" rows=5 minlength="10" maxlength="250" placeholder="Building a fake news detector app which can be integrated with current chat apps to combat fake news."></textarea>
                <small id="short-help-text" class="form-text text-muted">Max 250 characters</small>
            </div>
            <div class="form-group">
                <label for="long_desc">Project Extra Description / Remarks:</label>
                <textarea name="long_desc" id="long_desc" class="form-control col-md-5 col-sm-12" rows=8 placeholder="Optional"></textarea>
            </div>
            <button type="submit">Submit My Idea <i class="fas fa-angle-right"></i></button>
        </form>
        <div id="subStatus"></div>
        <div class="loader"><img src="media/Ripple.gif" alt="loading icon"></div>
    </div>

    <script>
        $('#ideaForm').submit(
        function(e){
            e.preventDefault();
            $('button[type="submit"]').hide();
            $(".loader").show();
            var form = $("#ideaForm")[0];
            var formdata = {
                "name": form[0].value,
                "email": form[1].value,
                "club": form[2].value,
                "title": form[3].value,
                "desc": form[4].value,
                "long_desc": form[5].value
            }
            $.ajax({
                url: "https://fdcidea.herokuapp.com/idea/submission",
                method: "POST",
                data: formdata,
                success: function(){
                    $(".loader").hide();
                    $("#subStatus").text("Form Successfully Submitted");
                    setTimeout(function(){
                        window.location.href = "./index.html";
                    }, 2000);
                },
                error: function(){
                    $(".loader").hide();
                    $('button[type="submit"]').show();
                    $("#subStatus").text("Error Occured! Please try again");
                    console.log("Form not submitted");
                    $("#subStatus").css("color", "#ff2c40");
                }

            })
        })
    </script>
</body>
</html>