PrashantSalave · PrashantSalave · Oct 16, 2023
diff --git a/Q1_Replace_p_tag.js b/Q1_Replace_p_tag.js
@@ -0,0 +1,7 @@
+// Visit any page on the browser, and replace the content of all the p tags
+// with the phrase “How’s the Josh?” using Javascript
+
+const pArray = document.getElementsByTagName("p");
+for (let p of pArray) {
+  p.innerHTML = "How's the JOSH!";
+}
diff --git a/Q2_Youtube_speed_change.js b/Q2_Youtube_speed_change.js
@@ -0,0 +1,24 @@
+/*
+Go to youtube. Open any video. Add a button to the page using JS. 
+On click of the button, the video playback speed should change to 10x
+*/
+
+function myFunction() {
+  document.getElementsByTagName("video")[0].playbackRate = 3;
+}
+
+/*
+1.Cntrl + Shift + I
+
+2.First write 'myFunction' in the console and run. 
+This will make the scope of myFunction global now we can easily access it.
+
+3.Create button in HTML and give the myFunction functionality to the onClick 
+event of button.
+
+//HTML Code
+
+<button onClick="myFunction()">Speed Up</button>
+
+
+*/
diff --git a/Q3_Blog.html b/Q3_Blog.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Blog</title>
+  </head>
+  <body>
+    <!--email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver-->
+    <form action="https://reqres.in/api/users" method="post">
+      <label for="email">Email:</label><br />
+      <input type="text" id="email" name="email" value="john@gmail.com" /><br />
+      <label for="first_name">First name:</label><br />
+      <input type="text" id="first_name" name="first_name" value="John" /><br />
+      <label for="last_name">Last name:</label><br />
+      <input type="text" id="last_name" name="last_name" value="Doe" /><br />
+      <br />
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
diff --git a/Q4_User_log.html b/Q4_User_log.html
@@ -0,0 +1,37 @@
+<!--Create a blog list page that fetches a list of users from a mock API
+    and adds them to a table on the page after loading.
+    Add a button to sort the users by name. 
+    Add an input to filter the table by search. 
+    (Optional: Show “Loading…” or a loading spinner on the screen till the data loads)-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous"
+    />
+    <title>Table Data</title>
+  </head>
+  <body onload="getUsers('https://reqres.in/api/users?page=2')">
+    <div>
+      <select name="userSortKey" id="userSortKey"></select>
+      <button onClick="sortUsers()">Sort the Table</button>
+    </div>
+    <div>
+      <select name="userSearchKey" id="userSearchKey"></select>
+      <input
+        type="text"
+        placeholder="Enter Search Key"
+        id="searchBox"
+        onkeyup="getUserSpecific()"
+      />
+    </div>
+
+    <table id="table" class="table table-striped"></table>
+
+    <script src="./Q4_User_log.js"></script>
+  </body>
+</html>
diff --git a/Q4_User_log.js b/Q4_User_log.js
@@ -0,0 +1,103 @@
+let userKey = {
+  id: "ID",
+  email: "Email",
+  first_name: "First Name",
+  last_name: "Last Name",
+};
+let usersArray = [];
+
+let optionValue = "";
+
+//For Select Options
+for (let key in userKey) {
+  optionValue += `<option value="${key}">${userKey[key]}</option>`;
+}
+
+document.getElementById("userSortKey").innerHTML = optionValue;
+document.getElementById("userSearchKey").innerHTML = optionValue;
+
+//To load data of users
+const getUsers = async (url) => {
+  let users = await loadData(url);
+
+  let li = tableData(usersArray);
+
+  document.getElementById("table").innerHTML = li;
+};
+
+const loadData = async (url) => {
+  let users = await fetch(url);
+  return new Promise((res, rej) => {
+    users
+      .json()
+      .then((user) => {
+        if (!user) {
+          console.log("User not found");
+        }
+        usersArray = user.data;
+        res(user);
+      })
+      .catch((err) => rej(err));
+  });
+};
+
+//Common table to display the array of users data
+const tableData = (resData) => {
+  let li = ` 
+        <thead>
+            <tr>
+                <th scope="col">Id</th>
+                <th scope="col">Email</th>
+                <th scope="col">First Name</th>
+                <th scope="col">Last Name</th>
+            </tr>
+        </thead>`;
+
+  resData.forEach(
+    (ele) =>
+      (li += `
+      <tr>
+        <th scope="row">${ele.id}</th>
+        <td>${ele.email}</td>
+        <td>${ele.first_name}</td>
+        <td>${ele.last_name}</td>
+      </tr>`)
+  );
+
+  return li;
+};
+
+//Function for sorting users
+const sortUsers = () => {
+  let users = usersArray;
+  let sortkey = document.getElementById("userSortKey").value;
+
+  let sortedUsers = users.sort((a, b) => (a[sortkey] > b[sortkey] ? 1 : -1));
+
+  document.getElementById("table").innerHTML = tableData(sortedUsers);
+  document.getElementById("searchBox").value = "";
+};
+
+//Function for getting specific user
+const getUserSpecific = () => {
+  let reqUser = document.getElementById("searchBox").value;
+  let searchkey = document.getElementById("userSearchKey").value;
+  let users = usersArray;
+
+  let inputUser = users.filter((user) => {
+    return JSON.stringify(user[searchkey])
+      .toLowerCase()
+      .includes(reqUser.toLowerCase());
+  });
+
+  let emptyObj = {
+    email: "-",
+    first_name: "-",
+    id: "-",
+    last_name: "-",
+  };
+
+  document.getElementById("table").innerHTML = tableData(
+    inputUser.length === 0 ? [emptyObj] : inputUser
+  );
+};