diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f92413e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "workbench.colorCustomizations": { + "activityBar.background": "#283109", + "titleBar.activeBackground": "#39450D", + "titleBar.activeForeground": "#F8FCEC" + } +} \ No newline at end of file diff --git a/README.md b/README.md index 9ff48dd..6cfa87a 100644 --- a/README.md +++ b/README.md @@ -30,28 +30,39 @@ Edit this document to include your answers after each question. Make sure to lea 1. What is the DOM? +Document Object Model, it's what gets interpreted by the web browser using the HTML, CSS etc as a blueprint in the browser. + 2. What is an event? +A button click, mouse click, scroll, etc. Some type of input + 3. What is an event listener? +The trigger that waits for 'x' event to happen and then fires off a function when +said event happens on the event listener's target. + 4. Why would we convert a NodeList into an Array? +So we can use the other array properties on it like .map() + 5. What is a component? +A self-contained piece of functioning code ready to be used, easily copy and pasted and in this way, scaleable ayy eff + ### Git Set up -* [ ] Fork the project into your GitHub user account -* [ ] Clone the forked project into a directory on your machine -* [ ] Create a pull request before you start working on the project requirements. You will continuously push your updates throughout the project. -* [ ] You are now ready to build this project with your preferred IDE +* [x] Fork the project into your GitHub user account +* [x] Clone the forked project into a directory on your machine +* [x] Create a pull request before you start working on the project requirements. You will continuously push your updates throughout the project. +* [x] You are now ready to build this project with your preferred IDE ## Minimum Viable Product Your finished project must include all of the following requirements: -* [ ] Look through the HTML code and familiarize yourself with the different sections. Some of them already exist, but some need to be filled it. DO NOT add any code to the HTML file itself. +* [x] Look through the HTML code and familiarize yourself with the different sections. Some of them already exist, but some need to be filled it. DO NOT add any code to the HTML file itself. -* [ ] Following the instructions in the `Header/index.js` file, create the Header component. +* [x] Following the instructions in the `Header/index.js` file, create the Header component. * [ ] Following the instructions in the `Tabs/index.js` file, create individual Tabs components. diff --git a/components/Cards/index.js b/components/Cards/index.js index 1482e60..8e4cbb4 100644 --- a/components/Cards/index.js +++ b/components/Cards/index.js @@ -17,3 +17,92 @@ // // // Create a card for each of the articles and add the card to the DOM. + +//https://lambda-times-backend.herokuapp.com/articles + +const promiseCards = axios.get('https://lambda-times-backend.herokuapp.com/articles'); + +promiseCards.then(data => { + console.log('articles for the cards', data.data.articles.technology); + const bootstrap = data.data.articles.bootstrap; + const javascript = data.data.articles.javascript; + const jquery = data.data.articles.jquery; + const node = data.data.articles.node; + const technology = data.data.articles.technology; + + bootstrap.forEach(article => { + const element = Cards(article.headline, + article.authorPhoto, article.authorName); + cards.appendChild(element); + }) + + javascript.forEach(article => { + const element = Cards(article.headline, + article.authorPhoto, article.authorName); + cards.appendChild(element); + }) + + jquery.forEach(article => { + const element = Cards(article.headline, + article.authorPhoto, article.authorName); + cards.appendChild(element); + }) + + node.forEach(article => { + const element = Cards(article.headline, + article.authorPhoto, article.authorName); + cards.appendChild(element); + }) + + technology.forEach(article => { + const element = Cards(article.headline, + article.authorPhoto, article.authorName); + cards.appendChild(element); + }) + +}); + +promiseCards.catch(data => { + console.log('YOU BROKE MY HEART', data); +}); + +const cards = document.querySelector('.cards-container'); + +function Cards(headline, imgSrc, author){ + + //elements + const cardDOM = document.createElement('div'); + const headlineDOM = document.createElement('div'); + const authorDOM = document.createElement('div'); + const imgContainDOM = document.createElement('div'); + const imgDOM = document.createElement('img'); + const authorSpanDOM = document.createElement('span'); + + //content + headlineDOM.textContent = headline; + imgDOM.src = imgSrc; + authorDOM.textContent = author; + + + //structure + cardDOM.appendChild(headlineDOM); + cardDOM.appendChild(authorDOM); + + authorDOM.appendChild(imgContainDOM); + + imgContainDOM.appendChild(imgDOM); + + authorDOM.appendChild(authorSpanDOM); + + //styling + cardDOM.classList.add('card'); + headlineDOM.classList.add('headline'); + authorDOM.classList.add('author'); + imgContainDOM.classList.add('img-container'); + + + + return cardDOM; +} + +//cards.appendChild(Cards(headline, imgSrc, author)); \ No newline at end of file diff --git a/components/Header/index.js b/components/Header/index.js index c41ba8c..546d016 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -7,6 +7,44 @@ //

Lambda Times

// 98° // -// And add it to the DOM in the .headerContainer component +// And add it to the DOM in the .header-Container component -function Header() {} +const headData = [ + { + date: 'MARCH 28, 2019', + title: 'Lambda Times', + temp: '98°', + } +]; + +const header = document.querySelector('.header-container'); + +function Header(date, title, temp) { + + //defining DOM elements + let headerDOM = document.createElement('div'); + let dateDOM = document.createElement('span'); + let h1DOM = document.createElement('h1'); + let tempDOM = document.createElement('span'); + + //recreating html element structure + headerDOM.appendChild(dateDOM); + headerDOM.appendChild(h1DOM); + headerDOM.appendChild(tempDOM); + + //adding styling + headerDOM.classList.add('header'); + dateDOM.classList.add('date'); + tempDOM.classList.add('temp'); + + //text content + dateDOM.textContent = date; + h1DOM.textContent = title; + tempDOM.textContent = temp; + + return headerDOM; +}; + + + +header.appendChild(Header(headData[0].date, headData[0].title, headData[0].temp)); \ No newline at end of file diff --git a/components/Tabs/index.js b/components/Tabs/index.js index 5215a3d..3c89912 100644 --- a/components/Tabs/index.js +++ b/components/Tabs/index.js @@ -7,3 +7,49 @@ // // The tab component should look like this: //
topic here
+ +// https://lambda-times-backend.herokuapp.com/topics + + +// promise +const promiseTabs = axios.get('https:lambda-times-backend.herokuapp.com/topics') + +//DOT then to console.log the promise, to make sure I am getting the data +promiseTabs.then(data => { + console.log('array of topics', data.data.topics) + const topics = data.data.topics; + topics.forEach(topic => { + const element = Tabs(topic); + tabTopics.appendChild(element); + }) +}); + +//DOT catch in case there is an error +promiseTabs.catch(error => { + console.log('YOU BROKE MY HEART', error) +}); + +function Tabs(get) { + const tabDOM = document.createElement('div'); + tabDOM.classList.add('topics', 'tab'); + tabDOM.textContent = get; + + + tabDOM.addEventListener('click', () => { + const tempNodeList = document.querySelectorAll('.tab') + tempNodeList.forEach(tab => tab.classList.remove('active-tab')); + + + tabDOM.classList.add('active-tab'); + }); + + return tabDOM; +} + + +const tabTopics = document.querySelector('.topics'); + + +// manual test +// tabTopics.appendChild(Tabs('abcdefg')); +