Front-End-HTML/index.html at main · Recylelit/Front-End-HTML · 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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<script>
function test(){
    console.log('CALLED FUNTIO')
    let YorN = document.getElementById('YorN').value
    let lat = document.getElementById('lat').value
    let long = document.getElementById('long').value
    let itemType = document.getElementById('itemType').value
    let itemWeight = document.getElementById('itemWeight').value
    let itemSize = document.getElementById('itemSize').value
    let itemNotes = document.getElementById('itemNotes').value

    alert("Sending your request...\n"
            + document.getElementById('YorN').value + '\n'
            + document.getElementById('lat').value + '\n'
            + document.getElementById('long').value + '\n'
            + document.getElementById('itemType').value + '\n'
            + document.getElementById('itemWeight').value + '\n'
            + document.getElementById('itemSize').value + '\n'
            + document.getElementById('itemNotes').value + '\n')

    return false
}
</script>
<script>
function main()
{
    let YorN = document.getElementById('YorN').value
    let lat = document.getElementById('lat').value
    let long = document.getElementById('long').value
    let itemName = document.getElementById('itemName').value
    let itemType = document.getElementById('itemType').value
    let itemWeight = document.getElementById('itemWeight').value
    let itemSize = document.getElementById('itemSize').value
    let itemNotes = document.getElementById('itemNotes').value

    if(YorN === "Y")
    {
    const obj = {'lat': lat, 'long': long, 'itemName': itemName, 'itemWeight': itemWeight, 'itemSize': itemSize, 'itemType': itemType, 'itemNotes': itemNotes};
    fetch("https://websocketcackend.herokuapp.com/api/post/route", {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify(obj)
    })
        .then(results =>results.json())
        .then(obj => console.log(obj));
    }
    else
    {
        console.log("User did not indicate yes (\"Y\")")
    }
    return false
}
</script>


<h1 class = "title">RecycleLit!</h1>
<img id="fire" style="float: right;" alt="" src="https://cdn.discordapp.com/attachments/1091535243057565810/1091586604881158254/fuckfuck.jpg" width="750" height="422">

<form>
    <p class = "border">Would you like to submit a request? </p>
    <select name="YorN" id="YorN">
        <option value="Y">Yes</option>
        <option value="N">No</option>
    </select><br>
    <p class = "border"> Latitude: </p>
    <input type="number" id="lat" name="lat"><br>
    <p class = "border"> Longitude: </p>
    <input type="number" id="long" name="long">
    <p class = "border"> Please enter a name for the item: </p>
    <input type="text" id="itemName" name="itemName"><br>
    <p class = "border"> Which of the following types of recycleables are you disposing of today? </p>
    <select name="itemType" id="itemType">
        <option value="Plastic">Plastic</option>
        <option value="Paper">Paper</option>
        <option value="Glass">Glass</option>
        <option value="Metal">Metal</option>
        <option value="Multiple or all of the above">Multiple or all of the above</option>
    </select>
    <p class = "border"> Now, please enter the approximate total weight (in pounds) of your disposables (Remember, a full water bottle is about a pound. A gallon of milk is about 8 pounds): </p>
    <select name="itemWeight" id="itemWeight">
        <option value="light">Light (&lt 5 pounds)</option>
        <option value="medium">Medium (Between 5 and 200 pounds)</option>
        <option value="heavy">Heavy (&gt 200 pounds)</option>
        option
    </select>
    <p class = "border"> Now please select an approximate size for your trash: </p>
    <select name="itemSize" id="itemSize">
        <option value="Small">Small (shoebox or smaller)</option>
        <option value="Medium">Medium (plastic drawers or smaller)</option>
        <option value="Large">Large (Anything larger)</option>
    </select>
    <p class = "border">Please enter any notes about the item or items/extra instructions for the pickup driver:</p>
    <input type="text" id="itemNotes" name="itemNotes"><br>

    <br><input type="submit" value="Submit" onclick= "test(); return main();">

</form>
<p></p>
</span>

</body>
</html>