Charlie-robin

Vending Machine

Brief

Develop a Vending machine command line program.

The programe needs to:

• Contain a number of products to buy
  • Each product has a name, category and price
• Some example categories are: drink, crisps, chocolate bars and cereal bars.

Charlie-robin

Iterators Only!

You have some pure functions to write, your functions should take parameters and return a result!

Method	Description
.map()	creates a new array by performing a callback function on each array element
.filter()	creates a new array with array elements that pass a certain condition
.reduce()	takes all of the elements in an array and "reduces" them to a single value

Charlie-robin

Importing and Exporting with Javascript & React ⚡

There are generally two different types of imports & exports when working with JavaScript these are commonly used with React.js.

They are:

• Default Imports and Exports.
• Named Imports and Exports.

There are a couple of exceptions these more specifically to do with React.

Charlie-robin

Destructuring with JS 📡

You can use destructuring with vanilla javascript.

It is heavily used with React and we will be using it with React so the examples are based on props, components, useState etc..

Basic Object Destructuring syntax

When destructuring an object you use curly brackets {} on the lefthand side as it is an object.

Charlie-robin

⚡ JS Challenges

Congratulations you have completed the Javascript module 😎.

You have covered some of the core fundamentals of Javascript and also how to start thinking about breaking problems down programmatically.

To give you a head start with this thinking and to get you to practice writing Javascript we have some challenges below we would like you to complete.

📃 Specification

1. We would like this project to be pushed to GitHub.

Charlie-robin

Import Export Mini Challenge

This a mini project to get you use to using import and export syntax.

Your brief is to make a basic UI / display for the data given. Focus on functionality first with very basic styles. You need to have the data provided in its own data folder. I want you to then bring it into the main.js as a default import. In the main.js I want you to iterate through and get each of the objects onto the index.html.

Each of the food html items should match the html below with the placeholder's replaced for the values from each of the objects.

Charlie-robin

const devicesResponse = [{
    "hostName": "iPhone",
    "subnet": 0,
    "dhcpLastSeenStatus": "green",
    "dhcpLastSeen": "Oct 18, 2021 7:15:27 PM",
    "dnsLastSeen": "Oct 18, 2021 7:29:08 PM",
    "dnsLastSeenStatus": "green",
    "dnsChanged": 0,
    "deviceId": 34840,
    "network": "Winsford-test",

Charlie-robin

#!/bin/bash
# Enter Github url + Student's name / Name of the folder it is going to create for you.
# Clone a students repo, change branch to feedback. 
# It will create a feedback folder in the project.
# If there is a template.md and it will copy and rename it in the feedback folder. 
# Else it will create a blank notes.md in the feedback folder. 
# If the project has a package.json it will install any dependencies listed.
echo "Enter the GitHub URL "
read github_url
echo "Enter the Student's name "

Charlie-robin

Host a React project on Github pages

Make sure you have the repository on GitHub.

1. Add github Pages as a dev dependency to the project.

npm install gh-pages --save-dev

Charlie-robin

#!/bin/bash
# This creates React boilerplate
# This script takes two arguments folder & files
# It will create .jsx & .scss files in the src inside the given folder
# Have the file in the root project directory & run 
# ./create.sh folderName fileName

echo "Create $2 jsx & scss files in the $1 folder? Y/N"
read answer
lowerAnswer=$(echo "$answer" | tr '[:upper:]' '[:lower:]')