From 7e9fd2883916352e7f6675d50ee40339ebb8e10f Mon Sep 17 00:00:00 2001
From: cappers86 <52895127+cappers86@users.noreply.github.com>
Date: Sat, 28 Sep 2019 16:55:41 +0100
Subject: [PATCH 1/2] testing git hub
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index cc52465d3..fb31cefc5 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
From 81e4bdaf2c9a180de91cc7dcd3f4373f94b4bfd8 Mon Sep 17 00:00:00 2001
From: cappers86 <52895127+cappers86@users.noreply.github.com>
Date: Wed, 30 Oct 2019 16:34:30 +0000
Subject: [PATCH 2/2] I only managed to do the first part
---
.vscode/settings.json | 3 ++
Article/Article.js | 64 ++++++++++++++++++++++++++++++++
LESS/index.less | 2 +-
README.md | 10 ++---
css/index.css | 85 +++++++++++++++++++++++++++++++++++++++++++
5 files changed, 158 insertions(+), 6 deletions(-)
create mode 100644 .vscode/settings.json
create mode 100644 css/index.css
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..efd2fac1b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 20408
+}
\ No newline at end of file
diff --git a/Article/Article.js b/Article/Article.js
index a135f538f..5b51c46de 100644
--- a/Article/Article.js
+++ b/Article/Article.js
@@ -112,3 +112,67 @@ const data = [
Step 5: Add a new article to the array. Make sure it is in the same format as the others. Refresh the page to see the new article.
*/
+
+//1
+
+
+
+function createArticle(title, date, firstParagraph, secondParagraph, thirdParagraph) {
+ const article = document.createElement('div');
+ const articleTitle = document.createElement('h2');
+ const articleDate = document.createElement('p');
+ const paragraph1 = document.createElement('p');
+ const paragraph2 = document.createElement('p');
+ const paragraph3 = document.createElement('p');
+ const button = document.createElement('span');
+
+
+
+ article.appendChild(articleTitle);
+ article.appendChild(articleDate);
+ article.appendChild(paragraph1);
+ article.appendChild(paragraph2);
+ article.appendChild(paragraph3);
+ article.appendChild(button);
+
+ articleTitle.textContent = title;
+ articleDate.textContent = date;
+ paragraph1.textcontent = firstParagraph;
+ paragraph2.textContent = secondParagraph;
+ paragraph3.textContent = thirdParagraph;
+ button.textContent = 'click here'
+
+ article.classList.add('article');
+ articleDate.classList.add('date');
+ button.classList.add('expandButton');
+
+ button.addEventListener('click', event => {
+ article.classList.toggle('article-open');
+
+
+});
+
+
+ return article;
+
+
+
+}
+
+
+
+
+
+console.log(createArticle);
+
+//-----Append Manual and Loop------
+const body = document.querySelector('body');
+console.log(body);
+
+
+// Append Loop
+ data.forEach((article => {
+ body.append(createArticle(article.title, article.date, article.firstParagraph, article.secondParagraph, article.thirdParagraph));
+ }))
+
+
diff --git a/LESS/index.less b/LESS/index.less
index d0e4ea4c8..2be7ec224 100644
--- a/LESS/index.less
+++ b/LESS/index.less
@@ -4,7 +4,7 @@
/* Below this line is where you will start your work */
/* It is important to note, you will not be writing any CSS in this file*/
@import '../Header/Header.less';
-
+@import '../Article/Article.less';
html, body {
margin: 0;
padding: 0;
diff --git a/README.md b/README.md
index 8b19f8daf..e0e3d91c0 100644
--- a/README.md
+++ b/README.md
@@ -16,11 +16,11 @@ In this project we are going to be building a news feed reader. The goal is to h
**Follow these steps to set up and work on your project:**
-* [ ] Create a forked copy of this project.
-* [ ] Add your team lead as collaborator on Github.
-* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-* [ ] Create a new branch: git checkout -b ``.
-* [ ] Implement the project on your newly created `` branch, committing changes regularly.
+* [x] Create a forked copy of this project.
+* [x] Add your team lead as collaborator on Github.
+* [x] Clone your OWN version of the repository (Not Lambda's by mistake!).
+* [x] Create a new branch: git checkout -b ``.
+* [x] Implement the project on your newly created `` branch, committing changes regularly.
* [ ] Push commits: git push origin ``.
**Follow these steps for completing your project.**
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 000000000..581c05508
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,85 @@
+/* This line is importing the font 'Roboto'. DO NOT change line 2*/
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
+}
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
+}
+/* Below this line is where you will start your work */
+/* It is important to note, you will not be writing any CSS in this file*/
+.header {
+ width: 100%;
+ height: 75px;
+ background-color: #388E3C;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ z-index: 2;
+}
+.header h1 {
+ margin: 0;
+ font-size: 48px;
+}
+.articles {
+ margin-top: 95px;
+}
+.article {
+ margin: 20px 10%;
+ padding: 0 20px 25px;
+ border: 1px solid lightgrey;
+ border-radius: 10px;
+ background-color: white;
+ position: relative;
+ height: 50px;
+ overflow: hidden;
+ box-shadow: 2px 2px 2px lightgrey;
+}
+.article h2 {
+ font-size: 28px;
+ padding: 0;
+ margin: 15px 0 0;
+}
+.article .date {
+ margin: 0;
+ font-size: 14px;
+}
+.article .close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+.article .expandButton {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ font-size: 12px;
+ color: grey;
+ cursor: pointer;
+ transform: translate(-50%);
+ background-color: white;
+}
+.article-open {
+ height: 400px;
+}
+html,
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto';
+ background-color: #fffef7;
+}
-