diff --git a/index.html b/index.html
new file mode 100644
index 0000000..493c5e9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..d71be4e
--- /dev/null
+++ b/index.js
@@ -0,0 +1,74 @@
+function displayData(articles) {
+ const stories = document.querySelector("#article");
+ articles.map(article => {
+ let div = document.createElement("div");
+ stories.appendChild(div);
+
+ let title = document.createElement("h3");
+ title.textContent = article.title;
+ div.appendChild(title);
+ image = document.createElement("img");
+ image.setAttribute(
+ "src",
+ article.urlToImage || "http://placekitten.com/200/300"
+ );
+ image.setAttribute("alt", article.title || "Nothing to see here");
+ image.setAttribute("height", "100px");
+ image.setAttribute("width", "150px");
+ div.appendChild(image);
+
+ let description = document.createElement("h4");
+ description.textContent = article.description;
+ div.appendChild(description);
+
+ let source = document.createElement("h5");
+ source.textContent = article.source.name;
+ div.appendChild(source);
+
+ let datePublished = document.createElement("div");
+ datePublished.textContent = article.publishedAt;
+ div.appendChild(datePublished);
+
+ let button = document.createElement("a");
+ button.textContent = "Original Source";
+ button.setAttribute("href", article.url);
+ div.appendChild(button);
+
+ // function articleSearch() {
+ // let input = document.getElementById("article.description").placeholder {
+
+ // }
+
+ // filter = input.value.toUpperCase(result);
+ // }
+
+ console.log(
+ "title :",
+ article.title,
+ "image ",
+ article.urlToImage,
+ "desc :",
+ article.description,
+ "source",
+ article.source.name,
+ "date",
+ article.publishedAt,
+ "link:",
+ article.url
+ );
+ });
+}
+
+fetch(
+ "https://newsapi.org/v2/top-headlines?country=gb&apiKey=b7b5bf6dda374f2086f391c826337994"
+)
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(body) {
+ console.log(body.articles);
+ displayData(body.articles);
+ })
+ .catch(function(error) {
+ console.log(error);
+ });
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..30fed41
--- /dev/null
+++ b/style.css
@@ -0,0 +1,63 @@
+.site {
+ background-color: whitesmoke;
+ padding: 5px;
+ flex-grow: 4;
+}
+
+#header {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+ font-size: 12px;
+ font-weight: 300;
+ padding: 1px;
+ align-content: space-between;
+ background-color: lightgrey;
+}
+
+#topnav {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ text-align: center;
+ justify-content: space-evenly;
+ padding: 14px 16px;
+ flex-grow: inherit;
+ font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+ "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+ font-size: 12px;
+ background: lavender;
+ color: black;
+}
+
+.topnav a:hover {
+ color: red;
+}
+.topnav input[type="text"] {
+ float: right;
+ padding: 6px;
+ border: none;
+ margin-top: 8px;
+ margin-right: 16px;
+ font-size: 17px;
+}
+
+.wrapper {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+ "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+ font-size: 12px;
+}
+
+.wrapper > div {
+ background: silver;
+ padding: 0.5em;
+}
+
+@media (max-width: 1024px) {
+ .wrapper {
+ grid-template-columns: 100;
+ }
+}