├── .gitignore ├── ChuckNoris ├── ChuckNoris.css ├── ChuckNoris.html └── ChuckNoris.js ├── ConnorSite ├── Capture.PNG ├── Connor.css └── Connor.html ├── CountdownChamp ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ └── main.5a3dd558.css │ │ └── js │ │ └── main.3e4f3810.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.jsx │ ├── Clock.jsx │ └── index.js └── yarn.lock ├── FoodList ├── food.css ├── food.html └── food.js ├── JS_Calc ├── main.css ├── main.html └── main.js ├── LambdaLayers └── DemoLayer │ └── nodejs │ ├── package-lock.json │ └── package.json ├── Lambdas ├── build.sh └── medium-email-api │ ├── index.js │ └── package-lock.json ├── MusicMaster ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ └── main.680f83f7.css │ │ └── js │ │ └── main.5d0ac0c7.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.jsx │ ├── Gallery.jsx │ ├── Profile.jsx │ └── index.js └── yarn.lock ├── Pomo-Clock ├── Pomo.css ├── Pomo.html └── Pomo.js ├── PureCSS ├── PureCSS.css ├── PureCSS.html ├── week1 │ ├── day1.css │ ├── day1.html │ ├── day2.css │ ├── day2.html │ ├── day3.css │ ├── day3.html │ ├── day4.css │ ├── day4.html │ ├── day5.css │ └── day5.html ├── week2 │ ├── day10.css │ ├── day10.html │ ├── day6.css │ ├── day6.html │ ├── day6.js │ ├── day7.css │ ├── day7.html │ ├── day8.css │ ├── day8.html │ ├── day9.css │ └── day9.html └── week3 │ ├── day11.css │ ├── day11.html │ ├── day12.css │ ├── day12.html │ ├── day13.css │ ├── day13.html │ ├── day14.css │ ├── day14.html │ ├── day15.css │ └── day15.html ├── RandomQuote ├── randQuote.css ├── randQuote.html └── randQuote.js ├── ReminderPro ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ ├── css │ │ └── main.c79d7d13.css │ │ └── js │ │ └── main.8a9608f5.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── actions │ │ └── index.js │ ├── components │ │ └── App.jsx │ ├── constants.js │ ├── index.js │ └── reducers │ │ └── index.js └── yarn.lock ├── Twitch ├── twitch.css ├── twitch.html └── twitch.js ├── WeatherPage ├── weather.css ├── weather.html └── weather.js ├── demo.html ├── demo.js ├── goal-coach ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── service-worker.js │ └── static │ │ └── js │ │ └── main.d27a5407.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── actions │ │ └── index.js │ ├── components │ │ ├── AddGoal.jsx │ │ ├── App.jsx │ │ ├── CompleteGoalItem.jsx │ │ ├── CompleteGoalList.jsx │ │ ├── GoalItem.jsx │ │ ├── GoalList.jsx │ │ ├── SignIn.jsx │ │ └── SignUp.jsx │ ├── constants.js │ ├── firebase.js │ ├── index.js │ └── reducers │ │ ├── index.js │ │ ├── reducer-completed.js │ │ ├── reducer-goals.js │ │ └── reducer-user.js └── yarn.lock ├── hemingway ├── index.css ├── index.html └── index.js ├── mdPreview ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── index.html │ └── static │ │ ├── css │ │ ├── main.11584cf5.css │ │ └── main.11584cf5.css.map │ │ └── js │ │ ├── main.efa7ccff.js │ │ └── main.efa7ccff.js.map ├── package.json ├── public │ └── index.html └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ ├── Display.js │ ├── Editor.js │ ├── display.css │ ├── editor.css │ └── text.md │ ├── index.css │ ├── index.js │ └── logo.svg ├── movieAPI ├── dynamo.js ├── movieAPI.js └── tv-showAPI.js ├── simonGame ├── index.html ├── simon.css └── simon.js ├── tic-tac-toe ├── ttt.css ├── ttt.html └── ttt.js ├── tttWithAi ├── ttt.css ├── ttt.html └── ttt.js ├── whiteboard ├── index.html ├── whiteboard.css └── whiteboard.js └── wikiviewer ├── wikiview.css ├── wikiview.html └── wikiview.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /**/node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # generated css 13 | src/styles/css/ 14 | 15 | # generated json data 16 | cloud-data.json 17 | sun-data.json 18 | stars-data.json 19 | 20 | # misc 21 | .DS_Store 22 | .env 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .sass-cache/ 27 | *.map 28 | *.pem 29 | *.crx 30 | *.zip 31 | 32 | #Visual Studio Code config 33 | .vscode/* 34 | -------------------------------------------------------------------------------- /ChuckNoris/ChuckNoris.css: -------------------------------------------------------------------------------- 1 | #centerbox { 2 | background: white; 3 | margin: 100px 100px 100px 100px; 4 | border-radius: 20px; 5 | border: 3px solid red; 6 | 7 | } 8 | 9 | #topBox { 10 | padding: 20px 20px 20px 20px; 11 | display: flex; 12 | } 13 | 14 | html body { 15 | background: black; 16 | } 17 | 18 | #newQuote { 19 | margin: 20px 20px 20px 20px; 20 | font-size: 20px; 21 | background-color: red; 22 | } 23 | 24 | #quotetext { 25 | font-size: 25px; 26 | } 27 | 28 | .fa-twitter{ 29 | color: white; 30 | } 31 | 32 | #tweetbtn { 33 | background-color: red; 34 | color: white; 35 | border: 1px solid black; 36 | } 37 | 38 | #moveup { 39 | color: white; 40 | } 41 | 42 | #CNimage { 43 | justify-content: center; 44 | } 45 | 46 | @media (max-width: 740px) { 47 | #CNimg { 48 | display: none; 49 | } 50 | } -------------------------------------------------------------------------------- /ChuckNoris/ChuckNoris.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chuck Norris Joke Generator 9 |
10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 | 27 |
28 |
29 | 32 |
33 |
34 |
-------------------------------------------------------------------------------- /ChuckNoris/ChuckNoris.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | "use strict"; 3 | var randomQuote; 4 | function newQuote() { 5 | var url = 'https://api.icndb.com/jokes/random?'; 6 | $.getJSON(url, function (data) { 7 | randomQuote = data.value.joke; 8 | $('#quotetext').html(data.value.joke); 9 | 10 | }); 11 | } 12 | 13 | newQuote(); 14 | 15 | $('#tweetthis').on('click', function () { 16 | window.open("https://twitter.com/intent/tweet?text=" + randomQuote); 17 | }); 18 | 19 | $('#newQuote').on('click', function () { 20 | newQuote(); 21 | }); 22 | 23 | }); 24 | -------------------------------------------------------------------------------- /ConnorSite/Capture.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/ConnorSite/Capture.PNG -------------------------------------------------------------------------------- /ConnorSite/Connor.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin-top: 60px; 3 | background-color: grey; 4 | } 5 | 6 | ul { 7 | font-size: 20px; 8 | } 9 | 10 | .more_padding { 11 | padding-top: 40px; 12 | } 13 | -------------------------------------------------------------------------------- /ConnorSite/Connor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |
7 |
8 |

Connor Byrne

9 |

Elite climber and Engineer

10 |
11 |
Connor bouldering at the European University Championships in Croatia 2016.
12 |
13 |
14 |

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 |
23 |
24 |
    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 |
34 |
35 | 36 |

For to find out more, go to his personal website.

37 | 38 | 42 |
43 |
44 |
-------------------------------------------------------------------------------- /CountdownChamp/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.5a3dd558.css", 3 | "main.css.map": "static/css/main.5a3dd558.css.map", 4 | "main.js": "static/js/main.3e4f3810.js", 5 | "main.js.map": "static/js/main.3e4f3810.js.map" 6 | } -------------------------------------------------------------------------------- /CountdownChamp/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/CountdownChamp/build/favicon.ico -------------------------------------------------------------------------------- /CountdownChamp/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /CountdownChamp/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /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)}))}}); -------------------------------------------------------------------------------- /CountdownChamp/build/static/css/main.5a3dd558.css: -------------------------------------------------------------------------------- 1 | .app{text-align:center;font-size:35px;margin-top:20%}.app-title{font-size:50px}.clock-days,.clock-hours,.clock-minutes,.clock-seconds{display:inline;margin:10px}.deadline-input{font-size:25px;margin:5px} 2 | /*# sourceMappingURL=main.5a3dd558.css.map*/ -------------------------------------------------------------------------------- /CountdownChamp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-redux-1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.0.0", 7 | "react-bootstrap": "^0.31.3", 8 | "react-dom": "^16.0.0", 9 | "react-scripts": "1.0.14" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject", 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build" 18 | }, 19 | "homepage": "http://samwcoding.github.io/Projects/CountdownChamp/build", 20 | "devDependencies": { 21 | "gh-pages": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /CountdownChamp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/CountdownChamp/public/favicon.ico -------------------------------------------------------------------------------- /CountdownChamp/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | 23 | Countdown Champ 24 | 25 | 26 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /CountdownChamp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /CountdownChamp/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | text-align: center; 3 | font-size: 35px; 4 | margin-top: 20%; 5 | 6 | } 7 | 8 | .app-title { 9 | font-size: 50px; 10 | } 11 | 12 | .clock-days, .clock-hours, .clock-minutes, .clock-seconds { 13 | display: inline; 14 | margin: 10px; 15 | } 16 | .deadline-input { 17 | font-size: 25px; 18 | margin: 5px; 19 | } -------------------------------------------------------------------------------- /CountdownChamp/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Clock from './Clock'; 3 | import './App.css'; 4 | import { Form, FormControl, Button } from 'react-bootstrap'; 5 | 6 | class App extends Component { 7 | constructor(props) { 8 | super(props) 9 | this.state = { 10 | deadline: 'December 25, 2018', 11 | newDeadline: '' 12 | } 13 | } 14 | 15 | changeDeadline() { 16 | this.setState({deadline: this.state.newDeadline}) 17 | } 18 | 19 | render() { 20 | return ( 21 |
22 |
Countdown to {this.state.deadline}
23 | 26 |
27 | this.setState({newDeadline: event.target.value})} 30 | placeholder="new date" 31 | /> 32 | 35 | 36 |
37 | ) 38 | } 39 | } 40 | 41 | export default App; -------------------------------------------------------------------------------- /CountdownChamp/src/Clock.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | class Clock extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | days: 0, 9 | hours: 0, 10 | minutes: 0, 11 | seconds: 0 12 | } 13 | 14 | } 15 | 16 | componentWillMount() { 17 | this.getTimeUntil(this.props.deadline); 18 | } 19 | 20 | componentDidMount() { 21 | setInterval(() => this.getTimeUntil(this.props.deadline), 1000) 22 | } 23 | 24 | getTimeUntil(deadline) { 25 | const time = Date.parse(deadline) - Date.parse(new Date()); 26 | const seconds = Math.floor((time/1000) % 60); 27 | const minutes = Math.floor((time/1000/60)%60); 28 | const hours = Math.floor(time/(1000*60*60) % 24); 29 | const days = Math.floor(time/(1000*60*60*24)); 30 | this.setState({ 31 | days: days, 32 | hours: hours, 33 | minutes: minutes, 34 | seconds: seconds 35 | }) 36 | } 37 | 38 | leading0(num) { 39 | return num > 9 ? num : '0' + num; 40 | } 41 | 42 | render() { 43 | return( 44 |
45 |
{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 |
50 | ) 51 | } 52 | } 53 | 54 | export default Clock; -------------------------------------------------------------------------------- /CountdownChamp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); 9 | -------------------------------------------------------------------------------- /FoodList/food.css: -------------------------------------------------------------------------------- 1 | .table { 2 | position: relative; 3 | width: 90vw; 4 | margin: auto; 5 | margin-top: 5%; 6 | background: #bbb; 7 | } 8 | .item { 9 | width: 95%; 10 | margin: 5%, 5%, 2.5%, 5%; 11 | background: blue; 12 | display: flex; 13 | align-content: space-around; 14 | } 15 | .name, .shop{ 16 | width: 30%; 17 | margin: 0 2.5% 0 2.5%; 18 | background: red; 19 | } 20 | .values{ 21 | width: 25%; 22 | background: red; 23 | margin: 0 2.5% 0 2.5%; 24 | display: flex; 25 | align-content: space-around; 26 | } 27 | -------------------------------------------------------------------------------- /FoodList/food.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Food List App 5 | 6 | 7 | 8 | 9 | 10 | 11 |

This is the Shopping List App

12 |
13 |
14 |
Item
15 |
How Many
16 |
Which Shops
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /FoodList/food.js: -------------------------------------------------------------------------------- 1 | // Initialize Firebase 2 | var config = { 3 | apiKey: "AIzaSyCLzOMO3SMO4E67XPixvFH-bZqUnwi9FNY", 4 | authDomain: "food-list-2caba.firebaseapp.com", 5 | databaseURL: "https://food-list-2caba.firebaseio.com", 6 | storageBucket: "food-list-2caba.appspot.com", 7 | messagingSenderId: "200799123161" 8 | }; 9 | firebase.initializeApp(config); 10 | 11 | const preObj = document.getElementById('item'); 12 | 13 | const bdRefObj = firebase.database().ref().child('list'); 14 | 15 | bdRefObj.on('value', snap => createList(snap.val())); 16 | 17 | function createList(items) { 18 | kys = Object.keys(items); 19 | console.log(items); 20 | for (var i = 0; i < kys.length; i+=1) { 21 | console.log(kys[i]); 22 | $('.table').append('
' + kys[i] + '
' + items[kys[i]]['current'] + ''+ '/' + items[kys[i]]['max'] + '
' + items[kys[i]]['shop'] + '
'); 23 | } 24 | } 25 | 26 | function minus(place) { 27 | var cur = $(place).text(); 28 | if (cur != 0) { 29 | console.log(cur); 30 | $(place).text(cur -= 1); 31 | } 32 | } 33 | 34 | function plus(place) { 35 | var cur = Number($(place).text()) + 1; 36 | console.log(cur); 37 | $(place).text(cur); 38 | } -------------------------------------------------------------------------------- /JS_Calc/main.css: -------------------------------------------------------------------------------- 1 | #case { 2 | background-color: #bbb; 3 | padding: 40px; 4 | width: 600px; 5 | border-radius: 20px; 6 | border-width: 3px; 7 | border-color: black; 8 | box-sizing: border-box; 9 | justify-content: center; 10 | margin: 30px auto 20px auto; 11 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 12 | } 13 | #screen { 14 | background-color: white; 15 | padding: 20px 40px 20px 40px; 16 | border: 1px solid black; 17 | border-radius: 20px; 18 | } 19 | .myBtn { 20 | margin:5px; 21 | } 22 | 23 | @media (max-width: 600px) and (min-width: 430px) { 24 | #case { 25 | width: auto; 26 | } 27 | } 28 | 29 | @media (max-width: 430px) { 30 | #case { 31 | width: 430px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /JS_Calc/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | JavaScript Calculator 9 |
10 |

Sam's JavaScript Calculator

11 |
12 | 13 |
14 |
15 |

16 | ... 17 |

18 |

19 | 0 20 |

21 |
22 |
23 |
24 | 25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 |
48 |
49 |
50 |
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 |
84 |
85 |
86 | -------------------------------------------------------------------------------- /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; i last) { 43 | last = m; 44 | } 45 | } 46 | console.log(last); 47 | var lastNumber = screenOut.slice(last); 48 | console.log(lastNumber); 49 | 50 | if (!~lastNumber.indexOf('.') ) { 51 | screenOut += '.'; 52 | document.getElementById("display").innerHTML = screenOut; 53 | } 54 | 55 | } 56 | 57 | function clearScreen() { 58 | 'use strict'; 59 | screenOut = ""; 60 | document.getElementById("display").innerHTML = "0"; 61 | document.getElementById("equation").innerHTML = "..."; 62 | } 63 | 64 | function getEquals() { 65 | 'use strict'; 66 | if (screenOut.slice(-1) === ".") { 67 | return; 68 | } 69 | var ans = eval(screenOut); 70 | if (ans.toString().length >= 10) { 71 | ans = ans.toFixed(4); 72 | } 73 | document.getElementById("equation").innerHTML = screenOut + "="; 74 | screenOut = ans.toString(); 75 | document.getElementById("display").innerHTML = screenOut; 76 | wasEq = true; 77 | } 78 | -------------------------------------------------------------------------------- /LambdaLayers/DemoLayer/nodejs/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "moment": { 8 | "version": "2.23.0", 9 | "resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz", 10 | "integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA==" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /LambdaLayers/DemoLayer/nodejs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "moment": "^2.23.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /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 ', 16 | Destination: { 17 | ToAddresses: [emailAddress], 18 | }, 19 | Message: { 20 | Subject: { 21 | Data: subject, 22 | Charset: 'utf-8' 23 | }, 24 | Body: { 25 | Text: { 26 | Data: `${content}`, 27 | Charset: 'utf-8' 28 | }, 29 | Html: { 30 | Data: content, 31 | Charset: 'utf-8' 32 | } 33 | } 34 | } 35 | }; 36 | 37 | return SES.sendEmail(params).promise(); 38 | } 39 | 40 | 41 | const Response = ({ err, res }) => { 42 | return { 43 | "statusCode": err ? 400 : 200, 44 | "headers": { 45 | "Access-Control-Allow-Origin": "*", 46 | "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept" 47 | }, 48 | "body": err ? JSON.stringify(err) : JSON.stringify(res), 49 | "isBase64Encoded": false 50 | }; 51 | } 52 | 53 | const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]); -------------------------------------------------------------------------------- /Lambdas/medium-email-api/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1 3 | } 4 | -------------------------------------------------------------------------------- /MusicMaster/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.680f83f7.css", 3 | "main.css.map": "static/css/main.680f83f7.css.map", 4 | "main.js": "static/js/main.5d0ac0c7.js", 5 | "main.js.map": "static/js/main.5d0ac0c7.js.map" 6 | } -------------------------------------------------------------------------------- /MusicMaster/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/MusicMaster/build/favicon.ico -------------------------------------------------------------------------------- /MusicMaster/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /MusicMaster/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /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)}))}}); -------------------------------------------------------------------------------- /MusicMaster/build/static/css/main.680f83f7.css: -------------------------------------------------------------------------------- 1 | body{background:#000;color:#fff}.app{text-align:center;padding:5%}.app_title{font-size:26px}.profile{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.profile_info{margin-left:10px;text-align:left}.profile_image{width:150px;height:150px;border-radius:10%;-o-object-fit:cover;object-fit:cover}.profile_name{font-size:26px}.profile_followers,.profile_genres{font-size:18px}.track{display:inline-block;margin:10px;text-align:left;cursor:pointer;position:relative}.track,.track_image{width:220px;height:220px}.track_image{border:3px solid #fff;border-radius:3px;-o-object-fit:cover;object-fit:cover;position:absolute}.track_text{color:#fff;background-color:#000;opacity:.75;width:210px;margin-left:5px;bottom:0;text-align:center;position:absolute;padding:10px}.track_play{position:absolute;width:220px;height:220px}.track_play_inner{position:absolute;text-align:center;font-size:25px;background-color:#000;border-radius:30px;width:60px;height:60px;color:#fff;padding-top:13px;margin-left:80px;margin-top:80px;opacity:0;z-index:3}.track_play_inner:hover{opacity:.75;-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-duration:.3s;animation-duration:.3s}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:.75}}@keyframes fade-in{0%{opacity:0}to{opacity:.75}} 2 | /*# sourceMappingURL=main.680f83f7.css.map*/ -------------------------------------------------------------------------------- /MusicMaster/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "musicmaster", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.0.0", 7 | "react-bootstrap": "^0.31.3", 8 | "react-dom": "^16.0.0", 9 | "react-scripts": "1.0.14" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject", 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build" 18 | }, 19 | "homepage": "http://samwcoding.github.io/musicMaster", 20 | "devDependencies": { 21 | "gh-pages": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /MusicMaster/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/MusicMaster/public/favicon.ico -------------------------------------------------------------------------------- /MusicMaster/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | 23 | React App 24 | 25 | 26 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /MusicMaster/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 |
67 |
Music Master
68 | 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 | 83 | 84 | 85 | 86 | { 87 | this.state.artist !== null 88 | ?
89 | 92 | 95 |
96 | :
97 | } 98 |
99 | ) 100 | } 101 | } 102 | 103 | export default App; -------------------------------------------------------------------------------- /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 |
41 | {tracks.map((track, k) => { 42 | const trackImg = track.album.images[0].url; 43 | console.log(track); 44 | return ( 45 |
this.playAudio(track.preview_url)} 49 | > 50 |
51 |
52 | { 53 | (this.state.playingUrl === track.preview_url & this.state.playing) 54 | ? ⏸ 55 | : ▶ 56 | } 57 |
58 | 59 |
60 | track 65 |

66 | {track.name} 67 |

68 |
69 | ) 70 | 71 | } 72 | )} 73 |
74 | ) 75 | } 76 | } 77 | 78 | export default Gallery; -------------------------------------------------------------------------------- /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 | Profile 23 |
24 |
{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 |
41 | 42 |
43 | ) 44 | } 45 | } 46 | 47 | export default Profile; -------------------------------------------------------------------------------- /MusicMaster/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | , document.getElementById('root') 7 | ); -------------------------------------------------------------------------------- /Pomo-Clock/Pomo.css: -------------------------------------------------------------------------------- 1 | #main { 2 | padding: 20px; 3 | width: 420px; 4 | height: 420px; 5 | box-sizing: border-box; 6 | background-color:darksalmon; 7 | color:black; 8 | border-radius: 150px; 9 | font-family: 'Comfortaa', cursive; 10 | margin: 30px auto 30px auto; 11 | box-shadow: 10px 10px 10px grey; 12 | } 13 | 14 | h2, h1 { 15 | line-height: 80%; 16 | } 17 | 18 | #short { 19 | margin-top: 100px; 20 | } -------------------------------------------------------------------------------- /Pomo-Clock/Pomo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pomodoro Timer 8 |
9 |
10 |

Pomodoro Clock

11 |

Session

12 |
13 |
14 |

25:00

15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |

Session Length

29 |

25:00 30 |

31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |

Rest Length

44 |

5:00 45 |

46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 |

58 |
59 |
-------------------------------------------------------------------------------- /Pomo-Clock/Pomo.js: -------------------------------------------------------------------------------- 1 | var sessionLen = 25, 2 | restLen = 5, 3 | sesShort = "", 4 | restShort = "", 5 | paused = 0, 6 | timeInterval = 0; 7 | 8 | function addSession() { 9 | "use strict"; 10 | sessionLen += 1; 11 | document.getElementById("sessionLength").innerHTML = sessionLen + ":00"; 12 | document.getElementById("short").innerHTML = ""; 13 | } 14 | 15 | function minusSession() { 16 | "use strict"; 17 | if (sessionLen > 5) { 18 | sessionLen -= 1; 19 | sesShort = ""; 20 | } else { 21 | sesShort = "You have to work for at least 5 minutes!"; 22 | } 23 | document.getElementById("sessionLength").innerHTML = sessionLen + ":00"; 24 | document.getElementById("short").innerHTML = sesShort; 25 | } 26 | 27 | function addRest() { 28 | "use strict"; 29 | restLen += 1; 30 | document.getElementById("restLength").innerHTML = restLen + ":00"; 31 | document.getElementById("short").innerHTML = ""; 32 | } 33 | 34 | function minusRest() { 35 | "use strict"; 36 | if (restLen > 2) { 37 | restLen -= 1; 38 | restShort = ""; 39 | } else { 40 | restShort = "You have to rest for at least 2 minutes!"; 41 | } 42 | document.getElementById("restLength").innerHTML = restLen + ":00"; 43 | document.getElementById("short").innerHTML = restShort; 44 | } 45 | 46 | function timeRemaining(endTime) { 47 | "use strict"; 48 | var remaining = (endTime - new Date()) / 1000, 49 | remainFormatted = (Math.floor(remaining.toFixed() / 60.0)) 50 | + ":" + ("0" + (remaining.toFixed(0) % 60)).slice(-2); 51 | return remainFormatted; 52 | } 53 | 54 | function startTimer() { 55 | "use strict"; 56 | document.getElementById("title").innerHTML = "Session"; 57 | var endTime = new Date() - 0 + 60 * sessionLen * 1000; 58 | clearInterval(timeInterval); 59 | timeInterval = setInterval(updateClock, 1000); 60 | 61 | function updateClock() { 62 | var t = timeRemaining(endTime); 63 | document.getElementById("timeleft").innerHTML = t; 64 | if (t === "0:00" && 65 | document.getElementById("title").innerHTML === "Session") { 66 | document.getElementById("title").innerHTML = "Rest"; 67 | endTime = new Date() - 0 + 60 * restLen * 1000; 68 | } 69 | } 70 | updateClock(); 71 | } 72 | 73 | function stopTimer() { 74 | "use strict"; 75 | clearInterval(timeInterval); 76 | } 77 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /PureCSS/week1/day1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 |
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 | -------------------------------------------------------------------------------- /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/week1/day2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |
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 |
39 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /PureCSS/week1/day3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 |
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 |
39 |
40 |
41 | 42 |
43 |
44 |
-------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /PureCSS/week1/day4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |
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 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 |
47 | -------------------------------------------------------------------------------- /PureCSS/week1/day5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 |
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 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
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 |
-------------------------------------------------------------------------------- /PureCSS/week2/day10.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week2/day10.css -------------------------------------------------------------------------------- /PureCSS/week2/day10.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /PureCSS/week2/day6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
-------------------------------------------------------------------------------- /PureCSS/week2/day6.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | function updateClock(){ 3 | var d = new Date(), 4 | hours = d.getHours() * 360 / 12, 5 | mins = d.getMinutes() * 360/ 60, 6 | secs = d.getSeconds() * 360 / 60; 7 | $(".hour").css("transform", "rotate("+ hours + "deg)"); 8 | $('.minute').css('transform', 'rotate(' + mins + 'deg)'); 9 | $('.sec').css('transform', 'rotate(' + secs + 'deg)'); 10 | 11 | }; 12 | updateClock(); 13 | setInterval(updateClock, 1000); 14 | 15 | }); 16 | 17 | -------------------------------------------------------------------------------- /PureCSS/week2/day7.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | position: relative; 3 | width: 60vmin; 4 | height: 60vmin; 5 | margin: auto; 6 | margin-top: 8%; 7 | border: 2px solid pink; 8 | } 9 | .bodyR { 10 | position: absolute; 11 | width: 50%; 12 | height: 55%; 13 | top: ; 14 | border-radius: 50%; 15 | background: #222; 16 | } -------------------------------------------------------------------------------- /PureCSS/week2/day7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
-------------------------------------------------------------------------------- /PureCSS/week2/day8.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week2/day8.css -------------------------------------------------------------------------------- /PureCSS/week2/day8.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /PureCSS/week2/day9.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week2/day9.css -------------------------------------------------------------------------------- /PureCSS/week2/day9.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /PureCSS/week3/day11.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day11.css -------------------------------------------------------------------------------- /PureCSS/week3/day11.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /PureCSS/week3/day12.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day12.css -------------------------------------------------------------------------------- /PureCSS/week3/day12.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /PureCSS/week3/day13.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day13.css -------------------------------------------------------------------------------- /PureCSS/week3/day13.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day13.html -------------------------------------------------------------------------------- /PureCSS/week3/day14.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day14.css -------------------------------------------------------------------------------- /PureCSS/week3/day14.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day14.html -------------------------------------------------------------------------------- /PureCSS/week3/day15.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day15.css -------------------------------------------------------------------------------- /PureCSS/week3/day15.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/PureCSS/week3/day15.html -------------------------------------------------------------------------------- /RandomQuote/randQuote.css: -------------------------------------------------------------------------------- 1 | #centerbox { 2 | background: white; 3 | margin: 100px 100px 100px 100px; 4 | border-radius: 20px; 5 | } 6 | 7 | #topBox { 8 | padding: 20px 20px 20px 20px; 9 | } 10 | 11 | html body { 12 | background: orange; 13 | } 14 | 15 | #newQuote { 16 | margin: 20px 20px 20px 20px; 17 | } -------------------------------------------------------------------------------- /RandomQuote/randQuote.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Quote Generator 8 |
9 |
10 |
11 | 12 |
13 |
14 | - 15 |
16 |
17 |
18 |
19 | Twitter Logo 20 |
21 |
22 | 25 |
26 |
27 |
-------------------------------------------------------------------------------- /RandomQuote/randQuote.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | "use strict"; 3 | var randomQuote; 4 | function newQuote() { 5 | var url = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?'; 6 | $.getJSON(url, function (data) { 7 | randomQuote = data.quoteText; 8 | $('#quotetext').html(data.quoteText); 9 | if (data.quoteAuthor !== "") { 10 | $('#authorname').html(data.quoteAuthor); 11 | } else { 12 | $('#authorname').html("Unknown"); 13 | } 14 | }); 15 | } 16 | 17 | newQuote(); 18 | 19 | $('#tweet').on('click', function () { 20 | window.open("https://twitter.com/intent/tweet?text=" + randomQuote); 21 | }); 22 | 23 | $('#newQuote').on('click', function () { 24 | newQuote(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /ReminderPro/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.c79d7d13.css", 3 | "main.css.map": "static/css/main.c79d7d13.css.map", 4 | "main.js": "static/js/main.8a9608f5.js", 5 | "main.js.map": "static/js/main.8a9608f5.js.map" 6 | } -------------------------------------------------------------------------------- /ReminderPro/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/ReminderPro/build/favicon.ico -------------------------------------------------------------------------------- /ReminderPro/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /ReminderPro/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /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)}))}}); -------------------------------------------------------------------------------- /ReminderPro/build/static/css/main.c79d7d13.css: -------------------------------------------------------------------------------- 1 | .app{padding-top:20px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.title{text-align:center;font-size:26px}input{margin:5px}.reminder-form{padding:5px}.list-item{display:inline-block}.delete-button{float:right;padding-left:5px}.delete-button:hover{cursor:pointer} 2 | /*# sourceMappingURL=main.c79d7d13.css.map*/ -------------------------------------------------------------------------------- /ReminderPro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reminderpro", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "moment": "^2.19.1", 7 | "react": "^16.0.0", 8 | "react-bootstrap": "^0.31.3", 9 | "react-dom": "^16.0.0", 10 | "react-redux": "^5.0.6", 11 | "react-scripts": "1.0.14", 12 | "redux": "^3.7.2", 13 | "sfcookies": "^1.0.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject", 20 | "predeploy": "npm run build", 21 | "deploy": "gh-pages -d build" 22 | }, 23 | "homepage": "http://samwcoding.github.io/Projects/ReminderPro/build", 24 | "devDependencies": { 25 | "gh-pages": "^1.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /ReminderPro/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/ReminderPro/public/favicon.ico -------------------------------------------------------------------------------- /ReminderPro/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | 23 | Reminder Pro 24 | 25 | 26 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /ReminderPro/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /ReminderPro/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | padding-top: 20px; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .title { 9 | text-align: center; 10 | font-size: 26px; 11 | } 12 | 13 | input { 14 | margin: 5px; 15 | } 16 | 17 | .reminder-form { 18 | padding: 5px; 19 | } 20 | 21 | .list-item { 22 | display: inline-block; 23 | } 24 | 25 | .delete-button { 26 | float: right; 27 | padding-left: 5px; 28 | } 29 | 30 | .delete-button:hover { 31 | cursor: pointer; 32 | } -------------------------------------------------------------------------------- /ReminderPro/src/actions/index.js: -------------------------------------------------------------------------------- 1 | import { ADD_REMINDER, DELETE_REMINDER, CLEAR_REMINDERS } from '../constants'; 2 | 3 | export const addReminder = (text, dueDate) => { 4 | const action = { 5 | type: ADD_REMINDER, 6 | text, 7 | dueDate 8 | } 9 | console.log(action); 10 | return action; 11 | } 12 | 13 | export const deleteReminder = (id) => { 14 | const action = { 15 | type: DELETE_REMINDER, 16 | id 17 | } 18 | console.log('deleting an actions', action); 19 | return action; 20 | } 21 | 22 | export const clearReminders = () => { 23 | return { 24 | type: CLEAR_REMINDERS 25 | } 26 | } -------------------------------------------------------------------------------- /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 |
    31 | { 32 | reminders.map(reminder => { 33 | return ( 34 |
  • 35 |
    36 |
    {reminder.text}
    37 |
    {moment(new Date(reminder.dueDate)).fromNow()}
    38 |
    39 |
    this.deleteReminder(reminder.id)} 42 | > 43 | ✕ 44 |
    45 |
    • 46 | ) 47 | }) 48 | } 49 |
50 | ) 51 | } 52 | 53 | render() { 54 | return ( 55 |
56 |
57 | Reminder Pro 58 |
59 |
60 |
61 | this.setState({text: event.target.value})} 66 | /> 67 | this.setState({dueDate: event.target.value})} 71 | /> 72 |
73 | 79 |
80 | 81 | { this.renderReminders() } 82 |
this.props.clearReminders()} 85 | >Clear Reminders
86 |
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); -------------------------------------------------------------------------------- /ReminderPro/src/constants.js: -------------------------------------------------------------------------------- 1 | export const ADD_REMINDER = 'ADD_REMINDER'; 2 | export const DELETE_REMINDER = 'DELETE_REMINDER'; 3 | export const CLEAR_REMINDERS = 'CLEAR_REMINDERS'; 4 | -------------------------------------------------------------------------------- /ReminderPro/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | import { Provider } from 'react-redux'; 5 | import { createStore } from 'redux'; 6 | import reducer from './reducers'; 7 | 8 | 9 | const store = createStore(reducer); 10 | 11 | ReactDOM.render( 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | 17 | ) -------------------------------------------------------------------------------- /ReminderPro/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { ADD_REMINDER, DELETE_REMINDER, CLEAR_REMINDERS } from '../constants'; 2 | import { bake_cookie, read_cookie } from 'sfcookies'; 3 | 4 | const reminder = (action) => { 5 | let { text, dueDate } = action; 6 | return { 7 | id: Math.random(), 8 | text, 9 | dueDate 10 | } 11 | } 12 | 13 | const removeById = (state = [], id) => { 14 | const reminders = state.filter(reminder => reminder.id !== id) 15 | return reminders; 16 | } 17 | 18 | const reminders = (state = [], action) => { 19 | let reminders = null; 20 | state = read_cookie('reminders'); 21 | switch(action.type) { 22 | case ADD_REMINDER: 23 | reminders = [...state, reminder(action)]; 24 | bake_cookie('reminders', reminders) 25 | return reminders; 26 | case DELETE_REMINDER: 27 | reminders = removeById(state, action.id); 28 | bake_cookie('reminders', reminders) 29 | return reminders; 30 | case CLEAR_REMINDERS: 31 | reminders = []; 32 | bake_cookie('reminders', reminders); 33 | return reminders; 34 | default: 35 | return state; 36 | } 37 | } 38 | 39 | export default reminders; -------------------------------------------------------------------------------- /Twitch/twitch.css: -------------------------------------------------------------------------------- 1 | html body { 2 | background: grey; 3 | } 4 | 5 | .titlebar { 6 | position: absolute; 7 | left: 0; 8 | top: 0; 9 | background: #444; 10 | width: 100%; 11 | height: 120px; 12 | display: flex; 13 | align-content: center; 14 | justify-content: center; 15 | } 16 | 17 | h1 { 18 | font-size: 50px; 19 | } 20 | 21 | .main_box { 22 | margin: 160px 2vw 2vw 2vw; 23 | background: #444; 24 | padding: 0 2vw 2vw 2vw; 25 | border-radius: 2vw; 26 | } 27 | 28 | .options { 29 | display: flex; 30 | } 31 | 32 | li { 33 | align-content: flex-start; 34 | margin: 15px; 35 | font-size: 25px; 36 | cursor: pointer; 37 | } 38 | 39 | .user { 40 | display: flex; 41 | justify-content: flex-start; 42 | align-items: center; 43 | background: #ddd; 44 | margin: 1vw; 45 | border-radius: 10px; 46 | box-shadow: 5px 5px 5px 0 #222; 47 | } 48 | 49 | .online { 50 | background: rgba(0, 255, 0, 0.3); 51 | } 52 | 53 | .offline { 54 | background: rgba(255, 0, 0, 0.6) 55 | } 56 | 57 | .user h2, .user h3, .user h4 { 58 | margin: 1vw; 59 | } 60 | 61 | .name { 62 | width: 20vw; 63 | } 64 | 65 | .status { 66 | width: 11vw; 67 | } 68 | 69 | .game { 70 | width: 15vw; 71 | } 72 | 73 | .description { 74 | width: 42vw 75 | } 76 | 77 | .user:hover { 78 | box-shadow: 10px 10px 10px 0 #222; 79 | } 80 | 81 | .selected { 82 | font-weight: 900; 83 | } -------------------------------------------------------------------------------- /Twitch/twitch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Twitch Streamers 7 | 8 |
9 |
10 |

Who's Streaming Twitch?

11 |
12 |
13 |
14 |
    15 |
  • All
    • 16 |
  • Streaming
    • 17 |
18 |
19 |
20 |
21 |
22 |
-------------------------------------------------------------------------------- /Twitch/twitch.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | 'use strict'; 3 | var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "comster404"], 4 | urlBase = 'https://wind-bow.gomix.me/twitch-api/streams/', 5 | i; 6 | 7 | for (i = 0; i < streamers.length; i += 1) { 8 | $.getJSON(urlBase + streamers[i], function (data) { 9 | console.log(data); 10 | if (data.stream) { 11 | console.log('adding to steaming list'); 12 | $('.users').prepend('

' + data.stream.channel.display_name + '

Online

' + data.stream.channel.game + '

' + data.stream.channel.status + '

'); 13 | } else { 14 | var name = data._links.self.split('/'); 15 | 16 | $('.users').append('

' + name[name.length-1] + '

Offline

' ); 17 | } 18 | }); 19 | } 20 | 21 | $('#streaming').click(function (){ 22 | $('.offline').hide(); 23 | $('#all').removeClass('selected'); 24 | $('#streaming').addClass('selected'); 25 | }); 26 | 27 | $('#all').click(function () { 28 | $('.offline').show(); 29 | $('#all').addClass('selected'); 30 | $('#streaming').removeClass('selected'); 31 | }); 32 | }); 33 | 34 | 35 | function streamerOutput(response) { 36 | 'use strict'; 37 | console.log(response); 38 | } 39 | 40 | function openLinkWindow(url) { 41 | 'use strict'; 42 | var win = window.open(url, '_blank'); 43 | win.focus(); 44 | } 45 | -------------------------------------------------------------------------------- /WeatherPage/weather.css: -------------------------------------------------------------------------------- 1 | #main { 2 | display: flex; 3 | } 4 | 5 | #units { 6 | color:black; 7 | } 8 | 9 | button.link { 10 | background:none; 11 | border:none; 12 | } 13 | 14 | #picture { 15 | width: 250px; 16 | } -------------------------------------------------------------------------------- /WeatherPage/weather.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather App 9 |
10 |

Sam's Weather App

11 |

location

12 |

temp

13 |

weather

14 |
15 | 16 |
17 | 18 |
-------------------------------------------------------------------------------- /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 | }); -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/demo.html -------------------------------------------------------------------------------- /demo.js: -------------------------------------------------------------------------------- 1 | await botHelper.sendToUser({ message: 'Hi there', userID: '1234-1234-1234' }); 2 | 3 | 4 | await botHelper.sendToUser({ message: 'Hi, I was made using a snippet', userID: '123-123-123' }); -------------------------------------------------------------------------------- /goal-coach/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | #/build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /goal-coach/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.js": "static/js/main.d27a5407.js", 3 | "main.js.map": "static/js/main.d27a5407.js.map" 4 | } -------------------------------------------------------------------------------- /goal-coach/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/goal-coach/build/favicon.ico -------------------------------------------------------------------------------- /goal-coach/build/index.html: -------------------------------------------------------------------------------- 1 | Goal Coach
-------------------------------------------------------------------------------- /goal-coach/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /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)}))}}); -------------------------------------------------------------------------------- /goal-coach/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "goal-coach", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "firebase": "^4.6.0", 7 | "gh-pages": "^1.0.0", 8 | "react": "15.4.2", 9 | "react-dom": "15.4.2", 10 | "react-redux": "^5.0.6", 11 | "react-router": "3.0.1", 12 | "react-scripts": "1.0.14", 13 | "redux": "^3.7.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject", 20 | "predeploy": "npm run build", 21 | "deploy": "gh-pages -d build" 22 | }, 23 | "homepage": "http://samwcoding.github.io/Projects/goal-coach/build" 24 | } 25 | -------------------------------------------------------------------------------- /goal-coach/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamWSoftware/Projects/f7e510d21ec924e0207c3e56ae9f9be637e28e49/goal-coach/public/favicon.ico -------------------------------------------------------------------------------- /goal-coach/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | 23 | Goal Coach 24 | 25 | 26 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /goal-coach/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /goal-coach/src/actions/index.js: -------------------------------------------------------------------------------- 1 | import { SIGNED_IN, SET_GOALS, SET_COMPLETED} from '../constants'; 2 | 3 | export function logUser(email) { 4 | const action = { 5 | type: SIGNED_IN, 6 | email 7 | } 8 | return action; 9 | } 10 | 11 | export function setGoals(goals) { 12 | const action = { 13 | type: SET_GOALS, 14 | goals 15 | } 16 | return action; 17 | } 18 | 19 | export function setCompleted(completeGoals) { 20 | const action = { 21 | type: SET_COMPLETED, 22 | completeGoals 23 | } 24 | return action; 25 | } -------------------------------------------------------------------------------- /goal-coach/src/components/AddGoal.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { goalRef } from '../firebase'; 4 | 5 | class AddGoal extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | title: '' 10 | } 11 | } 12 | 13 | addGoal() { 14 | const { title } = this.state; 15 | const { email } = this.props.user; 16 | goalRef.push({email, title}); 17 | } 18 | 19 | render() { 20 | return ( 21 |
22 |
23 | this.setState({title: event.target.value})} 29 | /> 30 | 35 | 36 |
37 |
38 | ) 39 | } 40 | } 41 | 42 | function mapStateToProps(state) { 43 | const { user } = state; 44 | return { 45 | user 46 | } 47 | } 48 | 49 | export default connect(mapStateToProps, null)(AddGoal); -------------------------------------------------------------------------------- /goal-coach/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { firebaseApp } from '../firebase'; 4 | 5 | import AddGoal from './AddGoal'; 6 | import GoalList from './GoalList'; 7 | import CompleteGoalList from './CompleteGoalList'; 8 | 9 | class App extends Component { 10 | 11 | signOut() { 12 | firebaseApp.auth().signOut() 13 | } 14 | 15 | render() { 16 | return ( 17 |
18 |

Goal Coach

19 | 20 |
21 |

Goals

22 | 23 |
24 |

Complete Goals

25 | 26 |
27 | 33 |
34 | ) 35 | } 36 | } 37 | 38 | function mapStateToProps(state) { 39 | console.log(state); 40 | return {} 41 | } 42 | 43 | export default connect(mapStateToProps, null)(App); -------------------------------------------------------------------------------- /goal-coach/src/components/CompleteGoalItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { completedGoalRef } from '../firebase'; 4 | 5 | class CompleteGoalItem extends Component { 6 | removeGoal() { 7 | // remove from completed goals 8 | const { serverKey } = this.props.complete; 9 | completedGoalRef.child(serverKey).remove(); 10 | } 11 | 12 | render() { 13 | const { email, title } = this.props.complete; 14 | return ( 15 |
16 | {title} 17 | completed by {email} 18 | this.removeGoal()} 21 | > 22 | X 23 | 24 |
25 | ) 26 | } 27 | } 28 | 29 | function mapStateToProps(state) { 30 | const { user } = state; 31 | return { 32 | user 33 | } 34 | } 35 | 36 | export default connect(mapStateToProps, null)(CompleteGoalItem); -------------------------------------------------------------------------------- /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 |
28 | {this.props.completeGoals.map((complete, k) => { 29 | return ( 30 | 31 | ) 32 | })} 33 | 37 |
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); -------------------------------------------------------------------------------- /goal-coach/src/components/GoalItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { completedGoalRef, goalRef } from '../firebase'; 4 | 5 | class GoalItem extends Component { 6 | completeGoal() { 7 | // add to completed goals 8 | const { email } = this.props.user; 9 | const { title, serverKey } = this.props.goal; 10 | completedGoalRef.push({email, title}); 11 | //remove from goal ref 12 | goalRef.child(serverKey).remove(); 13 | 14 | } 15 | 16 | render() { 17 | console.log(this.props); 18 | const { email, title } = this.props.goal; 19 | return ( 20 |
21 | {title} 22 | submitted by {email} 23 | 29 |
30 | ) 31 | } 32 | } 33 | 34 | function mapStateToProps(state) { 35 | const { user } = state; 36 | return { 37 | user 38 | } 39 | } 40 | 41 | export default connect(mapStateToProps, null)(GoalItem); -------------------------------------------------------------------------------- /goal-coach/src/components/GoalList.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | import { goalRef } from '../firebase'; 5 | import { setGoals } from '../actions'; 6 | import GoalItem from './GoalItem'; 7 | 8 | class GoalList extends Component { 9 | componentDidMount() { 10 | goalRef.on('value', snap => { 11 | let goals = []; 12 | snap.forEach(goal => { 13 | const { email, title } = goal.val(); 14 | const serverKey = goal.key; 15 | goals.push({email, title, serverKey}); 16 | }) 17 | this.props.setGoals(goals); 18 | }) 19 | } 20 | 21 | render() { 22 | return ( 23 |
24 | { 25 | this.props.goals.map((goal, k) => { 26 | return ( 27 | 28 | ) 29 | }) 30 | } 31 |
32 | ) 33 | } 34 | } 35 | 36 | function mapStateToProps(state) { 37 | const {goals } = state; 38 | return { 39 | goals 40 | } 41 | } 42 | 43 | export default connect(mapStateToProps, { setGoals })(GoalList); -------------------------------------------------------------------------------- /goal-coach/src/components/SignIn.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from 'react-router'; 3 | import { firebaseApp } from '../firebase'; 4 | 5 | class SignIn extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | email: '', 10 | password: '', 11 | error: '' 12 | } 13 | } 14 | 15 | signIn() { 16 | const {email, password} = this.state; 17 | firebaseApp.auth().signInWithEmailAndPassword(email, password) 18 | .catch(error => { 19 | this.setState({error}); 20 | }) 21 | } 22 | 23 | 24 | render() { 25 | return ( 26 |
27 |

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 |
55 | ) 56 | } 57 | } 58 | 59 | export default SignIn; -------------------------------------------------------------------------------- /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 |
27 |

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 |
57 | ) 58 | } 59 | } 60 | 61 | export default SignUp; -------------------------------------------------------------------------------- /goal-coach/src/constants.js: -------------------------------------------------------------------------------- 1 | export const SIGNED_IN = 'SIGNED_IN'; 2 | export const SET_GOALS = 'SET_GOALS'; 3 | export const SET_COMPLETED = 'SET_COMPLETED'; -------------------------------------------------------------------------------- /goal-coach/src/firebase.js: -------------------------------------------------------------------------------- 1 | import * as firebase from 'firebase'; 2 | 3 | const config = { 4 | apiKey: "AIzaSyD8e_PWfM2GEQKwtYea5KQd1IY1d67UEYc", 5 | authDomain: "goal-coach-5cbc1.firebaseapp.com", 6 | databaseURL: "https://goal-coach-5cbc1.firebaseio.com", 7 | projectId: "goal-coach-5cbc1", 8 | storageBucket: "", 9 | messagingSenderId: "180424190775" 10 | }; 11 | 12 | export const firebaseApp = firebase.initializeApp(config); 13 | export const goalRef = firebase.database().ref('goals'); 14 | export const completedGoalRef = firebase.database().ref('completed'); -------------------------------------------------------------------------------- /goal-coach/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Router , Route, browserHistory } from 'react-router'; 4 | import { createStore } from 'redux'; 5 | import { Provider } from 'react-redux'; 6 | import { firebaseApp } from './firebase'; 7 | import { logUser } from './actions'; 8 | import reducer from './reducers'; 9 | 10 | import App from './components/App'; 11 | import SignIn from './components/SignIn'; 12 | import SignUp from './components/SignUp'; 13 | 14 | const store = createStore(reducer); 15 | 16 | firebaseApp.auth().onAuthStateChanged(user => { 17 | if (user) { 18 | const { email } = user; 19 | store.dispatch(logUser(email)); 20 | browserHistory.push('/app'); 21 | } else { 22 | browserHistory.replace('/signin') 23 | } 24 | }) 25 | 26 | ReactDOM.render( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | , document.getElementById('root') 35 | ) -------------------------------------------------------------------------------- /goal-coach/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import user from './reducer-user'; 3 | import goals from './reducer-goals'; 4 | import completeGoals from './reducer-completed'; 5 | 6 | export default combineReducers({ 7 | user, 8 | goals, 9 | completeGoals 10 | }) -------------------------------------------------------------------------------- /goal-coach/src/reducers/reducer-completed.js: -------------------------------------------------------------------------------- 1 | import { SET_COMPLETED } from '../constants'; 2 | 3 | export default (state = [], action) => { 4 | switch(action.type){ 5 | case SET_COMPLETED: 6 | const { completeGoals } = action; 7 | return completeGoals; 8 | default: 9 | return state; 10 | } 11 | } -------------------------------------------------------------------------------- /goal-coach/src/reducers/reducer-goals.js: -------------------------------------------------------------------------------- 1 | import { SET_GOALS } from '../constants'; 2 | 3 | export default (state = [], action) => { 4 | switch(action.type) { 5 | case SET_GOALS: 6 | const { goals } = action; 7 | return goals; 8 | default: 9 | return state; 10 | } 11 | } -------------------------------------------------------------------------------- /goal-coach/src/reducers/reducer-user.js: -------------------------------------------------------------------------------- 1 | import { SIGNED_IN } from '../constants'; 2 | 3 | let user = { 4 | email: null 5 | } 6 | 7 | export default ( state = user, action) => { 8 | switch (action.type) { 9 | case SIGNED_IN: 10 | const { email } = action; 11 | user = { 12 | email 13 | } 14 | return user; 15 | default: 16 | return state; 17 | } 18 | } -------------------------------------------------------------------------------- /hemingway/index.css: -------------------------------------------------------------------------------- 1 | .adverb { 2 | background: #c4e3f3; 3 | } 4 | 5 | .qualifier { 6 | background: #c4e3f3; 7 | } 8 | 9 | .passive { 10 | background: #c4ed9d; 11 | } 12 | 13 | .complex { 14 | background: #e3b7e8; 15 | } 16 | 17 | .hardSentence { 18 | background: #f7ecb5; 19 | } 20 | 21 | .veryHardSentence { 22 | background: #e4b9b9; 23 | } 24 | 25 | #text-area, 26 | #output { 27 | width: 100%; 28 | } 29 | 30 | #left { 31 | width: 75%; 32 | position: absolute; 33 | left: 2.5%; 34 | } 35 | #right { 36 | width: 20%; 37 | position: absolute; 38 | right: 2.5%; 39 | } 40 | 41 | .counter { 42 | position: relative; 43 | padding: 5% 5%; 44 | margin: 5% 0 0 5%; 45 | border-radius: 8px; 46 | } 47 | -------------------------------------------------------------------------------- /hemingway/index.html: -------------------------------------------------------------------------------- 1 | 2 | Fake Hemingway 3 |
4 |

Fake Hemingway

5 |
6 | 7 | 8 |
9 |
10 | 17 | 18 |
19 | -------------------------------------------------------------------------------- /mdPreview/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /mdPreview/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.11584cf5.css", 3 | "main.css.map": "static/css/main.11584cf5.css.map", 4 | "main.js": "static/js/main.efa7ccff.js", 5 | "main.js.map": "static/js/main.efa7ccff.js.map" 6 | } -------------------------------------------------------------------------------- /mdPreview/build/index.html: -------------------------------------------------------------------------------- 1 | Sam's Markdown Previewer
-------------------------------------------------------------------------------- /mdPreview/build/static/css/main.11584cf5.css: -------------------------------------------------------------------------------- 1 | .App{text-align:center}.App-logo{-webkit-animation:App-logo-spin infinite 20s linear;animation:App-logo-spin infinite 20s linear;height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}#editTop{font-size:1em}#edit{width:90%;left:5%}#edit,#editorScreen{position:absolute;height:80%}#editorScreen{width:50%;left:0}#displayScreen{position:absolute;width:50%;height:80%;right:0}#displatTop{font-size:1em}#displayText{height:80%;background:#fff;border:1px solid #000;text-align:left;font-size:.9em;overflow-y:scroll}#displayText,#dropZone{position:absolute;width:90%;right:5%}#dropZone{height:5%;top:90%;border:2px dashed pink} 2 | /*# sourceMappingURL=main.11584cf5.css.map*/ -------------------------------------------------------------------------------- /mdPreview/build/static/css/main.11584cf5.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.11584cf5.css","sourceRoot":""} -------------------------------------------------------------------------------- /mdPreview/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdPreview", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "http://samwcoding.github.io/Projects/mdPreview/build", 6 | "devDependencies": { 7 | "react-scripts": "0.9.0" 8 | }, 9 | "dependencies": { 10 | "react": "^15.4.2", 11 | "react-dom": "^15.4.2" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /mdPreview/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | Sam's Markdown Previewer 16 | 17 | 18 |
19 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /mdPreview/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /mdPreview/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | import Editor from './components/Editor'; 5 | import Display from './components/Display'; 6 | 7 | var marked = require('marked'); 8 | marked.setOptions({ 9 | renderer: new marked.Renderer(), 10 | gfm: true, 11 | tables: true, 12 | breaks: false, 13 | pedantic: false, 14 | sanitize: false, 15 | smartLists: true, 16 | smartypants: false 17 | }); 18 | 19 | 20 | class App extends Component { 21 | constructor() { 22 | super(); 23 | this.state ={ 24 | intext: `## Markdown editor 25 | this is **Bold** text and this is _italics_`, 26 | outtext: marked(`## Markdown editor 27 | this is **Bold** text and this is _italics_`), 28 | }; 29 | } 30 | 31 | changeOutput(input) { 32 | this.setState({ 33 | intext: input, 34 | outtext: marked(input), 35 | }); 36 | } 37 | 38 | uploadFile(input) { 39 | console.log('got the text', input); 40 | this.setState({ 41 | intext: input, 42 | outtext: marked(input), 43 | }); 44 | } 45 | 46 | render() { 47 | return ( 48 |
49 |

Sam's MarkDown Previewer

50 | 54 | 58 |
59 | ); 60 | } 61 | } 62 | 63 | export default App; 64 | -------------------------------------------------------------------------------- /mdPreview/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /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 |
53 |
This is the display window
54 |
55 |
56 | 57 | 58 |
59 |
60 | ); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /mdPreview/src/components/Editor.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import './editor.css'; 3 | 4 | export default class Editor extends React.Component { 5 | changeOutput(e){ 6 | let text = e.target.value; 7 | this.props.changeOutput(text); 8 | } 9 | render() { 10 | return ( 11 |
12 |
This is the editor window
13 |