updated with introduction on button click

konoto1 · Jul 9, 2024 · 33b39c3 · 33b39c3
1 parent fa0331f
commit 33b39c3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/css/main.css b/css/main.css
@@ -79,4 +79,25 @@ h1 {
     height: 200px;
     overflow: auto;
     font-size: 1.2rem;
+}
+
+.coffee {
+    padding: 0.5rem 1rem;
+    font-size: 1.2rem;
+}
+
+h2 {
+    margin: 20px 0;
+}
+
+.introduction > button {
+    padding: 0.5rem 1rem;
+    font-size: 1.2rem;
+    margin: 1rem 0.5rem;
+}
+
+.introduction > div {
+    width: 20rem;
+    height: 10rem;
+    overflow: auto;
 }
diff --git a/index.html b/index.html
@@ -11,7 +11,15 @@
 <body>
     <nav></nav>
     <h1>Good Morning!</h1>
-    <button>Want some coffee first?!</button>
+    <button class="coffee">Want some coffee first?!</button>
+    <h2>Introduction</h2>
+    <div class="introduction">
+        <button>Jonas</button>
+        <button>Petras</button>
+        <button>Maryte</button>
+        <button>Ona</button>
+        <div id="paragraph"></div>
+    </div>
     <script type="module" src="./js/home.js"></script>
     <script type="module" src="./js/index.js"></script>
 </body>

diff --git a/js/home.js b/js/home.js
@@ -7,3 +7,20 @@ function updateText() {
 
 buttonDOM.addEventListener('click', updateText);
 
+const introductionDOM = document.getElementsByClassName('introduction')[0];
+const btnDOM1 = introductionDOM.getElementsByTagName('button')[0];
+const btnDOM2 = introductionDOM.getElementsByTagName('button')[1];
+const btnDOM3 = introductionDOM.getElementsByTagName('button')[2];
+const btnDOM4 = introductionDOM.getElementsByTagName('button')[3];
+const paragraphDOM = document.getElementById('paragraph');
+
+
+
+function introduction(n = '_____') {
+    paragraphDOM.insertAdjacentHTML('afterBegin', `<p>Hello, my name is ${n}</p>`);
+}
+
+btnDOM1.addEventListener('click', () => introduction(btnDOM1.innerText));
+btnDOM2.addEventListener('click', () => introduction(btnDOM2.innerText));
+btnDOM3.addEventListener('click', () => introduction(btnDOM3.innerText));
+btnDOM4.addEventListener('click', () => introduction(btnDOM4.innerText));