diff --git a/Q1_Replace_p_tag.js b/Q1_Replace_p_tag.js new file mode 100644 index 0000000..621bfa6 --- /dev/null +++ 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 new file mode 100644 index 0000000..d4dfc1e --- /dev/null +++ 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 + + + + +*/ diff --git a/Q3_Blog.html b/Q3_Blog.html new file mode 100644 index 0000000..9537cde --- /dev/null +++ b/Q3_Blog.html @@ -0,0 +1,19 @@ + + + + Blog + + + +
+
+
+
+
+
+
+
+ +
+ + diff --git a/Q4_User_log.html b/Q4_User_log.html new file mode 100644 index 0000000..79c7381 --- /dev/null +++ b/Q4_User_log.html @@ -0,0 +1,37 @@ + + + + + + + Table Data + + +
+ + +
+
+ + +
+ +
+ + + + diff --git a/Q4_User_log.js b/Q4_User_log.js new file mode 100644 index 0000000..d6b16b7 --- /dev/null +++ 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 += ``; +} + +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 = ` + + + Id + Email + First Name + Last Name + + `; + + resData.forEach( + (ele) => + (li += ` + + ${ele.id} + ${ele.email} + ${ele.first_name} + ${ele.last_name} + `) + ); + + 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 + ); +};