Sam's Weather App
11 |location
12 |temp
13 |weather
14 |
15 | ![]()
16 |
17 |
18 |
14 |
18 |
19 |
20 |
21 |
6 |
47 |
--------------------------------------------------------------------------------
/WeatherPage/weather.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function () {
2 | 'use strict';
3 | var lat, lon, temp,
4 | un = 0,
5 | sym = [' ℃', ' ℉'];
6 |
7 | function getWeather(lati, long) {
8 | var appid = "&APPID=0e499daa3df5cba5e647b7f0f0f8a5c8",
9 | unit = "&units=metric",
10 | url = "http://api.openweathermap.org/data/2.5/weather?lat=" + lati + "&lon=" + long + appid + unit;
11 | $.getJSON(url, function (data) {
12 | var weather = data.weather[0].main,
13 | city = data.name;
14 | temp = data.main.temp.toFixed(0);
15 | temp = [temp, (temp * 1.8 + 32)];
16 | document.getElementById("location").innerHTML = city;
17 | document.getElementById("temperature").innerHTML = temp[0];
18 | document.getElementById("weather").innerHTML = weather;
19 | document.getElementById('picture').src = "http://climbingstrengthtraining.com/wp-content/uploads/2017/01/" + data.weather[0].icon + '.png';
20 | });
21 | }
22 |
23 | function success(pos) {
24 | var coords = pos.coords;
25 | getWeather(coords.latitude, coords.longitude);
26 | }
27 |
28 | $('.link').click(function () {
29 | un += 1;
30 | document.getElementById("temperature").innerHTML = temp[un % 2];
31 | document.getElementById("sym").innerHTML = sym[un % 2];
32 | });
33 |
34 | if (navigator.geolocation) {
35 | navigator.geolocation.getCurrentPosition(success);
36 | }
37 |
38 | });
--------------------------------------------------------------------------------
/ChuckNoris/ChuckNoris.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
26 |
23 |
24 |
25 |
27 |
31 |
28 |
29 |
30 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
10 |
--------------------------------------------------------------------------------
/goal-coach/src/components/CompleteGoalList.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { setCompleted } from '../actions';
4 | import { completedGoalRef } from '../firebase';
5 | import CompleteGoalItem from './CompleteGoalItem';
6 |
7 | class CompleteGoalList extends Component {
8 | componentDidMount() {
9 | completedGoalRef.on('value', snap => {
10 | let completeGoals = [];
11 | snap.forEach(goal => {
12 | const {email, title} = goal.val();
13 | const serverKey = goal.key;
14 | completeGoals.push({email, title, serverKey})
15 | })
16 | this.props.setCompleted(completeGoals);
17 |
18 | })
19 | }
20 |
21 | clearCompleted() {
22 | completedGoalRef.set([]);
23 | }
24 |
25 | render() {
26 | return (
27 |
11 |
18 |
12 |
13 |
14 |
15 | 
16 |
17 |
16 |
19 |
34 |
20 |
27 |
28 |
29 |
32 |
33 |
28 | {this.props.completeGoals.map((complete, k) => {
29 | return (
30 |
38 | )
39 | }
40 | }
41 |
42 | function mapStateToProps(state) {
43 | const { completeGoals } = state;
44 | return {
45 | completeGoals
46 | }
47 | }
48 |
49 | export default connect(mapStateToProps, {setCompleted})(CompleteGoalList);
--------------------------------------------------------------------------------
/Lambdas/build.sh:
--------------------------------------------------------------------------------
1 | if [ "$#" -ne 1 ]; then
2 | echo "Usage : ./build.sh lambdaName";
3 | exit 1;
4 | fi
5 |
6 | lambda=${1%/}; // # Removes trailing slashes
7 | echo "Deploying $lambda";
8 | cd $lambda;
9 | if [ $? -eq 0 ]; then
10 | echo "...."
11 | else
12 | echo "Couldn't cd to directory $lambda. You may have mis-spelled the lambda/directory name";
13 | exit 1
14 | fi
15 |
16 | echo "nmp installing...";
17 | npm install
18 | if [ $? -eq 0 ]; then
19 | echo "done";
20 | else
21 | echo "npm install failed";
22 | exit 1;
23 | fi
24 |
25 | echo "Checking that aws-cli is installed"
26 | which aws
27 | if [ $? -eq 0 ]; then
28 | echo "aws-cli is installed, continuing..."
29 | else
30 | echo "You need aws-cli to deploy this lambda. Google 'aws-cli install'"
31 | exit 1
32 | fi
33 |
34 | echo "removing old zip"
35 | rm archive.zip;
36 |
37 | echo "creating a new zip file"
38 | zip archive.zip * -r -x .git/\* \*.sh tests/\* node_modules/aws-sdk/\* \*.zip
39 |
40 | echo "Uploading $lambda";
41 | aws lambda create-function --function-name $lambda --role arn:aws:iam::095363550084:role/lambdaBasic --runtime nodejs8.10 --handler index.handler --zip-file fileb://archive.zip --publish --profile samwcoding
42 |
43 | if [ $? -eq 0 ]; then
44 | echo "!! Create successful !!"
45 | exit 1;
46 | fi
47 |
48 | aws lambda update-function-code --function-name $lambda --zip-file fileb://archive.zip --publish --profile samwcoding
49 |
50 | if [ $? -eq 0 ]; then
51 | echo "!! Update successful !!"
52 | else
53 | echo "Upload failed"
54 | echo "If the error was a 400, check that there are no slashes in your lambda name"
55 | echo "Lambda name = $lambda"
56 | exit 1;
57 | fi
--------------------------------------------------------------------------------
/MusicMaster/src/Profile.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './App.css';
3 |
4 | class Profile extends Component {
5 | render() {
6 | let artist = {
7 | name: '',
8 | followers: {total: ''},
9 | images: [
10 | {url: ''}
11 | ],
12 | genres: []
13 | };
14 | artist = this.props.artist !== null ? this.props.artist : artist;
15 |
16 | return (
17 |
18 | 
23 |
43 | )
44 | }
45 | }
46 |
47 | export default Profile;
--------------------------------------------------------------------------------
/Lambdas/medium-email-api/index.js:
--------------------------------------------------------------------------------
1 | const AWS = require('aws-sdk');
2 | const SES = new AWS.SES();
3 |
4 |
5 | exports.handler = async (event) => {
6 | if (event.httpMethod === "POST") {
7 | let { emailAddress, subject, content } = JSON.parse(event.body);
8 | let [err, res] = await handle(sendEmail(emailAddress, subject, content));
9 | return Response({ err, res });
10 | }
11 | }
12 |
13 | const sendEmail = (emailAddress, subject, content) => {
14 | let params = {
15 | Source: 'Sam Williams
24 |
41 |
42 | {artist.name}
25 |
26 | {artist.followers.total} followers
27 |
28 |
29 | {
30 | artist.genres.map((genre, key) => {
31 | genre = key !== artist.genres.length-1
32 | ? `${genre}, `
33 | : `& ${genre}`;
34 | return (
35 | {genre}
36 | )
37 | })
38 | }
39 |
40 |
45 |
50 | )
51 | }
52 | }
53 |
54 | export default Clock;
--------------------------------------------------------------------------------
/PureCSS/week2/day6.css:
--------------------------------------------------------------------------------
1 | .box{
2 | position: relative;
3 | margin: auto;
4 | margin-top: 8%;
5 | width: 50vmin;
6 | height: 50vmin;
7 |
8 | }
9 | .face{
10 | position: absolute;
11 | width: 100%;
12 | height: 100%;
13 | border-radius: 50%;
14 | border: 5px solid black;
15 | box-sizing: border-box;
16 | }
17 | .face:hover{cursor: pointer}
18 | .Ldash{
19 | position: absolute;
20 | width: 100%;
21 | height: 100%;
22 | background: red;
23 | -webkit-clip-path: polygon(49% 3%, 49% 10%, 51% 10%, 51% 3%)
24 | }
25 | .t3{transform: rotate(90deg);}
26 | .t6{transform: rotate(180deg)}
27 | .t9{transform: rotate(-90deg)}
28 | .dash{
29 | position: absolute;
30 | width: 100%;
31 | height: 100%;
32 | background: black;
33 | -webkit-clip-path: polygon(49% 3%, 49% 8%, 51% 8%, 51% 3%)
34 | }
35 | .t1{transform: rotate(30deg)}
36 | .t2{transform: rotate(60deg)}
37 | .t4{transform: rotate(120deg)}
38 | .t5{ transform: rotate(150deg)}
39 | .t7{transform: rotate(-150deg)}
40 | .t8{transform: rotate(-120deg)}
41 | .t10{transform: rotate(-60deg)}
42 | .t11{transform: rotate(-30deg)}
43 | .sec {
44 | position: absolute;
45 | width: 100%;
46 | height: 100%;
47 | background: black;
48 | -webkit-clip-path: polygon(49.5% 10%, 49.5% 52%, 50.5% 52%, 50.5% 10%, 50% 7%)
49 | }
50 | .minute {
51 | position: absolute;
52 | width: 100%;
53 | height: 100%;
54 | background: blue;
55 | -webkit-clip-path: polygon(49% 10%, 49% 52%, 51% 52%, 51% 10%, 50% 7%)
56 | }
57 | .hour {
58 | position: absolute;
59 | width: 100%;
60 | height: 100%;
61 | background: blue;
62 | -webkit-clip-path: polygon(48% 25%, 48% 52%, 52% 52%, 52% 25%, 50% 22%);
63 |
64 | }
--------------------------------------------------------------------------------
/movieAPI/movieAPI.js:
--------------------------------------------------------------------------------
1 | const DB = require('./dynamo');
2 | const Dynamo = new DB();
3 |
4 | exports.handler = async (event) => {
5 | console.log(event);
6 | if (event.httpMethod === 'PUT') {
7 | let response = await putMovie(event)
8 | return done(response);
9 | } else if (event.httpMethod === 'GET') {
10 | let response = await getMovie(event);
11 | return done(response);
12 | }
13 | };
14 |
15 | const done = response => {
16 | return {
17 | statusCode: '200',
18 | body: JSON.stringify(response),
19 | headers: {
20 | 'Content-Type': 'application/json',
21 | 'Access-Control-Allow-Methods': '*',
22 | 'Access-Control-Allow-Origin': '*'
23 | }
24 | }
25 | }
26 |
27 | const movies = {
28 | action: 'Desperado (1995)',
29 | fantasy: 'Inception (2010)',
30 | animated: ' Peter Pan (1953)',
31 | western: 'The Good, the Bad and the Ugly (1966)',
32 | superhero: 'The Dark Knight (2008)',
33 | musical: 'The Rocky Horror Picture Show (1975)',
34 | crime: 'Pulp Fiction (1994)',
35 | comedy: 'The Naked Gun: From the Files of Police Squad! (1988)',
36 | adventure: 'Raiders of the Lost Ark (1981)',
37 | war: 'The Guns of Navarone (1961)',
38 | guy: 'The Expendables (2010)',
39 | romance: 'True Romance (1993)',
40 | thriller: 'Psycho (1960)',
41 | horror: 'Black Swan (2010)'
42 | }
43 |
44 | const getMovie = event => {
45 | let genre = event.pathParameters.genre;
46 | return movies[genre];
47 | }
48 |
49 | const putMovie = async event => {
50 | let { movie } = JSON.parse(event.body);
51 | let genre = event.pathParameters.genre;
52 | let ID = `${movie}-${genre}`;
53 | return Dynamo.increment(ID, 'movie-api')
54 | }
--------------------------------------------------------------------------------
/simonGame/simon.css:
--------------------------------------------------------------------------------
1 | .box {
2 | position: relative;
3 | margin: auto;
4 | width: 60vmin;
5 | height: 60vmin;
6 | }
7 | .body{
8 | position: absolute;
9 | width: 100%;
10 | height: 100%;
11 | background: #333;
12 | border-radius: 50%;
13 | }
14 | .face{
15 | position: absolute;
16 | width: 50%;
17 | height: 50%;
18 | top: 25%;
19 | left: 25%;
20 | background: #ddd;
21 | border-radius: 50%;
22 | }
23 | .pad{
24 | position: absolute;
25 | width: 60%;
26 | height: 60%;
27 | left: 2vmin;
28 | top: 2vmin;
29 | background: none;
30 | border-radius: 50%;
31 | }
32 |
33 | .c1{
34 | border: 10vmin solid green;
35 | -webkit-clip-path: polygon(0 0, 45% 0, 45% 45%, 0 45%);
36 | }
37 | .c3{
38 | border: 10vmin solid #c00;
39 | -webkit-clip-path: polygon(100% 100%, 55% 100%, 55% 55%, 100% 55%);
40 | }
41 | .c2{
42 | border: 10vmin solid #0a0ab7;
43 | -webkit-clip-path: polygon(100% 0, 55% 0, 55% 45%, 100% 45%);
44 | }
45 | .c4{
46 | border: 10vmin solid #cc0;
47 | -webkit-clip-path: polygon(0 100%, 45% 100%, 45% 55%, 0 55%);
48 | }
49 | .start, .strict{
50 | position: absolute;
51 | width: 20%;
52 | height: 4vmin;
53 | border-radius: 50%;
54 | top: 40%;
55 | box-shadow: 0 0 2px 2px rgb(100, 100, 100);
56 | text-align: center;
57 | padding-top: 2vmin;
58 | font-size: 2vmin;
59 | }
60 | .start{
61 | background: yellow;
62 | left: 50%;
63 | }
64 | .strict{
65 | background: none;
66 | left: 75%;
67 | }
68 |
69 | #screen {
70 | position: absolute;
71 | width: 30%;
72 | height: 20%;
73 | top: 40%;
74 | left: 15%;
75 | background: #333;
76 | text-align: center;
77 | font-size: 6vmin;
78 | color: wheat;
79 | }
--------------------------------------------------------------------------------
/MusicMaster/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 |
23 | {this.leading0(this.state.days)} days
46 | {this.leading0(this.state.hours)} hours
47 | {this.leading0(this.state.minutes)} minutes
48 | {this.leading0(this.state.seconds)} seconds
49 | ' + data.stream.channel.display_name + '
' + data.stream.channel.game + '
' + data.stream.channel.status + '
' + name[name.length-1] + '
Offline
27 |
55 | )
56 | }
57 | }
58 |
59 | export default SignIn;
--------------------------------------------------------------------------------
/whiteboard/whiteboard.js:
--------------------------------------------------------------------------------
1 | function blobs() {
2 | rub = false;
3 | }
4 |
5 | function geof() {
6 | rub = true;
7 | };
8 |
9 |
10 | const canvas = document.querySelector('#draw');
11 | const ctx = canvas.getContext('2d');
12 | canvas.width = 0.90 * window.innerWidth;
13 | canvas.height = 0.92 * window.innerHeight;
14 | ctx.lineJoin = 'round';
15 | ctx.lineCap = 'round';
16 |
17 | let isDrawing = false;
18 | let hue = 0;
19 | let huepc,
20 | rub = false;
21 | let last;
22 | let lastY;
23 | let slider = document.getElementById('marker');
24 |
25 | function draw(e) {
26 | if (!isDrawing) return;
27 | console.log(e);
28 | ctx.beginPath();
29 | ctx.moveTo(lastX, lastY);
30 | ctx.lineTo(e.offsetX, e.offsetY);
31 | ctx.strokeStyle = rub ? '#fff' : `hsl(${hue}, 100%, 50%)`;
32 | ctx.stroke();
33 |
34 | [lastX, lastY] = [e.offsetX, e.offsetY];
35 | }
36 |
37 | canvas.addEventListener('mousedown', (e) => {
38 | isDrawing = true;
39 | [lastX, lastY] = [e.offsetX, e.offsetY];
40 | });
41 |
42 | canvas.addEventListener('mousemove', draw);
43 | canvas.addEventListener('mouseup', () => isDrawing = false);
44 | canvas.addEventListener('mouseout', () => isDrawing = false);
45 | canvas.addEventListener('wheel', (j) => {
46 | hue += j.deltaY/40;
47 | document.getElementById('big').style.background = `hsl(${hue}, 100%, 50%)`;
48 | document.getElementById('medium').style.background = `hsl(${hue}, 100%, 50%)`;
49 | document.getElementById('small').style.background = `hsl(${hue}, 100%, 50%)`;
50 | document.getElementById('tiny').style.background = `hsl(${hue}, 100%, 50%)`;
51 | huepc = hue < 0 ? ((hue % 360)+360)/3.6 : (hue % 360)/3.6;
52 | slider.style.left = huepc + "%";
53 | });
54 |
55 | function penSize(s){
56 | ctx.lineWidth = window.innerWidth * s / 100;
57 | }
58 |
--------------------------------------------------------------------------------
/goal-coach/src/components/SignUp.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router';
3 | import { firebaseApp } from '../firebase';
4 |
5 | class SignUp extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | email: '',
10 | password: '',
11 | error: ''
12 | }
13 | }
14 |
15 | signUp() {
16 | const {email, password} = this.state;
17 | firebaseApp.auth().createUserWithEmailAndPassword(email, password)
18 | .catch(error => {
19 | this.setState({error});
20 | })
21 | }
22 |
23 |
24 | render() {
25 | return (
26 | Sign In
28 |
29 | this.setState({email: event.target.value})}
35 |
36 | />
37 | this.setState({password: event.target.value})}
43 | />
44 |
51 |
52 | {this.state.error.message}
53 | Sign Up Instead
54 |
27 |
57 | )
58 | }
59 | }
60 |
61 | export default SignUp;
--------------------------------------------------------------------------------
/mdPreview/src/components/Display.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import './display.css';
3 |
4 | export default class Display extends React.Component {
5 |
6 | sendFiles(evt){
7 | var files ;
8 | evt.stopPropagation();
9 | evt.preventDefault();
10 | var selectedFile = document.getElementById('files');
11 | files = selectedFile.files;
12 | if (!files.length){
13 | try {
14 | files = evt.dataTransfer.files;
15 | }
16 | catch (e) {
17 | alert('please select a file');
18 | return;
19 | }
20 | }
21 | var upload = this.props.upload;
22 | var file = files[0];
23 | var reader = new FileReader();
24 | reader.onloadend = function (evt) {
25 | if (evt.target.readyState === FileReader.DONE) {
26 | var text = evt.target.result;
27 | console.log(text);
28 | upload(text);
29 | document.getElementById('files').value = null;
30 | }
31 | };
32 | reader.readAsBinaryString(file);
33 | }
34 |
35 | handleDrag(evt){
36 | console.log('drag over');
37 | evt.stopPropagation();
38 | evt.preventDefault();
39 | evt.dataTransfer.dropEffect = 'copy';
40 | }
41 |
42 | handleDrop(evt){
43 | evt.stopPropagation();
44 | evt.preventDefault();
45 | var files = evt.dataTransfer.files;
46 | this.sendFiles(files);
47 | }
48 |
49 |
50 | render() {
51 | return (
52 | Sign Up
28 |
29 | this.setState({email: event.target.value})}
35 |
36 | />
37 | this.setState({password: event.target.value})}
43 | />
44 |
51 |
52 | {this.state.error.message}
53 |
54 | Already a user? Sign in instead
55 |
56 |
53 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/MusicMaster/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #000;
3 | color: #fff;
4 | }
5 |
6 | .app {
7 | text-align: center;
8 | padding: 5%;
9 | }
10 |
11 | .app_title {
12 | font-size: 26px;
13 | }
14 |
15 | /* Profile */
16 |
17 | .profile {
18 | display: flex;
19 | justify-content: center;
20 | }
21 |
22 | .profile_info {
23 | margin-left: 10px;
24 | text-align: left;
25 | }
26 |
27 | .profile_image {
28 | width: 150px;
29 | height: 150px;
30 | border-radius: 10%;
31 | object-fit: cover;
32 | }
33 |
34 | .profile_name {
35 | font-size: 26px;
36 | }
37 |
38 | .profile_followers, .profile_genres {
39 | font-size: 18px;
40 | }
41 |
42 | /* Gallery */
43 |
44 | .track {
45 | display: inline-block;
46 | width: 220px;
47 | height: 220px;
48 | margin: 10px;
49 | text-align: left;
50 | cursor: pointer;
51 | position: relative;
52 | }
53 |
54 | .track_image {
55 | width: 220px;
56 | height: 220px;
57 | border: 3px solid #fff;
58 | border-radius: 3px;
59 | object-fit: cover;
60 | position: absolute;
61 | }
62 |
63 | .track_text {
64 | color: #fff;
65 | background-color: black;
66 | opacity: 0.75;
67 | width: 210px;
68 | margin-left: 5px;
69 | bottom: 0;
70 | text-align: center;
71 | position: absolute;
72 | padding: 10px;
73 | }
74 |
75 | .track_play {
76 | position: absolute;
77 | width: 220px;
78 | height: 220px;
79 | }
80 |
81 | .track_play_inner {
82 | position: absolute;
83 | text-align: center;
84 | font-size: 25px;
85 | background-color: black;
86 | border-radius: 30px;
87 | width: 60px;
88 | height: 60px;
89 | color: white;
90 | padding-top: 13px;
91 | margin-left: 80px;
92 | margin-top: 80px;
93 | opacity: 0;
94 | z-index: 3;
95 | }
96 |
97 | .track_play_inner:hover {
98 | opacity: 0.75;
99 | animation-name: fade-in;
100 | animation-duration: 0.3s;
101 | }
102 |
103 | @keyframes fade-in {
104 | from {
105 | opacity: 0;
106 | }
107 | to {
108 | opacity: 0.75;
109 | }
110 | }
--------------------------------------------------------------------------------
/JS_Calc/main.js:
--------------------------------------------------------------------------------
1 | var screenOut = " ";
2 | var wasEq = false;
3 |
4 | function enterDigit(x) {
5 | 'use strict';
6 | // if x is operator
7 | if (x == '0' && screenOut.length == 1 && screenOut[0] == 0) {
8 | return
9 | }
10 |
11 | if (screenOut.slice(-1) === "." && ~'+-*/'.indexOf(x) /* '+-/*'.indexOf(x) !== -1 */ ) {
12 | return;
13 | }
14 |
15 | if ('+-*/'.indexOf(x) !== -1) {
16 | // if last char is operator
17 | if ('+-*/'.indexOf(screenOut.slice(-1)) !== -1) {
18 | screenOut = screenOut.slice(0, -1) + x;
19 |
20 | // if last char is space, and x is *or/ do nothing
21 | } else if (screenOut.slice(-1) === " " &&
22 | '*/'.indexOf(x) !== -1) {
23 | } else {
24 | screenOut += x;
25 | }
26 | // if x is number
27 | } else {
28 | if (wasEq) {
29 | screenOut = x;
30 | } else {
31 | screenOut += x;
32 | }
33 | }
34 | wasEq = false;
35 | document.getElementById("display").innerHTML = screenOut;
36 | }
37 |
38 | function decimal() {
39 | var operator = '+-*/'.split(''),
40 | last=0;
41 | for (var i = 0; iThis is the display window
54 |
55 |
56 |
57 |
58 |
59 |
9 |
--------------------------------------------------------------------------------
/tttWithAi/ttt.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
10 |
13 | Pomodoro Clock
11 |Session
12 |
14 |
24 | 25:00
15 |
16 |
23 |
17 |
18 |
19 |
20 |
21 |
22 |
25 |
56 |
26 |
40 |
27 |
39 |
28 |
32 | Session Length
29 |25:00 30 |
31 |
33 |
34 |
35 |
36 |
37 |
38 |
41 |
55 |
42 |
54 |
43 |
47 | Rest Length
44 |5:00 45 |
46 |
48 |
49 |
50 |
51 |
52 |
53 |
57 |
58 |
59 |
9 |
76 |
--------------------------------------------------------------------------------
/MusicMaster/src/Gallery.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './App.css';
3 |
4 | class Gallery extends Component {
5 | constructor(props){
6 | super(props)
7 | this.state = {
8 | playingUrl: '',
9 | audio: null,
10 | playing: false
11 | }
12 |
13 | }
14 |
15 | playAudio(audioUrl) {
16 | let audio = new Audio(audioUrl);
17 | if (!this.state.playing) {
18 | audio.play()
19 | this.setState({
20 | playing: true,
21 | playingUrl: audioUrl,
22 | audio
23 | })
24 | } else {
25 | this.state.audio.pause();
26 | if (this.state.playingUrl === audioUrl) {
27 | this.setState({playing: false});
28 | } else {
29 | audio.play();
30 | this.setState({
31 | audio, playing: true, playingUrl: audioUrl
32 | });
33 | }
34 | }
35 | }
36 |
37 | render() {
38 | const {tracks} = this.props;
39 | return (
40 |
10 |
20 | How do you want to play?
11 |
12 |
19 |
13 |
14 |
15 |
16 |
17 |
18 |
21 |
75 |
22 |
31 |
32 |
33 |
23 |
25 | Player 1's Go
24 |
26 |
27 |
28 |
30 | Player 2's Go
29 |
34 |
74 |
35 |
39 |
36 | content
37 |
38 |
40 |
44 |
41 | content
42 |
43 |
45 |
49 |
46 | content
47 |
48 |
50 |
53 | content
51 |
52 |
54 |
57 | content
55 |
56 |
58 |
61 | content
59 |
60 |
62 |
65 | content
63 |
64 |
66 |
69 | content
67 |
68 |
70 |
73 | content
71 |
72 |
41 | {tracks.map((track, k) => {
42 | const trackImg = track.album.images[0].url;
43 | console.log(track);
44 | return (
45 |
74 | )
75 | }
76 | }
77 |
78 | export default Gallery;
--------------------------------------------------------------------------------
/PureCSS/week1/day5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | this.playAudio(track.preview_url)}
49 | >
50 | 
65 |
69 | )
70 |
71 | }
72 | )}
73 |
51 |
60 |
52 | {
53 | (this.state.playingUrl === track.preview_url & this.state.playing)
54 | ? ⏸
55 | : ▶
56 | }
57 |
58 |
59 | 66 | {track.name} 67 |
68 |
6 |
--------------------------------------------------------------------------------
/movieAPI/dynamo.js:
--------------------------------------------------------------------------------
1 | const AWS = require('aws-sdk');
2 |
3 | let documentClient = new AWS.DynamoDB.DocumentClient({
4 | 'region': 'eu-west-1'
5 | });
6 |
7 | module.exports = class DB {
8 | write(ID, data, table) {
9 | return new Promise((resolve, reject) => {
10 | if (typeof ID !== 'string') throw `the id must be a string and not ${ID}`
11 | if (!data) throw "data is needed";
12 | if (!table) throw 'table name is needed';
13 |
14 | let params = {
15 | TableName: table,
16 | Item: { ...data, ID: ID }
17 | };
18 |
19 | documentClient.put(params, function(err, result) {
20 | if (err) {
21 | console.log("Err in writeForCall writing messages to dynamo:", err);
22 | console.log(params);
23 | return reject(err);
24 | }
25 | console.log('wrote data to table ', table)
26 | return resolve({ ...result.Attributes, ...params.Item });
27 | });
28 | })
29 | };
30 |
31 | get(key, value, table) {
32 | if (!table) throw 'table needed';
33 | if (typeof key !== 'string') throw `key was not string and was ${JSON.stringify(key)} on table ${table}`;
34 | if (typeof value !== 'string') throw `value was not string and was ${JSON.stringify(value)} on table ${table}`;
35 | return new Promise((resolve, reject) => {
36 | let params = {
37 | TableName: table,
38 | Key: {
39 | [key]: value
40 | }
41 | };
42 | documentClient.get(params, function(err, data) {
43 | if (err) {
44 | console.log(`There was an error fetching the data for ${key} ${value} on table ${table}`, err);
45 | return reject(err);
46 | }
47 | //TODO check only one Item.
48 | return resolve(data.Item);
49 | });
50 | });
51 | }
52 |
53 | async increment(ID, genre, table) {
54 | if (!table) throw 'table needed';
55 | if (!ID) throw 'ID needed';
56 | let data;
57 | try {
58 | data = await this.get('movie-genre', ID, table);
59 | } catch (err) {
60 | data = { "movie-genre": ID, genre, count: 0 };
61 | };
62 | let newData = { ...data, count: data.count + 1 };
63 | return this.write(ID, newData, table);
64 | }
65 |
66 | scan(key, value, table) {
67 | return new Promise((resolve, reject) => {
68 | let params = {
69 | TableName: table,
70 | FilterExpression: `${key} = :value`,
71 | ExpressionAttributeValues: { ':value': value }
72 | };
73 |
74 | documentClient.scan(params, function(err, data) {
75 | if (err) reject(err)
76 | resolve(data);
77 | });
78 | });
79 | }
80 | }
--------------------------------------------------------------------------------
/ConnorSite/Connor.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
78 |
39 |
57 |
58 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
5 | JavaScript Calculator
9 | ';
7 | }
8 | function onePlayer() {
9 | 'use strict';
10 | choosePeice();
11 | }
12 |
13 | function twoPlayer() {
14 | 'use strict';
15 | choosePeice();
16 | }
17 | function togglePlayer(char) {
18 | 'use strict';
19 | var p1 = document.getElementById('player1Go'),
20 | p2 = document.getElementById('player2Go');
21 | if (p2.style.display === 'none') {
22 | p1.style.display = 'none';
23 | p2.style.display = 'block';
24 | } else {
25 | p2.style.display = 'none';
26 | p1.style.display = 'block';
27 | }
28 | return (char === 'X') ? '0' : 'X';
29 | }
30 |
31 |
32 | function startGame(char) {
33 | 'use strict';
34 | document.getElementById("screen").style.display = 'none';
35 | document.getElementById("screen2").style.display = 'block';
36 | document.getElementById("player2Go").style.display = 'none';
37 |
38 | var board = {
39 | 0: 0,
40 | 1: 0,
41 | 2: 0,
42 | 3: 0,
43 | 4: 0,
44 | 5: 0,
45 | 6: 0,
46 | 7: 0,
47 | 8: 0
48 | },
49 | winning = [
50 | [0, 1, 2],
51 | [4, 5, 3],
52 | [7, 8, 8],
53 | [1, 4, 7],
54 | [2, 5, 8],
55 | [0, 3, 6],
56 | [0, 4, 8],
57 | [2, 4, 6]
58 | ],
59 | sqrs = document.getElementsByClassName("square"),
60 | i;
61 |
62 | function winner () {
63 | var j, rowtotal, won;
64 | for (j = 0; j < winning.length; j += 1) {
65 | rowtotal = winning[j].reduce((total, p) => {return total + board[p]}, 0);
66 | console.log(rowtotal);
67 | if (rowtotal === 3 || rowtotal === -3){
68 | console.log('winner');
69 | board = {0: '', 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0};
70 | won = winning[j];
71 | won.map(val => {sqrs[val].style.background = 'green'});
72 | setTimeout(function(){
73 | for (i = 0; i< sqrs.length; i += 1) {
74 | sqrs[i].innerHTML = '';
75 | }
76 | won.map(val => {sqrs[val].style.background = 'white'});
77 | }, 1000);
78 | }
79 | }
80 | }
81 |
82 | sqrs[0].onclick = (function () {
83 | if (!board[0]) {
84 | sqrs[0].innerHTML = char;
85 | board[0] = (char === 'X') ? 1 : -1;
86 | char = togglePlayer(char);
87 | winner();
88 | }
89 | });
90 | sqrs[1].onclick = (function () {
91 | if (!board[1]) {
92 | sqrs[1].innerHTML = char;
93 | board[1] = (char === 'X') ? 1 : -1;
94 | char = togglePlayer(char);
95 | winner();
96 | }
97 | });
98 | sqrs[2].onclick = (function () {
99 | if (!board[2]) {
100 | sqrs[2].innerHTML = char;
101 | board[2] = (char === 'X') ? 1 : -1;
102 | char = togglePlayer(char);
103 | winner();
104 | }
105 | });
106 | sqrs[3].onclick = (function () {
107 | if (!board[3]) {
108 | sqrs[3].innerHTML = char;
109 | board[3] = (char === 'X') ? 1 : -1;
110 | char = togglePlayer(char);
111 | winner();
112 | }
113 | });
114 | sqrs[4].onclick = (function () {
115 | if (!board[4]) {
116 | sqrs[4].innerHTML = char;
117 | board[4] = (char === 'X') ? 1 : -1;
118 | char = togglePlayer(char);
119 | winner();
120 | }
121 | });
122 | sqrs[5].onclick = (function () {
123 | if (!board[5]) {
124 | sqrs[5].innerHTML = char;
125 | board[5] = (char === 'X') ? 1 : -1;
126 | char = togglePlayer(char);
127 | winner();
128 | }
129 | });
130 | sqrs[6].onclick = (function () {
131 | if (!board[6]) {
132 | sqrs[6].innerHTML = char;
133 | board[6] = (char === 'X') ? 1 : -1;
134 | char = togglePlayer(char);
135 | winner();
136 | }
137 | });
138 | sqrs[7].onclick = (function () {
139 | if (!board[7]) {
140 | sqrs[7].innerHTML = char;
141 | board[7] = (char === 'X') ? 1 : -1;
142 | char = togglePlayer(char);
143 | winner();
144 | }
145 | });
146 | sqrs[8].onclick = (function () {
147 | if (!board[8]) {
148 | sqrs[8].innerHTML = char;
149 | board[8] = (char === 'X') ? 1 : -1;
150 | char = togglePlayer(char);
151 | winner();
152 | }
153 | });
154 |
155 |
156 |
157 | }
158 |
--------------------------------------------------------------------------------
/PureCSS/week1/day4.css:
--------------------------------------------------------------------------------
1 | :root{
2 | --oran: #e17002;
3 | --offwhite: #F9E4CF;
4 | --db: #985412;
5 | --vdb: #833500;
6 | }
7 |
8 |
9 | .box {
10 | position: relative;
11 | width: 60vw;
12 | height: 60vw;
13 | margin-top: %;
14 | margin-left: auto;
15 | margin-right: auto;
16 | background: none;
17 | }
18 |
19 | .head {
20 | position: absolute;
21 | width: 70%;
22 | height: 70%;
23 | top: 5%;
24 | left: 15%;
25 | border-radius: 50%;
26 | background: var(--oran);
27 | }
28 |
29 | .headcopy{
30 | position: absolute;
31 | width: 100%;
32 | height: 100%;
33 | top: 0;
34 | left: 0;
35 | border-radius: 50%;
36 | background: var(--oran);
37 | box-shadow: 0 -5px 5px 0 var(--oran);;
38 | }
39 |
40 | .earL, .earR{
41 | position: absolute;
42 | width: 50%;
43 | height: 80%;
44 | top: -10%;
45 | border-radius: 50;
46 | background: var(--offwhite);
47 | transform: rotate(-50deg);
48 | border-radius: 50%;
49 | border-top: 10px solid var(--vdb);
50 | border-right: 10px solid var(--vdb);
51 | box-shadow: 0 -5px 5px var(--vdb);
52 | }
53 | .earL{left: -10%}
54 |
55 | .earR{
56 | right:-10%;
57 | transform: rotate(50deg);
58 | border-right: none;
59 | border-left: 10px solid var(--vdb);
60 | }
61 |
62 |
63 |
64 | .bottomearR {right: -35%; transform: rotate(-30deg)}
65 | .bottomearL {left: -35%; transform: rotate(30deg)}
66 |
67 | .inear {
68 | position: absolute;
69 | width: 50%;
70 | height: 70%;
71 | top: 10%;
72 | left: 25%;
73 | border-radius: 50%;
74 | background: var(--db);
75 | }
76 |
77 | .whitecover {
78 | position: absolute;
79 | width: 100%;
80 | height: 50%;
81 | top: 50%;
82 | left: 0;
83 | border-radius: 0 0 22vw 22vw;
84 | background: var(--offwhite);
85 |
86 | }
87 |
88 | .undereyeL, .undereyeR{
89 | position: absolute;
90 | width: 40%;
91 | height: 40%;
92 | top: 30%;
93 | border-radius: 50%;
94 | background: var(--oran);
95 |
96 | }
97 | .undereyeR {
98 | right: 0%;
99 | }
100 | .nosewhite {
101 | position: absolute;
102 | width: 30%;
103 | height: 30%;
104 | top: 46%;
105 | left: 35%;
106 | border-radius: 50%;
107 | background: var(--offwhite);
108 | }
109 | .nose{
110 | position: absolute;
111 | width: 80%;
112 | height: 70%;
113 | background: pink;
114 | border-radius: 50%;
115 | left: 10%;
116 | top: 5%;
117 | box-shadow: 5px 5px 5px rgba(200, 50, 100, 0.8)
118 | }
119 |
120 | .eyeL, .eyeR{
121 | position: absolute;
122 | width: 25%;
123 | height: 35%;
124 | top: 20%;
125 | border-radius: 50%;
126 | background: white;
127 | box-shadow: 0 0 10px 2px var(--db);
128 | }
129 | .eyeL{left: 10%;}
130 | .eyeR{right: 10%}
131 | .irisL, .irisR {
132 | position: absolute;
133 | width: 95%;
134 | height: 60%;
135 | top: 20%;
136 | border-radius: 50%;
137 | background: yellow;
138 | border-top: 2px solid;
139 | border-bottom: 2px solid;
140 | }
141 | .irisL{left:5%;}
142 | .irisR{right:5%;}
143 |
144 | .pupilL, .pupilR{
145 | position: absolute;
146 | width: 80%;
147 | height: 80%;
148 | top: 15%;
149 | left: 2%;
150 | border-radius: 50%;
151 | background: black;
152 | }
153 | .mouth{
154 | position: absolute;
155 | width: 40%;
156 | height: 15%;
157 | top: 75%;
158 | left: 30%;
159 | border-radius: 70%;
160 | border-top-left-radius: 40%;
161 | border-top-right-radius: 40%;
162 | background: darkred;
163 |
164 | }
165 | .tongue{
166 | position: absolute;
167 | width: 80%;
168 | height: 70%;
169 | top: 30%;
170 | left: 14%;
171 | border-radius: 50%;
172 | background: rgb(200, 50, 100);
173 | }
174 |
175 | .s1L, .s2L{
176 | position: absolute;
177 | width: 100%;
178 | height: 100%;
179 | border-radius: 50%;
180 | background: var(--vdb);
181 | -webkit-clip-path: polygon(0 58%, 0 65%, 30% 60%);
182 | clip-path: polygon(0 58%, 0 65%, 30% 60%);
183 | }
184 | .s2L{transform: rotate(-20deg)}
185 |
186 | .s1R, .s2R{
187 | position: absolute;
188 | width: 100%;
189 | height: 100%;
190 | border-radius: 50%;
191 | background: var(--vdb);
192 | -webkit-clip-path: polygon(100% 58%, 100% 65%, 70% 60%);
193 | clip-path: polygon(100% 58%, 100% 65%, 70% 60%);
194 | }
195 | .s2R{transform: rotate(20deg)}
196 |
197 | .s3L{
198 | position: absolute;
199 | width: 100%;
200 | height: 100%;
201 | border-radius: 50%;
202 | background: var(--vdb);
203 | -webkit-clip-path: polygon(0% 95%, 15% 100%, 28% 80%);
204 | clip-path: polygon(0% 95%, 15% 100%, 28% 80%);
205 | }
206 | .s3R{
207 | position: absolute;
208 | width: 100%;
209 | height: 100%;
210 | border-radius: 50%;
211 | background: var(--vdb);
212 | -webkit-clip-path: polygon(100% 95%, 85% 100%, 72% 80%);
213 | clip-path:
214 | }
215 | .stc{
216 | position: absolute;
217 | width: 100%;
218 | height: 100%;
219 | border-radius: 50%;
220 | background: var(--vdb);
221 | -webkit-clip-path: polygon(45% 0%, 55% 0%, 50% 40%)
222 | }
223 |
224 | .st1L, .st1R{
225 | position: absolute;
226 | width: 80%;
227 | height: 80%;
228 | top: -75%;
229 | border-radius: 50%;
230 | border: 2vw solid var(--vdb);
231 | -webkit-clip-path: polygon(30% 100%, 60% 100%, 50% 40%)
232 | }
233 | .st2L, .st2R{
234 | position: absolute;
235 | width: 80%;
236 | height: 80%;
237 | top: -65%;
238 | border-radius: 50%;
239 | border:1.2vw solid var(--vdb);
240 | -webkit-clip-path: polygon(40% 100%, 60% 100%, 50% 40%)
241 | }
242 |
243 | .st1R, .st2R{
244 | transform: scaleX(-1);
245 | right:0;
246 | }
247 |
248 | {
249 | position: absolute;
250 | width: ;
251 | height: ;
252 | top: ;
253 | left: ;
254 | border-radius: ;
255 | }
--------------------------------------------------------------------------------
/tttWithAi/ttt.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | function onePlayer() {
4 | 'use strict';
5 | choosePeice();
6 | }
7 |
8 | function twoPlayer() {
9 | 'use strict';
10 | choosePeice();
11 | }
12 |
13 | function choosePeice() {
14 | 'use strict';
15 | var btns = document.getElementById("btns");
16 | document.getElementById("question").innerHTML = "Do you want to be crosses or circles?";
17 | btns.innerHTML = '';
18 | }
19 |
20 | function togglePlayer(char) {
21 | 'use strict';
22 | var p1 = document.getElementById('player1Go'),
23 | p2 = document.getElementById('player2Go');
24 | char = (char === 'X') ? 'O' : 'X';
25 | return char;
26 |
27 | }
28 |
29 | function changeScreens() {
30 | document.getElementById("screen").style.display = 'none';
31 | document.getElementById("screen2").style.display = 'block';
32 | document.getElementById("player2Go").style.display = 'none';
33 | }
34 |
35 | function startGame(char) {
36 | 'use strict';
37 | var board = ['','','','','','','','',''],
38 | sqrs = document.getElementsByClassName('square'),
39 | [s0, s1, s2, s3, s4, s5, s6, s7, s8] = sqrs,
40 | human = char,
41 | ai = (char === 'X') ? 'O' : 'X',
42 | winning = [
43 | [0,1,2],
44 | [3,4,5],
45 | [6,7,8],
46 | [0,3,6],
47 | [1,4,7],
48 | [2,5,8],
49 | [0,4,8],
50 | [2,4,6]
51 | ];
52 | console.log(s0);
53 | changeScreens();
54 | for (var i = 0; i < sqrs.length; i++){
55 | sqrs[i].innerHTML = board[i];
56 | }
57 |
58 | function freeSpaces(board) {
59 | return board.filter(s => s != 'O' && s != 'X');
60 | }
61 |
62 | function win(board, player){
63 | var i;
64 | for (i = 0; i < winning.length; i += 1) {
65 |
66 | if (winning[i].filter(point => board[point] === player).length === 3){
67 | console.log('winner');
68 | return true;
69 | } else {
70 | return false;
71 | }
72 | }
73 | }
74 |
75 | function minimax(newBoard, player) {
76 | var spaces = freeSpaces(newBoard),
77 | moves = [];
78 |
79 | if (win(newBoard, human)){
80 | return -10;
81 | } else if (win(newBoard, ai)){
82 | return 10;
83 | } else if (freeSpaces.length === 0){
84 | return 0;
85 | }
86 | for (var i = 0; i < spaces.length; i += 1) {
87 | var move = {};
88 | move.index = newBoard[freeSpaces[i]];
89 | newBoard[freeSpaces[i]] = player;
90 | if (player == ai) {
91 | move.score = minimax(newBoard, human);
92 | } else {
93 | move.score = minimax(newBoard, ai);
94 | }
95 | newBoard[freeSpaces[i]] = move.index;
96 | moves.push(move);
97 | }
98 | var bestmove;
99 | if (player == ai){
100 | var bestScore = -10000;
101 | for (var i = 0; i < moves.length; i += 1){
102 | if (moves[i].score > bestScore) {
103 | bestScore = moves[i].score;
104 | bestmove = i;
105 | }
106 | }
107 | } else {
108 | var bestScore = 10000;
109 | for (var i = 0; i < moves.length; i += 1){
110 | if (moves[i].score < bestScore) {
111 | bestScore = moves[i].score;
112 | bestmove = i;
113 | }
114 | }
115 | }
116 | console.log(moves[bestmove]);
117 | return moves[bestmove];
118 | }
119 | s0.addEventListener('click', function () {
120 | if (!s0.innerHTML){
121 | s0.innerHTML = char;
122 | board[0] = char;
123 | if (win(board, char)) {
124 | char = togglePlayer(char);
125 | startGame(char);
126 | } else {
127 | char = togglePlayer(char);
128 | }
129 | }
130 | })
131 | s1.addEventListener('click', function () {
132 | if (!s1.innerHTML){
133 | s1.innerHTML = char;
134 | board[1] = char;
135 | if (win(board, char)) {
136 | char = togglePlayer(char);
137 | startGame(char);
138 | } else {
139 | char = togglePlayer(char);
140 | }
141 | }
142 | })
143 | s2.addEventListener('click', function () {
144 | if (!s2.innerHTML){
145 | s2.innerHTML = char;
146 | board[2] = char;
147 | if (win(board, char)) {
148 | char = togglePlayer(char);
149 | startGame(char);
150 | } else {
151 | char = togglePlayer(char);
152 | }
153 | }
154 | })
155 | s3.addEventListener('click', function () {
156 | if (!s3.innerHTML){
157 | s3.innerHTML = char;
158 | board[3] = char;
159 | if (win(board, char)) {
160 | char = togglePlayer(char);
161 | startGame(char);
162 | } else {
163 | char = togglePlayer(char);
164 | }
165 | }
166 | })
167 | s4.addEventListener('click', function () {
168 | if (!s4.innerHTML){
169 | s4.innerHTML = char;
170 | board[4] = char;
171 | if (win(board, char)) {
172 | char = togglePlayer(char);
173 | startGame(char);
174 | } else {
175 | char = togglePlayer(char);
176 | }
177 | }
178 | })
179 | s5.addEventListener('click', function () {
180 | if (!s5.innerHTML){
181 | s5.innerHTML = char;
182 | board[5] = char;
183 | if (win(board, char)) {
184 | char = togglePlayer(char);
185 | startGame(char);
186 | } else {
187 | char = togglePlayer(char);
188 | }
189 | }
190 | })
191 | s6.addEventListener('click', function () {
192 | if (!s6.innerHTML){
193 | s6.innerHTML = char;
194 | board[6] = char;
195 | if (win(board, char)) {
196 | char = togglePlayer(char);
197 | startGame(char);
198 | } else {
199 | char = togglePlayer(char);
200 | }
201 | }
202 | })
203 | s7.addEventListener('click', function () {
204 | if (!s7.innerHTML){
205 | s7.innerHTML = char;
206 | board[7] = char;
207 | if (win(board, char)) {
208 | char = togglePlayer(char);
209 | startGame(char);
210 | } else {
211 | char = togglePlayer(char);
212 | }
213 | }
214 | })
215 | s8.addEventListener('click', function () {
216 | if (!s8.innerHTML){
217 | s8.innerHTML = char;
218 | board[8] = char;
219 | if (win(board, char)) {
220 | char = togglePlayer(char);
221 | startGame(char);
222 | } else {
223 | char = togglePlayer(char);
224 | }
225 | }
226 | })
227 |
228 |
229 |
230 |
231 | }
232 |
--------------------------------------------------------------------------------
6 |
--------------------------------------------------------------------------------
/goal-coach/build/service-worker.js:
--------------------------------------------------------------------------------
1 | "use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/Projects/goal-coach/build/index.html","0cf33b4f4b3abcc4ca05522291b00621"],["/Projects/goal-coach/build/static/js/main.d27a5407.js","678923e965d1c2a84de5b76ffd07893d"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/Projects/goal-coach/build/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
--------------------------------------------------------------------------------
/MusicMaster/build/service-worker.js:
--------------------------------------------------------------------------------
1 | "use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/musicMaster/index.html","a312e157b5364f25b71d1143a55d40b5"],["/musicMaster/static/css/main.680f83f7.css","2e15672e97598f5efc213efa60c0bfd8"],["/musicMaster/static/js/main.5d0ac0c7.js","0f6d97b9257abfdea72ff8f8ce9f0062"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/musicMaster/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
--------------------------------------------------------------------------------
/ReminderPro/build/service-worker.js:
--------------------------------------------------------------------------------
1 | "use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/Projects/ReminderPro/build/index.html","e37f1bdc7326b7185b93af6d746c9cc1"],["/Projects/ReminderPro/build/static/css/main.c79d7d13.css","6bb78ded4a0ad63d32642d9cd50d411b"],["/Projects/ReminderPro/build/static/js/main.8a9608f5.js","7c95abd99b4f8492cace9627b3d7d775"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/Projects/ReminderPro/build/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
--------------------------------------------------------------------------------
/CountdownChamp/build/service-worker.js:
--------------------------------------------------------------------------------
1 | "use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/Projects/CountdownChamp/build/index.html","ab909a6e8454e38a76d7323c5e15b6fe"],["/Projects/CountdownChamp/build/static/css/main.5a3dd558.css","b7d06f4c603811160b34c86321885794"],["/Projects/CountdownChamp/build/static/js/main.3e4f3810.js","b2c028167ec40a240826e652b2b9be32"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/Projects/CountdownChamp/build/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
--------------------------------------------------------------------------------
/PureCSS/week1/day1.css:
--------------------------------------------------------------------------------
1 | .box {
2 | position: relative;
3 | margin: auto;
4 | display: block;
5 | margin-top: 8%;
6 | width: 600px;
7 | height: 600px;
8 | background: none;
9 | border: 3px solid red;
10 | }
11 |
12 | .head {
13 | position: absolute;
14 | top: 20%;
15 | left: 25%;
16 | width: 50%;
17 | height: 60%;
18 | background: #ba4a00;
19 | border-radius: 40%;
20 | border-top-left-radius: 50%;
21 | border-top-right-radius: 50%;
22 | }
23 |
24 | .headcopy {
25 | position: absolute;
26 | width: 100%;
27 | height: 100%;
28 | background: #ba4a00;
29 | border-radius: 40%;
30 | border-top-left-radius: 50%;
31 | border-top-right-radius: 50%;
32 | z-index: 2;
33 | }
34 |
35 | .leftear, .rightear{
36 | position: absolute;
37 | top: -5%;
38 | width: 30%;
39 | height: 50%;
40 | background: #ba4a00;
41 | border-radius: 50%;
42 | z-index: 1;
43 | }
44 |
45 | .leftear {left: 0%}
46 | .rightear {right: 0%}
47 |
48 | .innerear {
49 | position: absolute;
50 | top: 10%;
51 | left: 10%;
52 | width: 80%;
53 | height: 80%;
54 | background: #edbb99;
55 | border-radius: 50%;
56 | border: 2px solid black;
57 | }
58 |
59 | .lefteye, .righteye {
60 | position: absolute;
61 | background: white;
62 | top: 25%;
63 | width: 20%;
64 | height: 30%;
65 | border-radius: 50%;
66 | z-index: 3;
67 | }
68 |
69 | .lefteye {left: 25%;}
70 | .righteye {right: 25%;}
71 |
72 | .iris {
73 | background: #0066ff;
74 | z-index: 4;
75 | position: absolute;
76 | top: 30%;
77 | left: 15%;
78 | width: 70%;
79 | height: 50%;
80 | border-radius: 50%;
81 | }
82 |
83 | .pupil{
84 | position: absolute;
85 | top: 25%;
86 | left: 25%;
87 | width: 50%;
88 | height: 50%;
89 | border-radius: 50%;
90 | background: black;
91 | z-index: 5
92 | }
93 |
94 | .mouth {
95 | position: absolute;
96 | background: #edbb99;
97 | top: 55%;
98 | left: 20%;
99 | width: 60%;
100 | height: 45%;
101 | z-index: 6;
102 | border-radius: 50%;
103 | border-top-left-radius: 60%;
104 | border-top-right-radius: 60%;
105 | }
106 |
107 | .nose {
108 | position: absolute;
109 | z-index: 4;
110 | background: black;
111 | width: 30%;
112 | height: 25%;
113 | top: -5%;
114 | left: 35%;
115 | border-radius: 50%;
116 | }
117 |
118 | .lipl, .lipr {
119 | position: absolute;
120 | width: 40%;
121 | height: 40%;
122 | z-index: 4;
123 | top: 40%;
124 | border-radius: 50%;
125 | background: black;
126 | }
127 |
128 | .lipl {left: 15%}
129 | .lipr {right: 15%}
130 |
131 | .inlip {
132 | position: absolute;
133 | width: 80%;
134 | height: 80%;
135 | top: 10%;
136 | left: 10%;
137 | z-index: 5;
138 | background: #edbb99;
139 | border-radius: 50%;
140 | }
141 |
142 | .coverbox {
143 | position: absolute;
144 | background: #edbb99;
145 | z-index: 5;
146 | width: 70%;
147 | height: 30%;
148 | top: 40%;
149 | left: 15%;
150 | }
151 |
152 | .uplip {
153 | position: absolute;
154 | background: black;
155 | z-index: 6;
156 | width:4%;
157 | height: 25%;
158 | top: 45%;
159 | left: 48%
160 | }
--------------------------------------------------------------------------------
/ReminderPro/src/components/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import '../App.css'
3 | import { connect } from 'react-redux';
4 | import { addReminder, deleteReminder, clearReminders } from '../actions';
5 | import moment from 'moment';
6 |
7 | class App extends Component {
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | text: '',
12 | dueDate: ''
13 | }
14 | }
15 |
16 | addReminder() {
17 | console.log(this);
18 | this.props.addReminder(this.state.text, this.state.dueDate);
19 | }
20 |
21 | deleteReminder(id) {
22 | console.log('deleting in application', id);
23 | console.log('this.props', this.props);
24 | this.props.deleteReminder(id);
25 | }
26 |
27 | renderReminders() {
28 | const { reminders } = this.props;
29 | return (
30 |
7 |
44 |
8 | 
11 |
13 |
43 | Connor Byrne
9 |Elite climber and Engineer
10 |
11 | Connor bouldering at the European University Championships in Croatia 2016.
12 |
14 |
23 | Bio
15 |16 | Connor has been climbing from a very young age, progressing into competition at just 8 years old. From there he carried on to earn a place on the British climbing team and has stayed on since. His progress in climbing competitions continued to improve, 17 | becoming the British lead climbing champion in DATE in is age category. Having managed to maintain his title as British Junior climbing champion for 4 years, natural progress pushed him onto international competition.
18 |19 | As well as his climbing, Connor has persued a career in engineer, getting into Sheffield University in 2014. Through this, he joied the University Climbing team, leading to 2 more NUBS titles. With the rest of the 20 | team, he has competed for his univerisity and country at the European and World university climbing championships. 21 |
22 |
24 |
35 |
36 | -
25 |
- 2013-16 - British Junior Lead Climbing Champion 26 |
- September 2014 - Started Aerospace Engineerin at Sheffield Univeristy 27 |
- 2014/15 - 5th place in BUCS bouldering 28 |
- 2014/15 and 2016/17 - Member of the NUBS winning team both years 29 |
- 2015/16 - BUCS bouldering - 4th, lead - 1st 30 |
- August 2015 - European University Climbing Championships 16th lead, 30th bouldering 31 |
- July 2016 - European Univerity Games 7th lead, 8th bouldering, 16th speed 32 |
- October 2016 - Competed in the World University Climbing Championships coming 33 |
For to find out more, go to his personal website.
37 | 38 | 42 |-
31 | {
32 | reminders.map(reminder => {
33 | return (
34 |
-
35 | 36 |39 |{reminder.text}37 |{moment(new Date(reminder.dueDate)).fromNow()}38 |this.deleteReminder(reminder.id)} 42 | > 43 | ✕ 44 |45 |
46 | )
47 | })
48 | }
49 |
56 |
87 | )
88 | }
89 | }
90 |
91 | function mapStateToProps(state) {
92 | return {
93 | reminders: state
94 | }
95 | }
96 |
97 | export default connect(mapStateToProps, {addReminder, deleteReminder, clearReminders})(App);
--------------------------------------------------------------------------------
/JS_Calc/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
57 | Reminder Pro
58 |
59 |
60 |
80 |
81 | { this.renderReminders() }
82 |
61 | this.setState({text: event.target.value})}
66 | />
67 | this.setState({dueDate: event.target.value})}
71 | />
72 |
73 |
79 | this.props.clearReminders()}
85 | >Clear Reminders
86 |
10 |
12 |
13 | Sam's JavaScript Calculator
11 |
14 |
86 |
--------------------------------------------------------------------------------
/MusicMaster/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './App.css';
3 | import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';
4 | import Profile from './Profile';
5 | import Gallery from './Gallery';
6 |
7 | class App extends Component {
8 | constructor(props) {
9 | super(props)
10 | this.state = {
11 | query: "",
12 | artist: null,
13 | tracks: []
14 | }
15 | }
16 |
17 |
18 |
19 | search() {
20 | const BASE_URL = 'https://api.spotify.com/v1/search?';
21 | let FETCH_URL = `${BASE_URL}q=${this.state.query}&type=artist&limit=1`;
22 | const TRACKS_URL = 'https://api.spotify.com/v1/artists/';
23 | let accessToken = "BQBRs6vq4saXCMHQx-H6TLxgw_XJCuXY5mL2AIrLfyDPMXBqZuy00G7CgnPRM4eg7VsEQ36tplG-wcSaYeMcoA";
24 |
25 | let myOptions = {
26 | method: 'GET',
27 | headers: {
28 | Authorization: 'Bearer ' + accessToken
29 | },
30 | mode: 'cors',
31 | cache: 'default',
32 | };
33 |
34 | fetch("https://accounts.spotify.com/api/token", {
35 | body: "grant_type=client_credentials",
36 | headers: {
37 | Authorization: "Basic YTQ3ZDlmMzAzZTQwNDY4ODg5OGM4N2JmOTcxOWYyYzQ6Y2JkOGMzODk4NjA2NDBiYTlkMmMxNGIzNzM1MTNmOTA=",
38 | "Content-Type": "application/x-www-form-urlencoded"
39 | },
40 | method: "POST",
41 | mode: 'cors'
42 | })
43 | .then(response => response.json())
44 | .then(json => {
45 | console.log(json);
46 | });
47 |
48 | fetch(FETCH_URL, myOptions)
49 | .then(response => response.json())
50 | .then(json => {
51 | console.log(json);
52 | const artist = json.artists.items[0];
53 | this.setState({artist});
54 | FETCH_URL = `${TRACKS_URL}${artist.id}/top-tracks?country=US&`;
55 | fetch(FETCH_URL, myOptions)
56 | .then(response => response.json())
57 | .then(json => {
58 | const { tracks } = json;
59 | this.setState({tracks});
60 | })
61 | })
62 | }
63 |
64 | render() {
65 | return (
66 |
15 |
22 | 16 | ... 17 |
18 |19 | 0 20 |
21 |
23 |
48 |
24 |
25 |
47 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
49 |
85 |
50 |
84 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
67 |
69 |
70 | {this.setState({query: event.target.value})}}
75 | onKeyPress={event => {
76 | if (event.key === "Enter"){
77 | this.search()
78 | }
79 | }}
80 | />
81 | this.search()} >
82 |
84 |
85 |
86 | {
87 | this.state.artist !== null
88 | ?
99 | )
100 | }
101 | }
102 |
103 | export default App;
--------------------------------------------------------------------------------
/PureCSS/week1/day2.css:
--------------------------------------------------------------------------------
1 | .box {
2 | position: relative;
3 | margin: 15%;
4 | display: block;
5 | margin-top: 8%;
6 | width: 70vh;
7 | height: 70vh;
8 | background: none;
9 | }
10 |
11 | .body {
12 | position: absolute;
13 | width: 60%;
14 | height: 40%;
15 | top: 30%;
16 | left: 30%;
17 | background: grey;
18 | border-radius: 40%;
19 | }
20 |
21 | .bodycopy {
22 | position: absolute;
23 | width: 100%;
24 | height: 100%;
25 | background: grey;
26 | border-radius: 40%;
27 | box-shadow: 10px 10px rgb(119, 119, 119);
28 | z-index: 2;
29 | }
30 |
31 | .legsfront, .legsback {
32 | position: absolute;
33 | width: 15%;
34 | height: 90%;
35 | top: 40%;
36 | background: #666;
37 | }
38 |
39 | .legsfront {left: 5%}
40 | .legsback {left: 70%}
41 |
42 | .otherleg {
43 | position: absolute;
44 | width: 100%;
45 | height: 100%;
46 | top: 10%;
47 | left: 70%;
48 | background: #777;
49 | }
50 |
51 | .foot, .otherfoot {
52 | position: absolute;
53 | width: 100%;
54 | height: 10%;
55 | bottom: -5%;
56 | border-radius: 50%;
57 | }
58 |
59 | .foot {background: #555;}
60 | .otherfoot {background: #666}
61 |
62 | .toe {
63 | position: absolute;
64 | width: 15%;
65 | height: 60%;
66 | bottom: 0%
67 | }
68 |
69 | .head {
70 | position: absolute;
71 | width: 50%;
72 | height: 75%;
73 | left: -15%;
74 | top: -15%;
75 | background: grey;
76 | border-radius: 50%;
77 | }
78 |
79 | .headcopy {
80 | position: absolute;
81 | width: 100%;
82 | height: 100%;
83 | left: 0%;
84 | top: 0%;
85 | background: grey;
86 | border-radius: 50%;
87 | z-index: 2;
88 | box-shadow: 4px 4px #666;
89 | }
90 |
91 | .ears {
92 | position: absolute;
93 | width: 80%;
94 | height: 100%;
95 | left: 30%;
96 | top: 10%;
97 | background: grey;
98 | border-radius: 50%;
99 | border: 2px solid #666;
100 | z-index: 3;
101 | }
102 |
103 | .innerear {
104 | position: absolute;
105 | width: 80%;
106 | height: 80%;
107 | left: 10%;
108 | top: 10%;
109 | background: #888;
110 | border-radius: 50%;
111 | }
112 |
113 | .earcover {
114 | position: absolute;
115 | width: 70%;
116 | height: 80%;
117 | left: -20%;
118 | top: 0%;
119 | background: grey;
120 | border-radius: 50%;
121 | }
122 |
123 | .eye {
124 | position: absolute;
125 | width: 15%;
126 | height: 15%;
127 | left: 30%;
128 | top: 50%;
129 | background: white;
130 | border: 1px solid black;
131 | border-radius: 50%;
132 | z-index: 4;
133 | }
134 |
135 | .pupil {
136 | position: absolute;
137 | width: 70%;
138 | height: 70%;
139 | left: 5%;
140 | top: 15%;
141 | border-radius: 50%;
142 | background: black;
143 | }
144 |
145 | .trunk {
146 | position: absolute;
147 | width: 100%;
148 | height: 100%;
149 | top: 0%;
150 | left: -80%;
151 | border-radius: 50%;
152 | background: grey;
153 | box-shadow: 4px 4px #777;
154 | }
155 |
156 | .intrunk {
157 | position: absolute;
158 | width: 62%;
159 | height: 62%;
160 | top: 25%;
161 | left: 20%;
162 | background: white;
163 | border-radius: 50%;
164 | }
165 |
166 | .trunkcover {
167 | position: absolute;
168 | width: 100%;
169 | height: 60%;
170 | top: 0%;
171 | left: 0%;
172 | background: white;
173 | }
174 |
175 | .trunkcover2 {
176 | position: absolute;
177 | width: 15%;
178 | height: 100%;
179 | background: white;
180 | }
181 |
182 | .tc3 {
183 | position: absolute;
184 | width: 25%;
185 | height:70%;
186 | background: white;
187 | }
188 |
189 | .snout {
190 | position: absolute;
191 | width: 5%;
192 | height 10%;
193 | top: 55%;
194 | left: 30%;
195 | background: pink;
196 | border-radius: 50%;
197 | z-index: 7;
198 | }
--------------------------------------------------------------------------------
/PureCSS/PureCSS.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,500,700|Lato');
2 |
3 | :root{
4 | --primary: #5C6BC0;
5 | --primary-background: rgba(19, 25, 62, 0.8), rgba(19, 25, 62, 1.0);
6 | --accent: #FFAB00;
7 | --accent2: #FFD740;
8 | --neutral-white: #ffffff;
9 | --neutral-gray: #28282B;
10 | --primary-font: "Lato";
11 | --secondary-font: "Open Sans";
12 | --large-font-size: 68px;
13 | --small-font-size: 24px;
14 | --extra-small-font-size: 16px;
15 | --mobile-large-font-size: 38px;
16 | --mobile-small-font-size: 8px;
17 | --mobile-extra-small-font-size: 6px;
18 | --thick-font-weight: 500;
19 | --medium-font-weight: 300;
20 | --uppercase-transform: uppercase;
21 | --triangle: polygon(50% 43%, 0% 100%, 100% 100%);
22 | }
23 |
24 | body,
25 | html {
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | .icon{
31 | margin-right: 10px;
32 | color: white;
33 | }
34 |
35 | .icon-webpage{
36 | position: absolute;
37 | top: 25%;
38 | left: 25%;
39 | color: var(--accent);
40 | }
41 |
42 | .intro-header {
43 | padding-top: 0px;
44 | padding-bottom: 20px;
45 | text-align: center;
46 | background: linear-gradient(var(--primary-background)),
47 | url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.26.36%20PM.png")
48 | no-repeat center center;
49 | background-size: cover;
50 | }
51 |
52 | .bottom-triangle{
53 | position: absolute;
54 | bottom: -20px;
55 | left: 25%;
56 | height: 30%;
57 | width: 50%;
58 | background: var(--accent);
59 | -webkit-clip-path: var(--triangle);
60 | clip-path: var(--triangle);
61 |
62 | }
63 |
64 | .intro-message {
65 | position: relative;
66 | padding-top: 15%;
67 | padding-bottom: 20%;
68 | }
69 |
70 | .intro-message > h1 {
71 | color: var(--accent2);
72 | font-weight: 100;
73 | font-size: var(--large-font-size);
74 | font-family: var(--primary-font);
75 | }
76 |
77 | #bold{
78 | color: var(--accent);
79 | font-weight: 700;
80 | }
81 |
82 | .intro-message > h3 {
83 | color: var(--accent2);
84 | font-size: var(--small-font-size);
85 | font-family: var(--secondary-font);
86 | margin-top: 20px;
87 | }
88 |
89 | #button-a{
90 | color: var(--neutral-white);
91 | font-size: var(--small-font-size);
92 | font-family: var(--secondary-font);
93 | margin-top: 30px;
94 | border: solid 6px var(--neutral-white);
95 | background: var(--accent);
96 | padding: 15px;
97 | text-transform: var(--uppercase-transform);
98 | font-weight: var(--thick-font-weight);
99 |
100 | }
101 |
102 | #button-b{
103 | color: var(--neutral-white);
104 | font-size: var(--small-font-size);
105 | font-family: var(--secondary-font);
106 | margin-top: 10px;
107 | float: left;
108 | border: solid 6px var(--neutral-white);
109 | background: var(--accent);
110 | padding: 15px;
111 | text-transform: var(--uppercase-transform);
112 | font-weight: var(--thick-font-weight);
113 |
114 | }
115 |
116 | #button-two{
117 | color: var(--neutral-white);
118 | font-size: var(--small-font-size);
119 | font-family: var(--secondary-font);
120 | margin-top: 10px;
121 | margin-bottom: 20px;
122 | border: solid 6px var(--neutral-white);
123 | background: none;
124 | padding: 15px;
125 | text-transform: var(--uppercase-transform);
126 | font-weight: var(--thick-font-weight);
127 |
128 | }
129 |
130 | .section-heading-a, .lead-a{
131 | text-align: left;
132 | }
133 |
134 | .section-heading-b, .lead-b{
135 | text-align: right;
136 | color: var(--accent2);
137 | }
138 |
139 | .content-section-a {
140 | padding: 50px;
141 | padding-bottom: 80px;
142 | background: var(--accent);
143 | text-align: center;
144 | color: var(--neutral-white);
145 | }
146 |
147 | .content-section-b {
148 | padding: 50px;
149 | padding-bottom: 80px;
150 | background: linear-gradient(var(--primary-background));
151 | text-align: center;
152 | color: var(--neutral-white);
153 |
154 | }
155 |
156 |
157 | //mobile responsive
158 | @media all and (max-width: 600px) {
159 | .intro-message > h1 {
160 | font-size: var(--mobile-large-font-size);
161 | }
162 | .section-heading-a, .lead-a{
163 | text-align: center;
164 | }
165 |
166 | .section-heading-b, .lead-b{
167 | text-align: center;
168 | }
169 | #button-b{
170 | float: none;
171 | }
172 | }
--------------------------------------------------------------------------------
/simonGame/simon.js:
--------------------------------------------------------------------------------
1 | var strict = false,
2 | clickDisabled = false,
3 | audio = document.getElementsByTagName('audio');
4 |
5 |
6 | function highlight(colour) {
7 | 'use strict';
8 | var pad = document.getElementsByClassName(colour),
9 | style = window.getComputedStyle(pad[0]),
10 | col = style.getPropertyValue('border'),
11 | nums = col.match(/\d+/g),
12 | i,
13 | val = colour.match(/\d+/)[0];
14 | console.log(audio);
15 | nums.shift();
16 | audio[val-1].play();
17 |
18 | for (i = 0; i < 3; i += 1) {
19 | nums[i] = Number(nums[i]) + 50;
20 | }
21 | pad[0].style.border = "10vmin solid rgb(" + nums.join(',') + ')';
22 |
23 | setTimeout(function () {
24 | pad[0].style.border = "10vmin solid " + col.slice(11);
25 | }, 400);
26 | }
27 | function run(sequence) {
28 | 'use strict';
29 | var i = 0,
30 | show;
31 | sequence.push('c' + Math.ceil(Math.random() * 4));
32 | document.getElementById('screen').innerHTML = String(sequence.length);
33 | show = setInterval(function () {
34 | if (i < sequence.length) {
35 | highlight(sequence[i]);
36 | i += 1;
37 | } else {
38 | clearInterval(show);
39 | }
40 | }, 600);
41 | testPlayer(sequence);
42 | }
43 | function wrong() {
44 | 'use strict';
45 | var pad = document.getElementsByClassName('face'),
46 | style = window.getComputedStyle(pad[0]),
47 | col = style.getPropertyValue('background');
48 |
49 | pad[0].style.background = "rgb(255, 0, 0)" + col.slice(19);
50 | setTimeout(function () {
51 | pad[0].style.background = col;
52 | }, 400);
53 | if (strict) {
54 | run([]);
55 | }
56 | }
57 |
58 | function press(colour) {
59 | 'use strict';
60 | if (!clickDisabled) {
61 | highlight(colour);
62 | clickDisabled = true;
63 | setTimeout(function () {clickDisabled = false; }, 400);
64 | }
65 |
66 | }
67 | function won() {
68 | 'use strict';
69 | document.getElementById('screen').innerHTML = 'Won';
70 | }
71 |
72 | function isCorrect(c, j, seq) {
73 | 'use strict';
74 | if (c !== seq[j]) { // if not the correct button
75 | console.log(c, seq[j], j);
76 | wrong();
77 | if (strict) {
78 | run([]);
79 | } else {
80 | var i = 0;
81 | setInterval(function () {
82 | if (i < seq.length) {
83 | highlight(seq[i]);
84 | i += 1;
85 | }
86 | }, 600);
87 | return 0;
88 | }
89 | } else if (j === seq.length - 1) {
90 | if (j === 20) {
91 | won();
92 | } else {
93 | run(seq);
94 | }
95 | }
96 | j += 1;
97 | return j;
98 | }
99 | function testPlayer(seq) {
100 | 'use strict';
101 | var c1 = document.getElementsByClassName('c1'),
102 | c2 = document.getElementsByClassName('c2'),
103 | c3 = document.getElementsByClassName('c3'),
104 | c4 = document.getElementsByClassName('c4'),
105 | i = 0;
106 | c1[0].onclick = function () {
107 | if (!clickDisabled) {
108 | highlight('c1');
109 | i = isCorrect('c1', i, seq);
110 | clickDisabled = true;
111 | setTimeout(function () {clickDisabled = false; }, 400);
112 | }
113 | };
114 | c2[0].onclick = function () {
115 | if (!clickDisabled) {
116 | highlight('c2');
117 | i = isCorrect('c2', i, seq);
118 | clickDisabled = true;
119 | setTimeout(function () {clickDisabled = false; }, 400);
120 | }
121 | };
122 | c3[0].onclick = function () {
123 | if (!clickDisabled) {
124 | highlight('c3');
125 | i = isCorrect('c3', i, seq);
126 | clickDisabled = true;
127 | setTimeout(function () {clickDisabled = false; }, 400);
128 | }
129 | };
130 | c4[0].onclick = function () {
131 | if (!clickDisabled) {
132 | highlight('c4');
133 | i = isCorrect('c4', i, seq);
134 | clickDisabled = true;
135 | setTimeout(function () {clickDisabled = false; }, 400);
136 | }
137 | };
138 | }
139 | function strictToggle() {
140 | 'use strict';
141 | strict = strict ? false : true;
142 | document.getElementsByClassName('strict')[0].style.background = strict ? 'red' : 'none';
143 | }
144 |
--------------------------------------------------------------------------------
/PureCSS/week1/day3.css:
--------------------------------------------------------------------------------
1 | .box {
2 | position: relative;
3 | margin: 15%;
4 | display: block;
5 | margin-top: 8%;
6 | width: 70vh;
7 | height: 70vh;
8 | background: none;
9 | }
10 |
11 | .body {
12 | position: absolute;
13 | width: 40%;
14 | height: 60%;
15 | top: 50%;
16 | left: 30%;
17 | background: rgb(161, 65, 18);
18 | border-radius: 40%;
19 | }
20 |
21 | .head {
22 | position: absolute;
23 | width: 90%;
24 | height: 50%;
25 | left: 5%;
26 | top: -40%;
27 | background: rgb(161, 65, 18);
28 | border-radius: 50%;
29 | box-shadow: 5px 10px rgba(151, 55, 8, 1)
30 | }
31 |
32 | .tophead {
33 | position: absolute;
34 | width: 70%;
35 | height: 100%;
36 | left: 15%;
37 | top: -40%;
38 | background: rgb(161, 65, 18);
39 | border-radius: 50%
40 | }
41 |
42 | .leftear, .rightear{
43 | position: absolute;
44 | width: 30%;
45 | height: 30%;
46 | top: -5%;
47 | background: rgb(161, 65, 18);
48 | border-radius: 50%;
49 | }
50 |
51 | .leftear{left: -5%;}
52 | .rightear{right: -5%}
53 |
54 | .inear {
55 | position: absolute;
56 | width: 50%;
57 | height: 50%;
58 | top: 25%;
59 | left: 25%;
60 | background: rgb(191, 95, 18);
61 | border-radius: 50%;
62 | }
63 |
64 | .eyeleft, .eyeright {
65 | position: absolute;
66 | width: 25%;
67 | height: 50%;
68 | top: -10%;
69 | background: white;
70 | border-radius: 50%;
71 | border: 2px solid black;
72 | }
73 |
74 | .eyeleft{left: 30%}
75 | .eyeright{right: 30%}
76 |
77 | .overlefteye {
78 | position: absolute;
79 | width: 100%;
80 | height: 100%;
81 | background: white;
82 | border-radius: 50%;
83 | z-index: 2;
84 | }
85 |
86 | .leftpupil, .rightpupil {
87 | position: absolute;
88 | width: 35%;
89 | height: 20%;
90 | top: 65%;
91 | background: black;
92 | z-index: 5;
93 | border-radius: 50%;
94 | }
95 | .leftpupil {left: 40%;}
96 | .rightpupil { right: 40%}
97 |
98 | .nose {
99 | position: absolute;
100 | width: 15%;
101 | height: 20%;
102 | top: 35%;
103 | left: 42.5%;
104 | }
105 | .nosetop {
106 | position: absolute;
107 | width: 100%;
108 | height: 50%;
109 | -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
110 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
111 | background: #993300;
112 | z-index: 4;
113 | box-shadow: 5px 10px rgba(151, 55, 8, 1)
114 | }
115 |
116 | .nosecover {
117 | position: absolute;
118 | width: 100%;
119 | height: 50%;
120 | background: rgb(161, 65, 18);
121 | }
122 |
123 | .nosebottom {
124 | position: absolute;
125 | width: 100%;
126 | height: 100%;
127 | border-radius: 50%;
128 | background: #4d1a00;
129 |
130 | }
131 |
132 | .mouthleft, .mouthright {
133 | position: absolute;
134 | width: 40%;
135 | height: 40%;
136 | top: 30%;
137 | border-radius: 50%;
138 | border-bottom: 5px solid black;
139 | background: rgb(161, 65, 18);
140 | }
141 |
142 | .mouthleft {left: 20%}
143 | .mouthright {right: 20%}
144 |
145 | .lipblock {
146 | position: absolute;
147 | width: 30%;
148 | height: 20%;
149 | left: 35%;
150 | top: 48%;
151 | background: rgb(161, 65, 18);
152 | }
153 |
154 | .uplip {
155 | position: absolute;
156 | width: 2%;
157 | height: 10%;
158 | top: 58%;
159 | left: 49%;
160 | background: black;
161 | }
162 |
163 | .teeth {
164 | position: absolute;
165 | width: 30%;
166 | height: 30%;
167 | top: 65%;
168 | left: 35%;
169 | -webkit-clip-path: polygon(0 0, 100% 0, 84% 100%, 19% 100%);
170 | clip-path: polygon(0 0, 100% 0, 84% 100%, 19% 100%);
171 | background: white;
172 | }
173 |
174 | .centerteeth {
175 | position: absolute;
176 | width: 2%;
177 | top: 20%;
178 | height: 70%;
179 | left: 49%;
180 | background: black;
181 | }
182 |
183 | .rightarm, .leftarm {
184 | position: absolute;
185 | width: 20%;
186 | height: 35%;
187 | top: 15%;
188 | border-radius: 30%;
189 | background: rgb(151, 55, 8);
190 | }
191 |
192 | .leftarm {
193 | left: 0%;
194 | transform: rotate(15deg);
195 | box-shadow: 5px 5px rgba(141, 55, 8, .3);
196 | }
197 | .rightarm {
198 | right: 0%;
199 | transform: rotate(-15deg);
200 | box-shadow: -5px 5px rgba(141, 55, 8, .3);
201 | }
202 |
203 | .leftlower, .rightlower {
204 | position: absolute;
205 | width: 100%;
206 | height: 100%;
207 | top: 80%;
208 | border-radius: 30%;
209 | background: rgb(151, 55, 8);
210 | }
211 |
212 | .leftlower {
213 | transform: rotate(-30deg);
214 | left: 50%;
215 | box-shadow: 5px 5px rgba(141, 55, 8, .3);
216 | }
217 |
218 | .rightlower {
219 | transform: rotate(30deg);
220 | right: 50%;
221 | box-shadow: -5px 5px rgba(141, 55, 8, .3);
222 | }
--------------------------------------------------------------------------------
/tic-tac-toe/ttt.js:
--------------------------------------------------------------------------------
1 |
2 | function choosePeice() {
3 | 'use strict';
4 | var btns = document.getElementById("btns");
5 | document.getElementById("question").innerHTML = "Do you want to be crosses or circles?";
6 | btns.innerHTML = 'Music Master
68 |
89 |
96 | :
97 | }
98 |