anyad

2023-04-24 09:58:28 +02:00
3 changed files with 102 additions and 0 deletions
--- a/tothadam_JavascriptNotes/index.html
+++ b/tothadam_JavascriptNotes/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jegyzettömb</title>
+    <script src="script.js" defer></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Jegyzettömb</h1>
+    <div id="notes"></div>
+    <div id="addnotes">
+        <p>
+            <label for="inphead">Add meg a címet: </label><input type="text" id="inphead" name="inphead"><br>
+            <label for="inptext">Add meg a szöveget: </label><br><textarea name="inptext" id="inptext" rows="5" cols="50"></textarea><br>
+            <label for="notecolor">Jegyzet színe: </label><br><input type="color" id="notecolor" name="notecolor" value="#FF00FF"><br>
+            <button id="addbtn">Jegyzet hozzáadása</button>
+        </p>
+    </div>
+    <div id="msg">
+
+    </div>
+</body>
+</html>
--- a/tothadam_JavascriptNotes/script.js
+++ b/tothadam_JavascriptNotes/script.js
@ -0,0 +1,40 @@
+const button = document.getElementById("addbtn")
+const notes = document.getElementById("notes")
+const msg = document.getElementById("msg")
+let idnum = 1
+
+
+button.addEventListener("click", ()=>{
+    let inphead = document.getElementById("inphead")
+    let inptext = document.getElementById("inptext")
+    console.log(inphead.value);
+    if (inphead.value != "" && inptext.value != ""){
+        let newnote = document.createElement("div")
+        newnote.innerHTML = `<h3>${inphead.value}</h3>`
+        newnote.innerHTML += `<p>${inptext.value}<p>`
+        newnote.classList.add("notescss")
+        newnote.setAttribute("id", `note-${idnum++}`)
+        newnote.setAttribute("title", "Kattintásra törölheted a jegyzetedet...")
+        newnote.style.background = document.getElementById("notecolor").value
+        notes.appendChild(newnote)
+        msg.innerHTML = ""
+        msg.innerHTML = "<i>Üzenet hozzáadva!</i>"
+        inphead.value = ""
+        inptext.value = ""
+    
+        newnote.onclick = function(){
+            this.parentElement.removeChild(this)
+    
+        }
+
+       notes.appendChild(newnote)
+
+       msg.innerHTML = '<span class="msgok">Üzenet hozzáadva!</span'
+       inphead.value = ""
+       inptext.value = ""
+
+    } else{
+        msg.innerHTML = '<span class="msgerr">Töltsd ki a hiányzó mezőket!</span'
+    }
+
+})
--- a/tothadam_JavascriptNotes/style.css
+++ b/tothadam_JavascriptNotes/style.css
@ -0,0 +1,36 @@
+body{
+    background: linear-gradient(to right, hsl(130, 50%, 40%), hsl(150, 40%, 40%));
+}
+
+.notescss{
+    background-color: aqua;
+    width: 250px;
+    height: auto;
+    margin: 10px;
+    padding: 5px;
+}
+
+.notescss h3{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    margin-left: 5x;
+    border-bottom: 1px solid black;
+    width: 80%;
+}
+
+.notescss p{
+    margin-top: 5px;
+    margin-left: 10px;
+}
+
+.msgerr{
+    color: white;
+    background-color: red;
+    font-style: italic;
+}
+
+.msgok{
+    color: white;
+    background-color: green;
+    font-style: italic;
+}