Command Line Treasure Hunt

Travel around the game to follow the clues to the answer.

Objectives

• Navigate a file system using the command line
• Create, list, and move files and folders

Rules

• You can only use the command line. Don’t use the Finder or VSCode files or anything like that.
• Type node clue.js every time you land in a new folder.
• When you’ve got the answer, keep the secret!
• Type node clue.js now.

Codewars-Integration

Let’s play with grabbing some data from an API and displaying it on a website. We will be using the the Fetch API to make requests to the Codewars API and the Web Components API to display the data we get back. Let’s go!

Learning Objectives

• Explain how components are used in web development
• Adapt an existing web component to show your own data
• Extend this web component to present more data from the Codewars API
• Create a new web component that presents data from the Codewars API

Requirements, Steps, and Acceptance Criteria

1. Open the index.html file in your browser and you should see a basic badge with the CodeYourFuture Codewars rank. The badge is a web component that is defined in the codewars-badge.js file.

2. Find the js module in the index.html file that links codewars-badge.js. This module defines a new HTML element called <codewars-badge>, which you can now use just like any other HTML element. (This is basically how all HTML elements are defined, it’s just that the browser defines the default ones for us.)

3. Open the codewars-badge.js file. The badge is defined as a class that extends the HTMLElement class. The connectedCallback method is called when the element is added to the DOM. In this case it runs when the page loads. This callback is where we (a) make the request to the Codewars API and then (b) render the data we get back.

4. Change the username variable in the codewars-badge.js file to your own Codewars username. Save the file and refresh the page to see your own badge.

5. Look at this API directly in your browser. It’s just a URL - you can look at it. (Install a JSON viewer extension for your browser if you don’t have one already. This will make it easier to read the data.)

6. Now try adding some more data to the badge component. There’s lots of other possible data we could display in the badge. Read the Codewars API docs to help you.

7. Now try creating a new web component that displays some data from a Codewars API. There are several documented Codewars APIs you can play with. Use the codewars-badge.js file as a template for how to define a web component. You can use the index.html file to test your new component.

Remember: keep it simple!

You don’t need to make a full web app. Just make a web component that displays some data from the Codewars API. Explore and get creative. If your component gets complicated, break it down into smaller components and compose them on the page, just as you would do with any other HTML elements.

Acceptance Criteria

• I have adapted an existing web component to show my own data
• I have extended this web component to present more data from the Codewars API
• I have created a new web component that presents data from the Codewars API in my own way
• I have tested my page with Lighthouse and my Accessibility score is 100
• I have opened a pull request with my changes to this repo
• I have explained how components are used in web development, in my own words, in my pull request message

Resources

Code Your Future JS Core 3 Project

Installation

Clone this repo using the command

git clone https://github.com/CodeYourFuture/cyf-election.git

Introduction

After a recent referendum, London has gained independence from the rest of the UK.
A snap election will be held in a month to decide who will be the leader of the new country.
You have been asked to implement an electronic voting system in javascript which allows the
government to easily register voters into the system, filter out invalid votes and calculate who
the winning candidate is.

The three files you will be working on during this project are the following:

• election.js - Contains all of the functions required to carry out the election process. From part 2
  onwards this file will be modularised into classes.
• index.html - Displays the election results. From part 2 onwards this file will also take user input.
• voters.json - The “real” voter data. This file will not appear until the election occurs at part 3.

In order to make the project more manageable, it has been broken down into three parts. They are outlined below.

• Part 1: write the functions required to carry out the election process, and allow the results
  with a small amount of sample data to be displayed on a HTML page.
• Part 2: re-organise the functions into three classes: Voter, Candidate and Election, and improve
  the voter validation process. Allow new voters to be inputted via a HTML page.
• Part 3 (election time): run the election on a large population stored as a JSON file.

Voter Data Format

Have a look at the sample voter data provided in
election.js. You will notice that the voters are stored as an array of objects,
and that their voting card is an array of integers. Each integer in the votingCard array represents a
candidate id where each ID has double the weight of the ID on its right.

So for example, if my votingCard array is [1,3,2] I cast 1 vote for candidate 1, I cast 0.5 votes for
candidate 3 and 0.025 votes for candidate 2.

Candidate Data Format

Now look at the sample candidate data. Like the voter data, each candidate is stored as an object
but with some different properties. You should also notice that unlike the voter data which is stored as
an array of objects, the candidate data is stored as an object containing objects. Each object
key represents the ID of the candidate. For example the candidate Tamara Faiza has candidate ID 1.

The numVotes property in each candidate object represents the number of votes that candidate received in the election.
When a new instance of a candidate is created, their numVotes property should always be 0.

Part 1

Exercise 1

Candidates should also be able to vote in the election, however right now the format of candidates isn’t such
that we can just concatenate it onto the votingPopulation array.

Write a function candidatesObjToArray which takes
the candidates object as input, and returns an array of candidates which can be joined onto votingPopulation.

Hint: You might find the map function useful.

Exercise 2

Before we worry about how to calculate the election results, we need to introduce some
definition of an invalid voting card. Right now we regard a voting card as invalid if it
contains more than two votes, or contains multiple votes for the same candidate.

Write a function filterInvalidVoters which
removes any voters who have voted for more than 2 people, or have voted for the same person twice.
This function should input the allVoters array, and return an array containing only valid voters.

Exercise 3

Right now all candidates have numVotes set to 0. Write a function runElection which takes the votingPopulation and
candidates as arguments. The function should change the numVotes property of each candidate based on the voting cards
of the voters, and return a candidates object with each candidate having an updated numVotes value.

Exercise 4

Write a function getWinner which takes the updated candidates object as input, and returns the candidate with the most votes if there is no draw. If there
is a draw, the function should return null.

Exercise 5

Write a function printWinnerMessage whose input is the winner previously calculated by getWinner. This function should print “The election was a draw” if a draw occurred,
otherwise it should print a message including the winner’s name and how many votes he/she received.

Exercise 6

You have permission from the government to change people’s voting cards
because the real election hasn’t occurred yet.

If the previous 5 exercises were completed correctly, you should see a message saying that Tamara Faiza has won the election with 3.5 votes. Change
Nour al-Din’s voting card from [4,1] to [4,3] and you should notice that a draw has occurred.

Part 2

This part builds upon the functions you designed in the previous part. You will change your election system to use classes instead of being a loose
set of functions and objects, however the functionality of the voting system should be the same.

The javascript code for this part should be written in election-part2.js.

Exercise 1

Write a class Voter which can be used to create a new voter object. As before, a voter object should have variables for name, age and votingCard.
After creating the class, use the new keyword to initialise all of the voters in the votingPopulation array. For example, Jane Finnegan should be
initialised as new Voter('Jane Finnegan', 19, [1,3]).

Exercise 2

Write a class Candidate which extends voter. Since candidates are voters, the candidate object should also have variables for name, age and votingCard.
However a candidate has some extended properties: variables storing the party he/she belongs to and the number of votes received.

After creating the class, use the new keyword to initialise all of the candidates in the candidates object. For example, Tamara Faiza should be
initialised as new Candidate('Tamara Faiza', 46, 'Pizza Party', [1,1]).

Hint: Recall the extends keyword and super function from week 11.

Exercise 3

Write a class Election which models the election. An election is performed by a group of voters and a group of candidates, so the Election class
should input and store an array of valid voters and an array of candidates, with the people in each array being the same as in part 1. The class should also
have a winner variable used to store the winner.

The Election class should also contain three functions: runElection(), getWinner() and printWinnerMessage(). The runElection() function should act the same way as in part 1,
this time altering the voting cards of the candidates class variable. The function getWinner() should also be as in part 1, this time setting the winner
class variable after the winner is calculated. printWinnerMessage() should print a message as before including who won, and how many votes he/she received.

An election should be initialised as let election = new Election(validVoters, candidates);

Exercise 4

Design and write a user interface in HTML that allows users to visit index.html and view the list of voters and candidates. Users should be able to
press a “Run Election” button, which runs the election and prints the winner message on the page.

Stretch goals

In the index.html page, include an input system that allows users to add and remove voters and candidates.

Part 3

The day of the election has come, but the turnout was very low. A json object containing 200 voters and 10 candidates has been provided to you
through the endpoint at http://www.mocky.io/v2/5a55224b2d000088425b1ed8

This part of your assignment involves linking this data up with the work you have already done.

Exercise 1

Look at the json object provided at the beginning of part 3, and make sure you understand the structure of the data.

There are two arrays in this object, one called "candidates" and one called "voters". These arrays contain objects representing candidates
and voters similar to those that you encountered in part 1.

Note in particular that "candidates" is an array of objects, not an object of objects like in your implementation. Each candidate object in this array
has an attribute id, which corresponds to the object keys in the candidates object used in parts 1 and 2.

Exercise 2

Write a function fetchElectionData which fetches the json data provided to you. You should print the data to make sure that your fetch
function works.

Exercise 3

Put your fetchElectionData function in election-part2.js. After the data has been fetched, change your votingPopulation array to be an
array of Voter objects and your candidates object to be composed of Candidate objects. This involves using the new Voter and new Candidate
declarations just like part 2, but this time there should be 200 voters and 10 candidates.

Note again that candidates is given as an array, but your code works with candidates as an object. You will need to make the appropriate conversion here.

Exercise 4

Run your code with the new data you should find the the winner is Eli Wang, with 26.5 votes.

First Timers: Open Source

Let’s go on an adventure. Let’s find some Open Source projects to contribute to.

Learning Objectives

• Define Open Source
• Fork two Open Source projects
• Contribute to an Open Source project

Requirements

Acceptance Criteria

• I have forked this repository
• I have created a branch called add-yournamehere where yournamehere is your name
• I have added my name to the list of contributors
• I have committed my changes
• I have pushed my changes to my fork
• I have opened a Pull Request from my branch on my fork to this repository’s main branch
• I have met the requirements of the project, as defined by the maintainer

Resources

• What is Open Source?
• How to Contribute to Open Source, a Beginners Guide
• First Timers Only
• First Contributions
• How to Contribute to React
• Contributing to Open Source

Github Activity Project

Let’s play with grabbing some data from an API and displaying it on a website. We will be using the the Fetch API to make requests to the Github Search API and the Web Components API to display the data we get back. Let’s go!

Learning Objectives

• Explain how components are used in web development
• Adapt an existing web component to show your own data
• Extend this web component to present more data from the Github Search API
• Create a new web component that presents data from the Github Search API

Requirements, Steps, and Acceptance Criteria

1. Open the index.html file in your browser and you should see a grid of badges showing pull requests to the Syllabus repo. This grid is a web component that is defined in the pull-badges.js file. If you’ve already done the Codewars API project, this will look very familiar.

2. Find the js module in the index.html file that links pull-badges.js. This module defines a new HTML element called <pull-badges>, which you can now use just like any other HTML element. Notice how we can select this and style it with CSS like any other HTML element.

3. Open the pull-badges.js file. The list of badges is defined as a class that extends the HTMLElement class. The connectedCallback method is called when the page loads. This callback is where we (a) make the request to the Github Search API and then (b) render the data we get back.

4. Change the repo variable in the pull-badges.js file to a different repo on the CodeYourFuture org. What about 1000-Paper-Cranes ? Or what about this repo?

5. Look at the API directly in your browser. It’s just a URL - you can look at it. (Install a JSON viewer extension for your browser if you don’t have one already. This will make it easier to read the data.)

6. Now try adding some more data to the badges. There are lots of other possible data we could display in the badge. Look through the Github Search API docs to help you. Maybe you will decide to break this component down into a badge component and a list component.

7. Now try creating a new web component that displays some data from a Github API. There are absolutely loads of Github APIs you can play with. (Some require authentication but many are public.) Use the pull-badges.js file as a template for how to define a web component. You can use the index.html file to test your new component. (You could use this component in your portfolio website.)

Remember: keep it simple!

You don’t need to make a full web app. Just make a web component that displays some data from a GitHub API. Explore and get creative. If your component gets complicated, break it down into smaller components and compose them on the page, just as you would do with any other HTML elements.

Acceptance Criteria

• I have adapted an existing web component to show my own data
• I have extended this web component to present more data from the Github Search API
• I have created a new web component that presents data from the Github Search API in my own way
• I have tested my page with Lighthouse and my Accessibility score is 100
• I have opened a pull request with my changes to this repo
• I have explained how components are used in web development, in my own words, in my pull request message

Resources

Challenge: “Image Carousel”

Challenge Overview

Make a website which allows the user to navigate a set of images (first manually, then with an auto-playing slideshow).

Try this live demo!

Level 1 Challenge

Make forward and back buttons to move manually in that direction through a list of at least 4 images.

(e.g. When the user presses forward once, the display should move ONCE to the next image.)

You can use any images.

You can store the images within your app or you can use links to images hosted elsewhere (“hotlinking”).

Unsplash is a good source of images for this challenge.

Level 1 challenge screenshot example.

Level 2 Challenge

Make auto-forward and auto-back buttons to automatically move in that direction through the list of images.

Here’s a screenshot example from a completed level 2 challenge.

Try to finish the rest by yourself

If you want a harder challenge, don’t read the rest of this document but instead try to build the app by yourself.

If you want hints, then you will find some below.

Suggested approach

Here’s one approach you might take to building this app.

Task: Design your layout on paper

Design your layout on paper. Keep it very simple - this is a JavaScript challenge, not a CSS challenge.

Use a layout that will be ok on a phone (but don’t spend time on responsive design).

Keep this drawing around for reference later.

Task: Convert your layout to HTML

Convert the drawing to HTML (on codepen or elsewhere) and check the buttons appear correctly.

DON’T add any CSS or extra markup to make it look good just now. That will only make it more difficult for you to think about your app during development.

Task: Make the buttons work

Make your buttons work to navigate forwards and backwards, manually.

Task: more buttons - automated slideshow

Add the following buttons:

• auto-forward
• stop
• auto-backwards

These should allow automatic navigation through the images, say every 5 seconds.

End of basic challenge!

Congratulations, you’ve finished the basics!

• Make sure you can access it and play with it on a smartphone!
• Celebrate!

Extra Task for Slideshow

Optional: Add UI for delay time

Add UI so that the user can specify how long to wait between images.

Advanced Challenge: Make it look good

Now is a good time to make it look good with CSS, colour, typography, images, and creativity. Maybe you could ask someone to collaborate with you on those aspects.

Mailing List REST API

Credit: This challenge was created by Techtonica. You can find the original on the Techtonica Curriculum.

Previous Knowledge & Difficulty

To complete this challenge you should be able to

• Create a Node Application
• Use Express to setup endpoints
• Understand what a GET & PUT Request are and how to use them using Fetch

This challenge is rated at Easy to Medium.

Mailing List REST API

Tools

You should create an Express app. All of this can be in-memory, no database or file storage needed.

Data

The data consists of mailing lists which have a name and an array of member email addresses.

{
  "name": "staff",
  "members": ["talea@techtonica.org", "michelle@techtonica.org"]
}

Routes

Index

Route

/lists - fetch all the existing list names

Response

• 200 with a JSON body of all the existing list names
• 200 and empty array if none exist (not a 404)

Response Body

["staff", "cohort-h1-2020"]

Example Express Code

const lists = new Map();
// see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

// add some fake data

app.get("/lists", (req, res) => {
  const listsArray = Array.from(lists.keys()); // Why is this like this? Try it out in your console.
  res.send(listsArray);
});

GET single list

Route

/lists/:name - get list by name, e.g. /lists/staff

Response

• 200 with a JSON body (name and member emails) of the given list
• 404 if not found

Response Body

{
  "name": "staff",
  "members": ["talea@techtonica.org", "michelle@techtonica.org"]
}

While the frontend code is correct, the backend is not set up and will error (specifically POST, PUT and DELETE). Do not worry if you can not make it work, please follow along with the code and make sure you understand what is going on. The goal of this exercise is for you to understand how to set up routes so don’t worry too much about the logic yet, we will get to that in future lessons.

DELETE single list

Route

/lists/:name - delete list by name

Response

• 200 if successfully deleted
• 404 if not found to delete

Response Body

None needed

PUT - update single list

Path

/lists/:name - add or update a list with the given name

Request Body

{
  "name": "my-new-list",
  "members": ["me@me.com"]
}

Response

• 200 if it updated a list that already existed
• 201 if it created a new list

Response Body

None

Stretch 1

What if the name in the path doesn’t match the one in JSON body?? Sounds like an error case to me. Detect this case and pick an appropriate status code. (hint: if the client did something wrong in the request, it’ll be 4xx)

Testing

Use Postman to test retrieving, saving, and deleting mailing lists using your API.

Stretch 2

Some would say the more REST-ful way to manage the members of the list is to make them into a resource.

After creating your pull request in this coursework repo, try this challenge!

• GET /lists/:name/members => return array of emails only for a list
• PUT /lists/:name/members/:email => make the supplies email a member of the list
• DELETE /lists/:name/members/:email => remove the supplied email as a member of the list

Sidebar PUT vs. POST

API’s often use POST and PUT for updates. They have slightly different meanings. This side-by-side comparison can be helpful but don’t get too hung up on that at this stage.

• POST /lists/:name/members with a body containing an email will add it to the list, even if it’s already there

(Hello! Remember, once you’ve forked this project, this file is YOURS to delete or re-write as you like!)

A minimal starting template for a p5.js “sketch”, for CYF students

What is this?

This is a minimal p5js project for CYF students who have finished the fantastic Khan Academy intro to js: drawing and anim course.

It’s just a .html file and a .js file.

What can I do with it?

You can fork this repo to start working on your own p5.js projects.

Perhaps use it to migrate some of your favourites from your Khan Academy work (and give them their own home by deploying on netlify or github pages).

What does it look like when it runs?

To start with, it will look like this: https://codeyourfuture.github.io/p5js-minimal/

Make it cooler!

My khan academy (processing.js) code doesn’t work in p5.js!

Don’t panic, almost all of your code will work fine.

See this migration guide

Record a goose sighting

Go to the ‘Record a goose sighting’ exercise

This is a fictional service, to help you record any sightings of geese (geese are awesome). It’s using the GOV.UK Design system, which are WCAG 2.1 AA compliant, and benefits from hundreds of hours of work and testing. However, even if you’re using a Design System, stuff can still go wrong…

There are places where the Design System is misused, misimplemented or misunderstood. This has caused accessibility issues, which range across code, design and content - because accessibility issues can be introduced by all of these disciplines. As such, anyone is welcome to have a go and use this as an exercise!

How to use this

The task is to find as many of the accessibility issues in this site as you can in ~20 minutes.

There is a worksheet, and there is also a list of answers - but give it the full 20 minutes before you look at the answers first, if you’re working through this alone!

If you are running this as a group workshop, there is an answerless ‘Record a goose sighting’ exercise, that you can use with attendees. This prevents them from finding answers before you’re ready to go through them!

What testing tools to use

I would recommend working through the site in the following order:

• Can you access everything by pressing the tab key?
• Does WAVE show any errors, or highlight any issues with the HTML structure?
• Does the colour contrast tab on WAVE throw up any errors?

Government Digital Services have recently published how to conduct a basic accessibility audit, which is worth a look at too.

Testing like this is a good way to identify basic accessibility issues. It would not replace an audit against WCAG 2.1 to level AA, and its ~50 criteria. Why still do it? These are tests that are quick to run, and it’s easier to fix accessibility issues at the start, rather than the end.

How to run locally

This is built using the GOV.UK Prototype Kit.

To run it locally, clone it down, run npm install and then npm start. It’ll then tell you a port to go to in the browser.

Alternatively run it via docker & docker-compose

Depends on docker install and docker-compose install

1. docker-compose build
2. docker-compose up

Or get a bash console where you can run npm cmds via the built container (ensure step 1 above is done)
docker-compose run --rm --service-ports --entrypoint="bash" goose

Run the tests via docker
docker-compose run --rm --entrypoint="npm run test" goose

Suggesting changes

Feedback is welcome. Either submit an issue, or open a PR.

Resources for further learning

• Udacity Accessibility course - good for futhering knowledge about writing accessible code
• GDS WCAG 2.1 Primer - good for helping you understand the Web Content Accessibility Guidelines
• GDS guidance how to conduct a basic accessibility audit - mentioned above but listed here as well
• a11y weekly - a good weekly newsletter about accessibility

Any other suggestions, free free to add them!

Other versions of the exercise

This version is forked (and revived) from the MoJ archived repo. Other forks:

• NHS Accessibility exercise
• Coop accessibility exercise - ‘Report a leaky bag of flour’

Getting Started with CYF SASS in React

Deployed here: https://cyf-sass-in-react.netlify.app/

This project was bootstrapped with Create React App.

It has minimal changes from the defaults, just one extra package: “sass”, and engines.

This is a front end sample, so it doesn’t have a database.
It’s just using mock JSON to populate the view, from data/cards.json

It is extensively commented. Go through the /theme directory to look at the core pieces:

• type
• colours
• spacing
• utilities

Then look at the component scss.

There are suggestions for improvements and iterations. How can you develop it further?

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Review pull requests

Collaborate and work together on GitHub.

Finish

Congratulations friend, you’ve completed this course!

As you continue working on GitHub, remember that high quality reviews improve your projects. If you are new to a repository, inquire about what review practices they have so you can hit the ground running.

Here’s a recap of all the tasks you’ve accomplished in your repository:

• You learned how to assign pull requests for review.
• You left a review on a pull request.
• You suggested changes to a pull request.
• You applied suggested changes to a pull request.

What’s next?

• Try adding a CODEOWNERS file to your project to automatically assign reviewers to pull requests.
• We’d love to hear what you thought of this course in our discussion board.
• Take another GitHub Skills course.
• Read the GitHub Getting Started docs.
• To find projects to contribute to, check out GitHub Explore.

Get help: Post in our discussion board • Review the GitHub status page

© 2022 GitHub • Code of Conduct • CC-BY-4.0 License