MsiIslam20
diff --git a/‎API-HTTP_POST_method/index.html‎
Lines changed: 23 additions & 0 deletions b/‎API-HTTP_POST_method/index.html‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎API-HTTP_POST_method/script.js‎
Lines changed: 23 additions & 0 deletions b/‎API-HTTP_POST_method/script.js‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎API-HTTP_POST_method/style.css‎
Lines changed: 27 additions & 0 deletions b/‎API-HTTP_POST_method/style.css‎
Lines changed: 27 additions & 0 deletions
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>HTTP POST METHOD</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <h1>JSON</h1>
+ <h1>JavaScript Object Notation</h1>
+ <h2>Dynamically Send data to server:</h2>
+
+ <input id="title" type="text" placeholder="title">
+ <br>
+ <input id="bodyContent" type="text" placeholder="body part">
+ <br>
+ <button id="submit">submit</button>
+ <p>note: after submitting use inspect to the result</p>
+ 
+ <script src="script.js"></script>
+</body>
+</html>
@@ -0,0 +1,23 @@
+
+document.getElementById("submit").addEventListener("click", function(){
+ const title = document.getElementById("title").value;
+ const bodyContent = document.getElementById("bodyContent").value;
+
+ const post = {
+ title: title,
+ body: bodyContent
+ };
+ postToServer(post)
+})
+
+function postToServer(post){
+ fetch('https://jsonplaceholder.typicode.com/posts', {
+ method: 'POST',
+ body: JSON.stringify(post),
+ headers: {
+ "Content-type": "application/json; charset=UTF-8"
+ }
+ })
+ .then(response => response.json())
+ .then(json => console.log(json))
+}
@@ -0,0 +1,27 @@
+body{
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: #0F141E;
+ text-align: center;
+ background: aliceblue;
+}
+h1{
+ color: #080e50;
+}
+p{
+ color: red;
+}
+input{
+ padding: 10px 10px;
+ margin-bottom: 20px;
+ border: 2px solid blue;
+ border-radius: 5px;
+ font-size: 20px;
+}
+#submit{
+ padding: 10px 20px;
+ font-size: 18px;
+ cursor: pointer;
+ border: 2px solid blue;
+ font-weight: bold;
+ border-radius: 5px;
+}