tutorial oldalak feladat

2022-04-22 13:39:47 +02:00
parent f4ae53338c
commit ef3c9b7a4b
7 changed files with 196 additions and 0 deletions
--- a/javascript/tutorial
+++ b/javascript/tutorial
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
+        <link rel="stylesheet" href="style.css">
+        <title>Tutorial oldalak</title>
+    </head>
+    <body onload="navOpciokLetrehozas()">
+        <header>
+            <h1 align="middle">Mit szeretnél tanulni?</h1>
+        </header>
+        <nav id="nav">
+            <!--opciok letrehozasa js-el egy tombbol-->
+            <ul id="optionlist"></ul>
+        </nav><br><br><br><br><br><br><br><br><br>
+        <div id="nyelvek"></div>
+        <script src="script.js"></script>
+    </body>
+</html>
--- a/javascript/tutorial
+++ b/javascript/tutorial
@@ -0,0 +1,56 @@
+"use sctrict"
+//adatok
+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"]
+};
+
+function navOpciokLetrehozas(){
+    let option;
+
+    for(let i = 0; i < tutorial_opciok.length; i++){
+        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 
+        */
+        option.appendChild(button);
+        let text = document.createTextNode(tutorial_opciok[i]);
+        button.appendChild(text);
+        let optionlist = document.getElementById("optionlist");
+        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;
+    }
+}
--- a/javascript/tutorial
+++ b/javascript/tutorial
@@ -0,0 +1,51 @@
+body{
+    margin: 5%;
+    background-color: rgb(53, 53, 61);
+    color: aliceblue;
+}
+
+li{
+    float: left;
+    margin: 5%;
+    padding: 1.3%;
+    background-color: white;
+    font-size: larger;
+    border: 1px solid black;
+    border-radius: 10%;
+}
+li a{
+    color: rgb(53, 53, 61);
+}
+
+ul{
+    list-style-type: none;
+    margin-left: 3%;
+    margin-right: auto;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:active {
+  text-decoration: underline;
+}
+
+.html div a{
+    color: white;
+    font-size: larger;
+    font-weight: 600;
+}
+
+button{
+    border: none;
+    background-color: white;
+}