-
Box 1
+
+
Posts
+
-
-
Box 2
-
-
-
Box 3
- Lorem ipsum
dolor sit
-
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
-
diff --git a/script-before.js b/script-before.js
deleted file mode 100644
index e69de29..0000000
diff --git a/script-done.js b/script-done.js
new file mode 100644
index 0000000..04e311b
--- /dev/null
+++ b/script-done.js
@@ -0,0 +1,20 @@
+var loadPosts = document.getElementById('btn-click-me');
+var box = document.getElementById('box');
+var uList = document.createElement('ul');
+
+loadPosts.addEventListener('click', function() {
+ var request = new XMLHttpRequest();
+ request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
+ request.send();
+ request.onreadystatechange = function handleRequest(){
+ if(request.readyState === 4 && request.status === 200) {
+ var data = JSON.parse(request.responseText);
+ data.forEach(function(singleData) {
+ var list = document.createElement('li');
+ list.textContent = singleData.title;
+ uList.appendChild(list)
+ })
+ box.insertAdjacentElement('beforeend', uList);
+ }
+ }
+});
diff --git a/script.js b/script.js
index e69de29..b55091c 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1 @@
+// Write your code here
diff --git a/style.css b/style.css
index 9cd1ca7..25a6a8c 100644
--- a/style.css
+++ b/style.css
@@ -9,6 +9,26 @@ body {
background-color: #e3e3e3;
}
+button {
+ background-color: #fff;
+ border: none;
+ text-transform: uppercase;
+ padding: 8px 15px;
+ cursor: pointer;
+ border-radius: 4px;
+ font-weight: 900;
+ margin-top: 10px;
+}
+
+input {
+ border: none;
+ display: block;
+ margin: 10px auto;
+ width: 100%;
+ padding: 8px 15px;
+ border-radius: 4px;
+}
+
.wrapper {
display: flex;
margin: 0 auto;
@@ -72,6 +92,16 @@ body {
background-color: #4CAF50;
}
+.images {
+ margin-top: 10px;
+}
+
+.images img {
+ display: block;
+ margin: 0 auto;
+ padding: 10px 0;
+}
+
.black-bg {
background-color: #000;
}