Final Touch completed chrome extension

Fully Functional

README.md

@@ -1,2 +1,2 @@
-# Google-Classroom-Linkhub
-Chrome Extension, Saves All Google meet links, GCR link at one place.
+# gcrlinkhub
+gcr link hub chrome exstn

assets/css/style.css

@@ -0,0 +1,103 @@
+@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
+/* font-family: 'Questrial', sans-serif; */
+body{
+    margin: 0 0;
+}
+#teachers,#classes,#meetbtn,#gcrbtn{ 
+    width: 179.5px;
+    height: 29px;
+    font-family: 'Questrial', sans-serif;
+}
+.input{
+    width: 171px;
+    height: 25px;
+    border: 2px solid black;
+    font-family: 'Questrial', sans-serif;
+    margin: 6px 5px;
+    font-size: 16px;
+}
+.container{
+    width: 529px;
+    height: 370px;
+    background-color: rgb(197, 197, 197);
+    border: 2px solid black;
+    position: relative;
+}
+.gcrlogo{
+    top: 5px;
+    left: 20px;
+    position: absolute;
+    background-size: cover;
+    background-image: url(../images/gcricon.png);
+    width: 109px;
+    height: 103px;
+}
+
+.headingtext{
+    left: 163px;
+    top: 20px;
+    position: absolute;
+    font-size: 41px;
+    font-weight: 600;
+    font-family: 'Questrial', sans-serif;
+}
+.inputsection{
+    left: 25px;
+    top: 130px;
+    position: absolute;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+.selection{
+    width:150px; 
+    height:20px;
+    border : 2px solid black;
+    font-family: 'Questrial', sans-serif;
+    margin: 5px 5px;
+
+}
+.plusicon{
+    top: 167px;
+    left: 410px;
+    position: absolute;
+    background-size: cover;
+    background-image: url(../images/plusicon.png);
+    width: 45px;
+    height: 45px;
+}
+.plusicon:hover{
+    opacity: 0.5;
+}
+.selectsection{
+    left: 25px;
+    top: 230px;
+    position: absolute;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+#delbtn{
+    top: 266px;
+    left: 412px;
+    position: absolute;
+    background-size: cover;
+    background-image: url(../images/minusicon.png);
+    width: 39px;
+    height: 39px;
+}
+#delbtn:hover{
+    opacity: 0.5;
+}
+#meetbtn{
+    background-color: #6EB37D;
+}
+
+#gcrbtn{
+    background-color: #FEBF10;
+}
+#gcrbtn:hover{
+    opacity: 0.75;
+}
+#meetbtn:hover{
+    opacity: 0.75;
+}

assets/js/main.js

@@ -0,0 +1,205 @@
+// console.log(values);
+
+function ValidURL(str) {
+    var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
+    if (!regex.test(str)) {
+        // alert("Please enter valid URL.");
+        return false;
+    } else {
+        return true;
+    }
+}
+
+
+
+let arr = document.querySelectorAll(".input")
+//---------caching the data entered by the user-----------
+
+//getting data form cache
+for (let i = 0; i < 4; i++) {
+    x = localStorage.getItem(`input${i}`);
+    if (x) {
+        arr[i].value = x;
+    }
+}
+
+//storing data in cache
+for (let i = 0; i < 4; i++) {
+    arr[i].addEventListener("change", () => {
+        localStorage.setItem(`input${i}`, arr[i].value);
+    })
+}
+
+//updating the drop downs
+updatelist();
+function updatelist() {
+
+    let obj = localStorage.getItem("data");
+
+    if (obj != null) {
+        obj = JSON.parse(obj);
+    }
+    else {
+        obj = [];
+    }
+    var teachers = document.getElementById("teachers");
+    let html = ``;
+    let html2 = ``;
+    obj.forEach(function (element) {
+        let x = `<option value="${element.teacher}">${element.teacher}</option>`
+        html += x;
+        let y = `<option value="${element.class}">${element.class}</option>`
+        html2 += y;
+
+    })
+
+    teachers.innerHTML = html;
+    classes.innerHTML = html2;
+
+}
+
+
+
+//---------------linking both dropdowns-----------
+
+document.getElementById("teachers").addEventListener("change", () => {
+    let index = document.getElementById("teachers").options.selectedIndex;
+    document.getElementById("classes").value = document.getElementById("classes").options[index].value;
+});
+document.getElementById("classes").addEventListener("change", () => {
+    let index = document.getElementById("classes").options.selectedIndex;
+    document.getElementById("teachers").value = document.getElementById("teachers").options[index].value;
+});
+
+
+
+var addbtn = document.getElementById("addbtn");
+
+addbtn.addEventListener("click", () => {
+
+    let obj = {
+        "teacher": document.getElementById("inputteacher").value,
+        "class": document.getElementById("inputclass").value,
+        "meet": document.getElementById("inputmeet").value,
+        "gcr": document.getElementById("inputgcr").value
+    }
+
+    if (ValidURL(obj.meet) && ValidURL(obj.gcr) == true) {
+
+        if (obj.teacher && obj.class && obj.meet && obj.gcr != "") {
+            console.log("values updated", obj);
+            let data = JSON.parse(localStorage.getItem("data"));
+            if (data == null) { data = []; }
+
+            data.push(obj);
+            localStorage.setItem("data", JSON.stringify(data));
+            updatelist();
+
+            for (let i = 0; i < 4; i++) {
+                localStorage.removeItem(`input${i}`);
+            }
+
+            document.getElementById("inputteacher").value = "";
+            document.getElementById("inputclass").value = "";
+            document.getElementById("inputmeet").value = "";
+            document.getElementById("inputgcr").value = "";
+
+        } 
+
+    }
+
+
+    if(obj.teacher==false){
+        document.querySelector("#inputteacher").style.border = "2px solid red";
+        setTimeout(() => {
+            document.querySelector("#inputteacher").style.border = "2px solid black";
+        }, 2000);
+
+    }
+    if(obj.class==false){
+        document.querySelector("#inputclass").style.border = "2px solid red";
+        setTimeout(() => {
+            document.querySelector("#inputclass").style.border = "2px solid black";
+        }, 2000);
+
+    }
+    if(ValidURL(obj.meet)==false){
+        document.querySelector("#inputmeet").style.border = "2px solid red";
+        setTimeout(() => {
+            document.querySelector("#inputmeet").style.border = "2px solid black";
+        }, 2000);
+
+    }
+    if(ValidURL(obj.gcr)==false){
+        document.querySelector("#inputgcr").style.border = "2px solid red";
+        setTimeout(() => {
+            document.querySelector("#inputgcr").style.border = "2px solid black";
+        }, 2000);
+
+    }
+
+
+});
+
+document.getElementById("meetbtn").addEventListener("click", () => {
+
+    let index = (document.getElementById("classes").options.selectedIndex);
+    let data = localStorage.getItem("data");
+
+    if (data != null) {
+        data = JSON.parse(data);
+    }
+    else {
+        data = [];
+    }
+    console.log(data[index].meet);
+
+    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
+        var activeTab = tabs[0];
+        chrome.tabs.sendMessage(activeTab.id, { "message": "btnclicked", "link": data[index].meet });
+    });
+
+
+    // console.log(document.getElementById("teachers").options.selectedIndex);
+    //link of the meet or obj is values[index]
+
+});
+document.getElementById("gcrbtn").addEventListener("click", () => {
+
+    let index = (document.getElementById("classes").options.selectedIndex);
+    let data = localStorage.getItem("data");
+
+    if (data != null) {
+        data = JSON.parse(data);
+    }
+    else {
+        data = [];
+    }
+    console.log(data[index].gcr); //link of the meet or obj is values[index]
+    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
+        var activeTab = tabs[0];
+        chrome.tabs.sendMessage(activeTab.id, { "message": "btnclicked", "link": data[index].gcr });
+    });
+
+
+});
+document.getElementById("delbtn").addEventListener("click", () => {
+
+    let index = (document.getElementById("classes").options.selectedIndex);
+
+    // console.log(values[index].gcr); //link of the meet or obj is values[index]
+    let data = localStorage.getItem("data");
+
+    if (data != null) {
+        data = JSON.parse(data);
+    }
+    else {
+        data = [];
+    }
+    data.splice(index, 1);
+    localStorage.setItem("data", JSON.stringify(data));
+    updatelist();
+
+
+});
+

assets/js/script.js

@@ -0,0 +1,9 @@
+chrome.runtime.onMessage.addListener(
+    function (request, sender, sendResponse) {
+        if (request.message === "btnclicked") {
+            // location.replace(request.link);
+            window.open(request.link, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=1000");
+        }
+    }
+
+);

index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GCR LinkHub</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+
+</head>
+
+<body>
+    <div class="container">
+        <div class="gcrlogo">
+        </div>
+        <div class="headingtext">
+            Google Classroom <br> LinkHub
+        </div>
+        <div class="inputsection">
+            <input type="text" id="inputteacher" class="input" placeholder="Enter Teacher name">
+            <input type="text" id="inputclass" class="input" placeholder="Enter Class name">
+            <input type="text" id="inputmeet" class="input" type="url" placeholder="Enter Meet link">
+            <input type="text" id="inputgcr" class="input" type="url" placeholder="Enter Gcr link">
+            <!-- <button id="addbtn">add</button> -->
+        </div>
+        <div class="plusicon" id="addbtn" data-toggle="tooltip" title="Add" data-placement="bottom"></div>
+        <div class="selectsection">
+            <select name="teachers" id="teachers" class="selection">
+            </select>
+            <select name="classes" id="classes" class="selection">
+            </select>
+
+            <button id="meetbtn" class="selection">Meet</button>
+            <button id="gcrbtn" class="selection">Google Classroom</button>
+            <!-- <button id="delbtn" class="selection">delete</button> -->
+        </div>
+        <div id="delbtn" data-toggle="tooltip" title="Delete Selected" data-placement="bottom"></div>
+
+    </div>
+
+
+    <script src="assets/js/main.js"></script>
+</body>
+
+</html>

manifest.json

@@ -0,0 +1,23 @@
+{
+    "manifest_version": 2,
+    "name": "Google Classroom LinkHub",
+    "description": "All links of Google Meet, Google Classroom one place _abx",
+    "version": "1.0",
+    "content_scripts": [
+        {
+            "js": [
+                "assets/js/script.js"
+            ],
+            "matches": [
+                "<all_urls>"
+            ]
+        }
+    ],
+    "icons": {
+        "192": "assets/images/gcricon.png"
+    },
+    "browser_action": {
+        "default_icon": "assets/images/gcricon.png",
+        "default_popup": "index.html"
+    }
+}