4 | 📇
5 |
6 |
7 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react-swc'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/debugging/bank/sumArray.js:
--------------------------------------------------------------------------------
1 | const sumArray = (numbers) => {
2 | let total = 0;
3 | for (let i = 0; i < numbers.length; i++) {
4 | total += numbers[i];
5 | }
6 | return total;
7 | };
8 | console.log(sumArray([1, 2, 3]));
9 |
--------------------------------------------------------------------------------
/git-cli/exercises/ex-6.js:
--------------------------------------------------------------------------------
1 | let versionNumber = '2.5.3';
2 | // user wants to update the version number from '2.5.3' to '2.5.4' but it's not working
3 | versionNumber++;
4 |
5 | // log the versionNumber to work out what what's going wrong
6 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/postcss.config.js:
--------------------------------------------------------------------------------
1 | import tailwindcss from "tailwindcss";
2 | import autoprefixer from "autoprefixer";
3 |
4 | export default {
5 | plugins: [tailwindcss, autoprefixer],
6 | };
7 |
--------------------------------------------------------------------------------
/questions-and-reviews/questions/2.js:
--------------------------------------------------------------------------------
1 | // IMPORTANT: Read 2.md first before using this file!
2 | // ## Predict -> Run -> Observe -> Explain
3 |
4 | let count = 0;
5 |
6 | while(count < 10) {
7 | count++;
8 | console.log('*'.repeat(count))
9 | }
--------------------------------------------------------------------------------
/crud/server.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const albumsData = require("./albums.json");
3 | const app = express();
4 |
5 | app.listen(3000, () => {
6 | console.log("Server is listening on port 3000. Ready to accept requests!");
7 | });
8 |
--------------------------------------------------------------------------------
/js1-wk1-eval/level-900.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | const mitchAge = 33;
5 | const grandFatherAge = 83;
6 |
7 | // Create a variable called ageGap and assign to it the difference between grandFatherAge and mitchAge
8 | // Log the value of ageGap to the console
9 |
--------------------------------------------------------------------------------
/js1-wk1-eval/level-500.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const avgDaysInMonth = Math.floor(365 / 12);
4 |
5 | // Without running any code,
6 | // Predict and explain what the value of avgDaysInMonth will evaluate to
7 | // You can use documentation to look up what Math.floor does
--------------------------------------------------------------------------------
/.questions/questions-2/index.md:
--------------------------------------------------------------------------------
1 | Q: Without running the actual code, what do you think this program does?
2 |
3 | ```js
4 | console.log(2 * 4 + 10 / 5);
5 | ```
6 |
7 | A: {YOUR ANSWER HERE}
8 |
9 |
10 | Remember to commit and push when you're finished!
--------------------------------------------------------------------------------
/arrays/200.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // What will nums.length evalute to after running the code here
3 | // Check your prediction and explanation by running the code
4 |
5 | const nums = [10,3,5,6,];
6 |
7 | nums[6] = 50;
8 |
9 | console.log(nums.length);
10 |
--------------------------------------------------------------------------------
/components-2/docs/menu/menu-item.js:
--------------------------------------------------------------------------------
1 | const MenuItem = ({ component }, path) => {
2 | const listItem = document.createElement("li");
3 | listItem.innerHTML = `${component} docs`;
4 | return listItem;
5 | };
6 |
7 | export default MenuItem;
8 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [],
8 | };
9 |
--------------------------------------------------------------------------------
/.questions/questions-15/4.md:
--------------------------------------------------------------------------------
1 | When you clone a repository off Github, it is connected to a remote repository on Github.
2 | How can you check which remote repository your local repo is connected to on Github?
3 |
4 | Hint: Try researching to see if you can find a terminal command online
--------------------------------------------------------------------------------
/questions-and-reviews/questions/6.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | function printTimesTables(n) {
6 | const count = 1;
7 | while(count <= 12) {
8 | const product = n * i;
9 | console.log(`${n} * ${i} = ${product}`);
10 | count++;
11 | }
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "type": "node",
6 | "request": "launch",
7 | "name": "Launch Program",
8 | "skipFiles": ["/**"],
9 | "program": "${file}"
10 | }
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/testing/fizzbuzz.test.js:
--------------------------------------------------------------------------------
1 | import fizzbuzz from "./fizzbuzz";
2 |
3 | test("it should return 1 when passed 1 as an argument", () => {
4 | // arrange
5 | let number = 1;
6 | // act
7 | let result = fizzbuzz(number);
8 | // assert
9 | expect(result).toEqual("1");
10 | });
11 |
--------------------------------------------------------------------------------
/micro-front-end/go.sum:
--------------------------------------------------------------------------------
1 | github.com/CodeYourFuture/curriculum/common-theme v0.0.0-20250122145051-7c1d9e022530 h1:2DKzZxj7Z7QLA72QRLiMOuTMkhPUiFaUPR+K02sAmwU=
2 | github.com/CodeYourFuture/curriculum/common-theme v0.0.0-20250122145051-7c1d9e022530/go.mod h1:kzt+J4JYp5C3GD1dX0rf7vY5fsTUc6Drrn+7p7pjmLg=
3 |
--------------------------------------------------------------------------------
/debugging-3/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/.questions/questions-16/5.md:
--------------------------------------------------------------------------------
1 | Imagine you're speaking to a trainee who is starting at Code Your Future for the first time.
2 | They ask the following question:
3 |
4 | "What is the difference between github.com and Github desktop?"
5 |
6 | How would you answer this question in order to help the new trainee?
--------------------------------------------------------------------------------
/components-1/docs/menu/styles.css:
--------------------------------------------------------------------------------
1 | .menu {
2 | background-color: var(--ink);
3 | color: var(--paper);
4 | height: 100vh;
5 | width: max-content;
6 | padding: var(--space);
7 | z-index: 1;
8 | position: absolute;
9 | left: -100vw;
10 | }
11 | .menu.is-active {
12 | left: 0;
13 | }
14 |
--------------------------------------------------------------------------------
/components-2/docs/menu/menu.css:
--------------------------------------------------------------------------------
1 | .menu {
2 | background-color: var(--ink);
3 | color: var(--paper);
4 | height: 100vh;
5 | width: max-content;
6 | padding: var(--space);
7 | z-index: 1;
8 | position: absolute;
9 | left: -100vw;
10 | }
11 | .menu.is-active {
12 | left: 0;
13 | }
14 |
--------------------------------------------------------------------------------
/debugging/bank/findLargest.js:
--------------------------------------------------------------------------------
1 | const findLargest = (numbers) => {
2 | let largest = numbers[0];
3 | for (let i = 1; i < numbers.length; i++) {
4 | if (numbers[i] > largest) {
5 | largest = numbers[i];
6 | }
7 | }
8 | return largest;
9 | };
10 | console.log(findLargest([3, 7, 2, 5, 6]));
11 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/undefined/readme.md:
--------------------------------------------------------------------------------
1 | ## Group Exercise
2 |
3 | - Split into groups of 3 or 4.
4 | - For each example in this section - discuss the code as a group.
5 | - Why does the output in each example contain `undefined`?
6 | - Try each code example in VSCode
7 | - Can you change something so it no longer outputs `undefined`?
8 |
--------------------------------------------------------------------------------
/debugging-2/100/readme.md:
--------------------------------------------------------------------------------
1 | # About
2 |
3 | This is a simple form built with vanilla JavaScript. To run the project, simply open the `index.html` file in your web browser.
4 |
5 | # Success Criteria
6 |
7 | When you fill out the form and click the submit button, the debugger console will log 'Success you have finished'
8 |
--------------------------------------------------------------------------------
/debugging-2/200/readme.md:
--------------------------------------------------------------------------------
1 | # About
2 |
3 | This is a simple form built with vanilla JavaScript. To run the project, simply open the `index.html` file in your web browser.
4 |
5 | # Success Criteria
6 |
7 | When you fill out the form and click the submit button, the debugger console will log 'Success you have finished'
8 |
--------------------------------------------------------------------------------
/js1-wk1-eval/level-600.js:
--------------------------------------------------------------------------------
1 |
2 | // Go to https://www.datecalculator.org/day-of-the-year
3 |
4 | // Declare a variable dayNumberOfTheYear with the value from this website
5 |
6 | // Declare a new variable daysLeftInTheYear by forming an expression with dayNumberOfTheYear
7 |
8 | // Use console.log to check your answer
9 |
--------------------------------------------------------------------------------
/dom-merge-conflict/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "devDependencies": {
3 | "@babel/preset-env": "^7.23.8",
4 | "@testing-library/dom": "^9.3.4",
5 | "@testing-library/jest-dom": "^6.2.0",
6 | "jest": "^29.7.0",
7 | "jest-environment-jsdom": "^29.7.0"
8 | },
9 | "scripts": {
10 | "test": "jest"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/git-cli/exercises/ex-4.js:
--------------------------------------------------------------------------------
1 |
2 | let headline = `Mark Zuckerberg's Message to Facebook Employees:
3 |
4 | Mark Zuckerberg shares some of the most difficult changes we've made in Meta's history.`
5 |
6 | // Use a string function to replace Facebook with Meta in the string above
7 | // Log out the value of the headline to check your answer
--------------------------------------------------------------------------------
/debugging-2/300/readme.md:
--------------------------------------------------------------------------------
1 | # About
2 |
3 | This is a simple form built with vanilla JavaScript. To run the project, simply open the `index.html` file in your web browser.
4 |
5 | # Success Criteria
6 |
7 | When you fill out the form and click the submit button, the input boxes will turn green to indicate that the data was successfully submitted.
8 |
--------------------------------------------------------------------------------
/.questions/questions-17/2.md:
--------------------------------------------------------------------------------
1 | When using Github desktop, somebody sees the following error:
2 | "error: failed to push some refs to https://github.com/CodeYourFuture/HTML-CSS-Coursework-Week1"
3 |
4 | Try and think of 1 reason why you might be seeing this error
5 |
6 | A: {YOUR ANSWER HERE}
7 |
8 |
9 | Remember to commit and push when you're finished!
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/src/client/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/src/server/index.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 |
3 | const app = express();
4 | app.listen(4173, () => {
5 | console.log("Listening on http://localhost:4173.");
6 | });
7 |
8 | app.get("/api/v1/example", (req, res) => {
9 | res.status(200).json({ message: "Success" });
10 | });
11 |
--------------------------------------------------------------------------------
/debugging/bank/1.js:
--------------------------------------------------------------------------------
1 | /*
2 | This function should check to see if the given number is equal to
3 | the number 5. This function isn't working correctly can you see why this is the case?
4 | And fix this code!
5 | */
6 |
7 | function isValueFive(n) {
8 | if (n === "5") {
9 | return true
10 | }
11 |
12 | return false
13 | }
14 |
15 | isValueFive(5)
16 |
17 |
--------------------------------------------------------------------------------
/debugging-3/features/ratings.feature:
--------------------------------------------------------------------------------
1 | Feature: Ratings
2 |
3 | @100
4 | Scenario: Placeholder text
5 | Given I am an end user
6 | When I go to the page
7 | Then I should see "Select a rating"
8 |
9 | @200
10 | Scenario: Rating out of 5 is displayed
11 | Given I am an end user
12 | When I select "Great"
13 | Then I should see a 4/5 for the score
14 |
--------------------------------------------------------------------------------
/testing/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fizzbuzz",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "fizzbuzz.js",
6 | "type": "module",
7 | "scripts": {
8 | "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
9 | },
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "jest": "^29.5.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/micro-front-end/assets/custom-theme/02-variables/fonts.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --theme-font--display: "Space Grotesk", serif;
3 | --theme-font--copy: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
4 | "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
5 | sans-serif;
6 | --theme-font--system: 100 100%/2 "Monaco", "Menlo", "Space Grotesk", monospace;
7 | }
8 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react-swc";
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | test: {
8 | globals: true,
9 | environment: "jsdom",
10 | setupFiles: ["./src/setupTests.jsx"],
11 | },
12 | });
13 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/components-1/docs/header/styles.css:
--------------------------------------------------------------------------------
1 | .header {
2 | grid-area: header;
3 | display: grid;
4 | grid-template:
5 | "logo space page button" var(--finger) /
6 | var(--finger) var(--space) 1fr var(--finger);
7 | }
8 | .header__heading {
9 | grid-area: logo;
10 | margin: 0;
11 | }
12 | .header__page {
13 | grid-area: page;
14 | margin: 0 auto auto 0;
15 | font-size: 2em;
16 | }
17 |
--------------------------------------------------------------------------------
/components-2/docs/header/header.css:
--------------------------------------------------------------------------------
1 | .header {
2 | grid-area: header;
3 | display: grid;
4 | grid-template:
5 | "logo space page button" var(--finger) /
6 | var(--finger) var(--space) 1fr var(--finger);
7 | }
8 | .header__heading {
9 | grid-area: logo;
10 | margin: 0;
11 | }
12 | .header__page {
13 | grid-area: page;
14 | margin: 0 auto auto 0;
15 | font-size: 2em;
16 | }
17 |
--------------------------------------------------------------------------------
/debugging-3/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Debugging Part III
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/git-cli/exercises/ex-1.js:
--------------------------------------------------------------------------------
1 | const albumTitle = "damn.";
2 | const artist = "Kendrick Lamar";
3 |
4 |
5 | console.log(`The 4th studio album by ${artist} was ${toUpperCase(albumTitle)}`);
6 | // This log should print a string with the artist's name and the album title to upper case
7 | // However, it isn't working at the moment!
8 | // Try running this file with node to identify the error and then fix the problem
--------------------------------------------------------------------------------
/debugging-3/features/episodes.feature:
--------------------------------------------------------------------------------
1 | Feature: Episodes
2 |
3 | @100
4 | Scenario: TV Shows are displayed
5 | Given I am an end user
6 | When the page loads
7 | Then I see a list of the episodes
8 |
9 | @200
10 | Scenario: TV Shows are displayed in order
11 | Given I am an end user
12 | When the page loads
13 | Then I see a list of the episodes in alphabetical order
14 |
--------------------------------------------------------------------------------
/playing-computer/example-1.js:
--------------------------------------------------------------------------------
1 | // EXAMPLE 1
2 | // now there is a global frame, and an add frame
3 | // one person will "play" the global frame
4 | // another person will "play" the add frame
5 |
6 | function add(a, b) {
7 | return a + b;
8 | }
9 |
10 | let x = 10;
11 | let y = 32;
12 | x = x + 1;
13 | y = y - 4;
14 | console.log("x is ", x);
15 | console.log("y is ", y);
16 | console.log(add(x, y));
17 |
--------------------------------------------------------------------------------
/components-2/assets/styles.css:
--------------------------------------------------------------------------------
1 | @import url(../docs/theme/theme.css);
2 | @import url(../docs/reset/reset.css);
3 | @import url(../docs/base/base.css);
4 |
5 | @import url(../docs/layout/layout.css);
6 |
7 | @import url(../docs/header/header.css);
8 | @import url(../docs/main/main.css);
9 | @import url(../docs/menu/menu.css);
10 | @import url(../docs/footer/footer.css);
11 | @import url(../docs/card/card.css);
12 |
--------------------------------------------------------------------------------
/questions-and-reviews/timings.md:
--------------------------------------------------------------------------------
1 | # Timings ⌛
2 |
3 | - This workshop should last roughly 50 mins.
4 |
5 | - [Getting setup](./instructions.md#getting-setup-💻) - 5 mins
6 | - [Answering questions](./instructions.md#answering-questions-❓) - 20 mins
7 | - [Whole group discussion](./instructions.md/#whole-group-discussion) - 10 mins
8 | - [Review time](./instructions.md/#review-time) - 15 mins
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/goblin-breakdown/contact/index.js:
--------------------------------------------------------------------------------
1 | // Retrieve the JSON object containing the UK address and phone number
2 | const getContactDetails = async (api) => {};
3 |
4 | // Format the address in the desired UK address format
5 | const formatAddress = (address) => {};
6 |
7 | // Format the phone number in the desired UK phone number format
8 |
9 | // Generate HTML code to display the formatted address and phone number on the page
10 |
--------------------------------------------------------------------------------
/js1-wk1-eval/level-800.js:
--------------------------------------------------------------------------------
1 | const post =
2 | `Meta
3 | How AI Influences What You See on Facebook and Instagram
4 | We’re making it easier to control what you see on Facebook and Instagram,
5 | and sharing more info on how our AI systems rank content.`
6 |
7 | const updatedPost = post.replaceAll('Facebook','Meta');
8 |
9 | // Use documentation to work out what updatedPost will evaluate to.
10 | // Don't run any code for this task
--------------------------------------------------------------------------------
/git-cli/exercises/ex-2.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | const trackLength = 9; // time in seconds
5 | const minutes = trackLength / 60;
6 | const seconds = trackLength - minutes * 60;
7 |
8 |
9 | console.log(`${minutes}:${seconds}`);
10 | // should print the time in minutes:seconds,
11 | // where minutes and seconds are whole numbers
12 | // work out why it isn't working at the moment
13 | // try logging variables to check what isn't working and the
--------------------------------------------------------------------------------
/debugging-3/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/debugging-3/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.questions/questions-7/index.md:
--------------------------------------------------------------------------------
1 | # Predict => Run => Observe => Explain
2 |
3 | Remember to **preview a markdown file** on your computer you can do:
4 | Ctr + Shift + V (Windows/Linux) or CMD + Shift + V (Mac)
5 |
6 | In this task, you'll need to look at some code in `7.js` and, firstly, predict what it will do, **without executing it**.
7 |
8 | {YOUR PREDICTION HERE}
9 |
10 | Afterwards, you can execute the code in `7.js` to check your answer 📝
11 |
--------------------------------------------------------------------------------
/js1-wk1-eval/level-999.js:
--------------------------------------------------------------------------------
1 |
2 | // Without running code,
3 | // predict and explain what will get logged to the console for each line below
4 | // think carefully about the difference between each line
5 | // write down your predictions
6 | // Look up documentation for Math.abs if you've not used it before
7 |
8 | console.log(Math.abs);
9 | console.log(Math.abs());
10 | console.log(Math.abs(-100));
11 |
12 | // Run the file with Node to check your answer
--------------------------------------------------------------------------------
/objects/200.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // What will happen when this program is run?
3 | // Check your prediction and explanation by running the program.
4 | // Fix anything that needs fixing.
5 |
6 | const person = {
7 | "name": "Jemima",
8 | "location",
9 | "id_number" = 9,
10 | };
11 |
12 | console.assert(person.name === "Jemima");
13 | console.assert(person.location === "Glasgow");
14 | console.assert(person.id_number === 9);
15 |
--------------------------------------------------------------------------------
/components-1/docs/layout/styles.css:
--------------------------------------------------------------------------------
1 | /* LAYOUT
2 | */
3 | body {
4 | display: grid;
5 | gap: var(--space);
6 | grid-template:
7 | ". ...... ." var(--space)
8 | ". header ." min-content
9 | ". ...... ." var(--space)
10 | ". main ." minmax(75vh, 1fr)
11 | ". footer ." min-content
12 | ". ...... ." var(--space) /
13 | minmax(var(--space), 1fr) var(--container) minmax(var(--space), 1fr);
14 | place-content: center;
15 | }
16 |
--------------------------------------------------------------------------------
/components-2/docs/layout/layout.css:
--------------------------------------------------------------------------------
1 | /* LAYOUT
2 | */
3 | body {
4 | display: grid;
5 | gap: var(--space);
6 | grid-template:
7 | ". ...... ." var(--space)
8 | ". header ." min-content
9 | ". ...... ." var(--space)
10 | ". main ." minmax(75vh, 1fr)
11 | ". footer ." min-content
12 | ". ...... ." var(--space) /
13 | minmax(var(--space), 1fr) var(--container) minmax(var(--space), 1fr);
14 | place-content: center;
15 | }
16 |
--------------------------------------------------------------------------------
/questions-and-reviews/questions/1.md:
--------------------------------------------------------------------------------
1 | # Predict => Run => Observe => Explain
2 |
3 | Remember to **preview a markdown file** on your computer you can do:
4 | Ctr + Shift + V (Windows/Linux) or CMD + Shift + V (Mac)
5 |
6 | In this task, you'll need to look at some code in `1.js` and, firstly, predict what it will do, **without executing it**.
7 |
8 | {YOUR PREDICTION HERE}
9 |
10 | Afterwards, you can execute the code in `1.js` to check your answer 📝
11 |
--------------------------------------------------------------------------------
/components-1/docs/card/styles.css:
--------------------------------------------------------------------------------
1 | .card {
2 | background-color: var(--paper);
3 | box-shadow: 2px 4px 16px var(--shade);
4 | display: flex;
5 | flex-flow: column-reverse;
6 | align-items: center;
7 | overflow: hidden;
8 | }
9 | .card:hover,
10 | .card:focus {
11 | box-shadow: 1px 1px 2px var(--shade);
12 | }
13 | .card__emoji {
14 | font-size: clamp(64px, calc(64px + 5vw), 144px);
15 | }
16 |
17 | .card__code {
18 | overflow: scroll;
19 | }
20 |
--------------------------------------------------------------------------------
/components-2/docs/card/card.css:
--------------------------------------------------------------------------------
1 | .card {
2 | background-color: var(--paper);
3 | box-shadow: 2px 4px 16px var(--shade);
4 | display: flex;
5 | flex-flow: column-reverse;
6 | align-items: center;
7 | overflow: hidden;
8 | }
9 | .card:hover,
10 | .card:focus {
11 | box-shadow: 1px 1px 2px var(--shade);
12 | }
13 | .card__emoji {
14 | font-size: clamp(64px, calc(64px + 5vw), 144px);
15 | }
16 |
17 | .card__code {
18 | overflow: scroll;
19 | }
20 |
--------------------------------------------------------------------------------
/git-cli/checkpoint.md:
--------------------------------------------------------------------------------
1 | # Checkpoint 🏁
2 |
3 | ## Learning objectives
4 |
5 | - [ ] Inspect the existing timeline of commits using the Git CLI
6 |
7 | ## 👣 Steps
8 |
9 |
10 | 1. Use the `git log --help` command to get a description of the `git log` command
11 | 2. Then run the command `git log` to list the commits
12 | 3. Before continuing, use the Git CLI to double check what branch you're currently on
13 |
14 |
15 | [Next section](./committing.md)
16 |
--------------------------------------------------------------------------------
/git-cli/exercises/ex-3.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | // this person has tried adding a comma to a number so it is easier to read
4 | // use console.log for the value of numericalStringWithCommas
5 | // then re-write the expression for numericalStringWithCommas using template literals instead of +
6 |
7 | const numberOfPlays = 46462;
8 | const numericalStringWithCommas = Math.floor(numberOfPlays / 1000) + ',' + numberOfPlays % 1000;
9 |
10 | console.log(numericalStringWithCommas);
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/src/client/App.test.jsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 |
3 | import App from "./App";
4 |
5 | describe("App", () => {
6 | it("renders a title", () => {
7 | //arrange
8 | render();
9 | //act
10 | //assert
11 | expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
12 | "Vite React Express CYF"
13 | );
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/components-1/assets/styles.css:
--------------------------------------------------------------------------------
1 | @import url(../docs/theme/styles.css);
2 | @import url(../docs/reset/styles.css);
3 | @import url(../docs/base/styles.css);
4 |
5 | @import url(../docs/layout/styles.css);
6 |
7 | @import url(../docs/header/styles.css);
8 | @import url(../docs/main/styles.css);
9 | @import url(../docs/menu/styles.css);
10 | @import url(../docs/footer/styles.css);
11 | @import url(../docs/card/styles.css);
12 | @import url(../docs/copy/styles.css);
13 |
--------------------------------------------------------------------------------
/debugging/bank/2.js:
--------------------------------------------------------------------------------
1 | /*
2 | This function should return the value of the largest number in the given array.
3 | Can you fix the bug in this function
4 |
5 | */
6 |
7 | function getLargestNum(arr) {
8 | let largestNum = 0;
9 | for (let i = 0; i <= arr.length; i++) {
10 | if (arr[i] > largestNum) {
11 | largestNum = arr[i];
12 | }
13 | }
14 | return largestNum;
15 | }
16 | let arr = [1, 2, 3, 4, 5];
17 |
18 | getLargestNum(arr)
--------------------------------------------------------------------------------
/debugging/bank/4.js:
--------------------------------------------------------------------------------
1 | /*
2 | This function should return the sum of all the numbers in the array.
3 | Can you spot why this function is not working and resolve.
4 | */
5 |
6 | function calculateSum(arr) {
7 | let sum = 0;
8 | for (let i = 0; i <= arr.length; i++) {
9 | sum += arr[i];
10 | }
11 | return sum;
12 | }
13 |
14 | let arr = [1, 2, 3, 4, 5];
15 | let sum = calculateSum(arr);
16 | console.log("The sum of " + arr + " is " + sum);
--------------------------------------------------------------------------------
/get-forms/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/playing-computer/example-0.js:
--------------------------------------------------------------------------------
1 | // WARM UP ROUND
2 | // no function declarations in here
3 | // so only one person "plays" the global frame
4 |
5 | let height = 10;
6 | let length = 20;
7 | let area = height * length;
8 | console.log(`area is ${area}`);
9 |
10 | height += 3;
11 | length = length * 5;
12 |
13 | console.log(`height is now ${height}`);
14 | console.log(`length is now ${length}`);
15 |
16 | area = height * length;
17 | console.log(`area is ${area}`);
18 |
--------------------------------------------------------------------------------
/debugging/bank/3.js:
--------------------------------------------------------------------------------
1 | /*
2 | There is a bug in this code which may not be immediately obvious.
3 | Hint: Try different test cases to uncover the bug. Then update the code to
4 | resolve the bug.
5 | */
6 |
7 | function calculateAverage(arr) {
8 | let sum = 0;
9 | for (let i = 0; i < arr.length; i++) {
10 | sum += arr[i];
11 | }
12 | return sum / arr.length;
13 | }
14 |
15 | let arr = [1, 2, 3, 4, 5];
16 | console.log(calculateAverage(arr));
--------------------------------------------------------------------------------
/js1-wk1-eval/level-300.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const day = "Friday";
4 | const month = "September";
5 | const date = 29;
6 | const time = "21:49";
7 |
8 | const macTimeDisplay = `${day.slice(0,3)} ${date} ${month.slice(0,3)} ${time}`;
9 |
10 | // Before running code, answer the following - write down your answers:
11 | // a) how many function calls are there in this file?
12 | // b) predict and explain what macTimeDisplay will evaluate to. You can use documentation to look up slice
13 |
--------------------------------------------------------------------------------
/arrays/100.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // What will nums.length evalute to after running the code here
3 | // Check your prediction and explanation by running the code. Use mdn documentation for mdn to help you make your prediction
4 | //
5 |
6 | const cities = ["Manchester", "London","Birmingham","Cape Town","Glasgow"];
7 | const result = cities.push("Liverpool","Sheffield");
8 |
9 | console.log(`The result is ${result}`);
10 | console.log("cities now looks like this: ",cities);
--------------------------------------------------------------------------------
/components-1/docs/menu/menu.txt:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/components-2/docs/menu/menu.txt:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/goblin-breakdown/contact/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Contact
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/debugging-2/readme.md:
--------------------------------------------------------------------------------
1 | # Debugging workshop - 2
2 |
3 | ## Please follow the steps below:
4 |
5 | 1. The class should split up into seperate groups / breakout rooms.
6 | 2. Each team should check debug_checklist.md file first and discuss which other strategies they would consider for debugging codes.
7 | 3. Instructors will pick up one of the team's checklist and do a demo for levels 100 and 200 in front of the whole group.
8 | 4. Trainees go back to their breakout rooms and debug level 300 in their teams.
9 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + Express + CYF
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/components-1/docs/reset/styles.css:
--------------------------------------------------------------------------------
1 | /* Read about resets on CSS Tricks, A List Apart, and Josh Comeau
2 | https://www.joshwcomeau.com/css/custom-css-reset/ */
3 |
4 | /* What does this rule do? Try removing it. */
5 | * {
6 | box-sizing: border-box;
7 | }
8 | /* What about this one?
9 | Make a prediction first and then find and uncheck this rule in Devtools */
10 | body,
11 | html {
12 | padding: 0;
13 | margin: 0;
14 | }
15 | ul,
16 | ul li {
17 | list-style: none;
18 | margin: 0;
19 | padding: 0;
20 | }
21 |
--------------------------------------------------------------------------------
/components-2/docs/reset/reset.css:
--------------------------------------------------------------------------------
1 | /* Read about resets on CSS Tricks, A List Apart, and Josh Comeau
2 | https://www.joshwcomeau.com/css/custom-css-reset/ */
3 |
4 | /* What does this rule do? Try removing it. */
5 | * {
6 | box-sizing: border-box;
7 | }
8 | /* What about this one?
9 | Make a prediction first and then find and uncheck this rule in Devtools */
10 | body,
11 | html {
12 | padding: 0;
13 | margin: 0;
14 | }
15 | ul,
16 | ul li {
17 | list-style: none;
18 | margin: 0;
19 | padding: 0;
20 | }
21 |
--------------------------------------------------------------------------------
/crud/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "crud",
3 | "version": "1.0.0",
4 | "description": "Our Beyonce Album CRUD App",
5 | "main": "server.js",
6 | "scripts": {
7 | "start": "node server.js",
8 | "dev": "nodemon server.js",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "keywords": [],
12 | "author": "CodeYourFuture",
13 | "license": "ISC",
14 | "dependencies": {
15 | "express": "^4.21.0"
16 | },
17 | "devDependencies": {
18 | "nodemon": "^3.0.2"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/goblin-breakdown/contact/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 3em/1.5 Monaco, monospace;
3 | text-align: center;
4 | display: grid;
5 | height: 100vh;
6 | place-items: center;
7 | color: white;
8 | background: no-repeat
9 | linear-gradient(
10 | 30deg,
11 | #000080 0%,
12 | #72007f 16%,
13 | #bc0070 33%,
14 | #ff2447 50%,
15 | #ff8a0c 66%,
16 | #ffc800 83%,
17 | #ffff00 100%
18 | );
19 | }
20 | address {
21 | font-style: normal;
22 | white-space: pre;
23 | }
24 |
--------------------------------------------------------------------------------
/questions-and-reviews/questions/5.md:
--------------------------------------------------------------------------------
1 |
2 | You've started to see **assertions** in your coursework that look something like this:
3 |
4 | ```js
5 | expect(sum(10,32)).toBe(42);
6 | ```
7 |
8 | a) Describe, in your own words, what the above assertion checks.
9 |
10 | Now try the following:
11 |
12 | b) Write an **assertion** that checks that a function `isMultipleOfTen` returns `true` when called with the input `80`
13 | You can check out the [Jest documentation here](https://jestjs.io/docs/expect#matchers) to help you with this task.
--------------------------------------------------------------------------------
/git-cli/exercises/ex-5.js:
--------------------------------------------------------------------------------
1 | // Someone is trying to split up numbers into tens and units
2 |
3 | const num = 37;
4 | // so for num, they want to build a string "37 is 30 + 7"
5 | // 3 represents the tens
6 | // 7 represents the units
7 |
8 | const placeValueString = `${num} is ${num / 10} + ${num % 10}`;
9 | // try declaring some variables to store the tens and the units to make this more readable
10 | // also there's a small bug at the moment: can you fix it?
11 |
12 | // once you're finished try changing the value of num to see if it still works
--------------------------------------------------------------------------------
/objects/600.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // What will happen when this program is run?
3 | // Check your prediction and explanation by running the program.
4 | // Fix anything that needs fixing.
5 |
6 | const person = {
7 | "name": "Manu",
8 | "favourite_ice_cream": "vanilla",
9 | "favourite_topping": "marshmallows",
10 | };
11 |
12 | function assertFieldEquals(object, field, targetValue) {
13 | console.assert(object.field === targetValue);
14 | }
15 |
16 | assertFieldEquals(person, "favourite_ice_cream", "vanilla");
17 |
--------------------------------------------------------------------------------
/js1-wk1-eval/level-200.js:
--------------------------------------------------------------------------------
1 |
2 | // Part 1: Without running code,
3 | // Use documentation to evaluate Math.trunc() and Math.floor() for each of the numbers below.
4 | // Write your answers down below:
5 |
6 | // a) 10.53 For example, Math.trunc(10.53) evaluates to 10, Math.floor(10.53) evaluates to 10
7 | // b) 170.105
8 | // c) -0.34
9 | // d) -8.921
10 |
11 | // Part 2: Use the Node REPL to check your answers to Part 1)
12 | // Part 3: Using Part 2, explain the difference between Math.trunc() and Math.floor() in your own words
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/debugging/bank/5.js:
--------------------------------------------------------------------------------
1 | /*
2 | This code contains more than one error. Can you find and fix the errors.
3 | */
4 |
5 | let list1 = [1, 2, 3, 4, 5];
6 | let list2 = [6, 7, 8, 9, 10];
7 |
8 | function mergeLists(list1, list2) {
9 | let mergedList = [];
10 | for (let i = 0; i < list1.length; i++) {
11 | mergedList.push(list1[i]);
12 | for (let j = 0; j < list2.length; i++) {
13 | mergedList.push(list2[j]);
14 | }
15 | }
16 | return mergedList;
17 | }
18 |
19 | //Expected output: [1,6,2,7,3,8,4,9,5,10]
20 | console.log(mergeLists(list1, list2));
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "arrowParens": "always",
3 | "bracketSpacing": true,
4 | "embeddedLanguageFormatting": "auto",
5 | "htmlWhitespaceSensitivity": "css",
6 | "insertPragma": false,
7 | "jsxBracketSameLine": false,
8 | "jsxSingleQuote": false,
9 | "printWidth": 80,
10 | "proseWrap": "preserve",
11 | "quoteProps": "as-needed",
12 | "requirePragma": false,
13 | "semi": true,
14 | "singleQuote": false,
15 | "tabWidth": 2,
16 | "trailingComma": "es5",
17 | "useTabs": false,
18 | "vueIndentScriptAndStyle": false
19 | }
20 |
--------------------------------------------------------------------------------
/touch-typing/readme.md:
--------------------------------------------------------------------------------
1 | # Why is typing important?
2 |
3 | # first 10 minutes
4 | Short presentation where Jonathan shows how much of a nerd he is about typing and keyboards
5 | > see presentation.pdf for slides
6 |
7 | # second 25 minutes
8 | Everyone practice on https://www.typingclub.com
9 | > try to get to lesson 10, and further if you can
10 |
11 | # last 15 minutes
12 | Within your study groups, compete on https://www.typeracer.com and nominate your champion
13 | > press "Create Racetrack" under "Race your friends"
14 |
15 | The champion of each group will compete in a final to become GRAND CHAMPION
--------------------------------------------------------------------------------
/components-1/docs/main/styles.css:
--------------------------------------------------------------------------------
1 | .main {
2 | grid-area: main;
3 | display: flex;
4 | flex-flow: row wrap;
5 | gap: var(--space);
6 | }
7 |
8 | .main__deck {
9 | display: grid;
10 | grid-template-columns: repeat(auto-fit, minmax(var(--box), 1fr));
11 | gap: var(--space);
12 | }
13 |
14 | .main__copy {
15 | /* Why have I constrained this box? Google it! */
16 | max-width: var(--line-length);
17 | }
18 |
19 | .main__copy p:first-of-type::first-letter {
20 | initial-letter: 2;
21 | margin: 0 0.5ch 0 0;
22 | padding: 0.5ch;
23 | background-color: var(--brand);
24 | color: var(--paper);
25 | }
26 |
--------------------------------------------------------------------------------
/components-2/docs/main/main.css:
--------------------------------------------------------------------------------
1 | .main {
2 | grid-area: main;
3 | display: flex;
4 | flex-flow: row wrap;
5 | gap: var(--space);
6 | }
7 |
8 | .main__deck {
9 | display: grid;
10 | grid-template-columns: repeat(auto-fit, minmax(var(--box), 1fr));
11 | gap: var(--space);
12 | }
13 |
14 | .main__copy {
15 | /* Why have I constrained this box? Google it! */
16 | max-width: var(--line-length);
17 | }
18 |
19 | .main__copy p:first-of-type::first-letter {
20 | initial-letter: 2;
21 | margin: 0 0.5ch 0 0;
22 | padding: 0.5ch;
23 | background-color: var(--brand);
24 | color: var(--paper);
25 | }
26 |
--------------------------------------------------------------------------------
/debugging-2/debug_checklist.md:
--------------------------------------------------------------------------------
1 | * HTML
2 | * Are the tags correct?
3 | * Are the JS files and CSS files referenced correctly
4 | * Javascript
5 | * Do we see any errors in the console?
6 | * What is the error
7 | * Can we find documentation on the JS function/object at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference for the builtin objects
8 | * are we using the built in code correctly
9 | * Are the elements being found
10 | * document.getElementById are the IDs seen in the JS found in the HTML
11 | * Have we added console.log for the lines we are trying to debug?
12 |
13 |
14 |
--------------------------------------------------------------------------------
/debugging-3/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/micro-front-end/static/404.html:
--------------------------------------------------------------------------------
1 | This is a placeholder file which will be replaced by hugo.
2 |
3 | If this file doesn't exist, hugo will for some reason create a placeholder file with the wrong permissions, and won't be able to overwrite it with the rendered file.
4 |
5 | You should never see this file served by a hugo site.
6 |
7 | We wish we understood why hugo was creating a placeholder with permissions 0444 instead of 0644, but we can't work it out.
8 |
9 | Oh, by the way, it only does so for some sites (specifically, common-docs, but not any others).
10 |
11 | See https://github.com/CodeYourFuture/curriculum/issues/992
12 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/.gitignore:
--------------------------------------------------------------------------------
1 | coverage
2 | .DS_Store
3 | # Logs
4 | logs
5 | *.log
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*
9 | pnpm-debug.log*
10 | lerna-debug.log*
11 |
12 | node_modules
13 | dist
14 | dist-ssr
15 | *.local
16 |
17 | # Editor directories and files
18 | .vscode/*
19 | !.vscode/extensions.json
20 | .idea
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | /test-results/
28 | /playwright-report/
29 | /blob-report/
30 | /playwright/.cache/
31 | /test-results/
32 | /playwright-report/
33 | /blob-report/
34 | /playwright/.cache/
35 |
--------------------------------------------------------------------------------
/debugging-3/features/email.feature:
--------------------------------------------------------------------------------
1 | Feature: Email
2 |
3 | @100
4 | Scenario: Error message displayed when invalid email entered
5 | Given I am an end user
6 | When I enter "bob" as an email
7 | Then I see an error message
8 |
9 | @200
10 | Scenario: Error message displayed when invalid email entered (200)
11 | Given I am an end user
12 | When I enter "bob@gmail" as an email
13 | Then I see an error message
14 |
15 | @300
16 | Scenario: Error message displayed when invalid email entered (200)
17 | Given I am an end user
18 | When I enter "bob@gmail.com " as an email
19 | Then I see an error message
--------------------------------------------------------------------------------
/react-pokedex/pokedex/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/components-2/docs/theme/theme.css:
--------------------------------------------------------------------------------
1 | /* Here's our design
2 | It's fonts, colours, and spacing.
3 | Every design is made of these basic building blocks.
4 | Change the values to make a completely new look */
5 |
6 | :root {
7 | /* fonts */
8 | --copy: "Lato";
9 | /* colours */
10 | --paper: hsla(260, 35%, 90%, 0.95);
11 | --ink: hsla(270, 8%, 20%, 0.98);
12 | --brand: hsla(0, 100%, 67%, 0.98);
13 | --shade: hsla(270, 8%, 20%, 0.1);
14 | /* spacing */
15 | --space: 2rem;
16 | --box: 18rem;
17 | --container: clamp(var(--box), calc(100vw - calc(var(--space) * 2)), 74rem);
18 | --finger: 48px;
19 | --line-length: 60ch;
20 | }
21 |
--------------------------------------------------------------------------------
/.questions/questions-13/6.md:
--------------------------------------------------------------------------------
1 | **Trickier**
2 |
3 | In VSCode, [open your terminal](https://code.visualstudio.com/docs/terminal/basics#_terminal-shells).
4 |
5 | In this exercise, you'll need to run each of the commands below in the terminal.
6 | After running each command, describe what you think the commmand is doing ( it doesn't matter if you have/haven't used the commands before )
7 |
8 | 1. ls
9 |
10 | 2. ls -a
11 |
12 | 3. pwd
13 |
14 | 4. git log
15 |
16 | You've seen the output for command 4. using other tools. Try and find some other places where you can see a similar output to the command for 4. Hint: Look on Github Desktop and github.com
--------------------------------------------------------------------------------
/components-1/docs/theme/styles.css:
--------------------------------------------------------------------------------
1 | /* Here's our design
2 | It's fonts, colours, and spacing.
3 | Every design is made of these basic building blocks.
4 | Change the values to make a completely new look */
5 |
6 | :root {
7 | /* fonts */
8 | --copy: "Lato";
9 | /* colours */
10 | --paper: hsla(260, 35%, 90%, 0.95);
11 | --ink: hsla(270, 8%, 20%, 0.98);
12 | --brand: hsla(0, 100%, 67%, 0.98);
13 | --shade: hsla(270, 8%, 20%, 0.1);
14 | /* spacing */
15 | --space: 2rem;
16 | --box: 18rem;
17 | --container: clamp(var(--box), calc(100vw - calc(var(--space) * 2)), 74rem);
18 | --finger: 48px;
19 | --line-length: 60ch;
20 | }
21 |
--------------------------------------------------------------------------------
/js1-wk1-eval/level-400.js:
--------------------------------------------------------------------------------
1 | let confession = `
2 | My secret is that I really like cake.
3 | Sometimes I sneak into the fridge at night and steal my housemate's cake
4 | `;
5 |
6 | const secret = "cake";
7 | confession = confession.replaceAll(secret,'x'.repeat(secret.length));
8 |
9 |
10 | // a) How many function calls are there in this file?
11 | // b) Explain what the expression confession.replaceAll(secret,'x'.repeat(secret.length)); is doing
12 | // c) How many inputs do we pass to replaceAll when we call it? How can you tell?
13 | // d) How any inputs do we pass to repeat when we call it? How can you tell?
14 | // e) What kind of statement is on line 7?
--------------------------------------------------------------------------------
/arrays/700.test.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // Below is a function countWords and a test that checks that it counts the words in a string correctly
3 | // At the moment, it isn't working. Try to reason about what happens when the function is called.
4 | // Check your prediction and explanation using the tests
5 | // Fix anything that doesn't work
6 |
7 | function countWords(text) {
8 | return text.split('').length;
9 | }
10 |
11 |
12 | test('should count the words in a string of text', () => {
13 |
14 | const text = "Here is a plain sentence with some information! Try to find the word count";
15 | expect(countWords(text)).toBe(14);
16 |
17 | });
--------------------------------------------------------------------------------
/playing-computer/example-2.js:
--------------------------------------------------------------------------------
1 | // EXAMPLE 2
2 | // now there will be a global frame, getFirstChar frame, getLastChar frame
3 | // one person will need to "play" one of these frames
4 |
5 | const alphabet = "abcdefghijklmnopqrstuvwxyz";
6 |
7 | function getFirstChar(str) {
8 | return str[0];
9 | }
10 |
11 | function getLastChar(str) {
12 | const lastCharIndex = str.length - 1;
13 | return str[lastCharIndex];
14 | }
15 |
16 | const firstChar = getFirstChar(alphabet);
17 | const lastChar = getLastChar(alphabet);
18 | console.log(`The first character in the alphabet is ${firstChar}`);
19 | console.log(`The last character in the alphabet is ${lastChar}`);
20 |
--------------------------------------------------------------------------------
/debugging-3/README.md:
--------------------------------------------------------------------------------
1 | # Debugging Part 3: React Components
2 |
3 | ## Install
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm install`
8 |
9 | ## Start
10 |
11 | In the project directory, you can run:
12 |
13 | ### `npm start`
14 |
15 | # Tasks
16 |
17 | In the folder `features` you will find a bunch of files that relate to the functionality of the different components. For each of the features you
18 | must read the scenario and fix/implement the required behavior
19 |
20 | ## Goal
21 |
22 | The goal here is to focus on fixing one small part functionality at a time. Trainees should:
23 | * fix one scenario
24 | * test it works
25 | * commit the changes
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/.questions/questions-8/index.md:
--------------------------------------------------------------------------------
1 | ## Predict -> Run -> Observe -> Explain
2 |
3 | In this task, you'll need to look at some code and predict what it does, **before running the program**
4 | This task will help you to develop your code reading skills.
5 |
6 |
7 | Look at the code in `0.js`: read it carefully and discuss it with your pair.
8 | What do you think the output will look like?
9 | If some parts of the code are unfamiliar, then look them up on MDN.
10 | Write your prediction below:
11 |
12 | {YOUR PREDICTION HERE}
13 |
14 | Once you've written your prediction, then commit your work. Now actually run `0.js` using node and write your answer below:
15 |
16 | {ACTUAL OBSERVED BEHAVIOUR}
--------------------------------------------------------------------------------
/questions-and-reviews/questions/2.md:
--------------------------------------------------------------------------------
1 | ## Predict -> Run -> Observe -> Explain
2 |
3 | In this task, you'll need to look at some code and predict what it does, **before running the program**
4 | This task will help you to develop your code reading skills.
5 |
6 |
7 | Look at the code in `2.js`: read it carefully and discuss it with your pair.
8 | What do you think the output will look like?
9 | If some parts of the code are unfamiliar, then look them up on MDN.
10 | Write your prediction below:
11 |
12 | {YOUR PREDICTION HERE}
13 |
14 | Once you've written your prediction, then commit your work. Now actually run `2.js` using node and write your answer below:
15 |
16 | {ACTUAL OBSERVED BEHAVIOUR}
--------------------------------------------------------------------------------
/crud/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/.questions/questions-6/index.md:
--------------------------------------------------------------------------------
1 | # Code comprehension
2 |
3 | Remember to **preview a markdown file** on your computer you can do:
4 | Ctr + Shift + V (Windows/Linux) or CMD + Shift + V (Mac)
5 |
6 | Consider the code in this program below:
7 |
8 | ```js
9 | function calculateSum(a, b) {
10 | return a + b;
11 | }
12 |
13 | function logSum(a, b) {
14 | console.log(a + b);
15 | }
16 |
17 | const result1 = calculateSum(10, 32);
18 | const result2 = logSum(10, 32);
19 | ```
20 |
21 | a) what will `result1` evaluate to? Explain your answer
22 | b) What will `result2` evaluate to? Explain your answer
23 | c) Try to summarise the main difference between `logSum` and `calculateSum`
24 |
25 |
26 | {YOUR ANSWERS HERE}
--------------------------------------------------------------------------------
/objects/300.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // What will happen when this program is run?
3 | // Check your prediction and explanation by running the program.
4 | // Fix anything that needs fixing.
5 |
6 | function checkLivesNearCYF(person) {
7 | const cyfLocations = ["Birmingham", "Cape Town", "Glasgow", "London", "Manchester"];
8 | return cyfLocations.includes(person.location);
9 | }
10 |
11 | const mo = {
12 | "name": "Mo",
13 | "city": "Glasgow",
14 | "focus": "React",
15 | };
16 |
17 | const sayed = {
18 | "name": "Sayed",
19 | "city": "Edinburgh",
20 | "focus": "SQL",
21 | }
22 |
23 | console.assert(checkLivesNearCYF(mo));
24 | console.assert(!checkLivesNearCYF(sayed));
25 |
--------------------------------------------------------------------------------
/arrays/800.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // We've seen for..of loops used for arrays.
3 | // Below we try to use it with a variable which isn't an array.
4 | // What do you think will get logged?
5 | // Don't run the code until you've predicted and explained the whole file.
6 | // Then check your prediction and explanation by running the code
7 |
8 | const sentence = "I really enjoy ice cream";
9 |
10 | for (const part of sentence) {
11 | console.log(part);
12 | }
13 |
14 | // What's the difference between what was written above, and what's below?
15 | // How will they behave differently?
16 |
17 | const parts = sentence.split(" ");
18 |
19 | for (const part of parts) {
20 | console.log(part);
21 | }
22 |
--------------------------------------------------------------------------------
/arrays/0.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // Try predicting and explaining what will get logged to the console when the code runs
3 | // To check your prediction, play computer using the Python Visualiser: https://pythontutor.com/render.html#mode=display
4 |
5 |
6 | const ingredients = ["olive oil","tomatoes",'garlic','onion', 'carrot'];
7 | let ingredientsCopy = ingredients;
8 | ingredientsCopy.push('pasta','salt','pepper');
9 | const otherRecipe = ["olive oil","tomatoes",'garlic','onion', 'carrot','pasta','salt','pepper'];
10 |
11 | console.log(ingredients === ingredientsCopy);
12 | console.log(ingredients === otherRecipe);
13 | console.log(otherRecipe === ingredientsCopy);
14 | console.log(otherRecipe.length === ingredients.length);
--------------------------------------------------------------------------------
/playing-computer/example-3.js:
--------------------------------------------------------------------------------
1 | // Assign people to the different frames you'll need...
2 |
3 | function convertToPercentage(decimalNumber) {
4 | const percentage = `${decimalNumber.toFixed(2) * 100}%`;
5 | return percentage;
6 | }
7 |
8 | function writeRatioWithPercentage(ratio) {
9 | const firstPart = Number(ratio[0]);
10 | const secondPart = Number(ratio[2]);
11 | const allParts = firstPart + secondPart;
12 |
13 | const firstPartPercentage = convertToPercentage(firstPart / allParts);
14 | const secondPartPercentage = convertToPercentage(secondPart / allParts);
15 | return `${firstPartPercentage} : ${secondPartPercentage}`;
16 | }
17 |
18 | const input = "2:3";
19 | console.log(writeRatioWithPercentage(input));
20 |
--------------------------------------------------------------------------------
/git-cli/branching.md:
--------------------------------------------------------------------------------
1 | # Checking out
2 |
3 | ## Learning objectives
4 |
5 | - [ ] Checkout a new branch using the Git CLI
6 |
7 | We need to create **branches** so we can start making changes independently from other branches.
8 | Let's use the Git CLI to do this:
9 |
10 | ## Steps 👣
11 |
12 | 1. Run the command `git branch --help` and check the description to see what happens when the `--list` option is used with the `git branch` command
13 |
14 | 2. Now run the command `git branch` and double check your current branch.
15 |
16 | 3. Run `git switch --create git-cli-workshop` to create a new branch called `git-cli-workshop` and switch to it.
17 |
18 | 4. Now double check you're on a new branch.
19 |
20 | [Next section](./recap.md)
21 |
--------------------------------------------------------------------------------
/questions-and-reviews/questions/0.md:
--------------------------------------------------------------------------------
1 | # Code comprehension
2 |
3 | Remember to **preview a markdown file** on your computer you can do:
4 | Ctrl + Shift + V (Windows/Linux) or CMD + Shift + V (Mac)
5 |
6 | Consider the code in this program below:
7 |
8 | ```js
9 | function calculateSum(a, b) {
10 | return a + b;
11 | }
12 |
13 | function logSum(a, b) {
14 | console.log(a + b);
15 | }
16 |
17 | const result1 = calculateSum(10, 32);
18 | const result2 = logSum(10, 32);
19 | ```
20 |
21 | a) what will `result1` evaluate to? Explain your answer
22 |
23 | b) What will `result2` evaluate to? Explain your answer
24 |
25 | c) Try to summarise the main difference between `logSum` and `calculateSum`
26 |
27 |
28 | {YOUR ANSWERS HERE}
29 |
--------------------------------------------------------------------------------
/dom-merge-conflict/tasks/conditional-rendering/src/profilePreview.js:
--------------------------------------------------------------------------------
1 | export function ProfilePreview(profile) {
2 | const preview = document.createElement("aside");
3 |
4 | const picture = document.createElement("img");
5 | picture.src = profile.pictureSrc;
6 | picture.alt = "";
7 | picture.dataset.testid = "profilePicture";
8 |
9 | const name = document.createElement("p");
10 | name.textContent = profile.name;
11 | name.dataset.testid = "profileName";
12 |
13 | const bio = document.createElement("p");
14 | bio.textContent = profile.bio;
15 | bio.dataset.testid = "profileBio";
16 |
17 | preview.appendChild(picture);
18 | preview.appendChild(name);
19 | preview.appendChild(bio);
20 |
21 | return preview;
22 | }
23 |
--------------------------------------------------------------------------------
/arrays/300.js:
--------------------------------------------------------------------------------
1 | // the head of an array is the first element of an array
2 | // the tail of an array is the last element of an array
3 |
4 |
5 | const alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
6 |
7 | function getHead(arr) {
8 | return arr.shift();
9 | };
10 |
11 | function getTail(arr) {
12 | return arr.pop();
13 | };
14 |
15 | console.log(`The first letter of the alphabet is ${getHead(alphabet)}`);
16 | console.log(`The last letter of the alphabet is ${getTail(alphabet)}`);
17 | console.log(alphabet.length);
18 | // Explain why alphabet length is now 24
19 | // How could we change the functions we defined to return the same values, but not change the length of alphabet?
20 |
--------------------------------------------------------------------------------
/polish/polish-checklist.md:
--------------------------------------------------------------------------------
1 | # Polish Checklist
2 |
3 | ## Lighthouse
4 |
5 | - [ ] Accessibility score is 100
6 | - [ ] Performance score is over 90
7 | - [ ] SEO score is 100
8 | - [ ] Best Practices score is 100
9 | - [ ] PWA is green
10 |
11 | ## Design
12 |
13 | - [ ] There is a coherent, unified colour scheme
14 | - [ ] The fonts are readable and use a defined scale
15 | - [ ] The spacing uses a defined system
16 | - [ ] Elements are aligned to a grid, or "mis" aligned _on purpose_
17 | - [ ] Images are good quality, sized correctly, and compressed efficiently
18 |
19 | ## Content
20 |
21 | - [ ] Everything is spelled correctly
22 | - [ ] There is no dummy text or template text
23 | - [ ] Your communication is clear and effective
24 | - [ ] The README is used wisely
25 |
--------------------------------------------------------------------------------
/questions-and-reviews/questions/6.md:
--------------------------------------------------------------------------------
1 | ## To err is human ( Trickier )
2 |
3 |
4 | Consider the function `printTimesTable` defined in `6.js`.
5 |
6 | This function should behave in the following manner:
7 | when invoked with a number, say 5, it should print the 5 times table, from 1 to 12, on each line:
8 |
9 |
10 | ```
11 | 1 * 5 = 5
12 | 2 * 5 = 10
13 | 3 * 5 = 15
14 | .
15 | .
16 | .
17 | 11 * 5 = 55
18 | 12 * 5 = 60
19 | ```
20 |
21 | However, the current implementation isn't working. In fact, it's actually throwing errors 😱!
22 | Try invoking the function in `6.js` and see if you can identify exactly what type of error is occuring and where it originated ( which line of code).
23 |
24 | Learning to love your error messages is an absolutely critical skill - best to get used to it early on.
25 |
--------------------------------------------------------------------------------
/debugging-2/100/app.js:
--------------------------------------------------------------------------------
1 | const form = document.getElementById("form");
2 | const usernameElement = document.getElementById("username");
3 | const passwordElement = document.getElementById("password");
4 |
5 | form.addEventListener("submit", (event) => {
6 | event.preventDefault();
7 | const username = usernameElement.val;
8 | const password = passwordElement.val;
9 | let usernameLength = username.length();
10 | let passwordLength = password.length();
11 |
12 | if (usernameLength > 4 && passwordLength > 4) {
13 | console.log("-------------------------");
14 | console.log("Success you have finished");
15 | console.log("-------------------------");
16 | } else {
17 | alert("Username must be at least 4 characters");
18 | alert("password must be at least 4 characters");
19 | }
20 | });
21 |
--------------------------------------------------------------------------------
/dom-merge-conflict/tasks/buttons-and-counter/instructions.md:
--------------------------------------------------------------------------------
1 | # Buttons and Counter
2 |
3 | This app currently features a button that increments a counter.
4 |
5 | ## Task for Person 1
6 |
7 | Create and switch to a new branch named `split-app-components`:
8 |
9 | ```
10 | git switch -c split-app-components
11 | ```
12 |
13 | Split the header, main into separate components. You should end up with an `app.js` file, a `header.js` file, and a `main.js` file in your `src` directory.
14 |
15 | ## Task for Person 2
16 |
17 | Create and switch to a new branch named `add-decrement-button`:
18 |
19 | ```
20 | git switch -c add-decrement-button
21 | ```
22 |
23 | Unskip the tests that describe the decrement button, then in the app add the new decrement button. Make sure to update the description of the app in the header.
24 |
--------------------------------------------------------------------------------
/objects/100.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // What will be logged by this code?
3 | // Check your prediction and explanation by running the code.
4 |
5 | const person1 = {
6 | "name": "Abdi",
7 | "location": "London",
8 | "id_number": 17,
9 | };
10 |
11 | const person2 = {
12 | "name": "Shadi",
13 | "job": "Software Engineer",
14 | "location": "London",
15 | "id_number": 28,
16 | };
17 |
18 | const person3 = person2;
19 |
20 | person3.location = "Manchester";
21 |
22 | console.log(person1.name);
23 | console.log(person2["name"]);
24 | console.log(person1.id_number > person2["id_number"]);
25 | console.log(person1.job);
26 | console.log(person1.location === person2.location);
27 | console.log(person1.location === person3.location);
28 | console.log(person2.location === person3.location);
29 |
--------------------------------------------------------------------------------
/objects/500.js:
--------------------------------------------------------------------------------
1 | // Fill in the code below so that the tests pass.
2 |
3 | const people = [];
4 |
5 | people.push({
6 | "name": "Saqib",
7 | "favourite_food": "salad",
8 | });
9 |
10 | people.push({
11 | "name": "Shadi",
12 | "favourite_food": "mango",
13 | });
14 |
15 | people.push({
16 | "name": "Navid",
17 | "favourite_food": "macarons",
18 | });
19 |
20 | const favouriteFoods = [];
21 |
22 | // TODO: Fill the array favouriteFoods with the favourite foods of each person.
23 | // You must not type the strings (i.e. your solution should not involve you typing the word "salad").
24 |
25 | console.assert(favouriteFoods.length === 3);
26 | console.assert(favouriteFoods.includes("salad"));
27 | console.assert(favouriteFoods.includes("mango"));
28 | console.assert(favouriteFoods.includes("macarons"));
29 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/git-cli/committing.md:
--------------------------------------------------------------------------------
1 | # Committing changes
2 |
3 | ## Learning objectives
4 |
5 | - [ ] commit changes from the staging area
6 |
7 |
8 | First, double check the state of your **Working Tree** and your **Staging Area**
9 | You should do this in two ways: use the VSCode **interface** and the Command line **interface**
10 |
11 | Now you can use [`git commit` command](https://www.w3schools.com/git/git_commit.asp?remote=github) to commit your changes.
12 |
13 | Read the docs above to create a commit using the `git commit` command.
14 |
15 |
16 | Check you successfully created a commit. Which command can you use?
17 |
18 |
19 | ## Next steps 👣
20 |
21 | Once you've done your first commit for `exercises/ex-1.js`, repeat these steps to solve the other exercises.
22 | Make sure you frequently swap the role of **driver** and **navigator**.
--------------------------------------------------------------------------------
/arrays/600.test.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | // list is an array that holds a mix of data types
4 | // we need to collect just the numbers and not the strings
5 | // before runnning the tests, make a prediction and explanation about what you expect the function to return
6 | // fix anything that doesn't work
7 |
8 | function collectNumbers(list) {
9 |
10 | const numbersOnly = [];
11 | for (const item of list) {
12 | if (item === 'string') {
13 | numbersOnly.push(item);
14 | }
15 | }
16 | return numbersOnly;
17 | }
18 |
19 | test('only collects numbers in the array',() => {
20 | const currentOutput = collectNumbers([10.1,"hello",6.1,8.0, 9.7, 10.1,"hi", 3.5,"oops"]);
21 | const targetOutput = [10.1,6.1,8.0, 9.7, 10.1, 3.5,];
22 |
23 | expect(currentOutput).toEqual(targetOutput);
24 | });
25 |
26 |
27 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/src/client/App.jsx:
--------------------------------------------------------------------------------
1 | import cyfLogo from "/cyf.svg";
2 |
3 | function App() {
4 | return (
5 | <>
6 |
Enter some text in the box below then click one of the buttons.
15 |
If everything works your message will be added below the box.
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
You typed:
25 |
26 |
27 |
--------------------------------------------------------------------------------
/arrays/readme.md:
--------------------------------------------------------------------------------
1 | ## Instructions
2 |
3 | This workshop aims to _check your understanding_.
4 |
5 | Each task will explain whether or not you should run the code.
6 |
7 | For each task, you can use [Data Groups Sprint 1 prep](https://programming.codeyourfuture.io/data-groups/sprints/1/prep/)
8 | to help you with the questions.
9 | You can also use documentation to look up any functions that are unfamiliar.
10 | Don't use ChatGPT or any other AI tool to help you.
11 |
12 | ## 🧰 Setup
13 |
14 | 1. Get into pairs or groups of up to three.
15 | 2. Make sure you have [a clone of the CYF-Workshops](https://github.com/CodeYourFuture/CYF-Workshops) repository on your local machine
16 |
17 | This workshop can be found here 👉 https://github.com/CodeYourFuture/CYF-Workshops/tree/main/arrays
18 | In this workshop, each file contains a different problem at a particular level.
19 |
20 | You should start this project at **Level 100** and then move through the levels in ascending order, **level 200**, **300** etc.
21 |
22 | ➡️ [Go to Level 100](https://github.com/CodeYourFuture/CYF-Workshops/blob/main/arrays/100.js)
23 |
--------------------------------------------------------------------------------
/objects/readme.md:
--------------------------------------------------------------------------------
1 | ## Instructions
2 |
3 | This workshop aims to _check your understanding_.
4 |
5 | Each task will explain whether or not you should run the code.
6 |
7 | For each task, you can use [Data Groups Sprint 2 prep](https://programming.codeyourfuture.io/data-groups/sprints/2/prep/)
8 | to help you with the questions.
9 | You can also use documentation to look up any functions that are unfamiliar.
10 | Don't use ChatGPT or any other AI tool to help you.
11 |
12 | ## 🧰 Setup
13 |
14 | 1. Get into pairs or groups of up to three.
15 | 2. Make sure you have [a clone of the CYF-Workshops](https://github.com/CodeYourFuture/CYF-Workshops) repository on your local machine
16 |
17 | This workshop can be found here 👉 https://github.com/CodeYourFuture/CYF-Workshops/tree/main/objects
18 | In this workshop, each file contains a different problem at a particular level.
19 |
20 | You should start this project at **Level 100** and then move through the levels in ascending order, **level 200**, **300** etc.
21 |
22 | ➡️ [Go to Level 100](https://github.com/CodeYourFuture/CYF-Workshops/blob/main/objects/100.js)
23 |
--------------------------------------------------------------------------------
/dom-merge-conflict/tasks/optimistic-rendering/instructions.md:
--------------------------------------------------------------------------------
1 | # Optimistic rendering
2 |
3 | This component is currently a like button, that updates once the promise from updateVote() is resolved and gives an error when it is rejected.
4 |
5 | ## Task for Person 1
6 |
7 | Create and switch to a new branch named `render-like-optimistically`:
8 |
9 | ```
10 | git switch -c render-like-optimistically
11 | ```
12 |
13 | Render the like optimistically, that is change the component to a liked state before the promise is resolved. If the promise rejects, then render the component back to its old state. Unskip the tests that describe optimistic rendering to test your implementation.
14 |
15 | ## Task for Person 2
16 |
17 | Create and switch to a new branch named `change-button-appearance`:
18 |
19 | ```
20 | git switch -c change-button-appearance
21 | ```
22 |
23 | Change the button content to an image that has a source of "/media/like". When liked, the component should render the image that has a source of "/media/liked" Be sure to add appropriate alt text. Unskip the tests that describe the like as a image to test your implementation.
24 |
--------------------------------------------------------------------------------
/template/readme.md:
--------------------------------------------------------------------------------
1 | # Workshop Name
2 |
3 | Replace this readme with the requirements for your workshop
4 |
5 | ## Learning Objectives
6 |
7 | ```objectives
8 | - [ ] Use the Teach Tech Together guide to construct your objectives
9 | - [ ] Limit the objectives to 3-5 items
10 | - [ ] Write objectives you can measure
11 | ```
12 |
13 | ## Requirements
14 |
15 | Explain the requirements of the workshop. You might want to talk about goals here. You might want to use formal specifications like Given/When/Then. It's ok for requirements to be in different formats. We want trainees to learn to interpret requirements in many settings and expressions. Just make sure your workshop is active and not a lecture.
16 |
17 | Always write your workshop in a readme.md in a folder with the same name as the workshop. This makes it easy to find and easy to show on the curriculum website.
18 |
19 | ## Acceptance Criteria
20 |
21 | - I have provided clear success criteria
22 | - These might be related to the objectives and the requirements
23 | - I have given some simple, clear ways for trainees to evaluate their work
24 | - I have run Lighthouse and my Accessibility score is 100
25 |
--------------------------------------------------------------------------------
/git-cli/recap.md:
--------------------------------------------------------------------------------
1 |
2 | # 📲 Recall
3 |
4 | ## Learning objectives
5 |
6 | - [ ] check the **status** of the working tree and the staging area
7 |
8 | Let's recall the git commit workflow:
9 |
10 | 1. We make **changes** to our source code **in the working tree**.
11 | 2. We then **stage** our changes.
12 | 3. We then **commit** our **staged changes**.
13 |
14 | The **working tree** is a key concept in Git.
15 | It is the directory with the files and folders that we can view and edit.
16 | When we're making changes to our code in VSCode, we're making changes in the working tree.
17 |
18 | To understand what is happening in this workshop, you will need to continually check the **status** of the **Working Tree** and the **Staging Area**.
19 |
20 | So let's start with a check...
21 |
22 | ## 👣 Steps
23 |
24 | 1. Run the command `git status --help` and check the name and description of this command (Press `q` to quit)
25 | 2. Open the repo you cloned down during setup, and run the command `git status`
26 | 3. Discuss the log you get from running the command `git status` - what do you think this tells you at the moment?
27 |
28 |
29 | [Next section](./staging.md)
30 |
--------------------------------------------------------------------------------
/dom-merge-conflict/tasks/processing-page/instructions.md:
--------------------------------------------------------------------------------
1 | # Processing Page
2 |
3 | This component currently features a processing page which changes after the completion of some promises.
4 | Below you can see how the functions that return promises depend on each other. "→" means that the result of the previous promise is passed into the next function:
5 |
6 | ```
7 | verifyServersideKey → verifyLocalKey
8 | ```
9 |
10 | ```
11 | verifyBrowser → verifyVersion
12 | ```
13 |
14 | ```
15 | verifyStableConnection
16 | ```
17 |
18 | ## Task for Person 1
19 |
20 | Create and switch to a new branch named `add-progress-bar`:
21 |
22 | ```
23 | git switch -c add-progress-bar
24 | ```
25 |
26 | Unskip the tests describing the progress bar. Then implement a progress bar underneath the current message that increments its value for each promise resolved.
27 |
28 | ## Task for Person 2
29 |
30 | Create and switch to a new branch named `change-promise-logic`:
31 |
32 | ```
33 | git switch -c change-promise-logic
34 | ```
35 |
36 | Unskip the tests describing promises running concurrently. Update the component so that the operations that are independent of each other run concurrently.
37 |
--------------------------------------------------------------------------------
/react-pokedex/readme.md:
--------------------------------------------------------------------------------
1 | # Pokedex
2 |
3 | This is a staged workshop which can be run over multiple weeks. Trainees will work on their own Pokedex app that displays information about Pokemon. The workshops will focus on different aspects of React, embedding concepts covered in the prep work.
4 |
5 | ## Requirements
6 |
7 | **You need to complete the prep work for this sprint before starting this workshop.** If you haven't done the prep, you've made an error in judgement. You will not be able to participate in this workshop effectively.
8 |
9 | The prep is on https://curriculum.codeyourfuture.io/react.
10 |
11 | There is a sample blank React app in the `pokedex` folder for mentors to work with. Trainees should work on their own Pokedex app in their own Module coursework repo. (Probably something like [Username/Module-React](https://github.com/CodeYourFuture/Module-React).)
12 |
13 | ## Workshop 1 : Components, props, and state
14 |
15 | /pokedex-1/readme.md
16 |
17 | ## Workshop 2 : Events and interaction
18 |
19 | /pokedex-2/readme.md
20 |
21 | ## Workshop 3 : Effects and forms
22 |
23 | /pokedex-3/readme.md
24 |
25 | ## Workshop 4 : Routing
26 |
27 | /pokedex-4/readme.md
28 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite + Express + Vitest
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. It's got a server set up with Express and a test runner set up with Vitest, but it isn't a full production setup. The aim of this template is to get out of your way and let you focus on writing your city guide app.
4 |
5 | Write your Express server in `server/server.js` and your React app in `client/App.jsx`. You can use `index.html` for any static content you want to serve.
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | - [Vitest](https://vitejs.dev/guide/) for testing
10 | - [Express](https://expressjs.com/) for a server
11 | - [TailwindCSS](https://tailwindcss.com/) for styling (with PostCSS for optimisation)
12 |
13 | ### Resources
14 |
15 | https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
16 |
--------------------------------------------------------------------------------
/debugging-3/src/App.css:
--------------------------------------------------------------------------------
1 |
2 | body {
3 | margin:0;
4 | font-family:arial,tahoma,sans-serif;
5 | font-size:12px;
6 | font-weight:normal;
7 | direction:ltr;
8 | background:white;
9 | }
10 | select {
11 | appearance: none;
12 | }
13 |
14 | form {
15 | margin:10% auto 0 auto;
16 | padding:30px;
17 | width:400px;
18 | height:auto;
19 | overflow:hidden;
20 | background:white;
21 | border-radius:10px;
22 | }
23 |
24 | form label {
25 | font-size:14px;
26 | color:darkgray;
27 | cursor:pointer;
28 | }
29 |
30 | form label,
31 | form input {
32 | float:left;
33 | clear:both;
34 | }
35 |
36 | form input, form select {
37 | margin:15px 0;
38 | padding:15px 10px;
39 | width:100%;
40 | outline:none;
41 | border:1px solid #bbb;
42 | border-radius:20px;
43 | display:inline-block;
44 | -webkit-box-sizing:border-box;
45 | -moz-box-sizing:border-box;
46 | box-sizing:border-box;
47 | -webkit-transition:0.2s ease all;
48 | -moz-transition:0.2s ease all;
49 | -ms-transition:0.2s ease all;
50 | -o-transition:0.2s ease all;
51 | transition:0.2s ease all;
52 | }
53 |
54 | form input[type=text]:focus,
55 | form input[type="password"]:focus {
56 | border-color:cornflowerblue;
57 | }
58 |
--------------------------------------------------------------------------------
/components-1/docs/footer/footer.txt:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components-2/docs/card/card.js:
--------------------------------------------------------------------------------
1 | const Card = ({ component, emoji, resource }, type, path) => {
2 | //FIRST, DECLARE VARIABLES
3 |
4 | // first we must create a DOM node - you could also create a Fragment
5 | const card = document.createElement("li");
6 | let href = resource;
7 | let content = "";
8 | let heading = component;
9 |
10 | // NEXT, RUN LOGIC
11 |
12 | // if a path is passed, we override our resource from the data
13 | if (path) href = path + component;
14 | // if we're showing an emoji card, it's just a span
15 | if (type === "emoji") {
16 | content = `${emoji}`;
17 | } else {
18 | // but otherwise, we are pulling an object to show the file (a bit weird but roll with it for now)
19 | heading += ` ${type.toUpperCase()}`;
20 | content = ``;
21 | }
22 | //now add the html to our created list node
23 | card.innerHTML = `
24 |
25 | ${content}
26 | `;
27 |
28 | // LAST, RETURN RESULT
29 |
30 | return card;
31 | };
32 |
33 | export default Card;
34 |
--------------------------------------------------------------------------------
/components-2/docs/footer/footer.txt:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/goblin-breakdown/contact/completed.js:
--------------------------------------------------------------------------------
1 | // Retrieve the JSON object containing the UK address and phone number
2 | const getContactDetails = async (api) => {
3 | try {
4 | const response = await fetch(api);
5 | return response.json();
6 | } catch (error) {
7 | console.error("Error:", error);
8 | }
9 | };
10 |
11 | // Format the address in the desired UK address format
12 | const formatAddress = (address) => address.replace(/,/g, "\n");
13 |
14 | // Format the phone number in the desired UK phone number format
15 | const formatPhoneNumber = (phoneNumber) =>
16 | phoneNumber.replace(/^\+44\s/, "(0)");
17 |
18 | // Generate HTML code to display the formatted address and phone number on the page
19 | const renderContactDetails = async (api, templateSelector) => {
20 | const { address, phone } = await getContactDetails(api);
21 | const template = document
22 | .querySelector(templateSelector)
23 | .content.cloneNode(true);
24 |
25 | template.querySelector("#address").textContent = formatAddress(address);
26 | template.querySelector("#phone").textContent = formatPhoneNumber(phone);
27 |
28 | document.body.appendChild(template);
29 | };
30 |
31 | renderContactDetails("./data.json", "#contact-template");
32 |
--------------------------------------------------------------------------------
/breakdown/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CYF Random Product Factory
6 |
38 |
39 |
40 |
CYF Random Product Factory
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/js1-wk1-eval/readme.md:
--------------------------------------------------------------------------------
1 | # Learning to evaluate your understanding
2 |
3 | ## 🎓 Instructions
4 |
5 | This workshop aims to _check your understanding_.
6 |
7 | Each task will explain whether or not you should run the code.
8 |
9 | - For each task, use your [prep](https://programming.codeyourfuture.io/structuring-data/prep) [materials](https://programming.codeyourfuture.io/structuring-data/sprints/1/prep/) to help you with the questions.
10 | - You can also use documentation to look up any functions that are unfamiliar.
11 | - Don't use ChatGPT or any other AI tool to help you. We are practising how to check our own understanding. You are finding out what you need to work on. Make notes as you go along to help you focus what to work on in study group.
12 |
13 | ## 🧰 Setup
14 | 👉 This workshop lives on [CYF-Workshops on GitHub](https://github.com/CodeYourFuture/CYF-Workshops/tree/main/js1-wk1-eval)
15 |
16 | 1. Get into pairs or groups of up to three.
17 | 2. Make sure you have [a clone of the CYF-Workshops](https://github.com/CodeYourFuture/CYF-Workshops) repository on your local machine
18 |
19 | Each file contains a different problem at a particular level. Start this project at **Level 100** and then move up through the levels: **level 200**, **300** ...
20 |
21 | 🏁 [Go to Level 100](https://github.com/CodeYourFuture/CYF-Workshops/blob/main/js1-wk1-eval/level-100.js)
22 |
--------------------------------------------------------------------------------
/understanding-java/DnsResolver.java:
--------------------------------------------------------------------------------
1 | import java.net.InetAddress;
2 | import java.net.UnknownHostException;
3 |
4 | class DnsResolver {
5 | public static void main(String[] args) {
6 | if (args.length != 1) {
7 | System.err.printf("Expected exactly one argument, but got %d%n", args.length);
8 | System.exit(1);
9 | }
10 | String host = args[0];
11 |
12 | String[] parts = host.split("\\.");
13 | System.out.printf("The top-level domain of the host %s is %s%n", host, parts[parts.length - 1]);
14 |
15 | try {
16 | InetAddress[] ipAddresses = InetAddress.getAllByName(host);
17 | if (ipAddresses.length == 0) {
18 | System.out.printf("The host %s did not resolve to any IP addresses%n", host);
19 | } else {
20 | String pluralSuffix = ipAddresses.length == 1 ? "" : "es";
21 | System.out.printf("The host %s resolved to the following IP address%s:%n", host, pluralSuffix);
22 | }
23 | for (InetAddress ipAddress : ipAddresses) {
24 | System.out.println(ipAddress.getHostAddress());
25 | }
26 | } catch (UnknownHostException e) {
27 | System.err.printf("Failed to resolve %s: %s%n", host, e.getMessage());
28 | System.exit(1);
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/objects/400.js:
--------------------------------------------------------------------------------
1 | // Predict and explain...
2 | // What will happen when this program is run?
3 | // Check your prediction and explanation by running the program.
4 | // Fix anything that needs fixing.
5 |
6 | function printSaladRecipe(forPerson) {
7 | const saladRecipe = {
8 | "name": "salad",
9 | "ingredients": ["lettuce", "corn", "carrots", "cucumber"],
10 | "rating_out_of_10": 8,
11 | "steps": [
12 | "Shred the lettuce",
13 | "Cut the carrots into small pieces",
14 | "Slice the cucumber",
15 | "Mix all the vegetables together in a bowl",
16 | ]
17 | };
18 |
19 | if (forPerson.eatsMeat) {
20 | saladRecipe.push("chicken");
21 | saladRecipe.steps.push("Mix in the chicken");
22 | }
23 |
24 | console.log(`For ${forPerson.name} to make ${saladRecipe.name}:`);
25 | console.log("Get:");
26 | for (const ingredient of saladRecipe.ingredients) {
27 | console.log(` * ${ingredient}`);
28 | }
29 | for (const step of saladRecipe.steps) {
30 | console.log(step);
31 | }
32 | }
33 |
34 | const person1 = {
35 | "name": "Ola",
36 | "eatsMeat": true,
37 | };
38 |
39 | const person2 = {
40 | "name": "Steve",
41 | "eatsMeat": false,
42 | };
43 |
44 | printSaladRecipe(person1);
45 | console.log("");
46 | printSaladRecipe(person2);
47 |
--------------------------------------------------------------------------------
/debugging-2/300/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Debugging in JavaScript 300
5 |
6 |
7 |
8 |
9 |
10 |
11 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/git-cli/staging.md:
--------------------------------------------------------------------------------
1 | # Staging changes
2 |
3 |
4 | ## Learning objectives
5 |
6 | - [ ] stage changes in our working directory
7 | - [ ] check the state of the working directory and the staging area
8 |
9 |
10 | ## Updating the working tree
11 |
12 | Let's make a change to the current working directory and then stage that change.
13 |
14 |
15 | ### Steps 👣
16 |
17 | 1. Open this project in VSCode.
18 | 2. Go to `exercises/ex-1.js` and try the first exercise.
19 |
20 | You will have made a change to the **working tree**.
21 |
22 | 3. Now go to the Version Control tab in VSCode and look for your change to the Working Tree.
23 |
24 |
25 | ## Staging area 🔴🟢
26 |
27 | We need to tell Git which changes we want to include in our next commit.
28 |
29 | We do this by promoting these changes files to the **staging area**.
30 |
31 | 🔑 **Staging area** is the space to prepare (stage) the changes that will be in the next commit.
32 |
33 | This is useful because we don't always want to commit all of our changes at the same time.
34 |
35 |
36 | ### Steps 👣
37 |
38 | 1. Use `git status` command to check the state of your **Working Tree** and your **Staging Area**. What does `git status` tell you?
39 | 2. Now **stage** this change using the `git add` command to stage your change to `exercises/ex-1.js`
40 | 3. Finally, check the status of the **Working Tree** and the **Staging Area**.
41 |
42 |
43 |
44 | [Next section](./checkpoint.md)
45 |
--------------------------------------------------------------------------------
/micro-front-end/assets/custom-images/site-logo/site-logo-small.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components-2/docs/footer/footer.js:
--------------------------------------------------------------------------------
1 | const Footer = (hasGithub) => {
2 | const footer = document.createElement("footer");
3 | footer.classList.add("footer");
4 | if (hasGithub) {
5 | footer.innerHTML = `
6 |
9 | Find us on GitHub`;
10 | }
11 | return footer;
12 | };
13 |
14 | export default Footer;
15 |
--------------------------------------------------------------------------------
/components-2/data/components.js:
--------------------------------------------------------------------------------
1 | const components = [
2 | {
3 | component: "base",
4 | emoji: "👟",
5 | resource: "https://smacss.com/book/type-base/",
6 | },
7 | {
8 | component: "card",
9 | emoji: "📇",
10 | resource: "https://www.nngroup.com/articles/cards-component/",
11 | },
12 | {
13 | component: "footer",
14 | emoji: "🦶",
15 | resource: "https://www.uxpin.com/studio/blog/footer-design-basics/",
16 | },
17 | {
18 | component: "header",
19 | emoji: "💆",
20 | resource:
21 | "https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html",
22 | },
23 | {
24 | component: "layout",
25 | emoji: "🍱",
26 | resource: "https://gridbyexample.com/",
27 | },
28 | {
29 | component: "main",
30 | emoji: "📰",
31 | resource:
32 | "https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/",
33 | },
34 | {
35 | component: "menu",
36 | emoji: "🗄️",
37 | resource:
38 | "https://www.w3.org/community/webed/wiki/Creating_multiple_pages_with_navigation_menus",
39 | },
40 | {
41 | component: "reset",
42 | emoji: "🗑️",
43 | resource: "https://www.joshwcomeau.com/css/custom-css-reset/",
44 | },
45 | {
46 | component: "theme",
47 | emoji: "🎨",
48 | resource:
49 | "https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676",
50 | },
51 | ];
52 |
53 | export default components;
54 |
--------------------------------------------------------------------------------
/collective-job-hunting/readme.md:
--------------------------------------------------------------------------------
1 | # Collective Job Hunting 💼
2 |
3 | Our goal in this workshop is to look for jobs together as a community. By working together, we can motivate and support each other in our collective goal of finding new jobs in tech. In this workshop, we will focus on the following objectives:
4 |
5 |
6 | ## Learning Objectives
7 |
8 | ```objectives
9 | - [ ] Search for jobs using different online platforms
10 | - [ ] Locate the Collective Job Research form
11 | - [ ] Identify key company information in a job advert
12 | - [ ] Add 1 job role to the Collective Job Research form
13 | - [ ] Check the suitability of the found job roles
14 | ```
15 |
16 | ## Set up ⚙️
17 | - Split up into groups of no more than 5
18 |
19 | ## Job hunting 🔍
20 |
21 | - Set a whole class timer for 25 mins ⏱️
22 | - Split the group up into teams of no more than 5 people
23 |
24 |
25 | 1. Find the Collective Job Research form.
26 | 1. Each team should select no more than 3 different platforms to use based on the first tab of the Collective Job Research form. Each team should use a different set of platforms than the other team.
27 | 1. Search for jobs using appropriate keywords and filters.
28 | 1. Identify a suitable job role that you want to apply for.
29 | 1. Find the job opening advertised on the company website if possible.
30 | 1. Identify key company information in the job advert.
31 | 1. Add the link and information about the vacancy to the Collective Job Research spreadsheet.
32 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/react-pokedex/pokedex/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | @media (prefers-color-scheme: light) {
58 | :root {
59 | color: #213547;
60 | background-color: #ffffff;
61 | }
62 | a:hover {
63 | color: #747bff;
64 | }
65 | button {
66 | background-color: #f9f9f9;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/git-cli/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## 💡 Purpose
4 |
5 | Currently, you're using the 🎮 VSCode **interface** to interact with Git.
6 | However, we can often use different **interfaces** to carry out the same tasks.
7 |
8 | In this workshop, you will use the Git CLI - Command Line **Interface** to interact with Git.
9 | In addition, you will:
10 |
11 | - Consolidate existing knowledge of Git
12 | - Develop your **mental model** of the working tree and the staging area
13 | - Learn to use basic Git CLI commands
14 |
15 |
16 | ## 📝 Learning objectives
17 |
18 | During this session, with the Git CLI, you will:
19 |
20 | ```objectives
21 | - [ ] Research essential git commands commands for creating a commit
22 | - [ ] Inspect the status of the working directory and staging area
23 | - [ ] Checkout a new branch
24 | - [ ] Add changes from the working tree to the staging area
25 | - [ ] Commit changes from the staging area
26 | ```
27 |
28 | ## 🧰 Setup
29 |
30 | Work in pairs:
31 |
32 | - Assign one person to be **driver** (the driver will control the keyboard and do the typing)
33 | - Assign another person to be **navigator** (the navigator will read out the questions and explain how to tackle the problems).
34 |
35 | The **driver** must ensure they have a clone of this repo on their local machine.
36 |
37 |
38 | ## 📜 Instructions
39 |
40 | Follow the link to the readmes for further instructions:
41 |
42 | Head to the [Starting point](https://github.com/CodeYourFuture/CYF-Workshops/blob/main/git-cli/branching.md) for more instructions
43 |
--------------------------------------------------------------------------------
/arrays/900.js:
--------------------------------------------------------------------------------
1 | // Below, we have two functions which have the same aim.
2 | // Both functions take a word as a parameter.
3 | // If the function has been called with that word before (regardless of case), the previous version of the word is returned.
4 | // So if you called the function with "hello", then "HELLO", the second call will return "hello".
5 | // If the word has not been used before, it will just be returned as-is.
6 |
7 | // One of these functions has side-effects.
8 | // When you call it, it does something other than just returning a value based only on its parameters.
9 | //
10 | // The other doesn't have side effects.
11 | // When you call it with the same arguments, it always does exactly the same thing,
12 | // and you can see everything it does in its return value.
13 | //
14 | // Which function has side-effects? Which doesn't?
15 | // Try to write tests for both functions.
16 | // Which was easier to test? What issues did you run into writing tests?
17 |
18 | const previousWords = [];
19 |
20 | function getPreviousCaseOfWordOne(word) {
21 | for (const previousWord of previousWords) {
22 | if (previousWord.toLowerCase() === word.toLowerCase()) {
23 | return previousWord;
24 | }
25 | }
26 | previousWords.push(word);
27 | return word;
28 | }
29 |
30 | function getPreviousCaseOfWordTwo(word, words) {
31 | for (const previousWord of words) {
32 | if (previousWord.toLowerCase() === word.toLowerCase()) {
33 | return previousWord;
34 | }
35 | }
36 | return word;
37 | }
38 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "CYF React and Express Template",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev:client": "vite --open",
8 | "dev:server": "node src/server/index.js",
9 | "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\" \"npm run test\"",
10 | "build:client": "vite build --outDir dist/client",
11 | "build:server": "vite build --outDir dist/server src/server/index.js",
12 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
13 | "preview": "vite preview",
14 | "test": "vitest --coverage --ui"
15 | },
16 | "dependencies": {
17 | "express": "^4.21.2",
18 | "react": "^18.2.0",
19 | "react-dom": "^18.2.0"
20 | },
21 | "devDependencies": {
22 | "@testing-library/jest-dom": "^6.1.5",
23 | "@testing-library/react": "^14.1.2",
24 | "@types/node": "^20.10.4",
25 | "@types/react": "^18.2.43",
26 | "@types/react-dom": "^18.2.17",
27 | "@vitejs/plugin-react-swc": "^3.5.0",
28 | "@vitest/coverage-v8": "^1.0.4",
29 | "@vitest/ui": "^1.0.4",
30 | "autoprefixer": "^10.4.16",
31 | "concurrently": "^8.2.2",
32 | "eslint": "^8.55.0",
33 | "eslint-plugin-react": "^7.33.2",
34 | "eslint-plugin-react-hooks": "^4.6.0",
35 | "eslint-plugin-react-refresh": "^0.4.5",
36 | "jsdom": "^23.0.1",
37 | "postcss": "^8.4.32",
38 | "tailwindcss": "^3.3.6",
39 | "vite": "^5.4.6",
40 | "vitest": "^1.0.4"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/debugging-2/200/app.js:
--------------------------------------------------------------------------------
1 | const form = document.getElementById("form");
2 | const usernameElement = document.getElementById("username");
3 | const passwordElement = document.getElementById("password");
4 |
5 | function helpMe(field, element) {
6 | console.log(field, element);
7 | console.log(typeof element);
8 | }
9 |
10 | form.addEventListener("submit", (event) => {
11 | try {
12 | // If this doesn't appear in the console logs then it has never been called
13 | event.preventDefault();
14 | helpMe("form", form);
15 | helpMe("usernameElement", usernameElement);
16 | helpMe("passwordElement", passwordElement);
17 |
18 | const username = usernameElement.value;
19 | helpMe("username", username);
20 |
21 | const password = passwordElement.value;
22 | helpMe("password", password);
23 |
24 | let usernameLength = username.length;
25 | helpMe("usernameLength", usernameLength);
26 |
27 | let passwordLength = password.length;
28 | helpMe("passwordLength", passwordLength);
29 |
30 | if (usernameLength >= 4 && passwordLength >= 4) {
31 | console.log("-------------------------");
32 | console.log("Success you have finished");
33 | console.log("-------------------------");
34 | } else {
35 | if (usernameLength < 4) {
36 | alert("Username must be at least 4 characters");
37 | }
38 | if (passwordLength < 4) {
39 | alert("password must be at least 4 characters");
40 | }
41 | }
42 | } catch (e) {
43 | console.log("Exception was raised");
44 | console.log(e);
45 | }
46 | });
47 |
--------------------------------------------------------------------------------
/components-1/together.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Together Separately
7 |
8 |
9 |
10 |
11 |
12 |
13 | Skip to main
14 |
17 |
36 |
37 |
38 |
41 |
42 |
43 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/components-2/together.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Together Separately
7 |
8 |
9 |
10 |
11 |
12 |
13 | Skip to main
14 |
17 |
36 |
37 |
38 |
41 |
42 |
43 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/dad-joke/readme.md:
--------------------------------------------------------------------------------
1 | # Joke Fetcher App
2 |
3 | This simple app fetches jokes from an API and displays them. Here are some ways we could improve it:
4 |
5 | ## Acceptance criteria
6 |
7 | > 1. Given a Joke API
8 | > When the page first loads
9 | > Then a random joke will be displayed on the page
10 |
11 | > 2. Given a joke has already been fetched and displayed
12 | > When the user clicks the "Get New Joke" button
13 | > Then a new random joke will be fetched and replace the existing one
14 |
15 | > 3. Given there is a slow network
16 | > When the page first loads
17 | > Then a loading message will be displayed...
18 |
19 | ## 🐛 Debug
20 |
21 | ❗ Commit after completing each task ❗
22 |
23 | 1. Separate code into separate files - HTML, JS, CSS
24 | 2. Fix functionality for acceptance criterion 1 only
25 |
26 | Navigator:
27 |
28 | - Describe out loud the current behaviour in the user interface
29 | - Describe what you should expect to see given the acceptance criterion
30 | - Step through the code to make sense of where the bug is coming from
31 |
32 | 3. Fix functionality for acceptance criterion 2 only
33 |
34 | Navigator:
35 |
36 | - Describe out loud the current behaviour in the user interface
37 | - Describe what you should expect to see given the acceptance criterion
38 | - Step through the code to make sense of where the bug is coming from
39 |
40 | 4. Check all acceptance criteria are working ( including 3 )
41 |
42 | ## Refactor 🧹
43 |
44 | 1. Refactor `getJokes` to use async/await
45 |
46 | ## Challenge 💪
47 |
48 | 1. Try implementing a loading spinner using CSS
49 |
--------------------------------------------------------------------------------
/dom-merge-conflict/tasks/conditional-rendering/instructions.md:
--------------------------------------------------------------------------------
1 | # Conditional Rendering
2 |
3 | This component is currently a profile preview showing a person's image and name.
4 | The argument profile is an object of form:
5 |
6 | ```
7 | {
8 | pictureSrc : String,
9 | name : String,
10 | bio : String
11 | }
12 | ```
13 |
14 | ## Task for Person 1
15 |
16 | Create and switch to a new branch named `preview-not-available`:
17 |
18 | ```
19 | git switch -c preview-not-available
20 | ```
21 |
22 | Unskip the tests describing the available option. Update the component so that it takes an optional options argument which is an object that contains the available property. Check the tests to see how the `options` object is passed to the `ProfilePreview` component. When this property is false, the preview should not render any information other than a text saying "Profile preview unavailable". When this property is true, continue to render the profile as before. By default, available should be true.
23 |
24 | ## Task for Person 2
25 |
26 | Create and switch to a new branch named `preview-short-form`:
27 |
28 | ```
29 | git switch -c preview-short-form
30 | ```
31 |
32 | Unskip the tests describing the short form option. Update the component so that it takes an optional options argument which is an object that contains the shortForm property. Check the tests to see how the `options` object is passed to the `ProfilePreview` component. When this property is false, continue to render all the profile information. When this property is true, render all the profile information other than the bio. By default shortForm should be false.
33 |
--------------------------------------------------------------------------------
/triangles/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## Learning objectives
4 |
5 | ```objectives
6 | - [ ] Formulate acceptance criteria from a problem statement
7 | - [ ] Create assertions to check different test cases
8 | - [ ] Implement functionality using assertions
9 | - [ ] Interpret documentation on JavaScript logical operators
10 | ```
11 |
12 | ## 🧰 Setup
13 |
14 |
15 | In this workshop, you'll need to:
16 | 1. Split up into groups of 4
17 |
18 | ## Context
19 |
20 | To begin, you'll need some context.
21 |
22 | Use this page 👉 https://www.mathsisfun.com/triangle.html to get the names of different triangles depending on their three side lengths.
23 | _There should be 3 different names. Check with each other that you all understand what these names mean._
24 |
25 |
26 | ## Problem statement
27 |
28 | In this workshop, you'll need to implement a function that takes **the three side lengths of a triangle** and returns a string indicating whether it is **`"equilateral"`**, **`"isoceles"`** or **`"scalene"`**
29 |
30 | ## Acceptance criteria
31 |
32 |
33 | First, name the function according to the problem statement. The name should be semantic. It should convey what the function does.
34 | Then set out acceptance criteria for your function in the format shown below:
35 |
36 | _Given_ ...
37 | _When_ ...
38 | _Then_ ...
39 |
40 | ## 🧪 Write your first assertion
41 |
42 | Write your first assertion using `console.assert` to check the functionality. You can write your code in `triangles.js`
43 |
44 | ## 🧱 Start building up your functionality
45 |
46 | Once you've got your first assertion down, you'll need to start building out your functionality for this case.
--------------------------------------------------------------------------------
/debugging-2/100/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 | body {
5 | background-color: #F9FAFB;
6 | font-family: "Open Sans", sans-serif;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | min-height: 100vh;
11 | margin: 0;
12 | }
13 | .container {
14 | background-color: #fff;
15 | border-radius: 5px;
16 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
17 | width: 400px;
18 | }
19 | h2 {
20 | text-align: center;
21 | margin: 0 0 20px;
22 | }
23 | .form {
24 | padding: 30px 40px;
25 | }
26 | .form-control {
27 | margin-bottom: 10px;
28 | padding-bottom: 20px;
29 | position: relative;
30 | }
31 | .form-control label {
32 | color: #777;
33 | display: block;
34 | margin-bottom: 5px;
35 | }
36 | .form-control input {
37 | border: 2px solid #F0F0F0;
38 | border-radius: 4px;
39 | display: block;
40 | width: 100%;
41 | padding: 10px;
42 | font-size: 14px;
43 | }
44 | .form-control.success input {
45 | border-color: #2ECC71;
46 | }
47 | .form-control.error input {
48 | border-color: #E74C3C;
49 | }
50 | .form-control span {
51 | color: #E74C3C;
52 | position: absolute;
53 | bottom: 0;
54 | left: 0;
55 | visibility: hidden;
56 | }
57 | .form-control.error span {
58 | visibility: visible;
59 | }
60 | .form button {
61 | cursor: pointer;
62 | background-color: #3498DB;
63 | border: 2px solid #3498DB;
64 | border-radius: 4px;
65 | color: #fff;
66 | display: block;
67 | font-size: 16px;
68 | padding: 10px;
69 | margin-top: 20px;
70 | width: 100%;
71 | }
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/debugging-2/200/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 | body {
5 | background-color: #F9FAFB;
6 | font-family: "Open Sans", sans-serif;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | min-height: 100vh;
11 | margin: 0;
12 | }
13 | .container {
14 | background-color: #fff;
15 | border-radius: 5px;
16 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
17 | width: 400px;
18 | }
19 | h2 {
20 | text-align: center;
21 | margin: 0 0 20px;
22 | }
23 | .form {
24 | padding: 30px 40px;
25 | }
26 | .form-control {
27 | margin-bottom: 10px;
28 | padding-bottom: 20px;
29 | position: relative;
30 | }
31 | .form-control label {
32 | color: #777;
33 | display: block;
34 | margin-bottom: 5px;
35 | }
36 | .form-control input {
37 | border: 2px solid #F0F0F0;
38 | border-radius: 4px;
39 | display: block;
40 | width: 100%;
41 | padding: 10px;
42 | font-size: 14px;
43 | }
44 | .form-control.success input {
45 | border-color: #2ECC71;
46 | }
47 | .form-control.error input {
48 | border-color: #E74C3C;
49 | }
50 | .form-control span {
51 | color: #E74C3C;
52 | position: absolute;
53 | bottom: 0;
54 | left: 0;
55 | visibility: hidden;
56 | }
57 | .form-control.error span {
58 | visibility: visible;
59 | }
60 | .form button {
61 | cursor: pointer;
62 | background-color: #3498DB;
63 | border: 2px solid #3498DB;
64 | border-radius: 4px;
65 | color: #fff;
66 | display: block;
67 | font-size: 16px;
68 | padding: 10px;
69 | margin-top: 20px;
70 | width: 100%;
71 | }
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/debugging-2/300/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 | body {
5 | background-color: #F9FAFB;
6 | font-family: "Open Sans", sans-serif;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | min-height: 100vh;
11 | margin: 0;
12 | }
13 | .container {
14 | background-color: #fff;
15 | border-radius: 5px;
16 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
17 | width: 400px;
18 | }
19 | h2 {
20 | text-align: center;
21 | margin: 0 0 20px;
22 | }
23 | .form {
24 | padding: 30px 40px;
25 | }
26 | .form-control {
27 | margin-bottom: 10px;
28 | padding-bottom: 20px;
29 | position: relative;
30 | }
31 | .form-control label {
32 | color: #777;
33 | display: block;
34 | margin-bottom: 5px;
35 | }
36 | .form-control input {
37 | border: 2px solid #F0F0F0;
38 | border-radius: 4px;
39 | display: block;
40 | width: 100%;
41 | padding: 10px;
42 | font-size: 14px;
43 | }
44 | .form-control.success input {
45 | border-color: #2ECC71;
46 | }
47 | .form-control.error input {
48 | border-color: #E74C3C;
49 | }
50 | .form-control span {
51 | color: #E74C3C;
52 | position: absolute;
53 | bottom: 0;
54 | left: 0;
55 | visibility: hidden;
56 | }
57 | .form-control.error span {
58 | visibility: visible;
59 | }
60 | .form button {
61 | cursor: pointer;
62 | background-color: #3498DB;
63 | border: 2px solid #3498DB;
64 | border-radius: 4px;
65 | color: #fff;
66 | display: block;
67 | font-size: 16px;
68 | padding: 10px;
69 | margin-top: 20px;
70 | width: 100%;
71 | }
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/dom-merge-conflict/tasks/buttons-and-counter/test/app.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment jsdom
3 | */
4 |
5 | import { getByTestId, getByRole } from "@testing-library/dom";
6 | import "@testing-library/jest-dom";
7 |
8 | import { App } from "../src/app";
9 |
10 | describe("button and counter", () => {
11 | let container = App();
12 |
13 | // Reset the App before each test
14 | beforeEach(() => {
15 | container = App();
16 | });
17 |
18 | test("contains description paragraph with mention of 'increment' in header", () => {
19 | expect(
20 | container.querySelector("header").querySelector("p")
21 | ).toHaveTextContent(/increment/i);
22 | });
23 |
24 | test("counter starts at 0", () => {
25 | expect(getByTestId(container, "counter")).toHaveTextContent(/^0$/);
26 | });
27 |
28 | test("pressing Increment increases the counter", () => {
29 | const button = getByRole(container, "button", {
30 | name: "Increment",
31 | });
32 | button.click();
33 | button.click();
34 |
35 | expect(getByTestId(container, "counter")).toHaveTextContent(/^2$/);
36 | });
37 |
38 | describe.skip("decrement button", () => {
39 | test("pressing Decrement decreases the counter", () => {
40 | const button = getByRole(container, "button", {
41 | name: "Decrement",
42 | });
43 | button.click();
44 | button.click();
45 | button.click();
46 |
47 | expect(getByTestId(container, "counter")).toHaveTextContent(/^-3$/);
48 | });
49 |
50 | test("contains description paragraph with mention of 'decrement' in header", () => {
51 | expect(
52 | container.querySelector("header").querySelector("p")
53 | ).toHaveTextContent(/decrement/i);
54 | });
55 | });
56 | });
57 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CLIENT.md:
--------------------------------------------------------------------------------
1 | # Client
2 |
3 | - You need to implement your client (or front-end) logic using `react.js`.
4 |
5 | ## Client Level 100
6 |
7 | In this level you should
8 |
9 | - Display a title in the center on the website
10 | - Display the available cities in a dropdown menu
11 | - Display the category buttons
12 | - Display table with fake data
13 | - No need to do a fetch at this time
14 | - Just make sure it works with the JSON from the Server.
15 |
16 | ## Client Level 200
17 |
18 | In this level you should
19 |
20 | - Make sure that selecting a city will update the state
21 | - Make sure that clicking on a specific category will activate it
22 | - The style of the button should also change to distingush it from other buttons
23 | - Show an error if user tries to choose a category before chosing a city
24 |
25 | 
26 |
27 | ## Client Level 300
28 |
29 | In this level you should
30 |
31 | - Make fetch request to your server for a specific city.
32 | - Choosing any category will display the data specified to that city in the table.
33 | - Add loading spinner while you're fetching the data your server.
34 |
35 | ## Client Level 500
36 |
37 | In this level you should
38 |
39 | - Make city selection dynamic.
40 | - Selecting a city then selecting a category should displays the data of the selected city in the table.
41 |
42 | ## Client Level 999
43 |
44 | You have the full control over this level!
45 |
46 | Some suggestions
47 |
48 | - Add a section contains some data about each city.
49 | - Add a form for adding more entries to the data.
50 | - redesign the way you represent information.
51 | - add search and sort functionality.
52 |
--------------------------------------------------------------------------------
/micro-front-end/build.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Find the root directory of the git repository
4 | repoRoot=$(git rev-parse --show-toplevel)
5 |
6 | # Ensure we're in the root of the git repository
7 | cd "$repoRoot" || exit
8 |
9 | # Path to the _index.md file in the /content directory
10 | indexFile="${repoRoot}/micro-front-end/content/_index.md"
11 |
12 | # Loop over each directory in the root
13 | for dir in */ ; do
14 | # Remove the trailing slash from directory name
15 | dirName=${dir%/}
16 |
17 | # Skip the directory we are copying into
18 | if [ "$dirName" == "micro-front-end" ]; then
19 | continue
20 | fi
21 |
22 | # Format the directory name for URL
23 | formattedDirName=$(echo "$dirName" | sed 's/ /%20/g')
24 |
25 | # Define the block to append with formatted link
26 | blockToAdd="[[blocks]]\nname=\"$dirName\"\nsrc=\"https://github.com/CodeYourFuture/CYF-Workshops/tree/main/$formattedDirName\"\ntime=0"
27 |
28 | # Check if the block already exists
29 | if ! grep -q "$blockToAdd" "$indexFile"; then
30 | # Find the line number of the last occurrence of +++
31 | lastPlusLine=$(grep -n '+++' "$indexFile" | tail -1 | cut -d: -f1)
32 |
33 | # Check if we found the line to insert before
34 | if [ -n "$lastPlusLine" ]; then
35 | # Calculate the line number to insert before the last +++
36 | insertLine=$((lastPlusLine - 1))
37 |
38 | # Use awk to insert blockToAdd before the last +++
39 | awk -v line="$insertLine" -v text="$blockToAdd" 'NR == line {print text} {print}' "$indexFile" > temp && mv temp "$indexFile"
40 | else
41 | # Throw an error if +++ wasn't found
42 | echo "Error: +++ not found in $indexFile. Cannot update the file correctly." >&2
43 | exit 1
44 | fi
45 | fi
46 | done
47 |
48 | echo "Updated _index.md with directory blocks."
49 |
--------------------------------------------------------------------------------
/error-handling/webpage/script.js:
--------------------------------------------------------------------------------
1 | const textarea = document.querySelector("#submission");
2 | const silentFailButton = document.querySelector("#silent-fail-button");
3 | const consoleButton = document.querySelector("#console-button");
4 | const poorAlertButton = document.querySelector("#poor-alert-button");
5 | const devAlertButton = document.querySelector("#dev-alert-button");
6 | const betterAlertButton = document.querySelector("#better-alert-button");
7 | const outputArea = document.querySelector("#output");
8 |
9 | const validateMessage = (message) => {
10 | return message.length >= 250;
11 | }
12 |
13 | const appendMessage = (message) => {
14 | outputArea.textContent = message;
15 | }
16 |
17 | silentFailButton.addEventListener("click", () => {
18 | const message = textarea.value;
19 | if (validateMessage(message)) {
20 | appendMessage(message)
21 | }
22 | })
23 |
24 | consoleButton.addEventListener("click", () => {
25 | const message = textarea.value;
26 | if (validateMessage(message)) {
27 | appendMessage(message)
28 | } else {
29 | console.error("Invalid message - check failed at script.js:10")
30 | }
31 | })
32 |
33 | poorAlertButton.addEventListener("click", () => {
34 | const message = textarea.value;
35 | if (validateMessage(message)) {
36 | appendMessage(message)
37 | } else {
38 | alert("Something went wrong")
39 | }
40 | })
41 |
42 | devAlertButton.addEventListener("click", () => {
43 | const message = textarea.value;
44 | if (validateMessage(message)) {
45 | appendMessage(message)
46 | } else {
47 | alert("Failed with error code 03986")
48 | }
49 | })
50 |
51 | betterAlertButton.addEventListener("click", () => {
52 | const message = textarea.value;
53 | if (validateMessage(message)) {
54 | appendMessage(message)
55 | } else {
56 | alert(`Message must be at least 250 characters long - yours was ${message.length}. Please try again`)
57 | }
58 | })
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/SERVER.md:
--------------------------------------------------------------------------------
1 | # Server
2 |
3 | You should implement your server logic using `node` and `express`
4 |
5 | ## Server Level 100
6 |
7 | Make a new express server and deploy it to `repl.it`.
8 |
9 | On the route `/` respond with the routes you are planing to implement, example:
10 |
11 | ```js
12 | {
13 | "/pharmacies": "returns an array of pharmacies in a specific area"
14 | ...
15 | }
16 | ```
17 |
18 | ## Server Level 200
19 |
20 | Make your server work for only one city, example: `Stratford`
21 |
22 | In this level you should have 4 routes:
23 |
24 | | route | result |
25 | | :---------: | :-----------------------------------: |
26 | | /pharmacies | returns pharmacies list for stratford |
27 | | /colleges | returns colleges list for stratford |
28 | | /doctors | returns doctors list for stratford |
29 | | /hospitals | returns hospitals list for stratford |
30 |
31 | ## Server Level 300
32 |
33 | Now make your city dynamic. You should be able to return data based on any city that is passed to the server.
34 |
35 | Routes will change:
36 |
37 | | route | result |
38 | | :---------------: | :-------------------------------: |
39 | | /:city/pharmacies | returns pharmacies list for :city |
40 | | /:city/colleges | returns colleges list for :city |
41 | | /:city/doctors | returns doctors list for :city |
42 | | /:city /hospitals | returns hospitals list for :city |
43 |
44 | ## Server Level 500
45 |
46 | Make all of that in one single route as:
47 |
48 | | route | result |
49 | | :--------------: | :------------------------------: |
50 | | /:city/:category | returns :category list for :city |
51 |
52 | ## Server Level 999
53 |
54 | You have the full control over this level
55 |
56 | Some suggestions:
57 |
58 | - Add new cities.
59 | - Add routes to add entries to our data.
60 | - Make sure that you are saving the entered values to the `json` file.
61 |
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/HOW-TO-GET-HELP.md:
--------------------------------------------------------------------------------
1 |
7 |
8 | # How To Get Help
9 |
10 | Learning to ask good questions is a key skill for a developer and you should practice this every week at CYF. You must spend a lot of time learning how to describe problems clearly and systematically:
11 |
12 | https://syllabus.codeyourfuture.io/guides/asking-questions
13 |
14 | Problem-solving is the real (marketable) skill of software developers. If you do not have questions to ask about your work, ask for some different work. Don't miss this opportunity to break down challenging problems with a large team of developers.
15 |
16 | ## Guide
17 |
18 | Please review our guide on the Syllabus for how to get help when you are really blocked:
19 |
20 | https://syllabus.codeyourfuture.io/guides/escalation-policy/
21 |
22 | You should complete all of the steps in the order listed to get help.
23 |
24 | ## Reporting Issues in Coursework
25 |
26 | - Is there a problem with this coursework?
27 | - Have you noticed a bug?
28 | - Is there a typo or a mistake you can help clean up?
29 |
30 | Post in the channel named after the module you are working on:
31 |
32 | - Git - `cyf-module-git`
33 | - HTML/CSS - `cyf-module-html-css`
34 | - JavaScript Core 1 - `cyf-module-js1`
35 | - JavaScript Core 2 - `cyf-module-js2`
36 | - JavaScript Core 2 - `cyf-module-js3`
37 | - React - `cyf-module-react`
38 | - Node - `cyf-module-node`
39 | - SQL - `cyf-module-sql`
40 | - MongoDB - `cyf-module-mongodb`
41 |
42 | Or open an issue directly to the Syllabus. CYF Syllabus is an Open Source project developed on GitHub and you are invited to contribute. Read the Issue Template carefully.
43 |
44 | https://github.com/CodeYourFuture/syllabus/issues/new/choose
45 |
46 | Still not clear where to share your issue? Post in #cyf-syllabus-tech.
47 |
--------------------------------------------------------------------------------
/projectboard/readme.md:
--------------------------------------------------------------------------------
1 |
8 |
9 | # Using (and getting value from) a project boards
10 |
11 | Project boards are a key tool used by teams to manage their work. Let's find out together why.
12 |
13 | ## Discussion (15 min)
14 |
15 | Make a circle with the trainees (if you have more than 20 people in class, split it into 2 groups)
16 |
17 | Each trainee should answer the following question:
18 |
19 | - What problems are we trying to solve with project boards and tickets?
20 | - Have you heard of reading from the right to the left? And can you explain it to the group?
21 | - Can you explain the concepts for work in progress?
22 | - What are work in progress (WIP) limits and how are they useful? How should we set them?
23 |
24 | _PS: If no one knows the answers, Google it and discuss it_
25 |
26 | ## Exercise (25 min)
27 |
28 | Separate teams in groups of 4.
29 |
30 | 3 people should take on the role of "developer" and one person the role of "QA".
31 |
32 | Make a copy of this [Miro board. The board tracks is for a project which tracks to progress of trainees](https://miro.com/app/board/uXjVIaCPw8Q=/?share_link_id=369053535597).
33 |
34 | Look at the board and discuss:
35 | - What is each column for? Why is each column useful?
36 | - What WIP (work in progress) limits may we want to apply to each column?
37 | - Which ticket would you pick up first and why?
38 | - What information could help us decide when we're not sure?
39 | - How should we prioritise tickets in each column?
40 | - How can we be effective at moving tickets to done?
41 | - Is there anything we could remove from the board?
42 | - How can you ask for help from your team or give help to your peer?
43 | - How can I tell my team just with this board where I am at with my ticket?
44 | - We discussed a teamwork board. Can any of the things we learned today be applied to your individual coursework board?
45 |
46 | ## Wrap up (5 min)
47 |
48 | Make a circle with the trainees.
49 |
50 | Each trainee should share one thing they learned today.
51 |
--------------------------------------------------------------------------------
/time-string/readme.md:
--------------------------------------------------------------------------------
1 | # `formatSecondsAsString`
2 |
3 | ## Learning Objectives
4 |
5 | ```objectives
6 | - [ ] Break a down a problem into smaller cases
7 | - [ ] Write tests to check logic for smaller cases
8 | ```
9 |
10 | When programming, you will often encounter large problems. Developers must learn to break down complex problems into smaller problems. In this workshop, we'll use tests to break down the implementation of `formatAsSecondsAsString`.
11 |
12 |
13 | _Given_ a time in seconds,
14 | _When_ `formatAsSecondsAsString` is called with the time
15 | _Then_ we it should return a well formatted time string.
16 |
17 | For example, if we call `formatAsSecondsAsString` with 390
18 | then we should get "6 minutes and 30 seconds"
19 |
20 | If we call, `formatAsSecondsAsString` with `6327894` then we should get ""
21 |
22 |
23 | ### 🧩 Break down the problem
24 |
25 | (10 mins)
26 |
27 | To break down this problem, we will only start considering seconds inputs <= 60. Why do you think this is a good place to start?
28 |
29 |
30 | ```js
31 | formatAsSecondsAsString(1) // "1 second"
32 | ```
33 |
34 | ```js
35 | formatAsSecondsAsString(50) // "50 seconds"
36 | ```
37 |
38 |
39 | Spend 10 minutes, think about some other test cases you can explore to check this functionality
40 |
41 |
42 | ### 🧪 Set up tests
43 |
44 | (10 mins)
45 |
46 | In this directory (`time-string`), create a `package.json` and install Jest as you did in the prep material.
47 | Next, create a test file, `time-string.test.js`. In there, write your first test.
48 |
49 |
50 | ### 🩺 First steps
51 |
52 | (10 mins)
53 |
54 | Once you've written your first test, you'll need to implement the logic to get it working for this test case. Don't try rushing ahead in this kata - otherwise it could become very unwieldy!
55 |
56 |
57 |
58 | ### 💼 New cases
59 |
60 | Now we'll consider cases where the input is less than 3600? Why is this a good idea?
61 |
62 |
63 | ```js
64 | formatAsSecondsAsString(61) // "1 minute and 1 second"
65 | ```
66 |
67 |
68 | Continue this pattern of writing tests and then implementing your functionality. Do this until you're confident your function works in the case where the input is less than
69 |
--------------------------------------------------------------------------------
/onboarding-new-volunteers/README.md:
--------------------------------------------------------------------------------
1 | # Onboarding new volunteers
2 |
3 | ## Learning Objectives
4 |
5 | ```objectives
6 | - [ ] Identify things a new volunteer may not know about how to participate in class.
7 | - [ ] List things it's useful to tell a new volunteer to help them participate in class.
8 | - [ ] Identify differences in how different volunteers may need orientation based on their background.
9 | - [ ] Identify what is likely to make a new volunteer more or less likely to volunteer again.
10 | ```
11 |
12 | ## Workshop
13 |
14 | As a community, it's all of our job to make sure that on a volunteer's first day they:
15 | * Feel welcomed
16 | * Know what to do
17 | * Feel empowered, not blocked or confused
18 | * Know how to get help
19 |
20 | In this workshop we will practice some of these skills.
21 |
22 | Get into groups of about 5.
23 |
24 | Take turns to role-play. Imagine we're in a class focusing on CSS flex-box and grid.
25 |
26 | ### Roles
27 |
28 | One participant should act as an experienced volunteer.
29 |
30 | One participant should act as a volunteer showing up to their first class. Pick one of these personas. Don't tell people which one you've chosen.
31 | 1. A professional frontend engineer with several years of experience. You know CSS well, but have never taught before.
32 | 2. A recent boot-camp graduate who has learnt CSS, but never used it outside of personal projects.
33 | 3. A professional backend engineer who knows many programming languages well, but doesn't know the particular CSS we're covering today.
34 | 4. A CYF graduate from a previous cohort which used a more lecture-style rather than flipped classroom.
35 |
36 | The rest of the group should watch the exchange.
37 |
38 | ### Interaction
39 |
40 | Set a timer for 5 minutes.
41 |
42 | The experienced volunteer should approach the new volunteer, and have a conversation. Your goal is to help them get started, and help ensure they will have a good first day.
43 |
44 | After 5 minutes stop. Have a discussion about what went well, and what could have gone better.
45 |
46 | Write down takeaways which will help you have this conversation in real life.
47 |
48 | ### Discussion
49 |
50 | Gather everyone together and compare your groups' takeaways.
51 |
--------------------------------------------------------------------------------
/micro-front-end/assets/custom-theme/02-variables/colors.scss:
--------------------------------------------------------------------------------
1 | @mixin light-palette {
2 | // these brand colours are set and then everything else is derived from the key
3 | --theme-color--brand: hsla(0, 100%, 67%, 1);
4 | --theme-color--brand-shade: hsla(0, 100%, 67%, 0.375);
5 | --theme-color--accent: hsl(146, 100%, 46%);
6 | --theme-color--accent-shade: hsla(146, 100%, 46%, 0.5);
7 | --theme-color--pop: hsla(262, 100%, 62%, 1);
8 | // key
9 | --hue: 260;
10 | --sat: 35%;
11 | --lum: 90%;
12 | --alpha: 0.95;
13 | --hsl: var(--hue), var(--sat), var(--lum);
14 | // now build all the shades
15 | --theme-color--paper: hsla(
16 | var(--hue),
17 | calc(var(--sat) * 1.2),
18 | calc(var(--lum) * 1.06),
19 | var(--alpha)
20 | );
21 | --theme-color--ink: hsla(
22 | var(--hue),
23 | calc(var(--sat) * 2.2),
24 | calc(var(--lum) * 0.3),
25 | var(--alpha)
26 | );
27 | --theme-color--ink-fade: hsla(
28 | var(--hue),
29 | calc(var(--sat) * 2.2),
30 | calc(var(--lum) * 0.3),
31 | calc(var(--alpha) * 0.3)
32 | );
33 | --theme-color--paper-fade: hsla(
34 | var(--hue),
35 | calc(var(--sat) * 1.2),
36 | calc(var(--lum) * 1.06),
37 | 0.9
38 | );
39 | --theme-color--contrast-max: hsl(
40 | var(--hue),
41 | calc(var(--sat) / 100),
42 | calc(var(--lum) * 2) var(--alpha)
43 | );
44 |
45 | // backdrop
46 | --theme-color--block: hsla(var(--hsl), var(--alpha));
47 | --theme-color--outline: hsl(var(--hsl), 1);
48 | --theme-color--backdrop-from: hsl(var(--hsl) / 0.25);
49 | --theme-color--backdrop-to: hsl(var(--hsl) / 0.2);
50 | }
51 |
52 | @mixin dark-palette {
53 | --hue: 270;
54 | --sat: 8%;
55 | --lum: 20%;
56 | --alpha: 0.99;
57 | --theme-color--ink: hsla(
58 | calc(var(--hue) * 1.1),
59 | calc(var(--sat) + 60%),
60 | calc(var(--lum) * 4.4),
61 | var(--alpha)
62 | );
63 | --theme-color--accent: hsla(262, 100%, 67%, 1);
64 | --theme-color--pop: hsl(146, 100%, 46%);
65 | }
66 |
67 | :root {
68 | @include light-palette();
69 | @media (prefers-color-scheme: dark) {
70 | @include dark-palette();
71 | }
72 | }
73 |
74 | // see states for classes that toggle these
75 | // no classes in the variables folder
76 |
--------------------------------------------------------------------------------
/technical-writing-one/readme.md:
--------------------------------------------------------------------------------
1 | # Technical Writing One
2 |
3 | ### Participants:
4 |
5 | [Pre-class prep, 1 hour](https://developers.google.com/tech-writing/one)
6 |
7 | If you haven't done the prep, you can't do this workshop, so go and find something else to get on with.
8 |
9 | ### Facilitators:
10 |
11 | [Facilitator prep, 1 hour](https://developers.google.com/tech-writing/for-instructors/one/instructors-guide)
12 |
13 | You need to do the prep before you can run this workshop. Join the [google group](https://developers.google.com/tech-writing/for-instructors/one/instructors-guide#gaining-access-to-the-slide-decks) and get access to [the materials](https://docs.google.com/presentation/d/1XuObj6nQXglpUwaKkCk01hzzvocL7ngxwVP0851IjO8/edit?usp=sharing) by Wednesday before the workshop.
14 |
15 | ## Learning Objectives
16 |
17 | ```objectives
18 | - [ ] Develop beginner competency in Markdown
19 | - [ ] Organise a technical document
20 | - [ ] Revise and edit specific parts of a technical document using the key principles of technical writing
21 | ```
22 |
23 | ## Requirements
24 |
25 | > Every engineer is also a writer
26 |
27 | In this workshop you will practice writing and reviewing technical documentation. This is a critical skill for any engineer. We will use the excellent [Google Technical Writing One](https://developers.google.com/tech-writing/one) workshop materials.
28 |
29 | **This workshop will take at least two and a half hours.** Plan to spend a whole morning or whole afternoon on this workshop.
30 |
31 | #### Note on AI
32 |
33 | Throughout the course, we use Generative AI to help us write and review technical writing. This can be a practical way to get started, but it's important to understand the basic principles and develop your own judgment and clarity. AI frequently generates the _appearance_ of meaning without the substance. This can trick you into thinking your documentation looks good when it doesn't actually convey meaning or help anyone understand anything. Don't be Joey:
34 |
35 | 
36 |
37 | ## Acceptance Criteria
38 |
39 | - We have identified how to address a specific audience
40 | - We have revised and edited a technical document using the key principles of technical writing
41 | - We have successfully explained toothbrushes
42 |
--------------------------------------------------------------------------------
/know-your-computer/readme.md:
--------------------------------------------------------------------------------
1 | # Know Your Computer
2 |
3 | "Know Your Computer" focuses on how to perform regular tasks on your computer. In this workshop you will use basic Linux commands in the terminal. The goal is to reduce your fear of using the terminal.
4 |
5 | ## Pre-requisite
6 | To be able to do this workshop you will need a computer with a Linux shell running on it. If you already have a Mac or an Ubuntu operating system or any other Linux distribution running on your laptop, then you are fine. If your laptop is running on Windows operating system, download and install [Git Bash for Windows](https://git-scm.com/downloads).
7 | Code Your Future does not support Windows, so you must install or dual boot Linux to take our course. But to do this workshop, you can just use Git Bash.
8 | Once installed, open git bash and you should be able to perform the tasks below.
9 |
10 | ## Tasks
11 | You must use the terminal and Linux commands to complete each challenge. You must not use your GUI! Hands off the mouse! 🖱️
12 |
13 | - Create a folder called `my-shopping` inside your Documents folder.
14 | - Then create a file called `my-list.txt` inside `my-shopping` folder.
15 | - Write the following items to `my-list.txt` file:
16 | ```
17 | 1. Tea
18 | 2. Pasta
19 | 3. Coffee
20 | 4. Milk
21 | ```
22 | - Create a new folder called `my-new-shopping` inside your Documents folder.
23 | - Now move `my-list.txt` from your `my-shopping` folder to your `my-new-shopping` folder. Your `my-shopping` folder should be empty after this step.
24 | - Copy `my-list.txt` from your `my-new-shopping` folder back to your `my-shopping` folder. After this step, **both** folders should contain a file called `my-list.txt`.
25 | - Now add the following line to `my-list.txt` file that is inside `my-new-shopping` folder:
26 | ```
27 | 5. Sugar
28 | ```
29 | - Display the content of `my-list.txt` file inside `my-shopping` and the one inside `my-new-shopping`. `my-list.txt` file in my-shopping folder must have 4 items while the one inside `my-new-shopping` folder must have 5 items.
30 | ## Resources
31 | To help with this here are resources you can refer to:
32 | [freecodecamp.com](https://www.freecodecamp.org/news/the-linux-commands-handbook/),
33 | [Guru99](https://www.guru99.com/linux-commands-cheat-sheet.html),
34 | [CLI-Treasure-Hunt](https://github.com/CodeYourFuture/CLI-Treasure-Hunt).
35 |
--------------------------------------------------------------------------------
/components-1/docs/header/header.txt:
--------------------------------------------------------------------------------
1 |
2 |
23 |
40 | `;
41 | return header;
42 | };
43 |
44 | export default Header;
45 |
--------------------------------------------------------------------------------
/learning-objectives/readme.md:
--------------------------------------------------------------------------------
1 | # Learning objectives at CYF
2 |
3 | Learn to write learning objectives that are testable and start with an active verb.
4 |
5 | ## Learning Objectives
6 |
7 | ```objectives
8 | - [ ] Explain the CYF approach to writing learning objectives
9 | - [ ] Revise three learning objectives to fit the CYF approach
10 | ```
11 |
12 | What is a [good learning objective](https://teachtogether.tech/en/#s:process-objectives)? How do we revise learning objectives to fit the CYF approach? There are two key methods:
13 |
14 | 1. Start with an [active verb](https://bloomstaxonomy.net/).
15 |
16 | 2. Make your objective **testable.**
17 |
18 | In other words:
19 |
20 | > Instead of a state of* being*, choose an act of _doing_.
21 |
22 | It's common for people to begin writing learning objectives that are generally phrased like this:
23 |
24 | "Be able to understand this concept."
25 |
26 | Let's revise this.
27 |
28 | 1. Start with the verb:
29 |
30 | ~~Be able to~~ understand this concept.
31 |
32 | "Understand this concept."
33 |
34 | 2. Make it testable. How will the learner demonstrate this understanding?
35 |
36 | "~~Understand~~ Solve three problems about this concept."
37 |
38 | That's it.
39 |
40 | ---
41 |
42 | Please now explain in writing, in your own words, how to construct a learning objective. Write this in your own notes.
43 |
44 | Next, there are exercises for you to complete to consolidate your understanding.
45 |
46 | ## Worksheet
47 |
48 | ### Here are three concrete examples:
49 |
50 | #### Example 1
51 |
52 | The learner should be familiar with the VSCode interface.
53 |
54 | ~~The learner should be familiar with~~ **Open** the terminal, command palette, and find panel in the VSCode interface.
55 |
56 | #### Example 2
57 |
58 | Be able to ask a good question.
59 |
60 | ~~Be able to understand how to~~ **Ask** a ~~good ~~question using the formal language defined in this workshop.
61 |
62 | #### Example 3
63 |
64 | Feel confident with higher order functions.
65 |
66 | ~~Feel confident with~~ **Use** higher order functions to solve array and object method problems.
67 |
68 | ### Now here are three learning objectives for you to revise.
69 |
70 | #### Objective 1
71 |
72 | Know how to respond to feedback during code review.
73 |
74 | #### Objective 2
75 |
76 | Be able to refactor a large function into several smaller single-responsibility functions.
77 |
78 | #### Objective 3
79 |
80 | Believe in their own ability to succeed.
81 |
--------------------------------------------------------------------------------
/debugging-3/src/App.js:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect} from 'react';
2 | import './App.css';
3 |
4 | function EmailInput() {
5 | const [email, setEmail] = useState(null);
6 |
7 | function valid(val) {
8 | return val && val.indexOf('@') !== '-1'
9 | }
10 |
11 | return
71 | }
72 |
73 | function App() {
74 | return (
75 | <>
76 |
84 |
85 | )
86 | ;
87 | }
88 |
89 | export default App;
90 |
--------------------------------------------------------------------------------
/stand-up/readme.md:
--------------------------------------------------------------------------------
1 | # Stand-up [30 minutes]🧍♂️
2 |
3 | Most software development teams have a "[stand-up](https://en.wikipedia.org/wiki/Stand-up_meeting)" every day. Even if a team does not follow the [agile methodology](https://en.wikipedia.org/wiki/Agile_software_development), stand-ups are used to discuss progress and identify blockers.
4 |
5 | ## Learning Objectives 🙆
6 |
7 | ```objectives
8 | - Explain the format of a stand-up meeting
9 | - Identify the purpose of a stand-up meeting
10 | - Share a progress update in a stand-up meeting
11 | ```
12 |
13 | ## What is a stand-up meeting?
14 |
15 | 1. Daily
16 | 1. _Short_
17 | 1. Focused
18 |
19 | Traditional stand-up meetings require everyone to **stand up** so that the meeting is short.
20 |
21 | > [!TIP]
22 | > Standup: a focused meeting where all team members share their progress, plans, and problems in a short amount of time.
23 |
24 | > [!NOTE]
25 | >
26 | > ### Activity: Prepare your Stand-up (5m)
27 | >
28 | > 1. Set a timer for 5 minutes
29 | > 2. Write down three bullet points:
30 | >
31 | > 1. What you worked on yesterday
32 | > 2. What issues are blocking you / What problems you encountered
33 | > 3. What you will work on today
34 |
35 | ## Set up 🌼
36 |
37 | - Split up into breakout rooms of 5 - 10 people
38 | - Set a timer for 10 minutes
39 |
40 | ## 🧩 Time to Have a First Stand-up
41 |
42 | 1. Take turns to describe, in no more than 60 seconds:
43 | - What you worked on this week.
44 | - Something that is blocking you or that you struggled with (do not discuss solutions yet).
45 | - What you plan to work on today. If you need help or want to pair with someone to work on something specific this is a time to communicate that!
46 | 1. After everyone has given an update, reflect on next steps together. Is there something that multiple people said they struggled with that you could team up with? Is someone working on something interesting that you want to know more about?
47 | 1. Where else can you ask a question when you have a problem? e.g. what Slack channels are suitable?
48 |
49 | > [!TIP]
50 | >
51 | > ### No problem solving in the stand-up!
52 | >
53 | > When someone mentions a problem, it's not the time to discuss **solutions**. The goal is to identify blockers and plan the day.
54 |
55 | ## Acceptance Criteria 🧾
56 |
57 | After this workshop, every participant:
58 |
59 | - [ ] Has participated in a stand-up meeting and can explain what the structure is
60 | - [ ] Has formulated their update in the typical "stand-up" structure
61 | - [ ] Has described at least one technical blocker
62 |
--------------------------------------------------------------------------------
/debugging-2/300/app.js:
--------------------------------------------------------------------------------
1 | //first we need to select these elements to do something with them in the form
2 | const form = document.getElementById("form");
3 | const username = document.getElementById("username");
4 | const email = document.getElementById("email");
5 | const password = document.getElementById("password");
6 | const passwordConfirmation = document.getElementById("passwordConfirmation");
7 | //we will be checking the validations for each of the element, when hit submit button
8 | form.addEventListener("submit", (event) => {
9 | event.preventDefault(); //is calling one event, and stopping the default behaviour of submit event to happen, i.e. loading of page
10 | validateForm([username, email, password, passwordConfirmation]);
11 | checkPasswordLength(password, 6, 25);
12 | checkPassword(password, passwordConfirmation);
13 | checkEmail(email);
14 | });
15 | //4 functions to check validations:
16 | const validateForm = (inputArr) => {
17 | inputArr.forEach((input) => {
18 | if (input.value === "") {
19 | showError(input, `This field is required`);
20 | } else {
21 | showSuccess(inputArr);
22 | }
23 | });
24 | };
25 | const checkPasswordLength = (password, min, max) => {
26 | if (password.length < min || password.length > max) {
27 | showError(password, `Between ${min} to ${max} characters`);
28 | }
29 | };
30 | const checkPassword = (password, passwordConfirmation) => {
31 | if (password.value !== passwordConfirmation.value) {
32 | showError(passwordConfirmation, `Password must be same`);
33 | }
34 | };
35 | const checkEmail = (email) => {
36 | if (!isValidEmail(email)) {
37 | showError(email, `It is not a right Email`);
38 | }
39 | };
40 | //3 helper functions:
41 | const showError = (input, message) => {
42 | const formControl = input.parentElement;
43 | formControl.className = "form-control error";
44 | // check if error message span already exists
45 | let spanText = formControl.querySelector("span.error-text");
46 | if (!spanText) {
47 | // create new span element for error message
48 | spanText = document.createElement("span");
49 | spanText.className = "error-text";
50 | formControl.appendChild(spanText);
51 | }
52 | spanText.innerText = message;
53 | };
54 | const showSuccess = (input) => {
55 | const formControl = input.parentElement;
56 | formControl.className = "form-control success";
57 | };
58 | const isValidEmail = (email) => {
59 | var regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; //this checks the format of the email address string to ensure that it matches the pattern of a valid email address
60 | return regex.test(String(email.value).toLowerCase());
61 | };
--------------------------------------------------------------------------------
/node-challenge-london-mini-guide/CYF-React-Express-Template/HOW_TO_REVIEW.md:
--------------------------------------------------------------------------------
1 |
7 |
8 | # Everyone reviews code at CYF
9 |
10 | Mentors and trainees all review code, and collaborate on improving code quality. We are all helping each other to talk, write, and think about code more clearly.
11 |
12 | We are not reviewing code as if we were to merge this PR into production; we are opening a technical conversation for the purpose of insight and development.
13 |
14 | ## Key points:
15 |
16 | 1. Ask questions instead of making statements:
17 |
18 | **YES:** "Is there another element you could use to group a set of fields in a form? Why might someone use a different element in a form?"
19 | **NO:** "Use fieldset not divs"
20 |
21 | 2. Encourage simplicity, clarity, and precision:
22 |
23 | **YES** "There are 15,0000 files in this changelist. Which files should be reviewed?"
24 | **NO** "It doesn't matter; I can try to figure out what you meant."
25 |
26 | 3. Respect everyone's work and time:
27 |
28 | **YES** "I think there's some more to do here. Thanks for sharing where you're up to."
29 | **NO** "This is rubbish. Try harder."
30 |
31 | ## Labels
32 |
33 | Reviewers, please add labels (provided) to the PR once you've reviewed. This helps to focus the trainee on the areas they should work on, and gives an overview for mentors on what the whole cohort needs to work on.
34 |
35 | ## Solutions
36 |
37 | ### Where to find solutions?
38 |
39 | You can find the solutions for a module on the `solutions` branch.
40 |
41 | ### Solutions branch
42 |
43 | The solutions branch typically contains:
44 |
45 | #### Sample solutions
46 |
47 | Solutions are example answers not the only correct answers.
48 |
49 | #### Common responses guides.
50 |
51 | Everyone is invited to contribute commonly encountered problems, mistakes, misunderstandings, and mental-model errors to our common responses documents.
52 |
53 | Use these resources to inform your code review, get unstuck, and improve your understanding.
54 |
55 | ## Guides
56 |
57 | Here's a detailed checklist of the sorts of things we should check code for:
58 |
59 | https://syllabus.codeyourfuture.io/guides/marking-guide
60 |
61 | Here's a detailed style guide to help us all write clear, high quality code:
62 |
63 | https://syllabus.codeyourfuture.io/guides/code-style-guide
64 |
65 | Here's some help with giving good feedback during code review:
66 |
67 | https://teachertraining.codeyourfuture.io/tasks/code-review
68 |
--------------------------------------------------------------------------------
15 |
16 |