REST-API/index.html at master · nemimj/REST-API · 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
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REST API</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        footer {
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: #e4e7e97d;
            align-items: center;
            justify-content: center;
        }
        .coded{
            margin-top: 1rem;
        }
        .heading {
            margin-bottom: 20px;
            border: 2px solid;
            width: 10%;
            background-color: #e4e7e97d;
        }
        h1:hover{
          background-color: white;
            font-size: 35;
        }
        h2{
            margin-bottom: 0.5rem;
        }
        .work ul {
            list-style-position: inside;
        }

        .work li {
            margin-top: 0.8rem;
            margin-left: 1em;
            background-color: aliceblue;
            width: 30%;
        }
        .rest-api{
         margin-top: 10px;
        }
    </style>
</head>

<body>
    <center style="padding:2%;">

        <div class="rest-api">
            <h2>Rest Api must support this two things</h2>
            <p>>>> <strong>Endpoints</strong> must be same</p>
            <p>>>> It Should Supports All <strong>HTTP Methods</strong><br>GET<br>POST<br>PUT<br>PATCH<br>DELETE</p>
        </div>
        <h1 class="heading"><a href="/api/jokes">Use Api</a></h1>
        <div class="box">
            <h2>How to work with this Api</h2>
            <ul class="work">
                <h3>ex: {title:joke1} <a>localhost:3000/api/jokes/joke1</a>
                </h3>
                <li class="work"><span><strong>GET: </strong></span><a href="/api/jokes/title">localhost:3000/api/jokes/title</a>
                </li>
                <li class="work"><span><strong>POST: </strong></span><a href="/api/jokes">localhost:3000/api/jokes</a>
                </li>
                <li class="work"><span><strong>PUT: </strong></span><a href="/api/jokes/title">localhost:3000/api/jokes/title</a>
                </li>
                <li class="work"><span><strong>PATCH: </strong></span><a href="/api/jokes/title">localhost:3000/api/jokes/title</a>
                </li>
                <li class="work"><span><strong>DELETE: </strong></span><a href="/api/jokes">localhost:3000/api/jokes/title</a>
                </li>
            </ul>
        </div>
        <h1 class="coded">Coded By  <span class="auto-type"></span></h1>
    </center>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<script>
    var typed = new Typed(".auto-type",{
        strings:['Nemi'],
        typeSpeed:120,
        backSpeed:100,
        loop:true
    })
</script>
</body>
<footer>
    &copy; Nemi's💖Project
</footer>

</html>