5 |
6 |
10 |
14 |
15 |
16 |
17 |
18 |
21 |
26 |
31 |
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 |
42 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
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 |
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 |
23 | New Quote
24 |
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 You need to enable JavaScript to run this 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 |
27 | You need to enable JavaScript to run this app.
28 |
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 |
50 | )
51 | }
52 |
53 | render() {
54 | return (
55 |
56 |
57 | Reminder Pro
58 |
59 |
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 + '
' + 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 You need to enable JavaScript to run this app.
--------------------------------------------------------------------------------
/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 |
27 | You need to enable JavaScript to run this app.
28 |
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 | this.addGoal()}
34 | >Submit
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 |
this.signOut()}
30 | >
31 | Sign Out
32 |
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 | this.clearCompleted()}
36 | >Clear Completed
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 | this.completeGoal()}
26 | >
27 | Complete
28 |
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 | this.signIn()}
48 | >
49 | Sign In
50 |
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 | this.signUp()}
48 | >
49 | Sign Up
50 |
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 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
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 | Upload File
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 |
18 |
19 | );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/mdPreview/src/components/display.css:
--------------------------------------------------------------------------------
1 | #displayScreen{
2 | position: absolute;
3 | width: 50%;
4 | height: 80%;
5 | right: 0;
6 | }
7 | #displatTop {
8 | font-size: 1em;
9 | }
10 | #displayText {
11 | position: absolute;
12 | width: 90%;
13 | height: 80%;
14 | right: 5%;
15 | background: white;
16 | border: 1px solid black;
17 | text-align: left;
18 | font-size: 0.9em;
19 | overflow-y: scroll;
20 | }
21 | #dropZone{
22 | position: absolute;
23 | width: 90%;
24 | height: 5%;
25 | top: 90%;
26 | right: 5%;
27 | border: 2px dashed pink;
28 | }
29 |
--------------------------------------------------------------------------------
/mdPreview/src/components/editor.css:
--------------------------------------------------------------------------------
1 | #editTop {
2 | font-size: 1em;
3 | }
4 | #edit {
5 | position: absolute;
6 | width: 90%;
7 | height: 80%;
8 | left: 5%;
9 | }
10 | #editorScreen{
11 | position: absolute;
12 | width: 50%;
13 | height: 80%;
14 | left: 0;
15 | }
16 |
--------------------------------------------------------------------------------
/mdPreview/src/components/text.md:
--------------------------------------------------------------------------------
1 | # Dillinger
2 |
3 | [](https://nodesource.com/products/nsolid)
4 |
5 | Dillinger is a cloud-enabled, mobile-ready, offline-storage, AngularJS powered HTML5 Markdown editor.
6 |
7 | - Type some Markdown on the left
8 | - See HTML in the right
9 | - Magic
10 |
11 | # New Features!
12 |
13 | - Import a HTML file and watch it magically convert to Markdown
14 | - Drag and drop images (requires your Dropbox account be linked)
15 |
16 |
17 | You can also:
18 | - Import and save files from GitHub, Dropbox, Google Drive and One Drive
19 | - Drag and drop markdown and HTML files into Dillinger
20 | - Export documents as Markdown, HTML and PDF
21 |
22 | Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email. As [John Gruber] writes on the [Markdown site][df1]
23 |
24 | > The overriding design goal for Markdown's
25 | > formatting syntax is to make it as readable
26 | > as possible. The idea is that a
27 | > Markdown-formatted document should be
28 | > publishable as-is, as plain text, without
29 | > looking like it's been marked up with tags
30 | > or formatting instructions.
31 |
32 | This text you see here is *actually* written in Markdown! To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right.
33 |
--------------------------------------------------------------------------------
/mdPreview/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/mdPreview/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 |
--------------------------------------------------------------------------------
/mdPreview/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/movieAPI/dynamo.js:
--------------------------------------------------------------------------------
1 | const AWS = require('aws-sdk');
2 |
3 | let documentClient = new AWS.DynamoDB.DocumentClient({
4 | 'region': 'eu-west-1'
5 | });
6 |
7 | module.exports = class DB {
8 | write(ID, data, table) {
9 | return new Promise((resolve, reject) => {
10 | if (typeof ID !== 'string') throw `the id must be a string and not ${ID}`
11 | if (!data) throw "data is needed";
12 | if (!table) throw 'table name is needed';
13 |
14 | let params = {
15 | TableName: table,
16 | Item: { ...data, ID: ID }
17 | };
18 |
19 | documentClient.put(params, function(err, result) {
20 | if (err) {
21 | console.log("Err in writeForCall writing messages to dynamo:", err);
22 | console.log(params);
23 | return reject(err);
24 | }
25 | console.log('wrote data to table ', table)
26 | return resolve({ ...result.Attributes, ...params.Item });
27 | });
28 | })
29 | };
30 |
31 | get(key, value, table) {
32 | if (!table) throw 'table needed';
33 | if (typeof key !== 'string') throw `key was not string and was ${JSON.stringify(key)} on table ${table}`;
34 | if (typeof value !== 'string') throw `value was not string and was ${JSON.stringify(value)} on table ${table}`;
35 | return new Promise((resolve, reject) => {
36 | let params = {
37 | TableName: table,
38 | Key: {
39 | [key]: value
40 | }
41 | };
42 | documentClient.get(params, function(err, data) {
43 | if (err) {
44 | console.log(`There was an error fetching the data for ${key} ${value} on table ${table}`, err);
45 | return reject(err);
46 | }
47 | //TODO check only one Item.
48 | return resolve(data.Item);
49 | });
50 | });
51 | }
52 |
53 | async increment(ID, genre, table) {
54 | if (!table) throw 'table needed';
55 | if (!ID) throw 'ID needed';
56 | let data;
57 | try {
58 | data = await this.get('movie-genre', ID, table);
59 | } catch (err) {
60 | data = { "movie-genre": ID, genre, count: 0 };
61 | };
62 | let newData = { ...data, count: data.count + 1 };
63 | return this.write(ID, newData, table);
64 | }
65 |
66 | scan(key, value, table) {
67 | return new Promise((resolve, reject) => {
68 | let params = {
69 | TableName: table,
70 | FilterExpression: `${key} = :value`,
71 | ExpressionAttributeValues: { ':value': value }
72 | };
73 |
74 | documentClient.scan(params, function(err, data) {
75 | if (err) reject(err)
76 | resolve(data);
77 | });
78 | });
79 | }
80 | }
--------------------------------------------------------------------------------
/movieAPI/movieAPI.js:
--------------------------------------------------------------------------------
1 | const DB = require('./dynamo');
2 | const Dynamo = new DB();
3 |
4 | exports.handler = async (event) => {
5 | console.log(event);
6 | if (event.httpMethod === 'PUT') {
7 | let response = await putMovie(event)
8 | return done(response);
9 | } else if (event.httpMethod === 'GET') {
10 | let response = await getMovie(event);
11 | return done(response);
12 | }
13 | };
14 |
15 | const done = response => {
16 | return {
17 | statusCode: '200',
18 | body: JSON.stringify(response),
19 | headers: {
20 | 'Content-Type': 'application/json',
21 | 'Access-Control-Allow-Methods': '*',
22 | 'Access-Control-Allow-Origin': '*'
23 | }
24 | }
25 | }
26 |
27 | const movies = {
28 | action: 'Desperado (1995)',
29 | fantasy: 'Inception (2010)',
30 | animated: ' Peter Pan (1953)',
31 | western: 'The Good, the Bad and the Ugly (1966)',
32 | superhero: 'The Dark Knight (2008)',
33 | musical: 'The Rocky Horror Picture Show (1975)',
34 | crime: 'Pulp Fiction (1994)',
35 | comedy: 'The Naked Gun: From the Files of Police Squad! (1988)',
36 | adventure: 'Raiders of the Lost Ark (1981)',
37 | war: 'The Guns of Navarone (1961)',
38 | guy: 'The Expendables (2010)',
39 | romance: 'True Romance (1993)',
40 | thriller: 'Psycho (1960)',
41 | horror: 'Black Swan (2010)'
42 | }
43 |
44 | const getMovie = event => {
45 | let genre = event.pathParameters.genre;
46 | return movies[genre];
47 | }
48 |
49 | const putMovie = async event => {
50 | let { movie } = JSON.parse(event.body);
51 | let genre = event.pathParameters.genre;
52 | let ID = `${movie}-${genre}`;
53 | return Dynamo.increment(ID, 'movie-api')
54 | }
--------------------------------------------------------------------------------
/movieAPI/tv-showAPI.js:
--------------------------------------------------------------------------------
1 | exports.handler = async (event) => {
2 | console.log(event);
3 | if (event.httpMethod === 'PUT') {
4 | let response = putShows(event)
5 | return done(response);
6 | } else if (event.httpMethod === 'GET') {
7 | let response = getShows(event);
8 | return done(response);
9 | }
10 | };
11 |
12 | const done = response => {
13 | return {
14 | statusCode: '200',
15 | body: JSON.stringify(response),
16 | headers: {
17 | 'Content-Type': 'application/json',
18 | 'Access-Control-Allow-Methods': '*',
19 | 'Access-Control-Allow-Origin': '*'
20 | }
21 | }
22 | }
23 |
24 | const Showss = {
25 | action: 'Game of Thrones',
26 | fantasy: 'Supernatural',
27 | animated: 'The Simpsons',
28 | western: 'Westworld',
29 | superhero: 'The Flash',
30 | musical: '30 Rock',
31 | crime: 'Sherlock',
32 | comedy: 'Friends',
33 | adventure: 'Doctor Who',
34 | war: 'Wounded Love',
35 | guy: 'The Walking Dead',
36 | romance: "Grey's Anatomy",
37 | thriller: 'Sharp Objects',
38 | horror: 'American Horror Story'
39 | }
40 |
41 | const getShows = event => {
42 | let genre = event.pathParameters.genre;
43 | return Showss[genre];
44 | }
45 |
46 | const putShows = event => {
47 | return;
48 | }
--------------------------------------------------------------------------------
/simonGame/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Sam's Simon Game
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
Start
14 |
Strict
15 |
--
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/simonGame/simon.css:
--------------------------------------------------------------------------------
1 | .box {
2 | position: relative;
3 | margin: auto;
4 | width: 60vmin;
5 | height: 60vmin;
6 | }
7 | .body{
8 | position: absolute;
9 | width: 100%;
10 | height: 100%;
11 | background: #333;
12 | border-radius: 50%;
13 | }
14 | .face{
15 | position: absolute;
16 | width: 50%;
17 | height: 50%;
18 | top: 25%;
19 | left: 25%;
20 | background: #ddd;
21 | border-radius: 50%;
22 | }
23 | .pad{
24 | position: absolute;
25 | width: 60%;
26 | height: 60%;
27 | left: 2vmin;
28 | top: 2vmin;
29 | background: none;
30 | border-radius: 50%;
31 | }
32 |
33 | .c1{
34 | border: 10vmin solid green;
35 | -webkit-clip-path: polygon(0 0, 45% 0, 45% 45%, 0 45%);
36 | }
37 | .c3{
38 | border: 10vmin solid #c00;
39 | -webkit-clip-path: polygon(100% 100%, 55% 100%, 55% 55%, 100% 55%);
40 | }
41 | .c2{
42 | border: 10vmin solid #0a0ab7;
43 | -webkit-clip-path: polygon(100% 0, 55% 0, 55% 45%, 100% 45%);
44 | }
45 | .c4{
46 | border: 10vmin solid #cc0;
47 | -webkit-clip-path: polygon(0 100%, 45% 100%, 45% 55%, 0 55%);
48 | }
49 | .start, .strict{
50 | position: absolute;
51 | width: 20%;
52 | height: 4vmin;
53 | border-radius: 50%;
54 | top: 40%;
55 | box-shadow: 0 0 2px 2px rgb(100, 100, 100);
56 | text-align: center;
57 | padding-top: 2vmin;
58 | font-size: 2vmin;
59 | }
60 | .start{
61 | background: yellow;
62 | left: 50%;
63 | }
64 | .strict{
65 | background: none;
66 | left: 75%;
67 | }
68 |
69 | #screen {
70 | position: absolute;
71 | width: 30%;
72 | height: 20%;
73 | top: 40%;
74 | left: 15%;
75 | background: #333;
76 | text-align: center;
77 | font-size: 6vmin;
78 | color: wheat;
79 | }
--------------------------------------------------------------------------------
/simonGame/simon.js:
--------------------------------------------------------------------------------
1 | var strict = false,
2 | clickDisabled = false,
3 | audio = document.getElementsByTagName('audio');
4 |
5 |
6 | function highlight(colour) {
7 | 'use strict';
8 | var pad = document.getElementsByClassName(colour),
9 | style = window.getComputedStyle(pad[0]),
10 | col = style.getPropertyValue('border'),
11 | nums = col.match(/\d+/g),
12 | i,
13 | val = colour.match(/\d+/)[0];
14 | console.log(audio);
15 | nums.shift();
16 | audio[val-1].play();
17 |
18 | for (i = 0; i < 3; i += 1) {
19 | nums[i] = Number(nums[i]) + 50;
20 | }
21 | pad[0].style.border = "10vmin solid rgb(" + nums.join(',') + ')';
22 |
23 | setTimeout(function () {
24 | pad[0].style.border = "10vmin solid " + col.slice(11);
25 | }, 400);
26 | }
27 | function run(sequence) {
28 | 'use strict';
29 | var i = 0,
30 | show;
31 | sequence.push('c' + Math.ceil(Math.random() * 4));
32 | document.getElementById('screen').innerHTML = String(sequence.length);
33 | show = setInterval(function () {
34 | if (i < sequence.length) {
35 | highlight(sequence[i]);
36 | i += 1;
37 | } else {
38 | clearInterval(show);
39 | }
40 | }, 600);
41 | testPlayer(sequence);
42 | }
43 | function wrong() {
44 | 'use strict';
45 | var pad = document.getElementsByClassName('face'),
46 | style = window.getComputedStyle(pad[0]),
47 | col = style.getPropertyValue('background');
48 |
49 | pad[0].style.background = "rgb(255, 0, 0)" + col.slice(19);
50 | setTimeout(function () {
51 | pad[0].style.background = col;
52 | }, 400);
53 | if (strict) {
54 | run([]);
55 | }
56 | }
57 |
58 | function press(colour) {
59 | 'use strict';
60 | if (!clickDisabled) {
61 | highlight(colour);
62 | clickDisabled = true;
63 | setTimeout(function () {clickDisabled = false; }, 400);
64 | }
65 |
66 | }
67 | function won() {
68 | 'use strict';
69 | document.getElementById('screen').innerHTML = 'Won';
70 | }
71 |
72 | function isCorrect(c, j, seq) {
73 | 'use strict';
74 | if (c !== seq[j]) { // if not the correct button
75 | console.log(c, seq[j], j);
76 | wrong();
77 | if (strict) {
78 | run([]);
79 | } else {
80 | var i = 0;
81 | setInterval(function () {
82 | if (i < seq.length) {
83 | highlight(seq[i]);
84 | i += 1;
85 | }
86 | }, 600);
87 | return 0;
88 | }
89 | } else if (j === seq.length - 1) {
90 | if (j === 20) {
91 | won();
92 | } else {
93 | run(seq);
94 | }
95 | }
96 | j += 1;
97 | return j;
98 | }
99 | function testPlayer(seq) {
100 | 'use strict';
101 | var c1 = document.getElementsByClassName('c1'),
102 | c2 = document.getElementsByClassName('c2'),
103 | c3 = document.getElementsByClassName('c3'),
104 | c4 = document.getElementsByClassName('c4'),
105 | i = 0;
106 | c1[0].onclick = function () {
107 | if (!clickDisabled) {
108 | highlight('c1');
109 | i = isCorrect('c1', i, seq);
110 | clickDisabled = true;
111 | setTimeout(function () {clickDisabled = false; }, 400);
112 | }
113 | };
114 | c2[0].onclick = function () {
115 | if (!clickDisabled) {
116 | highlight('c2');
117 | i = isCorrect('c2', i, seq);
118 | clickDisabled = true;
119 | setTimeout(function () {clickDisabled = false; }, 400);
120 | }
121 | };
122 | c3[0].onclick = function () {
123 | if (!clickDisabled) {
124 | highlight('c3');
125 | i = isCorrect('c3', i, seq);
126 | clickDisabled = true;
127 | setTimeout(function () {clickDisabled = false; }, 400);
128 | }
129 | };
130 | c4[0].onclick = function () {
131 | if (!clickDisabled) {
132 | highlight('c4');
133 | i = isCorrect('c4', i, seq);
134 | clickDisabled = true;
135 | setTimeout(function () {clickDisabled = false; }, 400);
136 | }
137 | };
138 | }
139 | function strictToggle() {
140 | 'use strict';
141 | strict = strict ? false : true;
142 | document.getElementsByClassName('strict')[0].style.background = strict ? 'red' : 'none';
143 | }
144 |
--------------------------------------------------------------------------------
/tic-tac-toe/ttt.css:
--------------------------------------------------------------------------------
1 | #case {
2 | margin: 5vmin;
3 | padding: 5vmin;
4 | background-color: chocolate;
5 | }
6 |
7 | #screen {
8 | padding: 3vmin;
9 | background-color: white;
10 | display: block;
11 | }
12 |
13 | #screen2 {
14 | background-color: white;
15 | display: none;;
16 | }
17 |
18 | #player1Go, #player2Go {
19 | position: relative;
20 | width: 30%;
21 | height: 5%;
22 | padding: 1%;
23 | top: 0;
24 | background-color: blue;
25 | color: white;
26 | }
27 | #player1Go{left: 10%}
28 | #player2Go{left: 60%}
29 |
30 | #grid {
31 | height: 74vmin;
32 | width: 74vmin;
33 | margin: 3vw auto;
34 | margin-bottom: 3vw;
35 | background-color: black;
36 |
37 | }
38 |
39 | .square {
40 | float: left;
41 | position: relative;
42 | width: 30%;
43 | height: 30%;
44 | margin: 1.66%;
45 | font-size: ;
46 | background-color: white;
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/tic-tac-toe/ttt.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Tic Tac Toe
7 |
8 |
9 |
How do you want to play?
10 |
11 |
12 | Single Player
13 |
14 |
15 | Two Player
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Player 1's Go
23 |
24 |
25 |
Player 2's Go
26 |
27 |
28 |
29 |
s0
30 |
s1
31 |
s2
32 |
s3
33 |
s4
34 |
s5
35 |
s6
36 |
s7
37 |
s8
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/tic-tac-toe/ttt.js:
--------------------------------------------------------------------------------
1 |
2 | function choosePeice() {
3 | 'use strict';
4 | var btns = document.getElementById("btns");
5 | document.getElementById("question").innerHTML = "Do you want to be crosses or circles?";
6 | btns.innerHTML = '
Crosses
Naught
';
7 | }
8 | function onePlayer() {
9 | 'use strict';
10 | choosePeice();
11 | }
12 |
13 | function twoPlayer() {
14 | 'use strict';
15 | choosePeice();
16 | }
17 | function togglePlayer(char) {
18 | 'use strict';
19 | var p1 = document.getElementById('player1Go'),
20 | p2 = document.getElementById('player2Go');
21 | if (p2.style.display === 'none') {
22 | p1.style.display = 'none';
23 | p2.style.display = 'block';
24 | } else {
25 | p2.style.display = 'none';
26 | p1.style.display = 'block';
27 | }
28 | return (char === 'X') ? '0' : 'X';
29 | }
30 |
31 |
32 | function startGame(char) {
33 | 'use strict';
34 | document.getElementById("screen").style.display = 'none';
35 | document.getElementById("screen2").style.display = 'block';
36 | document.getElementById("player2Go").style.display = 'none';
37 |
38 | var board = {
39 | 0: 0,
40 | 1: 0,
41 | 2: 0,
42 | 3: 0,
43 | 4: 0,
44 | 5: 0,
45 | 6: 0,
46 | 7: 0,
47 | 8: 0
48 | },
49 | winning = [
50 | [0, 1, 2],
51 | [4, 5, 3],
52 | [7, 8, 8],
53 | [1, 4, 7],
54 | [2, 5, 8],
55 | [0, 3, 6],
56 | [0, 4, 8],
57 | [2, 4, 6]
58 | ],
59 | sqrs = document.getElementsByClassName("square"),
60 | i;
61 |
62 | function winner () {
63 | var j, rowtotal, won;
64 | for (j = 0; j < winning.length; j += 1) {
65 | rowtotal = winning[j].reduce((total, p) => {return total + board[p]}, 0);
66 | console.log(rowtotal);
67 | if (rowtotal === 3 || rowtotal === -3){
68 | console.log('winner');
69 | board = {0: '', 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0};
70 | won = winning[j];
71 | won.map(val => {sqrs[val].style.background = 'green'});
72 | setTimeout(function(){
73 | for (i = 0; i< sqrs.length; i += 1) {
74 | sqrs[i].innerHTML = '';
75 | }
76 | won.map(val => {sqrs[val].style.background = 'white'});
77 | }, 1000);
78 | }
79 | }
80 | }
81 |
82 | sqrs[0].onclick = (function () {
83 | if (!board[0]) {
84 | sqrs[0].innerHTML = char;
85 | board[0] = (char === 'X') ? 1 : -1;
86 | char = togglePlayer(char);
87 | winner();
88 | }
89 | });
90 | sqrs[1].onclick = (function () {
91 | if (!board[1]) {
92 | sqrs[1].innerHTML = char;
93 | board[1] = (char === 'X') ? 1 : -1;
94 | char = togglePlayer(char);
95 | winner();
96 | }
97 | });
98 | sqrs[2].onclick = (function () {
99 | if (!board[2]) {
100 | sqrs[2].innerHTML = char;
101 | board[2] = (char === 'X') ? 1 : -1;
102 | char = togglePlayer(char);
103 | winner();
104 | }
105 | });
106 | sqrs[3].onclick = (function () {
107 | if (!board[3]) {
108 | sqrs[3].innerHTML = char;
109 | board[3] = (char === 'X') ? 1 : -1;
110 | char = togglePlayer(char);
111 | winner();
112 | }
113 | });
114 | sqrs[4].onclick = (function () {
115 | if (!board[4]) {
116 | sqrs[4].innerHTML = char;
117 | board[4] = (char === 'X') ? 1 : -1;
118 | char = togglePlayer(char);
119 | winner();
120 | }
121 | });
122 | sqrs[5].onclick = (function () {
123 | if (!board[5]) {
124 | sqrs[5].innerHTML = char;
125 | board[5] = (char === 'X') ? 1 : -1;
126 | char = togglePlayer(char);
127 | winner();
128 | }
129 | });
130 | sqrs[6].onclick = (function () {
131 | if (!board[6]) {
132 | sqrs[6].innerHTML = char;
133 | board[6] = (char === 'X') ? 1 : -1;
134 | char = togglePlayer(char);
135 | winner();
136 | }
137 | });
138 | sqrs[7].onclick = (function () {
139 | if (!board[7]) {
140 | sqrs[7].innerHTML = char;
141 | board[7] = (char === 'X') ? 1 : -1;
142 | char = togglePlayer(char);
143 | winner();
144 | }
145 | });
146 | sqrs[8].onclick = (function () {
147 | if (!board[8]) {
148 | sqrs[8].innerHTML = char;
149 | board[8] = (char === 'X') ? 1 : -1;
150 | char = togglePlayer(char);
151 | winner();
152 | }
153 | });
154 |
155 |
156 |
157 | }
158 |
--------------------------------------------------------------------------------
/tttWithAi/ttt.css:
--------------------------------------------------------------------------------
1 | #case {
2 | margin: 5vmin;
3 | padding: 5vmin;
4 | background-color: chocolate;
5 | }
6 |
7 | #screen {
8 | padding: 3vmin;
9 | background-color: white;
10 | display: block;
11 | }
12 |
13 | #screen2 {
14 | padding: 3vmin;
15 | background-color: white;
16 | display: none;
17 | }
18 |
19 | #player1Go, #player2Go {
20 | background-color: blue;
21 | color: white;
22 | }
23 |
24 | #grid {
25 | height: 74vmin;
26 | width: 74vmin;
27 | margin: auto;
28 | margin-top: 3vmin;
29 | background-color: black;
30 |
31 | }
32 |
33 | .square {
34 | float: left;
35 | position: relative;
36 | width: 30%;
37 | height: 30%;
38 | margin: 1.66%;
39 | overflow: hidden;
40 | background-color: white;
41 | }
42 |
43 | .content {
44 | position: absolute;
45 | height: 80%;
46 | width: 90%;
47 | margin: 10% 5%;
48 | }
49 |
--------------------------------------------------------------------------------
/tttWithAi/ttt.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Tic Tac Toe
8 |
9 |
10 |
How do you want to play?
11 |
12 |
13 | Single Player
14 |
15 |
16 | Two Player
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Player 1's Go
24 |
25 |
26 |
27 |
28 |
Player 2's Go
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | content
37 |
38 |
39 |
40 |
41 | content
42 |
43 |
44 |
45 |
46 | content
47 |
48 |
49 |
53 |
57 |
61 |
65 |
69 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/tttWithAi/ttt.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | function onePlayer() {
4 | 'use strict';
5 | choosePeice();
6 | }
7 |
8 | function twoPlayer() {
9 | 'use strict';
10 | choosePeice();
11 | }
12 |
13 | function choosePeice() {
14 | 'use strict';
15 | var btns = document.getElementById("btns");
16 | document.getElementById("question").innerHTML = "Do you want to be crosses or circles?";
17 | btns.innerHTML = '
Crosses
Naught
';
18 | }
19 |
20 | function togglePlayer(char) {
21 | 'use strict';
22 | var p1 = document.getElementById('player1Go'),
23 | p2 = document.getElementById('player2Go');
24 | char = (char === 'X') ? 'O' : 'X';
25 | return char;
26 |
27 | }
28 |
29 | function changeScreens() {
30 | document.getElementById("screen").style.display = 'none';
31 | document.getElementById("screen2").style.display = 'block';
32 | document.getElementById("player2Go").style.display = 'none';
33 | }
34 |
35 | function startGame(char) {
36 | 'use strict';
37 | var board = ['','','','','','','','',''],
38 | sqrs = document.getElementsByClassName('square'),
39 | [s0, s1, s2, s3, s4, s5, s6, s7, s8] = sqrs,
40 | human = char,
41 | ai = (char === 'X') ? 'O' : 'X',
42 | winning = [
43 | [0,1,2],
44 | [3,4,5],
45 | [6,7,8],
46 | [0,3,6],
47 | [1,4,7],
48 | [2,5,8],
49 | [0,4,8],
50 | [2,4,6]
51 | ];
52 | console.log(s0);
53 | changeScreens();
54 | for (var i = 0; i < sqrs.length; i++){
55 | sqrs[i].innerHTML = board[i];
56 | }
57 |
58 | function freeSpaces(board) {
59 | return board.filter(s => s != 'O' && s != 'X');
60 | }
61 |
62 | function win(board, player){
63 | var i;
64 | for (i = 0; i < winning.length; i += 1) {
65 |
66 | if (winning[i].filter(point => board[point] === player).length === 3){
67 | console.log('winner');
68 | return true;
69 | } else {
70 | return false;
71 | }
72 | }
73 | }
74 |
75 | function minimax(newBoard, player) {
76 | var spaces = freeSpaces(newBoard),
77 | moves = [];
78 |
79 | if (win(newBoard, human)){
80 | return -10;
81 | } else if (win(newBoard, ai)){
82 | return 10;
83 | } else if (freeSpaces.length === 0){
84 | return 0;
85 | }
86 | for (var i = 0; i < spaces.length; i += 1) {
87 | var move = {};
88 | move.index = newBoard[freeSpaces[i]];
89 | newBoard[freeSpaces[i]] = player;
90 | if (player == ai) {
91 | move.score = minimax(newBoard, human);
92 | } else {
93 | move.score = minimax(newBoard, ai);
94 | }
95 | newBoard[freeSpaces[i]] = move.index;
96 | moves.push(move);
97 | }
98 | var bestmove;
99 | if (player == ai){
100 | var bestScore = -10000;
101 | for (var i = 0; i < moves.length; i += 1){
102 | if (moves[i].score > bestScore) {
103 | bestScore = moves[i].score;
104 | bestmove = i;
105 | }
106 | }
107 | } else {
108 | var bestScore = 10000;
109 | for (var i = 0; i < moves.length; i += 1){
110 | if (moves[i].score < bestScore) {
111 | bestScore = moves[i].score;
112 | bestmove = i;
113 | }
114 | }
115 | }
116 | console.log(moves[bestmove]);
117 | return moves[bestmove];
118 | }
119 | s0.addEventListener('click', function () {
120 | if (!s0.innerHTML){
121 | s0.innerHTML = char;
122 | board[0] = char;
123 | if (win(board, char)) {
124 | char = togglePlayer(char);
125 | startGame(char);
126 | } else {
127 | char = togglePlayer(char);
128 | }
129 | }
130 | })
131 | s1.addEventListener('click', function () {
132 | if (!s1.innerHTML){
133 | s1.innerHTML = char;
134 | board[1] = char;
135 | if (win(board, char)) {
136 | char = togglePlayer(char);
137 | startGame(char);
138 | } else {
139 | char = togglePlayer(char);
140 | }
141 | }
142 | })
143 | s2.addEventListener('click', function () {
144 | if (!s2.innerHTML){
145 | s2.innerHTML = char;
146 | board[2] = char;
147 | if (win(board, char)) {
148 | char = togglePlayer(char);
149 | startGame(char);
150 | } else {
151 | char = togglePlayer(char);
152 | }
153 | }
154 | })
155 | s3.addEventListener('click', function () {
156 | if (!s3.innerHTML){
157 | s3.innerHTML = char;
158 | board[3] = char;
159 | if (win(board, char)) {
160 | char = togglePlayer(char);
161 | startGame(char);
162 | } else {
163 | char = togglePlayer(char);
164 | }
165 | }
166 | })
167 | s4.addEventListener('click', function () {
168 | if (!s4.innerHTML){
169 | s4.innerHTML = char;
170 | board[4] = char;
171 | if (win(board, char)) {
172 | char = togglePlayer(char);
173 | startGame(char);
174 | } else {
175 | char = togglePlayer(char);
176 | }
177 | }
178 | })
179 | s5.addEventListener('click', function () {
180 | if (!s5.innerHTML){
181 | s5.innerHTML = char;
182 | board[5] = char;
183 | if (win(board, char)) {
184 | char = togglePlayer(char);
185 | startGame(char);
186 | } else {
187 | char = togglePlayer(char);
188 | }
189 | }
190 | })
191 | s6.addEventListener('click', function () {
192 | if (!s6.innerHTML){
193 | s6.innerHTML = char;
194 | board[6] = char;
195 | if (win(board, char)) {
196 | char = togglePlayer(char);
197 | startGame(char);
198 | } else {
199 | char = togglePlayer(char);
200 | }
201 | }
202 | })
203 | s7.addEventListener('click', function () {
204 | if (!s7.innerHTML){
205 | s7.innerHTML = char;
206 | board[7] = char;
207 | if (win(board, char)) {
208 | char = togglePlayer(char);
209 | startGame(char);
210 | } else {
211 | char = togglePlayer(char);
212 | }
213 | }
214 | })
215 | s8.addEventListener('click', function () {
216 | if (!s8.innerHTML){
217 | s8.innerHTML = char;
218 | board[8] = char;
219 | if (win(board, char)) {
220 | char = togglePlayer(char);
221 | startGame(char);
222 | } else {
223 | char = togglePlayer(char);
224 | }
225 | }
226 | })
227 |
228 |
229 |
230 |
231 | }
232 |
--------------------------------------------------------------------------------
/whiteboard/whiteboard.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin:2px;
3 | }
4 | #colourbar {
5 | position: absolute;
6 | width: 80%;
7 | height: 5%;
8 | top: 85%;
9 | right: 10%;
10 | border-collapse: collapse;
11 | }
12 | td, th {
13 | display: table-cell;
14 | width: 0.2778%;
15 | vertical-align: inherit;
16 | }
17 | #sliderbox {
18 | position: absolute;
19 | width: 80%;
20 | height: 5%;
21 | top: 85%;
22 | right: 10%;
23 | }
24 | #marker {
25 | position: absolute;
26 | width: 0.5%;
27 | height: 140%;
28 | top: -20%;
29 | left: 0%;
30 | background: black;
31 | }
32 | #controls {
33 | position: absolute;
34 | width: 5%;
35 | height: 80%;
36 | top: 10%;
37 | right: 2%;
38 | }
39 | #big, #small, #medium, #tiny{
40 | position: absolute;
41 | border-radius: 50%;
42 | background: hsl(0, 100%, 50%);
43 | border: 1px solid;
44 | }
45 | #big{
46 | width: 5vw;
47 | height: 5vw;
48 |
49 | }
50 | #medium {
51 | width: 3vw;
52 | height: 3vw;
53 | top: 20%;
54 | left: 1vw;
55 | }
56 | #small {
57 | width: 1vw;
58 | height: 1vw;
59 | top: 30%;
60 | left: 2vw;
61 | }
62 | #tinybox {
63 | position: absolute;
64 | width: 5vw;
65 | height: 5vw;
66 | top: 36%;
67 | }
68 | #tiny{
69 | width: 0.3vw;
70 | height: 0.3vw;
71 | left: 2.4vw;
72 | top: 2.2vw;
73 | }
74 | #rubber, #pencil{
75 | position: absolute;
76 | left: -3vw;
77 | width: 10vw;
78 | height: 9vw;
79 | }
80 | #pencil {top: 45%;}
81 | #rubber {top: 65%;}
82 |
--------------------------------------------------------------------------------
/whiteboard/whiteboard.js:
--------------------------------------------------------------------------------
1 | function blobs() {
2 | rub = false;
3 | }
4 |
5 | function geof() {
6 | rub = true;
7 | };
8 |
9 |
10 | const canvas = document.querySelector('#draw');
11 | const ctx = canvas.getContext('2d');
12 | canvas.width = 0.90 * window.innerWidth;
13 | canvas.height = 0.92 * window.innerHeight;
14 | ctx.lineJoin = 'round';
15 | ctx.lineCap = 'round';
16 |
17 | let isDrawing = false;
18 | let hue = 0;
19 | let huepc,
20 | rub = false;
21 | let last;
22 | let lastY;
23 | let slider = document.getElementById('marker');
24 |
25 | function draw(e) {
26 | if (!isDrawing) return;
27 | console.log(e);
28 | ctx.beginPath();
29 | ctx.moveTo(lastX, lastY);
30 | ctx.lineTo(e.offsetX, e.offsetY);
31 | ctx.strokeStyle = rub ? '#fff' : `hsl(${hue}, 100%, 50%)`;
32 | ctx.stroke();
33 |
34 | [lastX, lastY] = [e.offsetX, e.offsetY];
35 | }
36 |
37 | canvas.addEventListener('mousedown', (e) => {
38 | isDrawing = true;
39 | [lastX, lastY] = [e.offsetX, e.offsetY];
40 | });
41 |
42 | canvas.addEventListener('mousemove', draw);
43 | canvas.addEventListener('mouseup', () => isDrawing = false);
44 | canvas.addEventListener('mouseout', () => isDrawing = false);
45 | canvas.addEventListener('wheel', (j) => {
46 | hue += j.deltaY/40;
47 | document.getElementById('big').style.background = `hsl(${hue}, 100%, 50%)`;
48 | document.getElementById('medium').style.background = `hsl(${hue}, 100%, 50%)`;
49 | document.getElementById('small').style.background = `hsl(${hue}, 100%, 50%)`;
50 | document.getElementById('tiny').style.background = `hsl(${hue}, 100%, 50%)`;
51 | huepc = hue < 0 ? ((hue % 360)+360)/3.6 : (hue % 360)/3.6;
52 | slider.style.left = huepc + "%";
53 | });
54 |
55 | function penSize(s){
56 | ctx.lineWidth = window.innerWidth * s / 100;
57 | }
58 |
--------------------------------------------------------------------------------
/wikiviewer/wikiview.css:
--------------------------------------------------------------------------------
1 | html body {
2 | background: #444;
3 | }
4 |
5 |
6 | .searchBtn {
7 | border: 5px solid blue;
8 | height: 65px;
9 | width: 65px;
10 | margin: auto;
11 | margin-top: 30vh;
12 | border-radius: 40px;
13 | display: flex;
14 | justify-content: center;
15 | }
16 |
17 | #searchBox {
18 | border: 5px solid blue;
19 | height: 65px;
20 | width: 300px;
21 | margin: auto;
22 | margin-top: 30px;
23 | border-radius: 40px;
24 | padding: 15px 0 0 10px;
25 | display: flex;
26 | justify-content: center;
27 | display: none;
28 | margin-top: 30vh;
29 | }
30 |
31 | .searchTerm {
32 | color: white;
33 | font-size: 35px;
34 | width: 80%;
35 | }
36 |
37 |
38 | #searchwiden, #doSearch{
39 | background: #444;
40 | color: white;
41 | border: 0;
42 | border-radius: 50%;
43 | }
44 |
45 | .searchTerm {
46 | background: #444;
47 | border:0;
48 | }
49 |
50 | .result {
51 | background: white;
52 | border: 5px solid black;
53 | border-radius: 15px;
54 | width: 90%;
55 | padding: 10px;
56 | margin: auto;
57 | margin-top: 12px;
58 | }
59 |
60 | a {
61 | color: black;
62 | text-decoration: none;
63 | }
64 |
65 | .result:hover {
66 | box-shadow: 0 10px 5px 0 rgba(20, 20, 20, 0.7);
67 | }
68 |
--------------------------------------------------------------------------------
/wikiviewer/wikiview.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
Wikipedia Viewer
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/wikiviewer/wikiview.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function () {
2 | 'use strict';
3 | $('#searchwiden').on('click', function () {
4 | $("#searchBox").show();
5 | $('.searchBtn').hide();
6 | });
7 |
8 | $('#doSearch').on('click', function () {
9 | var search4 = $(".searchTerm").val(),
10 | url = "https://en.wikipedia.org/w/api.php?action=query&list=search&indexpageids=&format=json&srsearch=" + search4.split(' ').join('%20') + "&utf8=&callback=?",
11 | win;
12 |
13 | if (search4.length === 0) {
14 | win = window.open('https://en.wikipedia.org/wiki/Special:Random', '_blank');
15 | win.focus();
16 | }
17 |
18 | $('#searchBox').css('margin-top', '3vw');
19 |
20 | $('.result').remove();
21 |
22 | $.getJSON(url, function (data) {
23 | var res = data.query.search,
24 | i;
25 | console.log(res);
26 | for (i = 0; i < res.length; i += 1) {
27 |
28 | $('.searchPage').append('
' + res[i].title + ' ' + res[i].snippet + '
');
29 | }
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------