Charlie Richardson Charlie-robin

GitHub Profile

It is import to have a profile on GitHub, this will be where you have your code to show potential employers.

Useful GitHub Profile Links

Setting up SASS/SCSS & Prefixing with POSTCSS

Hey 👋,

There are two parts to this gist and the first is independant.

For the second part you need to have completed the first part.

You do not need both just if you want them they are below.

Setting up SASS/SCSS

Host a React project on Github pages

Make sure you have the repository on GitHub.

Add github Pages as a dev dependency to the project.

npm install gh-pages --save-dev

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.

⚡ 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

We would like this project to be pushed to GitHub.

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.

	const artist = {
	"idArtist": "111247",
	"strArtist": "The Beatles",
	"strArtistStripped": null,
	"strArtistAlternate": "Beatles",
	"strLabel": "EMI",
	"idLabel": "43827",
	"intFormedYear": "1957",
	"intBornYear": null,
	"intDiedYear": "1970",

	#!/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:]')

	#!/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 "

	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",