tamrin project javascript

SpantaAlizadeh10 · Dec 29, 2023 · 8b972cb · 8b972cb
1 parent 5300384
commit 8b972cb
Show file tree

Hide file tree

Showing 12 changed files with 1,747 additions and 0 deletions.
diff --git a/tamrin web3/append-prepend.html b/tamrin web3/append-prepend.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+<style>
+    #demo{
+        border: 1px solid red;
+    }
+    </style>
+</head>
+<body>
+    <div id="demo">
+        <p>hi</p>
+    </div>
+
+    <script>
+           $('#demo').after('<p>appppend</p>')
+           $('#demo').before('<p>appppend</p>')
+      $('#demo').append('<p>appppend</p>');
+      $('#demo').prepend('<p>appppend</p>');
+    </script>
+</body>
+</html>
diff --git a/tamrin web3/db.json b/tamrin web3/db.json
@@ -0,0 +1,8 @@
+{
+    "posts": [
+      { "id": 1, "title": "json-server", "author": "typicode" }
+    ],
+    "comments": [
+      { "id": 1, "body": "some comment", "postId": 1 }
+    ]
+  }
diff --git a/tamrin web3/getjson.html b/tamrin web3/getjson.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+ input{
+  width: 100px;
+  height: 30px;
+  background-color: antiquewhite;
+  border-radius: 10px;
+ }
+ body{
+  background-color: #493c3c;
+ }
+
+ div{
+  text-align: center;
+  justify-content: center;
+
+ }
+
+
+/* CSS */
+button {
+  background-color: #13aa52;
+  border: 1px solid #13aa52;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  outline: none;
+  outline: 0;
+  padding: 10px 25px;
+  text-align: center;
+  transform: translateY(0);
+  transition: transform 150ms, box-shadow 150ms;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+button :hover {
+  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
+  transform: translateY(-2px);
+}
+
+@media (min-width: 768px) {
+  .button {
+    padding: 10px 30px;
+  }
+}
+</style>
+<body>
+
+
+
+
+
+
+    <div>
+        <input type="text" id="searchInput"/>
+        <button id="searchBtn">search</button>
+    </div>
+    <div id="demo"></div>
+    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+
+    <script>
+
+        $('#searchBtn').click(function(){
+            let id=$('#searchInput').val();
+            getById(id);
+
+        })
+
+
+
+
+        function getById(id){
+            var settings = {
+  "url": `https://jsonplaceholder.typicode.com/albums/${id}`,
+  "method": "GET",
+  "timeout": 0,
+};
+
+$.ajax(settings).done(function (response) {
+    $("#demo").empty();
+  console.log(response);
+  $('#demo').append(`<h1>${response.id}-${response.title}</h1>`);
+  $('#demo').append(`<h1>${response.title}</h1>`);
+});
+        }
+
+    </script>
+</body>
+</html>
diff --git a/tamrin web3/getjson2.html b/tamrin web3/getjson2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+ input{
+  width: 100px;
+  height: 30px;
+  background-color: antiquewhite;
+  border-radius: 10px;
+ }
+ body{
+  background-color: #493c3c;
+ }
+
+ div{
+  text-align: center;
+  justify-content: center;
+
+ }
+
+
+
+</style>
+<body>
+
+
+
+
+
+
+    <div>
+
+    </div>
+    <div id="demo"></div>
+    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+
+    <script>
+
+
+
+            var settings = {
+  "url": "https://jsonplaceholder.typicode.com/albums",
+  "method": "GET",
+  "timeout": 0,
+};
+
+$.ajax(settings).done(function (response) {
+    for (let i = 0;i <response.lenght;i++){
+
+  $('#demo').append(`<h2>${response[i].id}-${response[i].title}</h2>`);
+
+    }
+
+});
+
+    </script>
+</body>
+</html>
diff --git a/tamrin web3/hide tah p.html b/tamrin web3/hide tah p.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+
+</head>
+<body>
+    <input type="'text" id="fname">
+    <p id="demo">Lorem ipsum dolor sit<b>gdgdf</b> amet.</p>
+    <button>click me</button>
+    <script>
+        $(document).ready(function(){
+            $('button').click(function(){
+                let txt=$('#demo').hide();
+                console.log(txt);
+                let n=$('#fname').val();
+                console.log(n);
+            })
+        })
+    </script>
+</body>
+</html>
diff --git a/tamrin web3/index.html b/tamrin web3/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+<style>
+    #demo{
+        border: 1px solid red;
+    }
+
+    table,td,th{
+        border: 1px solid lightblue;
+        border-collapse: collapse;
+    }
+    table{
+
+        width: 100%;
+
+    };
+    thead{
+        background-color: bisque;
+    }
+    tbody{
+        background-color: aquamarine;
+    }
+
+    </style>
+</head>
+<body>
+    <input type="text" id="fname" placeholder="first name">
+    <input type="text" id="lname" placeholder="last name">
+    <button id="registerUser">register</button>
+<hr>    <hr>
+
+       <table>
+        <thead>
+            <th>id</th>
+            <th>fname</th>
+            <th>lname</th>
+            <th>operation</th>
+        </tr>
+
+        </thead>
+        <tr>
+
+        <tbody>
+            <tr>
+                <th>1</th>
+                <th>sepanta</th>
+                <th>sara</th>
+                <th><button>del</button>></th>
+            </tr>
+        </tbody>
+       </table>
+
+
+    <script>
+           $('#demo').after('<p>appppend</p>')
+           $('#demo').before('<p>appppend</p>')
+      $('#demo').append('<p>appppend</p>');
+      $('#demo').prepend('<p>appppend</p>');
+    </script>
+</body>
+</html>
diff --git a/tamrin web3/json_sample.html b/tamrin web3/json_sample.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="demo"></div>
+    <script>
+        let txt=`[{"userId":"id", "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body": "quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto"},{"userId":"id","title": "qui est esse","body": "est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla"},{"userId":"id","title": "ea molestias quasi exercitationem repellat qui ipsa sit aut","body": "et iusto sed quo iurenvoluptatem occaecati omnis eligendi aut adnvoluptatem doloribus vel accusantium quis pariaturnmolestiae porro eius odio et labore et velit aut"}]`;
+
+        let posts=JSON.parse(txt);
+        for(let i=0;i<posts.length;i++){
+            $('#demo').append(`
+            <div>
+                ${posts[i].title}
+                
+                `)
+        }
+
+        </script>
+</body>
+</html>