tutorial oldalak kesz

javascript/tutorial oldalak/script.js

@@ -1,11 +1,31 @@
 "use sctrict"
 //adatok
-tutorial_opciok = ["html", "css", "javascript", "c#", "php"];
+let tutorial_opciok = ["html", "css", "javascript", "c#", "php"];
 
 let html = {
     links: ["https://www.w3schools.com/html/default.asp", "https://html.com","https://www.codecademy.com"],
     names: ["w3schools", "html.com", "codeacademy"]
 };
+let css = {
+    links: ["https://www.w3schools.com/css/default.asp", "https://www.sololearn.com/learning/1023","https://www.freecodecamp.org/learn/"],
+    names: ["w3schools", "sololearn", "freecodecamp"]
+};
+let javascript = {
+    links: ["https://www.w3schools.com/js/default.asp", "https://javascript.info/","https://www.codecademy.com"],
+    names: ["w3schools", "javascript.info", "codeacademy"]
+};
+let csharp = {
+    links: ["https://www.w3schools.com/cs/default.asp", "https://www.tutorialsteacher.com/csharp","https://www.codecademy.com"],
+    names: ["w3schools", "tutorials teacher", "codeacademy"]
+};
+let php = {
+    links: ["https://www.w3schools.com/php/default.asp", "https://www.php.net/manual/en/index.php","https://www.codecademy.com"],
+    names: ["w3schools", "php manual", "codeacademy"]
+};
+
+let nyelvek = [html, css, javascript, csharp, php];
+
+let first_call = true;
 
 function navOpciokLetrehozas(){
     let option;
@@ -14,11 +34,8 @@ function navOpciokLetrehozas(){
         option = document.createElement("li");
         option.setAttribute("id", tutorial_opciok[i]+"-item");   
         let button = document.createElement("button");
-        button.setAttribute("onclick", "fuggvenyAmiLetrehozzaAdiveket()"); 
-        /*ha rakkatintok a gombra meghivja a fuggvenyt ami letrehozza a
-         megfelelo diveket a linkekhez es torli a mar letrehozott diveket
-         ha nincs meg letrehozva egy sem azt is vegye figyelembe 
-        */
+        button.setAttribute("onclick", "divForLanguage(this)");
+        button.setAttribute("value", i);
         option.appendChild(button);
         let text = document.createTextNode(tutorial_opciok[i]);
         button.appendChild(text);
@@ -26,31 +43,33 @@ function navOpciokLetrehozas(){
         optionlist.appendChild(option);
         console.log(tutorial_opciok + " list item created");
     }
-    console.log("Divek letrehozasa");
-    divLetrehozas();
 }
 
-function divLetrehozas(){
-    let option;
-    let index = 0;
-
-    for(let i = 0; i < 1; i++){ //vissza irni tutorial opciok lengtre ||teszteles miatt atirva      
-        option = document.createElement("div");
-        option.setAttribute("class", tutorial_opciok[i]); //legorgeteshez a listabol
-        for(let j = 0; j < html.links.length; j++){          
-            let div = document.createElement("div");
-            div.setAttribute("id", html.names[index]);
-            let link = document.createElement("a");
-            link.setAttribute("href", html.links[index]);
-            link.setAttribute("target", "_blank");
-            div.appendChild(link);
-            let text = document.createTextNode(html.names[index]);
-            link.appendChild(text);
-            option.appendChild(div);
-            index++;
-        }
-        let main_div = document.getElementById("nyelvek");
-        main_div.appendChild(option);
-        index = 0;
+function divForLanguage(button){
+    let main_div;
+    let nyelvek_div = document.getElementById("nyelvek");
+    if(!first_call){
+        document.getElementById("nyelvek").removeChild(nyelvek_div.firstChild);
+    }else{
+        first_call = false;
     }
+
+    main_div = document.createElement("div");
+    main_div.setAttribute("id", tutorial_opciok[button.value]);
+
+    for(let i = 0; i < nyelvek[button.value].names.length; i++){
+        let div = document.createElement("div");
+        div.setAttribute("id", nyelvek[button.value].names[i]);
+        let link = document.createElement("a");
+        link.setAttribute("href", nyelvek[button.value].links[i]);
+        link.setAttribute("target", "_blank");
+        div.appendChild(link);
+        let text = document.createTextNode(nyelvek[button.value].names[i]);
+        link.appendChild(text);
+        main_div.appendChild(div);
+    }
+
+    console.log(main_div);
+   
+    nyelvek_div.appendChild(main_div);
 }

javascript/tutorial oldalak/style.css

@@ -6,7 +6,7 @@ body{
 
 li{
     float: left;
-    margin: 5%;
+    margin: 6%;
     padding: 1.3%;
     background-color: white;
     font-size: larger;
@@ -39,12 +39,20 @@ a:active {
   text-decoration: underline;
 }
 
-.html div a{
+#nyelvek div div{
+    float: left;
+    margin: 5%;
+    margin-left: 13%;
+    padding: 2%;
+}
+
+#nyelvek div div a {
     color: white;
     font-size: larger;
     font-weight: 600;
 }
 
+
 button{
     border: none;
     background-color: white;