Week 10 - Wednesday, June 24th
Last updated
Was this helpful?
Last updated
Was this helpful?
Reverse an array using a new array. Start from the end and push each element into a new array.
Reverse "in-place". Move inward from both ends and swap the start/end elements until they meet in the middle.
There's a great visual in the article below showing the swapping process.
Install VS Code Extension
I've created two new labs that are small games. They are useful to review the code and see if you can understand what is going on. I have also created a few bugs in the code that can be fixed if you have time.
Make sure all of your work on the nyt-books branch is committed and then create a PR that links to the issue you were assigned. The issue should automatically move to the Done column.
You need to get the changes I pushed to the main branch to get a few fixes I added for this assignment.
if you already started work in a new branch, add and commit the changes in your branch
git add .
git commit -m"[message]"
switch to the main branch
git checkout main
pull to update the main branch
git pull
switch to your other branch
git checkout [branch-name]
merge the main branch updates into your branch
git merge main
We're going to do another lab similar to the last one. Again, you'll try to start from scratch and use some of the previous labs as models for how to proceed.
We're also going to start using GitKraken for managing the GitHub issues.
It's important to keep your branches organized, and remove any that you are done working on. Before you start working on this assignment, make sure that you have finished the last assignment and committed it to the GitHub repo and merged it back into the main branch through a Pull Request (PR).
Before starting a new branch, remember to go to your main branch and do a pull to make sure you have all of the latest sources.
From within GitKraken, move the Issue for today's assignment to the In-Progress column to indicate that you have started working on it. Just drag it from the Issues column to the In-progress column.
You can either create the branch from the command line, or use the VS Code Extension that allows you to start a branch from an Issue assigned to you. If you create it on your own, then name it the title of the Issue. For example, 'ac-article-summary-lab'.
Create a new folder with your initials in the labs/article-summary folder in the news-site-collab repo. You will again create your own files for the html, css, and script.
In your html file, you'll need to include the three data files (articles.js, authors.js, and topics.js) in the labs/article-summary/data folder.
You can use bootstrap, or create your own styles for what you display for the article. If you use bootstrap, then it will look like a card vs what I displayed in the screenshots below. Either is fine.
To use bootstrap, copy the link elements from you last homework where you included the bootstrap stylesheets in your index.html and include them in your current index.html file.
When the page first comes up, there should be a series of buttons: one for each topic that is contained within the static data file data/topics.js. They should be initialize in a similar way to how the buttons at the top of the zoo lab were.
There is one additional requirement when initializing the buttons. You should set the background color of the button to the topic color (specified in the topic data element).
In the event handler you set up for the button click, you need to build up the HTML dynamically to display a summary of an article (which article is explained below).
Your going to need to navigate around the three different data files to build the HTML. Your event handler will be given the topic data element when the button is clicked.
From the topic element, you can get the topic.showcaseArticleId, and use that id to look up the article from the articles array in data/articles.js file using the find method.
From the article element, you can get the article.authorId, and use that id to look up the author from the authors array in the data/authors.js file. using the find method.
Try to change the color of the text for the article summary so that it matches the color of the topic.
Create a PR to merge the changes into the main branch. When you create the PR, link the Issue that you are working on to the PR. That way, it will be automatically moved to the Done column in the GitKraken project board.
I have checked in my solution for this assignment. It in labs/article-summary/ac. In my solution, I am using the web API from the back-end. Study my code, and then change your code to call your back-end instead of loading the data from the static data files.
You will need to run the following:
cd back-end
node seeder - reseed the database (i made some changes, so you need to do this even if you already ran this recently)
npm run dev - start the web server