From 814fd51eaa34c8e1d748e9731c443a029452a135 Mon Sep 17 00:00:00 2001 From: Svanhildur12 <144949290+Svanhildur12@users.noreply.github.com> Date: Mon, 11 Mar 2024 12:40:39 +0000 Subject: [PATCH] javaScript MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit heimaverkefni í javaScript --- javascript/index.html | 17 +++++++++++++++++ javascript/input.css | 0 javascript/output.css | 0 javascript/package.json | 8 ++++++++ javascript/scripts.js | 16 ++++++++++++++++ javascript/tailwind.config.js | 8 ++++++++ 6 files changed, 49 insertions(+) create mode 100644 javascript/index.html create mode 100644 javascript/input.css create mode 100644 javascript/output.css create mode 100644 javascript/package.json create mode 100644 javascript/scripts.js create mode 100644 javascript/tailwind.config.js diff --git a/javascript/index.html b/javascript/index.html new file mode 100644 index 0000000..0d0b140 --- /dev/null +++ b/javascript/index.html @@ -0,0 +1,17 @@ + + + + + + + + +

Wizard List

+ + + + + + diff --git a/javascript/input.css b/javascript/input.css new file mode 100644 index 0000000..e69de29 diff --git a/javascript/output.css b/javascript/output.css new file mode 100644 index 0000000..e69de29 diff --git a/javascript/package.json b/javascript/package.json new file mode 100644 index 0000000..2cd625e --- /dev/null +++ b/javascript/package.json @@ -0,0 +1,8 @@ +{ + "scripts": { + "start": "npx tailwindcss -i ./input.css -o ./output.css --watch" + }, + "devDependencies": { + "tailwindcss": "^3.4.1" + } + } \ No newline at end of file diff --git a/javascript/scripts.js b/javascript/scripts.js new file mode 100644 index 0000000..673c054 --- /dev/null +++ b/javascript/scripts.js @@ -0,0 +1,16 @@ +document.addEventListener('DOMContentLoaded', function(){ + const list = document.getElementById('wizardList'); + +const harry = {name: 'Harry Potter', hair: 'black'}; +const hermoine = {name: 'Hermoine Granger', hair: 'brown'}; +const ron = {name: 'Ron Weasley', hair: 'red'}; + +const wizards = [harry,hermoine,ron]; + +wizards.forEach(wizard => { +const listItem = document.createElement('li'); +listItem.textContent = wizard.name; +listItem.style.color = wizard.hair; +list.appendChild(listItem); +}); +}); diff --git a/javascript/tailwind.config.js b/javascript/tailwind.config.js new file mode 100644 index 0000000..9dc06f5 --- /dev/null +++ b/javascript/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./*.{html,js}"], + theme: { + extend: {}, + }, + plugins: [], +}; \ No newline at end of file