From 36cde5283f19947b77c7dd320b0c8f7c8a085d89 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 23 Aug 2024 13:23:25 +0200 Subject: [PATCH] 0823 add initial js and css --- mycss.css | 14 ++++++++++++++ myhtml.html | 2 ++ myjs.js | 21 +++++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 mycss.css create mode 100644 myjs.js diff --git a/mycss.css b/mycss.css new file mode 100644 index 0000000..e1ded88 --- /dev/null +++ b/mycss.css @@ -0,0 +1,14 @@ +html { + background-color: green; + font-size: 20px; +} + +ul { + background: red; + padding: 10px; + border: 1px solid black; +} + +li { + margin-left: 20px; +} diff --git a/myhtml.html b/myhtml.html index 284b1e4..f740afa 100644 --- a/myhtml.html +++ b/myhtml.html @@ -1,6 +1,8 @@ + + Dan's Homepage >3< diff --git a/myjs.js b/myjs.js new file mode 100644 index 0000000..767d384 --- /dev/null +++ b/myjs.js @@ -0,0 +1,21 @@ +const list = document.createElement('ul'); +const info = document.createElement('p'); +const html = document.querySelector('html'); + +info.textContent = 'Below is a dynamic list. Click anywhere on the page to add a new list item. Click an existing list item to change its text to something else.'; + +document.body.appendChild(info); +document.body.appendChild(list); + +html.onclick = function() { + const listItem = document.createElement('li'); + const listContent = prompt('What content do you want the list item to have?'); + listItem.textContent = listContent; + list.appendChild(listItem); + + listItem.onclick = function(e) { + e.stopPropagation(); + const listContent = prompt('Enter new content for your list item'); + this.textContent = listContent; + } +}