11 |
16 | See Source Code
17 |
18 |
19 | );
20 | }
21 | }
22 |
23 | export default App;
24 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/random-quote-machine/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import 'react-bootstrap';
3 | import './App.css';
4 | import QuoteBox from './quotebox/QuoteBox';
5 | import GitHubForkRibbon from 'react-github-fork-ribbon';
6 |
7 | class App extends Component {
8 | render() {
9 | return (
10 |
11 |
16 | See Source Code
17 |
18 |
19 | );
20 | }
21 | }
22 |
23 | export default App;
24 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/wikipedia-viewer/README.md:
--------------------------------------------------------------------------------
1 | # Build a Wikipedia Viewer
2 |
3 | > [Visit the application](https://wikepedia.surge.sh/)
4 |
5 | ## Objective
6 |
7 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/.
8 |
9 | ## Requirements
10 |
11 | * User Story: I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
12 |
13 | * User Story: I can click a button to see a random Wikipedia entry.
14 |
15 | **Hint #1:** Here's a URL you can use to get a random Wikipedia article: https://en.wikipedia.org/wiki/Special:Random.
16 |
17 | **Hint #2:** Here's an entry on using Wikipedia's API: https://www.mediawiki.org/wiki/API:Main_page.
18 |
19 | **Hint #3:** Use this link to experiment with Wikipedia's API.
20 |
21 | ## Notes
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/random-quote-machine/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
8 |
40 | );
41 | }
42 | }
43 |
44 | export default App;
45 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/twitch-client/README.md:
--------------------------------------------------------------------------------
1 | # Use the Twitchtv JSON API
2 |
3 | > [Visit the application](https://twitch-tv.surge.sh/)
4 |
5 | ## Objective
6 |
7 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/Myvqmo/.
8 |
9 | ## Requirements
10 |
11 | * User Story: I can see whether Free Code Camp is currently streaming on Twitch.tv.
12 |
13 | * User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.
14 |
15 | * User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.
16 |
17 | * User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.
18 |
19 | **Hint:** Here's an array of the Twitch.tv usernames of people who regularly stream: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
20 |
21 | **UPDATE:** Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.gomix.me/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.
22 |
23 | ## Notes
--------------------------------------------------------------------------------
/API-Projects/TimestampMicroservice/templates/index.pug:
--------------------------------------------------------------------------------
1 | extends layout
2 |
3 | block content
4 | div.row
5 | div.col.s12.m12
6 | div.card.blue-grey.darken-1
7 | div.card-content.white-text
8 | span.card-title User stories:
9 | ol
10 | li
11 | blockquote
12 | span I can pass a string as a parameter, and it will check to see whether that string contains either a unix timestamp or a natural language date (example: January 1, 2016)
13 | li
14 | blockquote
15 | span If it does, it returns both the Unix timestamp and the natural language form of that date.
16 | li
17 | blockquote
18 | span If it does not contain a date or Unix timestamp, it returns null for those properties
19 | div.row
20 | div.col.s12.m12
21 | div.card.blue-grey.darken-1
22 | div.card-content.white-text
23 | span.card-title Example usage:
24 | ul
25 | li
26 | blockquote
27 | a.white-text(href="December%2015,%202015", rel="no-opener") #{url}December%2015,%202015
28 | li
29 | blockquote
30 | a.white-text(href="14501376005", rel="no-opener") #{url}14501376005
31 |
32 | div.row
33 | div.col.s12.m12
34 | div.card.blue-grey.darken-1
35 | div.card-content.white-text
36 | span.card-title Example output:
37 | ul
38 | li
39 | blockquote
40 | a(href="https://timestamp-ms.herokuapp.com/December%2015,%202015", rel="no-opener")
41 | li
42 | blockquote
43 | span { "unix": 1450137600, "natural": "December 15, 2015" }
44 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/twitch-client/src/helpers/Api.js:
--------------------------------------------------------------------------------
1 | import { get, all, spread } from 'axios'
2 |
3 | module.exports.getChannelInformation = (username) => {
4 | return new Promise((resolve, reject) => {
5 |
6 | all([
7 | get(`https://wind-bow.glitch.me/twitch-api/users/${username}`),
8 | get(`https://wind-bow.glitch.me/twitch-api/streams/${username}`)
9 | ])
10 | .then(spread(function (userInfo, streamInfo) {
11 |
12 | let usernames={}
13 | usernames.name = userInfo.data.display_name
14 | usernames.logo = userInfo.data.logo
15 |
16 | let userStream = {}
17 | if( streamInfo.data.stream === null){
18 | userStream.currentStream = 'Stream Closed'
19 | userStream.status = "offline"
20 | userStream.preview = 'img/offline.gif'
21 | }else{
22 | userStream.status = streamInfo.data.stream.stream_type
23 | userStream.currentStream = streamInfo.data.stream.game
24 | userStream.preview = streamInfo.data.stream.preview.medium
25 | }
26 | resolve({ userInfo: usernames, streamInfo: userStream })
27 |
28 | }))
29 | //.then(response => this.setState({ vehicles: response.data }))
30 | .catch(error => console.log(error));
31 |
32 | })
33 | }
--------------------------------------------------------------------------------
/API-Projects/TimestampMicroservice/app.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const path = require('path');
3 | const moment = require('moment');
4 | const chrono = require('chrono-node');
5 |
6 | const app = express();
7 |
8 | app.use(express.static(path.join(__dirname, 'public')));
9 |
10 | app.set('views', path.join(__dirname,'templates'));
11 | app.set('view engine', 'pug');
12 |
13 | app.get('/', (req, res) => {
14 | const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
15 | res.render('index',{ url: fullUrl});
16 | });
17 |
18 | app.get('/:date', (req, res) => {
19 | const unformattedDate = req.params.date;
20 | res.writeHead(200, { 'Content-Type': 'application/json'});
21 |
22 | if(unformattedDate.match(/[a-z]/ig)){
23 | const parsedDateString = chrono.parseDate(req.params.date);
24 |
25 | if((new Date(parsedDateString)).getTime() > 0){
26 | const formattedDate = {
27 | unixtime: Date.parse(parsedDateString),
28 | natural: moment(parsedDateString).format("MMM Do YYYY")
29 | }
30 | res.end(JSON.stringify(formattedDate));
31 | }
32 | else {
33 | res.end(JSON.stringify({
34 | unixtime: null,
35 | natural: null
36 | }));
37 | }
38 | }
39 | else {
40 | if(Number(unformattedDate) > 0){
41 | const formattedDate = {
42 | unixtime: unformattedDate,
43 | natural: moment.unix(unformattedDate).format("MMM Do YYYY")
44 | }
45 | res.end(JSON.stringify(formattedDate));
46 | }
47 | else {
48 | res.end(JSON.stringify({
49 | unixtime: null,
50 | natural: null
51 | }));
52 | }
53 | }
54 | });
55 |
56 | app.listen(3000);
57 |
58 |
--------------------------------------------------------------------------------
/Advanced Front End Development Projects/javascript-calculator/src/App.css:
--------------------------------------------------------------------------------
1 | .App{
2 | width: 350px;
3 | min-width: 350px;
4 | height: 650px;
5 | background: #FFFFFF;
6 | margin: 0 auto;
7 | top: 50%;
8 | left: 50%;
9 | transform: translate(-50%, -50%);
10 | position: absolute;
11 | }
12 |
13 | .App #display{
14 | height: 30%;
15 | box-shadow: 0 8px 6px -6px #2e2e2e33;
16 | margin: 20px;
17 | text-align: right;
18 | font-size: 40px;
19 | position: relative;
20 | }
21 |
22 | .App #controls{
23 | height: 70%;
24 | }
25 |
26 | .App #controls #calc_buttons{
27 | list-style: none;
28 | width: 90%;
29 | margin: 0 auto;
30 | padding: 10px 50px;
31 | font-size: 40px;
32 | color: #4342567a;
33 | margin-top: 20px;
34 | }
35 |
36 | .App #controls #calc_buttons li{
37 | display: inline-block;
38 | width: 25%;
39 | height: 80px;
40 | cursor: pointer;
41 | }
42 |
43 | #c, #brackets, #brackets, #modulo, #division, #multiply, #subtract, #addition{
44 | color: #FAA4A3;
45 | }
46 |
47 | #equal{
48 | background-color: #FAA4A3;
49 | color: #fff;
50 | margin: 0 auto;
51 | width: 110px !important;
52 | height: 50px !important;
53 | text-align: center;
54 | box-shadow: 0 8px 6px -6px #2e2e2e82;
55 | }
56 |
57 | #equal span{
58 | width: 100%;
59 | }
60 |
61 | .operation_display p{
62 | color: #2e2e2ea6;
63 | letter-spacing: 4px;
64 | }
65 |
66 | .history{
67 | font-size: 25px;
68 | text-transform: uppercase;
69 | color: #4342567a;
70 | width: 100%;
71 | position: absolute;
72 | bottom: 0;
73 | }
74 |
75 | .history p{
76 | width: 100%;
77 | }
78 | #history_title{
79 | float: left;
80 | }
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/local-weather/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
9 |
16 |
10 |
12 | 5+5
11 |
13 |
15 | History 10
14 |
17 |
38 |
39 |
23 |
28 |
33 | )
34 | }
35 | }
36 |
37 | export default Channels
38 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/random-quote-machine/src/data/colors.json:
--------------------------------------------------------------------------------
1 | [
2 | "#00ffff",
3 | "#000000",
4 | "#0000ff",
5 | "#8a2be2",
6 | "#a52a2a",
7 | "#deb887",
8 | "#5f9ea0",
9 | "#7fff00",
10 | "#d2691e",
11 | "#ff7f50",
12 | "#6495ed",
13 | "#dc143c",
14 | "#00008b",
15 | "#008b8b",
16 | "#b8860b",
17 | "#a9a9a9",
18 | "#006400",
19 | "#bdb76b",
20 | "#8b008b",
21 | "#556b2f",
22 | "#ff8c00",
23 | "#9932cc",
24 | "#8b0000",
25 | "#e9967a",
26 | "#8fbc8f",
27 | "#483d8b",
28 | "#2f4f4f",
29 | "#2f4f4f",
30 | "#00ced1",
31 | "#9400d3",
32 | "#ff1493",
33 | "#696969",
34 | "#696969",
35 | "#1e90ff",
36 | "#b22222",
37 | "#228b22",
38 | "#ff00ff",
39 | "#ffd700",
40 | "#daa520",
41 | "#808080",
42 | "#008000",
43 | "#808080",
44 | "#ff69b4",
45 | "#cd5c5c",
46 | "#4b0082",
47 | "#7cfc00",
48 | "#f08080",
49 | "#90ee90",
50 | "#ffa07a",
51 | "#20b2aa",
52 | "#87cefa",
53 | "#778899",
54 | "#778899",
55 | "#00ff00",
56 | "#32cd32",
57 | "#ff00ff",
58 | "#800000",
59 | "#66cdaa",
60 | "#0000cd",
61 | "#ba55d3",
62 | "#9370db",
63 | "#3cb371",
64 | "#7b68ee",
65 | "#00fa9a",
66 | "#48d1cc",
67 | "#c71585",
68 | "#191970",
69 | "#000080",
70 | "#808000",
71 | "#6b8e23",
72 | "#ffa500",
73 | "#ff4500",
74 | "#da70d6",
75 | "#db7093",
76 | "#cd853f",
77 | "#800080",
78 | "#663399",
79 | "#ff0000",
80 | "#bc8f8f",
81 | "#4169e1",
82 | "#8b4513",
83 | "#fa8072",
84 | "#f4a460",
85 | "#2e8b57",
86 | "#a0522d",
87 | "#6a5acd",
88 | "#708090",
89 | "#708090",
90 | "#00ff7f",
91 | "#4682b4",
92 | "#d2b48c",
93 | "#008080",
94 | "#ff6347",
95 | "#ee82ee",
96 | "#9acd32"
97 | ]
98 |
--------------------------------------------------------------------------------
/API-Projects/URLShortenerMicroservice/templates/index.pug:
--------------------------------------------------------------------------------
1 | extends layout
2 |
3 | block content
4 | div.row
5 | div.col.s12.m12
6 | div.card.blue-grey.darken-1
7 | div.card-content.white-text
8 | span.card-title User stories:
9 | ol
10 | li
11 | blockquote
12 | span I can pass a URL as a parameter and I will receive a shortened URL in the JSON response.
13 | li
14 | blockquote
15 | span When I visit that shortened URL, it will redirect me to my original link.
16 | div.row
17 | div.col.s12.m12
18 | div.card.blue-grey.darken-1
19 | div.card-content.white-text
20 | span.card-title Example creation usage:
21 | ul
22 | li
23 | blockquote
24 | code
25 | a.white-text(href="new/https://www.google.com", rel="no-opener") #{url}new/https://www.google.com
26 | li
27 | blockquote
28 | code
29 | a.white-text(href="new/http://foo.com:80", rel="no-opener") #{url}new/http://foo.com:80
30 | div.row
31 | div.col.s12.m12
32 | div.card.blue-grey.darken-1
33 | div.card-content.white-text
34 | span.card-title Example creation output:
35 | ul
36 | li
37 | blockquote
38 | a(href="https://timestamp-ms.herokuapp.com/December%2015,%202015", rel="no-opener")
39 | li
40 | blockquote
41 | code { "original_url":"http://foo.com:80", "short_url":"#{url}u/8170" }
42 |
43 | div.row
44 | div.col.s12.m12
45 | div.card.blue-grey.darken-1
46 | div.card-content.white-text
47 | span.card-title Usage:
48 | ul
49 | li
50 | blockquote
51 | code
52 | a.white-text(href="u/2871", rel="no-opener") #{url}u/2871
53 |
54 | div.row
55 | div.col.s12.m12
56 | div.card.blue-grey.darken-1
57 | div.card-content.white-text
58 | span.card-title Will redirect to:
59 | ul
60 | li
61 | blockquote
62 | code
63 | a.white-text(href="https://www.google.com/", rel="no-opener") https://www.google.com/
64 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/local-weather/src/components/Api.js:
--------------------------------------------------------------------------------
1 | import { get } from 'axios'
2 |
3 |
4 | export function getLocationCoords(){
5 | return new Promise((resolve, reject)=>{
6 | if (window.navigator.geolocation){
7 | //Get Browser's Geolocation
8 | window.navigator.geolocation.getCurrentPosition(
9 | (location) => {
10 | resolve({ lat: location.coords.latitude, lon: location.coords.longitude})
11 | },
12 | (error) => {
13 | if (error.code === error.PERMISSION_DENIED){
14 | get('https://ipapi.co/json/')
15 | .then(({ data: ipData }) => {
16 | resolve({ lat : ipData.latitude , lon: ipData.longitude })
17 | }).catch((error)=> reject(error))
18 | }else{
19 | reject(error)
20 | }
21 |
22 | }
23 | )
24 | } else {
25 | //Fallback to IP
26 | get('https://ipapi.co/json/')
27 | .then(({ data: ipData }) => {
28 | resolve({ lat : ipData.latitude , lon: ipData.longitude })
29 | }).catch((error)=> reject(error))
30 | }
31 | })
32 | }
33 |
34 | export function fetchWeather(long, lat){
35 | const appid = '722ac3c3b3097d61c9fc3a387dec9db1'
36 | let url = 'https://weather.millergeek.xyz/data/2.5/weather?lat='+lat+'&lon='+long+'&appid='+appid
37 | return new Promise((resolve , reject)=>{
38 | get(url).then(({data: weatherData}) => {
39 | resolve(weatherData)
40 | }).catch((error) => reject(error))
41 | })
42 | }
43 |
44 | export function getCountryName(code){
45 | return new Promise((resolve, reject)=>{
46 | get(`https://restcountries.eu/rest/v2/alpha?codes=${code}`)
47 | .then(({data: countryData})=>{
48 | resolve(countryData[0].name)
49 | }).catch((error) => reject(error))
50 | })
51 |
52 | }
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Portfolio/vendors/js/init.js:
--------------------------------------------------------------------------------
1 | var o = {
2 | init: function(){
3 | this.diagram();
4 | },
5 | random: function(l, u){
6 | return Math.floor((Math.random()*(u-l+1))+l);
7 | },
8 | diagram: function(){
9 | var r = Raphael('diagram', 600, 600),
10 | rad = 77,
11 | defaultText = 'Skills',
12 | speed = 250;
13 |
14 | r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#34495e' });
15 |
16 | var title = r.text(300, 300, defaultText).attr({
17 | font: '20px Arial',
18 | fill: '#fff'
19 | }).toFront();
20 |
21 | r.customAttributes.arc = function(value, color, rad){
22 | var v = 3.6*value,
23 | alpha = v == 360 ? 359.99 : v,
24 | random = o.random(91, 240),
25 | a = (random-alpha) * Math.PI/180,
26 | b = random * Math.PI/180,
27 | sx = 300 + rad * Math.cos(b),
28 | sy = 300 - rad * Math.sin(b),
29 | x = 300 + rad * Math.cos(a),
30 | y = 300 - rad * Math.sin(a),
31 | path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
32 | return { path: path, stroke: color }
33 | }
34 |
35 | $('.get').find('.arc').each(function(i){
36 | var t = $(this),
37 | color = t.find('.color').val(),
38 | value = t.find('.percent').val(),
39 | text = t.find('.text').text();
40 |
41 | rad += 19;
42 | var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 16 });
43 |
44 | z.mouseover(function(){
45 | this.animate({ 'stroke-width': 30, opacity: .75 }, 1000, 'elastic');
46 | if(Raphael.type != 'VML') //solves IE problem
47 | this.toFront();
48 | title.stop().animate({ opacity: 0 }, speed, '>', function(){
49 | this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, speed, '<');
50 | });
51 | }).mouseout(function(){
52 | this.stop().animate({ 'stroke-width': 16, opacity: 1 }, speed*4, 'elastic');
53 | title.stop().animate({ opacity: 0 }, speed, '>', function(){
54 | title.attr({ text: defaultText }).animate({ opacity: 1 }, speed, '<');
55 | });
56 | });
57 | });
58 |
59 | }
60 | }
61 | $(function(){ o.init(); });
62 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/twitch-client/build/static/css/main.6f999ab7.css:
--------------------------------------------------------------------------------
1 | .App{text-align:center;height:100%}.App,body{width:100%}body{background:url("https://cdn.rawgit.com/shashank7200/chingu-fcc-speedrun-challenge/master/frontend/twitch-client/build/img/bgimage.jpg")50% no-repeat;background-attachment:fixed;background-size:cover;height:100vh;overflow-y:scroll;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,sans-serif}a{text-decoration:none;color:inherit}#root{width:100%;height:100%;margin:0;padding:0}.show{display:block}.hide,.show{transition:all .5s ease-in-out}.hide{display:none}.container{width:1140px;margin:0 auto;margin-bottom:70px}.logo{height:100px;text-align:center;margin:20px 0}.logo img{height:90%}.channel-container{width:100%;border-radius:5px;background:transparent}li{list-style:none;display:inline-block;margin:10px}.status-header{padding-top:1rem}.status-header li{border:1px solid;padding:.5rem;background:#f2f2f2;color:#065a76;border-radius:5px;text-transform:uppercase;cursor:crosshair;font-weight:700;margin:5px;outline:none;transition:all .7s ease-in-out}.status-header li:hover,li.active{background:#065a76;color:#f2f2f2}hr{width:70%;background:#065a76;color:#065a76;margin-bottom:3rem}.channel-list-container{position:static;padding:1rem;border-radius:5px;margin:0 auto;margin-top:1rem;width:80%;background:#065a76;color:#f2f2f2}.channel-desc{display:inline-block;width:50%;padding:10px}.channel-name{font-size:1.3rem;text-transform:capitalize}.channel-live-preiew{height:40%;width:40%;margin:0 auto;border-radius:10px}.channel-logo{height:30%;width:30%;margin:0 auto;border-radius:50%}.channel-status{display:inline-block;width:50%;padding:10px}.channel-tv-description{font-size:.9rem}.channel-tv-status{text-transform:uppercase;font-size:1.3rem}@media only screen and (max-width:1066px){.container{width:96%}.channel-name,.channel-tv-status{font-size:1rem}}@media only screen and (max-width:767px){.container{width:98%}.logo img{height:70%}.logo{margin-bottom:-10px}.status-header{padding-top:.5rem}.status-header ul{padding-left:0}.channel-list-container{width:98%}hr{width:90%}}*{box-sizing:border-box;text-rendering:optimizeLegibility}body{margin:0;padding:0;font-family:sans-serif}
2 | /*# sourceMappingURL=main.6f999ab7.css.map*/
3 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Portfolio/resources/css/queries.css:
--------------------------------------------------------------------------------
1 | @media only screen and (min-width: 1056px) and (max-width: 1252px){
2 | .masthead h1{
3 | font-size: 50px;
4 | line-height: 50px;
5 | }
6 | span.innerText{
7 | font-size: 20px;
8 | line-height:20px;
9 | }
10 | }
11 |
12 | @media only screen and (max-width: 1055px){
13 | .masthead h1{
14 | font-size: 50px;
15 | line-height: 50px;
16 | }
17 | span.innerText{
18 | font-size: 20px;
19 | line-height:20px;
20 | }
21 | nav{
22 | width: auto;
23 | }
24 | .nav-social {
25 | width: auto;
26 | }
27 | .project-tile-container .project-tile-image-container {
28 | width: calc(48%);
29 | }
30 |
31 | #content{
32 | top:0;
33 | left: 0;
34 | margin: 0;
35 | }
36 | .legend{
37 | width: 150px;
38 | }
39 | #diagram{
40 | left: -15%;
41 | }
42 | }
43 |
44 | @media only screen and (max-width: 767px){
45 | .masthead h1{
46 | font-size: 40px;
47 | line-height: 40px;
48 | }
49 | span.innerText{
50 | font-size: 10px;
51 | line-height:10px;
52 | }
53 | .logo-text {
54 | font-size: 22px;
55 | }
56 | }
57 |
58 | @media only screen and (max-width: 767px){
59 | .legend{
60 | display: none;
61 | }
62 | #diagram{
63 | left: 10%;
64 | }
65 | #content{
66 | width: auto;
67 | }
68 | .about-section .pages{
69 | padding-top: 0;
70 | }
71 | .contact-wrap {
72 | width: 80%;
73 | margin: 0 auto;
74 | }
75 | }
76 |
77 | @media only screen and (max-width: 652px){
78 | nav#navbar{
79 | display: none;
80 | }
81 | div.nav-social{
82 | display: none;
83 | }
84 | #diagram {
85 | left: 12%;
86 | }
87 | .contact-wrap {
88 | width: 100%;
89 | margin: 0 auto;
90 | }
91 | }
92 | @media only screen and (max-width: 545px){
93 | .masthead h1{
94 | font-size: 30px;
95 | line-height: 30px;
96 | }
97 | span.innerText{
98 | font-size: 8px;
99 | line-height:8px;
100 | }
101 | .logo-text {
102 | font-size: 18px;
103 | }
104 | #diagram {
105 | display: none;
106 | }
107 | .legend{
108 | left: 25%;
109 | display: block;
110 | position: relative;
111 | }
112 | .project-tile-container .project-tile-image-container {
113 | width: calc(100%);
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Zephyr Edited/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/random-quote-machine/src/App.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: 'Quicksand', 'Open sans'!important;
3 | }
4 | .color-transition{
5 | transition: background-color 1.5s ease-in-out,color 3s ease, opacity 1.5s ease-in-out;
6 | }
7 |
8 | .App{
9 | background-color: rgb(255, 127, 80);
10 | height: 100vh;
11 | width: 100%;
12 | }
13 | .QuoteContainer{
14 | position: relative;
15 | top: 20%;
16 | margin: 0 auto;
17 | width: 500px;
18 | height: 300px;
19 | padding: 20px 10px;
20 | border-radius: 1% 1%;
21 | background-color: #f5f5f5;
22 | }
23 | .QuoteBox{
24 | position: absolute;
25 | }
26 | .footer{
27 | width: 100%;
28 | position: absolute;
29 | bottom:50px;
30 | }
31 | .quote{
32 | font-weight: 500;
33 | font-size: 1.75em;
34 | }
35 | .QuoteBox{
36 | height: 100%;
37 | width: 100%;
38 | }
39 | .fa-twitter, .nextButton{
40 | background:rgb(255, 127, 80);
41 | color: #fff;
42 | }
43 | .fa-twitter:hover, .nextButton:hover{
44 | opacity: 0.8;
45 | transition: background-color 1s ease-in-out;
46 | }
47 | .fa-twitter, .nextButton{
48 | opacity: 1;
49 | transition: background-color 1s ease-in-out;
50 | }
51 | .fa-twitter{
52 | font-size: 2em;
53 | margin-left: 10px;
54 | border-radius: 2px;
55 | padding: 0.2em 0.3em;
56 | }
57 | .fa-quote-left{
58 | margin-right: 10px;
59 | }
60 | .fa-hashtag{
61 | margin-right: 3px;
62 | }
63 | .quote,.author{
64 | color: rgb(255, 127, 80);
65 | }
66 | .author{
67 | position: absolute;
68 | right: 30px;
69 | font-size: 1.2em;
70 | }
71 |
72 | .nextButton{
73 | right: 25px;
74 | position: absolute;
75 | height: 38px;
76 | border: none;
77 | border-radius: 3px;
78 | outline: none;
79 | font-size: 1.1em;
80 | padding: 8px 18px 6px 18px;
81 | opacity: 1;
82 | cursor: pointer;
83 | }
84 | .copy{
85 | color: #fff;
86 | position: absolute;
87 | bottom: -70px;
88 | width: 100%;
89 | font-size: 1em;
90 | text-align: center;
91 | }
92 | .fa-heart{
93 | color: #e31b23;
94 | }
95 | @media screen and (max-width: 520px) {
96 | .QuoteContainer{
97 | width: 400px;
98 | }
99 | }
100 | @media screen and (max-width: 430px) {
101 | .QuoteContainer{
102 | width: 330px;
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Zephyr Landing Page/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/local-weather/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import './App.css'
3 | import { getCountryName, getLocationCoords, fetchWeather } from './components/Api'
4 | import WeatherDisplay from './components/WeatherDisplay'
5 | import GitHubForkRibbon from 'react-github-fork-ribbon';
6 |
7 | class App extends Component {
8 |
9 | constructor(props){
10 | super(props)
11 |
12 | this.state ={
13 | id: null,
14 | city:'',
15 | country:'',
16 | description:'',
17 | temperature:0,
18 | humidity:0,
19 | country_name:'',
20 | speed:null
21 | }
22 |
23 | }
24 |
25 | componentDidMount(){
26 | getLocationCoords().then((coords) => {
27 | fetchWeather(coords.lon, coords.lat).then((weatherData) => {
28 | getCountryName(weatherData.sys.country).then((countryName)=>{
29 | this.setState({ country_name: countryName})
30 | })
31 | this.setState({
32 | id : weatherData.weather[0].id,
33 | city: weatherData.name,
34 | country: weatherData.sys.country,
35 | description: weatherData.weather[0].main,
36 | temperature: weatherData.main.temp,
37 | humidity: weatherData.main.humidity,
38 | speed: weatherData.wind.speed
39 | })
40 |
41 | })
42 | })
43 | }
44 |
45 |
46 | render() {
47 | const linkStyle ={
48 | textDecoration : "none",
49 | color: "#fff",
50 | cursor: "pointer"
51 | }
52 | return (
53 |
29 | 
30 |
32 | { status }
31 |
54 |
56 |
66 | See Source Code
67 |
68 |
69 | );
70 | }
71 |
72 | }
73 |
74 | export default App;
75 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Tribute To Swami Vivekanand/css/bootstrap-reboot.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../../scss/_normalize.scss","bootstrap-reboot.css","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss"],"names":[],"mappings":"4EAYA,KACE,YAAA,WACA,YAAA,KACA,qBAAA,KACA,yBAAA,KAUF,KACE,OAAA,EAOF,QAAA,MAAA,OAAA,OAAA,IAAA,QAME,QAAA,MAQF,GACE,UAAA,IACA,OAAA,MAAA,EAWF,WAAA,OAAA,KAGE,QAAA,MAOF,OACE,OAAA,IAAA,KAQF,GACE,mBAAA,YAAA,WAAA,YACA,OAAA,EACA,SAAA,QAQF,IACE,YAAA,UAAA,UACA,UAAA,IAWF,EACE,iBAAA,YACA,6BAAA,QAQF,SAAA,QAEE,cAAA,EAQF,YACE,cAAA,KACA,gBAAA,UACA,gBAAA,UAAA,OAOF,EAAA,OAEE,YAAA,QAOF,EAAA,OAEE,YAAA,OAQF,KAAA,IAAA,KAGE,YAAA,UAAA,UACA,UAAA,IAOF,IACE,WAAA,OAOF,KACE,iBAAA,KACA,MAAA,KAOF,MACE,UAAA,IAQF,IAAA,IAEE,UAAA,IACA,YAAA,EACA,SAAA,SACA,eAAA,SAGF,IACE,OAAA,OAGF,IACE,IAAA,MAUF,MAAA,MAEE,QAAA,aAOF,sBACE,QAAA,KACA,OAAA,EAOF,IACE,aAAA,KAOF,eACE,SAAA,OAWF,OAAA,MAAA,SAAA,OAAA,SAKE,YAAA,WACA,UAAA,KACA,YAAA,KACA,OAAA,EAQF,OAAA,MAEE,SAAA,QAQF,OAAA,OAEE,eAAA,KASF,aAAA,cAAA,OAAA,mBAIE,mBAAA,OAOF,gCAAA,+BAAA,gCAAA,yBAIE,aAAA,KACA,QAAA,EAOF,6BAAA,4BAAA,6BAAA,sBAIE,QAAA,IAAA,OAAA,WAOF,SACE,OAAA,IAAA,MAAA,OACA,OAAA,EAAA,IACA,QAAA,MAAA,OAAA,MAUF,OACE,mBAAA,WAAA,WAAA,WACA,MAAA,QACA,QAAA,MACA,UAAA,KACA,QAAA,EACA,YAAA,OAQF,SACE,QAAA,aACA,eAAA,SAOF,SACE,SAAA,KCrKF,gBAAA,aD+KE,mBAAA,WAAA,WAAA,WACA,QAAA,EC1KF,yCAAA,yCDmLE,OAAA,KC9KF,cDuLE,mBAAA,UACA,eAAA,KCnLF,4CAAA,yCD4LE,mBAAA,KAQF,6BACE,mBAAA,OACA,KAAA,QAWF,QAAA,KAEE,QAAA,MAOF,QACE,QAAA,UAUF,OACE,QAAA,aAOF,SACE,QAAA,KCnNF,SD8NE,QAAA,KEtbF,KACE,mBAAA,WAAA,WAAA,WAGF,EAAA,QAAA,SAGE,mBAAA,QAAA,WAAA,QAoBA,cAAgB,MAAA,aAQlB,KAYE,mBAAA,UAGA,4BAAA,YAGF,KACE,YAAA,cAAA,UAAA,mBAAA,WAAA,OC2K4H,iBD3K5H,MAAA,WACA,UAAA,KACA,YAAA,IACA,YAAA,IAEA,MAAA,QAEA,iBAAA,KD2LF,sBClLE,QAAA,YAYF,GAAI,GAAI,GAAI,GAAI,GAAI,GAClB,WAAA,EACA,cAAA,MAOF,EACE,WAAA,EACA,cAAA,KAIF,0BAAA,YAGE,OAAA,KAGF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QAGF,GAAA,GAAA,GAGE,WAAA,EACA,cAAA,KAGF,MAAA,MAAA,MAAA,MAIE,cAAA,EAGF,GACE,YAAA,IAGF,GACE,cAAA,MACA,YAAA,EAGF,WACE,OAAA,EAAA,EAAA,KAQF,EACE,MAAA,QACA,gBAAA,KEhJE,QAAA,QFmJA,MAAA,QACA,gBAAA,UAUJ,8BACE,MAAA,QACA,gBAAA,KEhKE,oCAAA,oCFmKA,MAAA,QACA,gBAAA,KANJ,oCAUI,QAAA,EASJ,IAEE,WAAA,EAEA,cAAA,KAEA,SAAA,KAQF,OAGE,OAAA,EAAA,EAAA,KAQF,IAGE,eAAA,ODsIF,cCzHE,OAAA,QAcF,cAAA,EAAA,KAAA,OAAA,MAAA,MAAA,OAAA,QAAA,SASE,iBAAA,aAAA,aAAA,aAQF,MAEE,gBAAA,SAEA,iBAAA,YAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QACA,WAAA,KACA,aAAA,OAGF,GAEE,WAAA,KAQF,MAEE,QAAA,aACA,cAAA,MAOF,aACE,QAAA,IAAA,OACA,QAAA,IAAA,KAAA,yBAGF,OAAA,MAAA,OAAA,SAME,YAAA,QAGF,8BAAA,2BAMI,OAAA,YAKJ,iBAAA,iBAAA,2BAAA,kBASE,mBAAA,QAGF,SAEE,OAAA,SAGF,SAME,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAGF,OAEE,QAAA,MACA,MAAA,KACA,QAAA,EACA,cAAA,MACA,UAAA,OACA,YAAA,QAGF,mBAKE,mBAAA,KAIF,OACE,QAAA,aDsEF,SC9DE,QAAA"}
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/wikipedia-viewer/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/random-quote-machine/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Zephyr Landing Page/resources/js/script.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |
3 | /* For the Sticky navigation */
4 |
5 | $('.js--section-features').waypoint(function(direction){
6 |
7 | if (direction === 'down'){
8 | $('nav').addClass('sticky');
9 | }else{
10 | $('nav').removeClass('sticky');
11 | }
12 |
13 | },{offset: '60px;'
14 | });
15 |
16 | /* Scroll on Buttons */
17 | $('.js--scroll-to-plans').click(function(){
18 | $('html, body').animate({scrollTop: $('.js--section-plans').offset().top}, 1000);
19 | });
20 |
21 | $('.js--scroll-to-start').click(function(){
22 | $('html, body').animate({scrollTop: $('.js--section-features').offset().top}, 1000);
23 | });
24 |
25 |
26 | /* Scroll for Navigation Links */
27 |
28 | $(function() {
29 | $('a[href*="#"]:not([href="#"])').click(function() {
30 | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
31 | var target = $(this.hash);
32 | target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
33 | if (target.length) {
34 | $('html, body').animate({
35 | scrollTop: target.offset().top
36 | }, 1000);
37 | return false;
38 | }
39 | }
40 | });
41 | });
42 |
43 | /* Animations on Scroll */
44 |
45 | $('.js--wp-1').waypoint(function(direction){
46 |
47 | $('.js--wp-1').addClass('animated fadeIn');
48 |
49 | },
50 | {
51 | offset:'50%;'
52 | });
53 |
54 | $('.js--wp-2').waypoint(function(direction){
55 |
56 | $('.js--wp-2').addClass('animated fadeInUp');
57 |
58 | },
59 | {
60 | offset:'50%;'
61 | });
62 |
63 | $('.js--wp-3').waypoint(function(direction){
64 |
65 | $('.js--wp-3').addClass('animated fadeIn');
66 |
67 | },
68 | {
69 | offset:'50%;'
70 | });
71 |
72 | $('.js--wp-4').waypoint(function(direction){
73 |
74 | $('.js--wp-4').addClass('animated pulse');
75 |
76 | },
77 | {
78 | offset:'50%;'
79 | });
80 |
81 |
82 |
83 | $('.js--nav-icon').click(function(){
84 |
85 | var nav = $('.js--main-nav');
86 | var icon = $('.js--nav-icon i');
87 | nav.slideToggle(200);
88 |
89 | if (icon.hasClass('ion-navicon-round')){
90 | icon.addClass('ion-close-round');
91 | icon.removeClass('ion-navicon-round');
92 | }else{
93 | icon.addClass('ion-navicon-round');
94 | icon.removeClass('ion-close-round');
95 | }
96 | });
97 | });
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/API-Projects/URLShortenerMicroservice/app.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const path = require('path');
3 | const mongodb = require('mongodb').MongoClient;
4 | const shortid = require('shortid');
5 | const dotenv = require('dotenv');
6 | const validUrl = require('valid-url');
7 |
8 | dotenv.load();
9 | shortid.characters('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$@');
10 |
11 | const url = `mongodb://${process.env.DB_USERNAME}:${process.env.DB_PASSWORD}@ds121182.mlab.com:21182/url-shortener`
12 | console.log("url", url)
13 | const app = express();
14 | let db, collection;
15 |
16 | app.use(express.static(path.join(__dirname, 'public')));
17 |
18 | app.set('views', path.join(__dirname, 'templates'));
19 | app.set('view engine', 'pug');
20 |
21 |
22 | mongodb.connect(url, (err, client) => {
23 | const errorMessage = JSON.stringify({
24 | errorCode: '500',
25 | message: "Encountered Server Error. Please refrewsh!"
26 | });
27 |
28 | if (err) {
29 | console.log('Unable to connect to the mongoDB server. Error:', err);
30 | } else {
31 | db = client.db('url-shortener');
32 | collection = db.collection('urls');
33 | app.listen(3000, () => console.log("Server is listening at http://localhost:3000"));
34 |
35 | // Root route starts
36 | app.get('/', (req, res) => {
37 | const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
38 | res.render('index', { url: fullUrl });
39 | });
40 |
41 | // Route for new url starts here
42 | app.get('/new/*', (req, res) => {
43 | if (validUrl.isUri(req.params[0])) {
44 | let docCount = shortid.generate();
45 | const hostUrl = req.protocol + '://' + req.get('host');
46 | const shortUrl = hostUrl + '/u/' + docCount;
47 |
48 | collection.insert({
49 | original_url: req.params[0],
50 | shorten_url: shortUrl
51 | }, (err, data) => {
52 | res.end(JSON.stringify({
53 | original_url: req.params[0],
54 | shorten_url: shortUrl
55 | }))
56 | });
57 | }
58 | else {
59 | res.end(JSON.stringify({
60 | error: "Wrong url format, make sure you have a valid protocol and real site."
61 | }));
62 | }
63 | });
64 |
65 | // Route to redirect starts here
66 |
67 | app.get('/u/:shorturl', (req, res) => {
68 | const hostUrl = req.protocol + '://' + req.get('host');
69 | const shortUrl = hostUrl + '/u/' + req.params.shorturl;
70 | collection.find({ shorten_url: shortUrl }).toArray((err, doc) => {
71 | console.log(doc);
72 | if (err) {
73 | res.sendStatus(500);
74 | res.end(errorMessage);
75 | }
76 | else {
77 |
78 | if (doc === undefined) {
79 | res.sendStatus(500);
80 | res.end(errorMessage);
81 | }
82 | else {
83 | res.redirect(doc[0].original_url);
84 | }
85 |
86 | }
87 | })
88 | });
89 |
90 | }
91 | });
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/local-weather/src/components/WeatherDisplay.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { getWeatherClass } from './WeatherClass'
3 |
4 | class WeatherDisplay extends Component{
5 | constructor(props){
6 | super(props)
7 |
8 | this.state ={
9 | country:''
10 | }
11 | this.changeIntoCelsius = this.changeIntoCelsius.bind(this)
12 | this.changeIntoFahrenheit = this.changeIntoFahrenheit.bind(this)
13 | }
14 |
15 | changeIntoCelsius(event){
16 | event.preventDefault()
17 | const { temperature } = this.props
18 | const temp_celsius = (temperature-273.15).toFixed(1)
19 | document.querySelector('.wi-celsius').style.opacity= "1"
20 | document.querySelector('.wi-fahrenheit').style.opacity= "0.4"
21 | document.querySelector('.temp').innerHTML = `${temp_celsius}°`
22 | }
23 |
24 | changeIntoFahrenheit(event){
25 | event.preventDefault()
26 | const { temperature } = this.props
27 | const temp_fahrenheit = ((9/5)*(temperature-273.15)+32).toFixed(1)
28 | event.preventDefault()
29 | document.querySelector('.wi-fahrenheit').style.opacity= "1"
30 | document.querySelector('.wi-celsius').style.opacity= "0.4"
31 | document.querySelector('.temp').innerHTML = `${temp_fahrenheit}°`
32 | }
33 |
34 |
35 | render(){
36 | const {id, city, country, country_name, description, temperature, humidity, speed} = this.props
37 | const temp = (temperature-273.15).toFixed(1)
38 | const months = [ "January", "February", "March", "April", "May", "June",
39 | "July", "August", "September", "October", "November", "December" ];
40 | const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
41 |
42 | return(
43 |
57 |
62 |
58 | with & by
59 | Shashank Shekhar
60 |
61 |
44 |
49 |
54 |
61 | )
62 | }
63 | }
64 |
65 | export default WeatherDisplay
--------------------------------------------------------------------------------
/Basic Front End Development Projects/TechnicalDocumentationPage/resources/img/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
49 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Portfolio/resources/js/script.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | $(window).on("scroll", function() {
3 | if($(window).scrollTop() > 50) {
4 | $("header").addClass("site-header-active");
5 | $("header").removeClass("site-header");
6 | } else {
7 | //remove the background property so it comes transparent again (defined in your css)
8 | $("header").removeClass("site-header-active");
9 | $("header").addClass("site-header");
10 | }
11 | });
12 | });
13 |
14 | $(".nav-link > a").click(function() { // when clicking any of these links
15 | $(".nav-link > a").removeClass("active"); // remove highlight from all links
16 | $(this).addClass("active"); // add highlight to clicked link
17 | })
18 |
19 | /*** Scroll to Top ***/
20 | $(window).scroll(function(){
21 | if ($(this).scrollTop() > 100) {
22 | $('#scroll').fadeIn();
23 | } else {
24 | $('#scroll').fadeOut();
25 | }
26 | });
27 | $('#scroll').click(function(){
28 | $("html, body").animate({ scrollTop: 0 }, 600);
29 | return false;
30 | });
31 |
32 | /****** Smooth Navigation Scrolls ********/
33 |
34 | $(function () {
35 | $('a[href*="#"]:not([href="#"])').click(function () {
36 | if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
37 | var target = $(this.hash);
38 | target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
39 | if (target.length) {
40 | $('html, body').animate({
41 | scrollTop: target.offset().top
42 | }, 1000);
43 | return false;
44 | }
45 | }
46 | });
47 | });
48 |
49 | /******** Copyright Year **********/
50 | let date = new Date().getFullYear();
51 | document.getElementById('currentyear').innerHTML = date;
52 |
53 |
54 |
55 | /***** Scroll Animations *******/
56 |
57 | $('.js--wp-1').waypoint(function(direction){
58 |
59 | $('.js--wp-1').addClass('animated fadeIn');
60 |
61 | },
62 | {
63 | offset:'50%;'
64 | });
65 |
66 | $('.js--wp-2').waypoint(function(direction){
67 |
68 | $('.js--wp-2').addClass('animated pulse');
69 |
70 | },
71 | {
72 | offset:'50%;'
73 | });
74 |
75 | $('.js--wp-4').waypoint(function(direction){
76 |
77 | $('.js--wp-4').addClass('animated pulse');
78 |
79 | },
80 | {
81 | offset:'50%;'
82 | });
83 |
84 | /****** Form Data collector ********/
85 |
86 | var contactform = document.getElementById('contactform');
87 | contactform.setAttribute('action', '//formspree.io/' + 'shashank7200' + '@' + 'gmail' + '.' + 'com');
88 |
89 |
90 |
91 | $("input,textarea").focus(function () {
92 | $(this).prev("label").hide();
93 | });
94 |
95 | $("input,textarea").blur(function () {
96 | if (!$(this).val() )
97 | $(this).prev("label").show();
98 |
99 | else
100 | $(this).prev("label").hide();
101 | });
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Survey Form/css/style.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
2 | * {
3 | box-sizing: border-box;
4 | }
5 |
6 | body {
7 | font-family: 'Raleway', Helvetica, sans-serif;
8 | background-color: #3498db;
9 | color: rgba(0, 0, 0, 1);
10 | }
11 |
12 | #title {
13 | font-size: 2.2em;
14 | text-align: center !important;
15 | line-height: 1.1;
16 | font-weight: 800;
17 | color: #fff;
18 | }
19 |
20 | .mt-4 {
21 | margin-top: 1.5rem !important;
22 | }
23 |
24 | .mt-5 {
25 | margin-top: 3rem !important;
26 | }
27 |
28 | .form-outer {
29 | text-align: center;
30 | padding: 10px;
31 | color: #000;
32 | width: 75%;
33 | margin: auto;
34 | background-color: rgba(255, 255, 255, 0.95);
35 | border-radius: 7px;
36 | }
37 |
38 | .rowLabel {
39 | text-align: right;
40 | display: inline-block;
41 | width: 40%;
42 | padding: 5px;
43 | vertical-align: top;
44 | }
45 |
46 | label {
47 | display: block;
48 | }
49 |
50 | .rowFormInput {
51 | display: block;
52 | position: static;
53 | text-align: center;
54 | margin-top: 20px;
55 | }
56 |
57 | .input {
58 | display: inline-block;
59 | width: 50%;
60 | vertical-align: middle;
61 | text-align: left;
62 | padding: 5px;
63 | position: static;
64 | }
65 |
66 | .dropdown {
67 | height: 35px;
68 | width: 160px;
69 | border: 2px solid #c0c0c0;
70 | border-radius: 2px;
71 | font-size: .9em;
72 | }
73 |
74 | option {
75 | font-weight: normal;
76 | display: block;
77 | white-space: pre;
78 | min-height: 1.2em;
79 | padding: 0px 2px 1px;
80 | }
81 |
82 | input {
83 | border: 1px solid #c0c0c0;
84 | border-radius: 2px;
85 | padding: 2px;
86 | font-size: 0.9em;
87 | font-family: inherit;
88 | }
89 |
90 | @media (max-width:536px) {
91 | body {
92 | font-size: 1em;
93 | }
94 | .form-outer {
95 | width: 80%;
96 | }
97 | .rowLabel {
98 | text-align: left;
99 | display: block;
100 | width: 100%;
101 | vertical-align: middle;
102 | margin-top: 10px;
103 | }
104 | .input {
105 | display: block;
106 | width: 100%;
107 | vertical-align: middle;
108 | text-align: left;
109 | margin: 0px;
110 | padding: 0px;
111 | }
112 | textarea {
113 | display: block;
114 | margin: 10px;
115 | width: 80%;
116 | margin-left: 0px;
117 | }
118 | }
119 |
120 | @media (max-width: 400px) {
121 | body {
122 | font-size: 0.9em;
123 | }
124 | .form-outer {
125 | width: 90%;
126 | }
127 | }
128 |
129 | .checklist {
130 | display: block;
131 | margin: 0px;
132 | padding: 0px;
133 | }
134 |
135 | #description {
136 | font-size: 1.1em;
137 | }
138 |
139 | .input-field {
140 | height: 50px;
141 | resize: vertical;
142 | border-radius: 2px solid #c0c0c0;
143 | }
144 |
145 | .userRatings {
146 | padding: 10px;
147 | margin: 5px;
148 | }
149 |
150 | textarea {
151 | font-family: Arial;
152 | }
153 |
154 | ::-webkit-input-placeholder {
155 | font-family: Arial;
156 | }
157 |
158 | :-moz-placeholder {
159 | font-family: Arial;
160 | }
161 |
162 | ::-moz-placeholder {
163 | font-family: Arial;
164 | }
165 |
166 | :-ms-input-placeholder {
167 | font-family: Arial;
168 | }
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/random-quote-machine/src/quotebox/QuoteBox.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import $ from 'jquery';
3 |
4 |
5 | let colors = require('../data/colors.json');
6 | let quotes = require('../data/quotes.json');
7 |
8 | class QuoteBox extends Component{
9 | constructor(props){
10 | super(props);
11 |
12 | this.state = {
13 | color : "#8a2be2",
14 | quote : "The world is the great gymnasium where we come to make ourselves strong.",
15 | author: "Swami Vivekananda"
16 | };
17 | this.changeQuote = this.changeQuote.bind(this);
18 | }
19 |
20 | changeQuote(){
21 | let colorsIndex = Math.floor( Math.random () * (92 - 1 + 1)) + 1;
22 | let quotesIndex = Math.floor( Math.random () * (85 - 1 + 1)) + 1;
23 | console.log(`Updating from changeQuote quote : ${this.state.quote} and author: ${this.state.author}`);
24 | $('.App').css("background-color",colors[colorsIndex]);
25 | $('.quote').css("color",colors[colorsIndex]);
26 | // $('.quote').html(''+quotes[quotesIndex][0]);
27 | $('.author').css("color",colors[colorsIndex]);
28 | // $('.author').html(''+quotes[quotesIndex][1]);
29 | $('.fa-twitter').css("background-color",colors[colorsIndex]);
30 | $('.nextButton').css("background-color",colors[colorsIndex]);
31 | $(".quote").animate({ opacity: 0 }, 500,function() { $(this).animate({ opacity: 1 }, 500);
32 | $('.quote').html(''+quotes[quotesIndex][0]); });
33 | $(".author").animate({ opacity: 0 }, 500,function() { $(this).animate({ opacity: 1 }, 500);
34 | $('.author').html(''+quotes[quotesIndex][1]); });
35 | $('.tweet').attr({
36 | href: 'https://twitter.com/intent/tweet?hashtags=quotes&text="' + quotes[quotesIndex][0] + '" ' + quotes[quotesIndex][1]
37 | });
38 | }
39 |
40 |
41 | render(){
42 | const submit = "New Quote";
43 | const linkStyle ={
44 | textDecoration : "none",
45 | color: "#fff",
46 | cursor: "pointer"
47 | };
48 |
49 | let tweetLink = 'https://twitter.com/intent/tweet?hashtags=quotes&text="The world is the great gymnasium where we come to make ourselves strong." Swami Vivekananda' ;
50 | console.log(`Updating from changeQuote quote : ${this.state.quote} and author: ${this.state.author}`);
51 | return(
52 |
45 | {city},
46 | {new Date().getDate()} {months[new Date().getMonth()]}
47 |
48 | {city},
{ country_name.length<=16?country_name:country }
46 | {new Date().getDate()} {months[new Date().getMonth()]}
{days[new Date().getDay()]}
47 | 49 |
50 |
53 | {temp}°
51 |
{description}
54 |
55 |
60 | {humidity}%
56 |{speed}mph
57 |58 |
59 |
53 |
69 | );
70 | }
71 | }
72 |
73 | export default QuoteBox;
74 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/twitch-client/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body{
8 | /*position: fixed;*/
9 | background: url('/img/bgimage.jpg')center no-repeat;
10 | background-attachment: fixed;
11 | background-size: cover;
12 | height: 100vh;
13 | width: 100%;
14 | overflow-y: scroll;
15 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
16 | }
17 |
18 | a{
19 | text-decoration: none;
20 | color: inherit;
21 | }
22 | #root{
23 | width: 100%;
24 | height: 100%;
25 | margin: 0;
26 | padding: 0;
27 | }
28 | .show{
29 | display: block;
30 | transition: all 0.5s ease-in-out;
31 | }
32 | .hide{
33 | transition: all 0.5s ease-in-out;
34 | display: none;
35 | }
36 |
37 | .container {
38 | width: 1140px;
39 | margin: 0 auto;
40 | margin-bottom: 70px;
41 | }
42 |
43 | /*Twitch logo at top*/
44 |
45 | .logo{
46 | height: 100px;
47 | text-align: center;
48 | margin: 20px 0;
49 | }
50 | .logo img{
51 | height: 90%;
52 | }
53 |
54 | .channel-container{
55 | width: 100%;
56 | border-radius: 5px;
57 | /*background: #f2f2f2;*/
58 | background: transparent;
59 | /*opacity: 0.9;*/
60 | }
61 |
62 | li{
63 | list-style: none;
64 | display: inline-block;
65 | margin: 10px;
66 | }
67 | .status-header {
68 | padding-top: 1rem;
69 | }
70 | .status-header li{
71 | border: 1px solid;
72 | padding: 0.5rem;
73 | background: #f2f2f2;
74 | color: #065A76;
75 | border-radius: 5px;
76 | text-transform: uppercase;
77 | cursor: crosshair;
78 | font-weight: bold;
79 | margin: 5px;
80 | outline: none;
81 | transition: all 0.7s ease-in-out;
82 | }
83 |
84 | .status-header li:hover,
85 | li.active{
86 | background: #065A76;
87 | color: #f2f2f2;
88 | }
89 |
90 | hr{
91 | width: 70%;
92 | background: #065A76;
93 | color: #065A76;
94 | margin-bottom: 3rem;
95 | }
96 |
97 | .channel-list-container{
98 | position: static;
99 | padding: 1rem;
100 | border-radius: 5px;
101 | margin: 0 auto;
102 | margin-top: 1rem;
103 | width: 80%;
104 | background: #065A76;
105 | color: #f2f2f2;
106 | }
107 |
108 | .channel-desc{
109 | display: inline-block;
110 | width: 50%;
111 | padding: 10px;
112 | }
113 | .channel-name{
114 | font-size: 1.3rem;
115 | text-transform: capitalize;
116 | }
117 | .channel-live-preiew{
118 | height: 40%;
119 | width: 40%;
120 | margin: 0 auto;
121 | border-radius: 10px;
122 | }
123 | .channel-logo{
124 | height: 30%;
125 | width: 30%;
126 | margin: 0 auto;
127 | border-radius: 50%;
128 | }
129 |
130 | .channel-status{
131 | display: inline-block;
132 | width: 50%;
133 | padding: 10px;
134 | }
135 | .channel-tv-description{
136 | font-size: 0.9rem;
137 | }
138 | .channel-tv-status{
139 | text-transform: uppercase;
140 | font-size: 1.3rem;
141 | }
142 |
143 | @media only screen and (max-width:1066px){
144 | .container {
145 | width: 96%;
146 | }
147 | .channel-name {
148 | font-size: 1rem;
149 | }
150 | .channel-tv-status {
151 | font-size: 1rem;
152 | }
153 | }
154 |
155 | @media only screen and (max-width:767px){
156 | .container {
157 | width: 98%;
158 | }
159 | .logo img {
160 | height: 70%;
161 | }
162 | .logo{
163 | margin-bottom: -10px;
164 | }
165 | .status-header {
166 | padding-top: 0.5rem;
167 | }
168 | .status-header ul{
169 | padding-left: 0;
170 |
171 | }
172 | .channel-list-container {
173 | width: 98%;
174 | }
175 | hr {
176 | width: 90%;
177 | }
178 | }
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Zephyr Edited/resources/js/script.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |
3 | /* For the Sticky navigation */
4 |
5 | $('.js--section-features').waypoint(function(direction){
6 |
7 | if (direction === 'down'){
8 | $('nav').addClass('sticky');
9 | }else{
10 | $('nav').removeClass('sticky');
11 | }
12 |
13 | },{offset: '60px;'
14 | });
15 |
16 | /* Scroll on Buttons */
17 | $('.js--scroll-to-plans').click(function(){
18 | $('html, body').animate({scrollTop: $('.js--section-plans').offset().top}, 1000);
19 | });
20 |
21 | $('.js--scroll-to-start').click(function(){
22 | $('html, body').animate({scrollTop: $('.js--section-features').offset().top}, 1000);
23 | });
24 |
25 |
26 | /* Scroll for Navigation Links */
27 |
28 | $(function() {
29 | $('a[href*="#"]:not([href="#"])').click(function() {
30 | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
31 | var target = $(this.hash);
32 | target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
33 | if (target.length) {
34 | $('html, body').animate({
35 | scrollTop: target.offset().top
36 | }, 1000);
37 | return false;
38 | }
39 | }
40 | });
41 | });
42 |
43 | /* Animations on Scroll */
44 |
45 | $('.js--wp-1').waypoint(function(direction){
46 |
47 | $('.js--wp-1').addClass('animated fadeIn');
48 |
49 | },
50 | {
51 | offset:'50%;'
52 | });
53 |
54 | $('.js--wp-2').waypoint(function(direction){
55 |
56 | $('.js--wp-2').addClass('animated fadeInUp');
57 |
58 | },
59 | {
60 | offset:'50%;'
61 | });
62 |
63 | $('.js--wp-3').waypoint(function(direction){
64 |
65 | $('.js--wp-3').addClass('animated fadeIn');
66 |
67 | },
68 | {
69 | offset:'50%;'
70 | });
71 |
72 | $('.js--wp-4').waypoint(function(direction){
73 |
74 | $('.js--wp-4').addClass('animated pulse');
75 |
76 | },
77 | {
78 | offset:'50%;'
79 | });
80 |
81 |
82 |
83 | $('.js--nav-icon').click(function(){
84 |
85 | var nav = $('.js--main-nav');
86 | var icon = $('.js--nav-icon i');
87 | nav.slideToggle(200);
88 |
89 | if (icon.hasClass('ion-navicon-round')){
90 | icon.addClass('ion-close-round');
91 | icon.removeClass('ion-navicon-round');
92 | }else{
93 | icon.addClass('ion-navicon-round');
94 | icon.removeClass('ion-close-round');
95 | }
96 | });
97 |
98 |
99 | /* Youtube video Resizing */
100 |
101 | sizeTheVideo();
102 | $(window).resize(function(){
103 | sizeTheVideo();
104 | });
105 |
106 | function sizeTheVideo(){
107 | // - 1.78 is the aspect ratio of the video
108 | // - This will work if your video is 1920 x 1080
109 | // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78
110 | var aspectRatio = 1.78;
111 |
112 | var video = $('#videoWithJs iframe');
113 | var videoHeight = video.outerHeight();
114 | var newWidth = videoHeight*aspectRatio;
115 | var halfNewWidth = newWidth/2;
116 |
117 | //Define the new width and centrally align the iframe
118 | video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});
119 | }
120 |
121 | });
122 |
123 |
124 |
125 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Zephyr Landing Page/resources/css/queries.css:
--------------------------------------------------------------------------------
1 | /* Big tablets from Screen 1024px to 1200px (Width smaller than 1140px row)*/
2 | @media only screen and (max-width : 1200px){
3 |
4 | .hero-text-box {
5 | width: 100%;
6 | padding: 0 2%;
7 | }
8 |
9 | .row{ padding: 0 2%;}
10 |
11 | }
12 | /* Medium Phones & tablets from Screen 768px to 1023px*/
13 | @media only screen and (max-width : 1023px){
14 |
15 | body {font-size: 18px; }
16 | section { padding: 60px 0;}
17 |
18 | .long-copy{
19 | width: 80%;
20 | margin-left: 10%;
21 | margin-right: 10%;
22 | }
23 |
24 | .steps-box {
25 | margin-top: 10px;
26 | }
27 | .steps-box:last-child{
28 | margin-top: 10px;
29 | }
30 |
31 | .works-step{
32 | margin-top: 40px;
33 | font-size: 86%;
34 | }
35 | .works-step:last-of-type{ margin-bottom: 60px; }
36 | .btn-app{
37 | font-size: 86%;
38 | height: 40px;
39 | padding: 10px;
40 | }
41 | .btn-app i{ font-size: 160%; }
42 | .app-screen{
43 | width: 50%;
44 | }
45 | .icon-small{
46 | width: 20px;
47 | }
48 | .city-feature{ font-size: 90%; }
49 | .plan-box{
50 | width: 100%;
51 | margin-left: 0;
52 | }
53 |
54 | .plan-price{
55 | font-size: 250%;
56 | }
57 | .plan-box ul li{
58 | font-size: 90%;
59 | }
60 |
61 | .contact-form{
62 | width: 80%;
63 | }
64 | }
65 |
66 | /* Small Phones & Tablets from Screen 481px to 767px*/
67 | @media only screen and (max-width : 767px){
68 |
69 | body{ font-size: 16px; }
70 | section{ padding: 30px 0; }
71 | .row,
72 | .hero-text-box{
73 | padding: 0 4%;
74 | }
75 | .col {
76 | width: 100%;
77 | margin: 0 0 4% 0;
78 | }
79 |
80 | #main-nav{
81 | display: none;
82 | }
83 |
84 | #logo-text{
85 | display: none;
86 | }
87 |
88 | #main-nav{
89 | float: left;
90 | margin-top: 25px;
91 | margin-left: 25px;
92 | }
93 |
94 | #main-nav li{
95 | display: block;
96 | }
97 | #main-nav li a:link,
98 | #main-nav li a:visited{
99 | display: block;
100 | border: 0;
101 | padding: 5px 0;
102 | font-size: 100%;
103 | }
104 |
105 | .mobile-nav-icon{
106 | display: inline-block;
107 | }
108 |
109 | .sticky #main-nav {
110 | margin-top: 5px;
111 | }
112 |
113 | .sticky #main-nav a:link,
114 | .sticky #main-nav a:visited{
115 | padding: 10px 0;
116 | }
117 |
118 | .sticky .mobile-nav-icon{ margin-top: 13px; }
119 | .sticky .mobile-nav-icon i{ color: #555; }
120 |
121 |
122 | .long-copy{
123 | width: 100%;
124 | margin-left: 0;
125 | }
126 |
127 | h1{ font-size: 180%;}
128 | h2{ font-size: 150%;}
129 |
130 | .works-step{
131 | margin-bottom: 20px;
132 | font-size: 86%;
133 | }
134 | .works-step:last-of-type{ margin-bottom: 20px; }
135 | .works-step div{
136 | height: 40px;
137 | width: 40px;
138 | margin-right: 15px;
139 | padding: 4px;
140 | font-size: 120%;
141 | }
142 |
143 | .steps-box:first-child{
144 | text-align: center;
145 | }
146 |
147 | .app-screen{
148 | width: 40%;
149 | }
150 | .plan-box ul li{
151 | font-size: 100%;
152 | }
153 |
154 | }
155 |
156 |
157 | /* Small Phones from Screen 0px to 480px*/
158 | @media only screen and (max-width : 480px){
159 |
160 | section{
161 | padding: 25px 0;
162 | }
163 |
164 | .contact-form{
165 | width: 100%;
166 | }
167 |
168 | }
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Zephyr Edited/resources/css/queries.css:
--------------------------------------------------------------------------------
1 | /* Big tablets from Screen 1024px to 1200px (Width smaller than 1140px row)*/
2 | @media only screen and (max-width : 1200px){
3 |
4 | .hero-text-box {
5 | width: 100%;
6 | padding: 0 2%;
7 | }
8 |
9 | .row{ padding: 0 2%;}
10 |
11 |
12 | .video-embed iframe{
13 | width: 60%;
14 | height: 68vh;
15 | }
16 |
17 |
18 | }
19 | /* Medium Phones & tablets from Screen 768px to 1023px*/
20 | @media only screen and (max-width : 1023px){
21 |
22 | body {font-size: 18px; }
23 | section { padding: 60px 0;}
24 |
25 |
26 | .video-embed iframe{
27 | width: 100%;
28 | height: 75vh;
29 | }
30 |
31 | .long-copy{
32 | width: 80%;
33 | margin-left: 10%;
34 | margin-right: 10%;
35 | }
36 |
37 | .steps-box {
38 | margin-top: 10px;
39 | }
40 | .steps-box:last-child{
41 | margin-top: 10px;
42 | }
43 |
44 | .works-step{
45 | margin-top: 40px;
46 | font-size: 86%;
47 | }
48 | .works-step:last-of-type{ margin-bottom: 60px; }
49 | .btn-app{
50 | font-size: 86%;
51 | height: 40px;
52 | padding: 10px;
53 | }
54 | .btn-app i{ font-size: 160%; }
55 | .app-screen{
56 | width: 50%;
57 | }
58 | .icon-small{
59 | width: 20px;
60 | }
61 | .city-feature{ font-size: 90%; }
62 | .plan-box{
63 | width: 100%;
64 | margin-left: 0;
65 | }
66 |
67 | .plan-price{
68 | font-size: 250%;
69 | }
70 | .plan-box ul li{
71 | font-size: 90%;
72 | }
73 |
74 | .contact-form{
75 | width: 80%;
76 | }
77 | }
78 |
79 | /* Small Phones & Tablets from Screen 481px to 767px*/
80 | @media only screen and (max-width : 767px){
81 |
82 | body{ font-size: 16px; }
83 | section{ padding: 30px 0; }
84 |
85 | .video-embed iframe{
86 | width: 100%;
87 | height: 50vh;
88 | }
89 |
90 | .row,
91 | .hero-text-box{
92 | padding: 0 4%;
93 | }
94 | .col {
95 | width: 100%;
96 | margin: 0 0 4% 0;
97 | }
98 |
99 | #main-nav{
100 | display: none;
101 | }
102 |
103 | #logo-text{
104 | display: none;
105 | }
106 |
107 | #main-nav{
108 | float: left;
109 | margin-top: 25px;
110 | margin-left: 25px;
111 | }
112 |
113 | #main-nav li{
114 | display: block;
115 | }
116 | #main-nav li a:link,
117 | #main-nav li a:visited{
118 | display: block;
119 | border: 0;
120 | padding: 5px 0;
121 | font-size: 100%;
122 | }
123 |
124 | .mobile-nav-icon{
125 | display: inline-block;
126 | }
127 |
128 | .sticky #main-nav {
129 | margin-top: 5px;
130 | }
131 |
132 | .sticky #main-nav a:link,
133 | .sticky #main-nav a:visited{
134 | padding: 10px 0;
135 | }
136 |
137 | .sticky .mobile-nav-icon{ margin-top: 13px; }
138 | .sticky .mobile-nav-icon i{ color: #555; }
139 |
140 |
141 | .long-copy{
142 | width: 100%;
143 | margin-left: 0;
144 | }
145 |
146 | h1{ font-size: 180%;}
147 | h2{ font-size: 150%;}
148 |
149 | .works-step{
150 | margin-bottom: 20px;
151 | font-size: 86%;
152 | }
153 | .works-step:last-of-type{ margin-bottom: 20px; }
154 | .works-step div{
155 | height: 40px;
156 | width: 40px;
157 | margin-right: 15px;
158 | padding: 4px;
159 | font-size: 120%;
160 | }
161 |
162 | .steps-box:first-child{
163 | text-align: center;
164 | }
165 |
166 | .app-screen{
167 | width: 40%;
168 | }
169 | .plan-box ul li{
170 | font-size: 100%;
171 | }
172 |
173 | }
174 |
175 |
176 | /* Small Phones from Screen 0px to 480px*/
177 | @media only screen and (max-width : 480px){
178 |
179 | .video-embed iframe{
180 | width: 100%;
181 | height: 40vh;
182 | }
183 |
184 |
185 | section{
186 | padding: 25px 0;
187 | }
188 |
189 | .contact-form{
190 | width: 100%;
191 | }
192 |
193 | }
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/wikipedia-viewer/src/components/SearchBar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { getArticles } from './searchapi'
3 |
4 |
5 | class Searchbar extends Component{
6 | constructor(props){
7 | super(props)
8 | this.state ={
9 | container: 'container',
10 | front : 'front',
11 | frontdescription: 'front-description',
12 | logoFront: 'logo-front',
13 | wiki_description: 'wiki_description',
14 | formfront: 'form-front',
15 | inputfront : 'input-front',
16 | random : 'random',
17 | randomtext: 'Random',
18 | farandom: 'fa fa-random fa-display',
19 | inputvalue:'',
20 | eks: 'eks',
21 | articles:[]
22 | }
23 | this.activeSearchBar = this.activeSearchBar.bind(this)
24 | this.handleInput = this.handleInput.bind(this)
25 | this.resetInputValue = this.resetInputValue.bind(this)
26 | }
27 |
28 | activeSearchBar(){
29 | this.setState({
30 | container: 'back-container',
31 | wiki_description:'front-desc',
32 | formfront: 'form-back',
33 | front: 'back',
34 | frontdescription: 'back-description',
35 | logoFront: 'brand-logo',
36 | inputfront: 'input-back',
37 | random: 'random-back',
38 | randomtext: '',
39 | farandom: 'fa fa-random',
40 | eks: 'fa fa-times'
41 | })
42 | }
43 |
44 | handleInput(event){
45 | event.preventDefault()
46 | const {value} = event.target
47 | this.setState({inputvalue: value})
48 |
49 | getArticles(value).then((results) => {
50 | let localarticles = []
51 | Object.keys(results).map(function(e) {
52 | localarticles.push(results[e])
53 | })
54 | this.setState({ articles: localarticles})
55 | })
56 | }
57 | resetInputValue(){
58 | event.preventDefault()
59 | this.setState({
60 | container: 'container',
61 | front : 'front',
62 | frontdescription: 'front-description',
63 | logoFront: 'logo-front',
64 | wiki_description: 'wiki_description',
65 | formfront: 'form-front',
66 | inputfront : 'input-front',
67 | random : 'random',
68 | randomtext: 'Random',
69 | farandom: 'fa fa-random fa-display',
70 | inputvalue:'',
71 | eks:'eks',
72 | articles:[]
73 | })
74 | }
75 |
76 | render(){
77 |
78 | const{ articles } = this.state
79 |
80 | return(
81 |
54 |
67 |
68 | {this.state.quote}55 |
{this.state.author}
56 |
57 |
58 |
59 |
60 |
65 |
66 |
61 | with & by
62 | Shashank Shekhar
63 |
64 |
82 |
117 | );
118 | }
119 | }
120 |
121 | export default Searchbar;
--------------------------------------------------------------------------------
/Advanced Front End Development Projects/javascript-calculator/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 | } else {
39 | // Is not local host. Just register service worker
40 | registerValidSW(swUrl);
41 | }
42 | });
43 | }
44 | }
45 |
46 | function registerValidSW(swUrl) {
47 | navigator.serviceWorker
48 | .register(swUrl)
49 | .then(registration => {
50 | registration.onupdatefound = () => {
51 | const installingWorker = registration.installing;
52 | installingWorker.onstatechange = () => {
53 | if (installingWorker.state === 'installed') {
54 | if (navigator.serviceWorker.controller) {
55 | // At this point, the old content will have been purged and
56 | // the fresh content will have been added to the cache.
57 | // It's the perfect time to display a "New content is
58 | // available; please refresh." message in your web app.
59 | console.log('New content is available; please refresh.');
60 | } else {
61 | // At this point, everything has been precached.
62 | // It's the perfect time to display a
63 | // "Content is cached for offline use." message.
64 | console.log('Content is cached for offline use.');
65 | }
66 | }
67 | };
68 | };
69 | })
70 | .catch(error => {
71 | console.error('Error during service worker registration:', error);
72 | });
73 | }
74 |
75 | function checkValidServiceWorker(swUrl) {
76 | // Check if the service worker can be found. If it can't reload the page.
77 | fetch(swUrl)
78 | .then(response => {
79 | // Ensure service worker exists, and that we really are getting a JS file.
80 | if (
81 | response.status === 404 ||
82 | response.headers.get('content-type').indexOf('javascript') === -1
83 | ) {
84 | // No service worker found. Probably a different app. Reload the page.
85 | navigator.serviceWorker.ready.then(registration => {
86 | registration.unregister().then(() => {
87 | window.location.reload();
88 | });
89 | });
90 | } else {
91 | // Service worker found. Proceed as normal.
92 | registerValidSW(swUrl);
93 | }
94 | })
95 | .catch(() => {
96 | console.log(
97 | 'No internet connection found. App is running in offline mode.'
98 | );
99 | });
100 | }
101 |
102 | export function unregister() {
103 | if ('serviceWorker' in navigator) {
104 | navigator.serviceWorker.ready.then(registration => {
105 | registration.unregister();
106 | });
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Tribute To Swami Vivekanand/css/bootstrap-reboot.min.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}html{-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#292b2c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{cursor:help}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}a{color:#0275d8;text-decoration:none}a:focus,a:hover{color:#014c8c;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse;background-color:transparent}caption{padding-top:.75rem;padding-bottom:.75rem;color:#636c72;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{line-height:inherit}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}input[type=search]{-webkit-appearance:none}output{display:inline-block}[hidden]{display:none!important}/*# sourceMappingURL=bootstrap-reboot.min.css.map */
--------------------------------------------------------------------------------
/Basic Front End Development Projects/Portfolio/vendors/css/reset.css:
--------------------------------------------------------------------------------
1 | /* General
2 | ---------------------------------------- */
3 | html, body, div, span, applet, object, iframe,
4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5 | a, abbr, acronym, address, big, cite, code,
6 | del, dfn, em, font, img, ins, kbd, q, s, samp,
7 | small, strike, strong, sub, sup, tt, var,
8 | b, u, i, center,
9 | dl, dt, dd, ol, ul, li,
10 | fieldset, form, label, legend,
11 | table, caption, tbody, tfoot, thead, tr, th, td {
12 | margin: 0;
13 | padding: 0;
14 | }
15 |
16 | p, blockquote, q, pre, address, hr, code, samp,
17 | dl, ol, ul, form, table, fieldset, menu {
18 | margin-bottom: 1.5em;
19 | }
20 |
21 | /* Structure
22 | ---------------------------------------- */
23 | html {
24 | font-size: 100%;
25 | }
26 |
27 | /*
28 | body {
29 | font-family: arial, helvetica, sans-serif;
30 | font-size: .875em;
31 |
32 | }
33 | */
34 |
35 |
36 | /* Text
37 | ---------------------------------------- */
38 | h1, h2, h3, h4, h5, h6 {
39 | font-weight: bold;
40 | }
41 |
42 | h1 {
43 | font-size: 3em;
44 | line-height: 1.1;
45 | margin-bottom: .238em;
46 | }
47 |
48 | h2 {
49 | font-size: 2em;
50 | line-height: 1.15;
51 | margin-bottom: .357em;
52 | }
53 |
54 | h3 {
55 | font-size: 1.5em;
56 | line-height: 1.2;
57 | margin-bottom: .476em;
58 | }
59 |
60 | h4, h5, h6 {
61 | margin-bottom: .571em;
62 | }
63 |
64 | h4 {
65 | font-size: 1.25em;
66 | line-height: 1.25;
67 | }
68 |
69 | h5 {
70 | font-size: 1em;
71 | }
72 |
73 | h6 {
74 | font-size: 1em;
75 | }
76 |
77 | em, i {
78 | font-style: italic;
79 | }
80 |
81 | strong, b {
82 | font-weight: bold;
83 | }
84 |
85 | blockquote, q, cite {
86 | font-style: italic;
87 | }
88 |
89 | blockquote, q {
90 | quotes: none;
91 | }
92 |
93 | blockquote:before, blockquote:after,
94 | q:before, q:after {
95 | content: "";
96 | content: none;
97 | }
98 |
99 | code, kbd, pre, samp, tt {
100 | font-family: "andale mono", consolas, monaco, "lucida console", "courier new", courier, monospace;
101 | line-height: 1.3;
102 | }
103 |
104 | pre {
105 | /* word-wrap: break-word; */
106 | white-space: pre-wrap;
107 | }
108 |
109 | abbr, acronym, dfn {
110 | border-bottom: 1px dotted;
111 | cursor: help;
112 | font-variant: normal;
113 | font-style: normal;
114 | }
115 |
116 | var {
117 | font-style: normal;
118 | }
119 |
120 | center {
121 | text-align: center;
122 | }
123 |
124 | /* Hypertext
125 | ---------------------------------------- */
126 | /*
127 | a:link {
128 | }
129 |
130 | a:visited {
131 | }
132 |
133 | a:hover {
134 | }
135 |
136 | a:active {
137 | }
138 |
139 |
140 | a:focus {
141 | outline: 1px dotted;
142 | }
143 | */
144 | /* Image
145 | ---------------------------------------- */
146 | img {
147 | border: 0;
148 | }
149 |
150 | /* List
151 | ---------------------------------------- */
152 |
153 | ul {
154 | list-style: disc outside none;
155 | }
156 |
157 | ol {
158 | list-style: decimal outside none;
159 | }
160 |
161 | li {
162 | margin-left: 2em;
163 | }
164 |
165 | li ul, li ol {
166 | margin-bottom: 0;
167 | }
168 |
169 | dt {
170 | font-weight: bold;
171 | }
172 |
173 | dd {
174 | margin-bottom: 1em;
175 | }
176 |
177 | /* Presentation
178 | ---------------------------------------- */
179 | hr {
180 | border: 0;
181 | border-bottom: 1px solid;
182 | }
183 |
184 | big {
185 | font-size: 1.25em;
186 | }
187 |
188 | small, sub, sup {
189 | font-size: .85em;
190 | }
191 |
192 | sub, sup {
193 | line-height: 1;
194 | }
195 |
196 | sub {
197 | vertical-align: bottom;
198 | }
199 |
200 | sup {
201 | vertical-align: top;
202 | }
203 |
204 | del, s, strike {
205 | text-decoration: line-through;
206 | }
207 |
208 | ins {
209 | text-decoration: none;
210 | border-bottom: 1px dotted;
211 | }
212 |
213 | bdo {
214 | border-bottom: 1px dotted;
215 | }
216 |
217 | u {
218 | text-decoration: underline;
219 | }
220 |
221 | /* Form
222 | ---------------------------------------- */
223 | fieldset {
224 | padding: 1em;
225 | }
226 |
227 | legend {
228 | font-weight: bold;
229 | padding: 0 .25em;
230 | }
231 |
232 | input, textarea, select, button {
233 | font-family: inherit;
234 | font-size: 1em;
235 | }
236 |
237 | input[type=button], input[type=file], input[type=image], input[type=reset], input[type=submit],
238 | button[type=button], button[type=reset], button[type=submit] {
239 | cursor: pointer;
240 | line-height: 1;
241 | }
242 | /*
243 | input[type=text], input[type=password], textarea {
244 | padding: 1px;
245 | }
246 | */
247 | textarea {
248 | text-align: left;
249 | line-height: 1.25;
250 | }
251 |
252 | /* Table
253 | ---------------------------------------- */
254 | table {
255 | border-collapse: collapse;
256 | border-spacing: 0;
257 | border: 0;
258 | line-height: 1.3;
259 | }
260 |
261 | caption, th, td {
262 | text-align: left;
263 | vertical-align: top;
264 | }
265 |
266 | th, td {
267 | padding: .5em 1em;
268 | border: 1px solid;
269 | }
270 |
271 | caption {
272 | padding-bottom: 1em;
273 | }
274 |
275 | th {
276 | font-weight: bold;
277 | }
278 |
279 | /* Classes
280 | ---------------------------------------- */
281 |
282 | ul.nolist, ul.nolist li {
283 | display:block;
284 | list-style:none;
285 | padding:0;
286 | margin:0;
287 | }
288 |
289 | .clear {
290 | clear:both;
291 | }
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/local-weather/src/App.css:
--------------------------------------------------------------------------------
1 | /*Base Styling*/
2 | body {
3 | width: 100%;
4 | height:100%;
5 | position: absolute;
6 | overflow: auto;
7 | overflow-x: hidden;
8 | overflow-y: scroll;
9 | }
10 | /*App Styling*/
11 | .App{
12 | min-height: 100vh;
13 | width: 100%;
14 | background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('img/bg-image.jpg');
15 | background-size: cover;
16 | background-position: center center;
17 | color: #fff;
18 | font-family: 'Roboto Mono', monospace;
19 | overflow: auto;
20 | }
21 |
22 | .body{
23 | transition: all 1s ease-in-out;
24 | }
25 |
26 | /*Weather Display Box Styling*/
27 | .weather-box{
28 | position: fixed;
29 | top: 50%;
30 | left: 50%;
31 | -webkit-transform: translate(-50%, -50%);
32 | -moz-transform: translate(-50%, -50%);
33 | -ms-transform: translate(-50%, -50%);
34 | -o-transform: translate(-50%, -50%);
35 | transform: translate(-50%, -50%);
36 | min-width: 440px;
37 | background-color: transparent;
38 | padding: 15px;
39 | border: 2px solid rgba(255, 255, 255, 0.3);
40 | color: #fff;
41 | box-shadow: inset 0px 0px 40px rgba(255, 255, 255, 0.3);
42 | }
43 |
44 | .inner-box{
45 | position: static;
46 | width: 100%;
47 | }
48 |
49 | .user-location{
50 | width: 100%;
51 | height: 100px;
52 | }
53 |
54 | .place,.date{
55 | display: inline-block;
56 | text-transform: uppercase;
57 | }
58 | .place{
59 | float: left;
60 | font-size: 25px;
61 | margin-left: 15px;
62 | }
63 | .date{
64 | float: right;
65 | margin-right: 15px;
66 | }
67 | hr{
68 | background: #fff;
69 | opacity: 0.3;
70 | }
71 | p.temp{
72 | font-size: 100px;
73 | margin: 0;
74 | padding: 0;
75 | font-weight: 700;
76 | margin-left: 30px;
77 | margin-right: 30px;
78 | display: inline-block;
79 | }
80 | p.weather-condition{
81 | display: inline-block;
82 | font-size: 50px;
83 | }
84 | .weather-condition i{
85 | right: -20px;
86 | position: relative;
87 | }
88 | #weather-img{
89 | display: inline-block;
90 | z-index: 22;
91 | }
92 | .wi{
93 | font-size: 80px;
94 | }
95 |
96 | /*After Second Horizontal Bar*/
97 |
98 | .humidity,
99 | .wind_speed,
100 | .change_metric{
101 | display: inline-block;
102 | font-size: 25px;
103 | }
104 | .humidity span,
105 | .wind_speed span,
106 | .change_metric span{
107 | bottom: 10px;
108 | position: relative;
109 | }
110 |
111 | .humidity{
112 | float: left;
113 | }
114 | .change_metric{
115 | float: right;
116 | }
117 | .wind_speed{
118 | margin-left: 18%;
119 | }
120 | .wi-humidity,
121 | .wi-wind-direction,
122 | .wi-celsius,
123 | .wi-fahrenheit{
124 | font-size: 60px;
125 | }
126 | .wi-celsius,
127 | .wi-fahrenheit{
128 | cursor: pointer;
129 | font-weight: normal;
130 | }
131 | p.change_metric{
132 | font-weight: bold;
133 | }
134 |
135 | /*Footer Styles*/
136 |
137 | .copy{
138 | width: 100%;
139 | color: #fff;
140 | position: absolute;
141 | bottom: 10px;
142 | font-size: 1em;
143 | text-align: center;
144 | margin: 0 auto;
145 | }
146 | .footer{
147 | width: 40%;
148 | background: rgba(255, 255, 255, 0.1);
149 | margin: 0 auto;
150 | }
151 | .fa-heart{
152 | color: #e31b23;
153 | }
154 |
155 | /*Media Queries*/
156 |
157 | @media only screen and (max-width: 1166px){
158 | .weather-box{
159 | height: 375px;
160 | }
161 | .user-location{
162 | height: 95px;
163 | }
164 | h2.place{
165 | font-size: 20px;
166 | }
167 | h3.date{
168 | font-size: 16px;
169 | }
170 | p.temp{
171 | font-size: 60px;
172 | margin-left: 20px;
173 | margin-right: 50px;
174 | }
175 | p.weather-condition{
176 | font-size: 25px;
177 | right: -10px;
178 | position: relative
179 | }
180 | .wi{
181 | font-size: 40px;
182 | }
183 | .weather-condition .wi {
184 | font-size: 60px;
185 | }
186 | .weather-condition span{
187 | position: relative;
188 | right: -20px;
189 | }
190 | .footer{
191 | margin: 0 auto;
192 | width: 100%;
193 | background: none;
194 | }
195 | }
196 |
197 | @media only screen and (max-width: 532px){
198 | .weather-box{
199 | height: 300px;
200 | min-width: 300px;
201 | }
202 | .user-location{
203 | height: 60px;
204 | }
205 | h2.place{
206 | font-size: 15px;
207 | }
208 | h3.date{
209 | font-size: 13px;
210 | }
211 | p.temp{
212 | font-size: 40px;
213 | position: relative;
214 | bottom: 30px;
215 | }
216 | p.weather-condition{
217 | font-size: 20px;
218 | }
219 | .wi{
220 | font-size: 25px;
221 | }
222 | .weather-condition .wi {
223 | font-size: 60px;
224 | }
225 | .humidity span, .wind_speed span, .change_metric span{
226 | font-size: 15px;
227 | bottom: 0;
228 | }
229 | .footer{
230 | margin: 0 auto;
231 | width: 100%;
232 | background: none;
233 | }
234 | .wi-celsius{
235 | margin-left: 10px;
236 | margin-right: -10px;
237 | }
238 | .wi-fahrenheit{
239 | margin-left: -10px;
240 | margin-right: 10px;
241 | }
242 | .wi-celsius,.wi-fahrenheit{
243 | font-size: 30px;
244 | }
245 | }
246 |
--------------------------------------------------------------------------------
/Basic Front End Development Projects/TechnicalDocumentationPage/resources/css/style.css:
--------------------------------------------------------------------------------
1 | /* Color: #4d4e53 */
2 |
3 | @import url('https://fonts.googleapis.com/css?family=Noto+Sans');
4 | @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700');
5 | @import url('https://fonts.googleapis.com/css?family=Lato:100i,300i,400i,700i');
6 | @import url('https://fonts.googleapis.com/css?family=Montserrat:500,600,700');
7 | @import url('https://fonts.googleapis.com/css?family=Oxygen:300,400');
8 |
9 | /*******************/
10 |
11 |
12 | /* BASE CONTENT */
13 |
14 |
15 | /*******************/
16 |
17 | * {
18 | box-sizing: border-box;
19 | }
20 |
21 | html,
22 | body {
23 | font-family: 'Oxygen', 'Lato', Segoe UI, 'Arial', sans-serif;
24 | background-color: #f6f6f6;
25 | height: 100%;
26 | line-height: 1.5;
27 | min-width: 290px;
28 | text-rendering: optimizeLegibility;
29 | }
30 |
31 | .clearfix {
32 | zoom: 1
33 | }
34 |
35 | .clearfix:after {
36 | content: '.';
37 | display: block;
38 | clear: both;
39 | height: 0;
40 | visibility: hidden;
41 | }
42 |
43 |
44 | /*******************/
45 |
46 |
47 | /*REUSABLE CONTENT */
48 |
49 |
50 | /*******************/
51 |
52 | header {
53 | font-size: 1.8em;
54 | margin: 10x;
55 | text-align: center;
56 | }
57 |
58 | #main-doc header {
59 | text-align: left;
60 | margin: 0px;
61 | color: #000;
62 | }
63 |
64 | ul,
65 | menu,
66 | dir {
67 | display: block;
68 | list-style-type: disc;
69 | }
70 |
71 |
72 | /*******************/
73 |
74 |
75 | /* SIDEBAR */
76 |
77 |
78 | /*******************/
79 |
80 | #navbar {
81 | background-color: #fff;
82 | min-width: 290px;
83 | width: 320px;
84 | min-width: 290px;
85 | height: 100%;
86 | top: 0px;
87 | height: 100%;
88 | left: 0px;
89 | border-right: 2px solid rgba(116, 117, 121, 0.55);
90 | position: fixed;
91 | line-height: 1.5;
92 | }
93 |
94 | #navbar a {
95 | text-decoration: none;
96 | cursor: pointer;
97 | width: 100%;
98 | }
99 |
100 | #navbar ul {
101 | left: 0px;
102 | list-style: none;
103 | width: 100%;
104 | overflow-y: auto;
105 | height: 88%;
106 | margin: 0px;
107 | padding: 0px;
108 | overflow-x: hidden;
109 | font-weight: 300;
110 | }
111 |
112 | #navbar li {
113 | display: list-item;
114 | border: 1px solid rgba(0, 0, 0, 0.57);
115 | border-bottom-width: 0px;
116 | border-right:1px solid #fff;
117 | padding: 8px;
118 | padding-left: 30px;
119 | left: 0px;
120 | font-size: 1.2em;
121 | list-style: none;
122 | position: relative;
123 | width: 100%;
124 | line-height: 1.5;
125 | text-indent: 1.8;
126 | color: #4d4e53;
127 | letter-spacing: 1px;
128 | }
129 |
130 | #navbar header {
131 | margin: 10px;
132 | padding: 5px;
133 | width: 100%;
134 | text-align: center;
135 | top: 0px;
136 | left: 0px;
137 | font-size: 1.8em;
138 | }
139 |
140 |
141 | /*******************/
142 |
143 |
144 | /* Main Doc Screen */
145 |
146 |
147 | /*******************/
148 |
149 | section {
150 | margin-bottom: 40px;
151 | }
152 |
153 | #main-doc {
154 | background-color: #fff;
155 | padding: 20px;
156 | margin-left: 320px;
157 | height: auto;
158 | position: absolute;
159 | letter-spacing: 1px;
160 | color: #4d4e53;
161 | margin-bottom: 30px;
162 | }
163 |
164 | section article {
165 | margin: 15px;
166 | font-size: 0.96em;
167 | }
168 |
169 | section li {
170 | margin: 15px 0px 0px 20px;
171 | }
172 |
173 | code {
174 | color: #000;
175 | display: block;
176 | text-align: left;
177 | word-break: normal;
178 | white-space: pre-wrap;
179 | word-wrap: normal;
180 | line-height: 2;
181 | background-color: #f3f3f7;
182 | padding: 10px;
183 | margin: 10px;
184 | border-radius: 5px;
185 | }
186 |
187 | #demo {
188 | width: 100%;
189 | height: auto;
190 | }
191 |
192 | a:link,
193 | a:visited,
194 | a:hover,
195 | a:active {
196 | text-decoration: none;
197 | color: #076dd0;
198 | }
199 |
200 | table {
201 | border-collapse: collapse;
202 | display: table;
203 | border: 2px solid #fff;
204 | margin-bottom: 24px;
205 | color: #3b3c40;
206 | font-size: 14px;
207 | }
208 |
209 | tr {
210 | display: table-row;
211 | vertical-align: middle;
212 | }
213 |
214 | th {
215 | border: 2px solid #fff;
216 | border-bottom: 2px solid #d4dde4;
217 | background: #eaeef2;
218 | background: rgba(212, 221, 228, .5);
219 | padding: 2px 8px 4px;
220 | font-size: 14px;
221 | display: table-cell;
222 | }
223 |
224 | td {
225 | border: 2px solid #fff;
226 | box-shadow: inset 0 -1px 0 0 rgba(212, 221, 228, .5);
227 | background-color: rgba(212, 221, 228, .25);
228 | padding: 6px 8px;
229 | text-align: left;
230 | }
231 |
232 | /* BACK TO TOP BUTTON*/
233 |
234 | #scroll {
235 | position:fixed;
236 | right:10px;
237 | bottom:10px;
238 | cursor:pointer;
239 | width:50px;
240 | height:50px;
241 | background-color:#3498db;
242 | text-indent:-9999px;
243 | display:none;
244 | -webkit-border-radius:60px;
245 | -moz-border-radius:60px;
246 | border-radius:60px
247 | }
248 | #scroll span {
249 | position:absolute;
250 | top:50%;
251 | left:50%;
252 | margin-left:-8px;
253 | margin-top:-12px;
254 | height:0;
255 | width:0;
256 | border:8px solid transparent;
257 | border-bottom-color:#ffffff;
258 | }
259 | #scroll:hover {
260 | background-color:#e74c3c;
261 | opacity:1;filter:"alpha(opacity=100)";
262 | -ms-filter:"alpha(opacity=100)";
263 | }
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/twitch-client/src/helpers/Home.js:
--------------------------------------------------------------------------------
1 | import React,{ Component } from 'react'
2 | import Channels from './Channels'
3 | import { getChannelInformation } from './Api'
4 |
5 |
6 | class Home extends Component{
7 |
8 | constructor(props){
9 | super(props)
10 |
11 | this.state ={
12 | users: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp",
13 | "habathcx", "RobotCaleb", "noobs2ninjas", "storbeck","brunofin", "comster404"],
14 | displayNames: [],
15 | logos : [],
16 | status: [],
17 | previewLogo: [],
18 | currentStream: [],
19 | allClass:"active",
20 | onlineClass:"",
21 | offlineClass:"",
22 | streamUrl:[]
23 | }
24 | this.sortAllStatus = this.sortAllStatus.bind(this)
25 | this.sortOnlineStatus = this.sortOnlineStatus.bind(this)
26 | this.sortOfflineStatus = this.sortOfflineStatus.bind(this)
27 | }
28 |
29 | componentDidMount(){
30 | // User Information
31 | const { users } = this.state; let nameString = "", logoString = "", streamUrl = "";
32 | // Stream Information
33 | let statuses = "", previewUrl="",streamDesc=""
34 |
35 | for ( let i =0;i
83 |
97 |
98 |
99 |
100 | {/*List item*/}
101 |
102 |
116 | -
103 | {articles.map((pages) => {
104 | let baseurl = "https://en.wikipedia.org/?curid="+pages.pageid
105 | return(
106 |
107 |
-
108 |
{ pages.title }
109 |{ pages.extract }
110 |
111 |
112 | )
113 | })}
114 |
110 |
135 | )
136 | }
137 | }
138 |
139 | export default Home
140 |
--------------------------------------------------------------------------------
/Intermediate Front End Development Projects/random-quote-machine/src/data/quotes.json:
--------------------------------------------------------------------------------
1 | [
2 | ["Life isn’t about getting and having, it’s about giving and being.", "Kevin Kruse"],
3 | ["Whatever the mind of man can conceive and believe, it can achieve.", "Napoleon Hill"],
4 | ["Strive not to be a success, but rather to be of value.", "Albert Einstein"],
5 | ["I attribute my success to this: I never gave or took any excuse.", "Florence Nightingale"],
6 | ["You miss 100% of the shots you don’t take.", "Wayne Gretzky"],
7 | ["The most difficult thing is the decision to act, the rest is merely tenacity.", "Amelia Earhart"],
8 | ["Every strike brings me closer to the next home run.", "Babe Ruth"],
9 | ["Definiteness of purpose is the starting point of all achievement.", "W. Clement Stone"],
10 | ["We must balance conspicuous consumption with conscious capitalism.", "Kevin Kruse"],
11 | ["Life is what happens to you while you’re busy making other plans.", "John Lennon"],
12 | ["We become what we think about.", "Earl Nightingale"],
13 | ["15.Life is 10% what happens to me and 90% of how I react to it.", "Charles Swindoll"],
14 | ["The most common way people give up their power is by thinking they don’t have any.", "Alice Walker"],
15 | ["The mind is everything. What you think you become.", "Buddha"],
16 | ["The best time to plant a tree was 20 years ago. The second best time is now.", "Chinese Proverb"],
17 | ["An unexamined life is not worth living.", "Socrates"],
18 | ["Eighty percent of success is showing up.", "Woody Allen"],
19 | ["Your time is limited, so don’t waste it living someone else’s life.", "Steve Jobs"],
20 | ["Winning isn’t everything, but wanting to win is.", "Vince Lombardi"],
21 | ["I am not a product of my circumstances. I am a product of my decisions.", "Stephen Covey"],
22 | ["Every child is an artist. The problem is how to remain an artist once he grows up.", "Pablo Picasso"],
23 | ["You can never cross the ocean until you have the courage to lose sight of the shore.", "Christopher Columbus"],
24 | ["Either you run the day, or the day runs you.", "Jim Rohn"],
25 | ["Whether you think you can or you think you can’t, you’re right.", "Henry Ford"],
26 | ["The two most important days in your life are the day you are born and the day you find out why.", "Mark Twain"],
27 | ["Whatever you can do, or dream you can, begin it. Boldness has genius, power and magic in it.", "Johann Wolfgang von Goethe"],
28 | ["The best revenge is massive success.", "Frank Sinatra"],
29 | ["People often say that motivation doesn’t last. Well, neither does bathing. That’s why we recommend it daily.", "Zig Ziglar"],
30 | ["Life shrinks or expands in proportion to one’s courage.", "Anais Nin"],
31 | ["If you hear a voice within you say “you cannot paint,” then by all means paint and that voice will be silenced.", "Vincent Van Gogh"],
32 | ["There is only one way to avoid criticism: do nothing, say nothing, and be nothing.", "Aristotle"],
33 | ["Ask and it will be given to you; search, and you will find; knock and the door will be opened for you.", "Jesus"],
34 | ["The only person you are destined to become is the person you decide to be.", "Ralph Waldo Emerson"],
35 | ["Go confidently in the direction of your dreams. Live the life you have imagined.", "Henry David Thoreau"],
36 | ["Certain things catch your eye, but pursue only those that capture the heart.", " Ancient Indian Proverb"],
37 | ["Believe you can and you’re halfway there.", "Theodore Roosevelt"],
38 | ["Everything you’ve ever wanted is on the other side of fear.", "George Addair"],
39 | ["We can easily forgive a child who is afraid of the dark; the real tragedy of life is when men are afraid of the light.", "Plato"],
40 | ["Teach thy tongue to say, “I do not know,” and thous shalt progress.", "Maimonides"],
41 | ["Start where you are. Use what you have. Do what you can.", "Arthur Ashe"],
42 | ["Fall seven times and stand up eight.", "Japanese Proverb"],
43 | ["Everything has beauty, but not everyone can see.", "Confucius"],
44 | ["How wonderful it is that nobody need wait a single moment before starting to improve the world.", "Anne Frank"],
45 | ["When I let go of what I am, I become what I might be.", "Lao Tzu"],
46 | ["Life is not measured by the number of breaths we take, but by the moments that take our breath away.", "Maya Angelou"],
47 | ["Happiness is not something readymade. It comes from your own actions.", "Dalai Lama"],
48 | ["If you’re offered a seat on a rocket ship, don’t ask what seat! Just get on.", "Sheryl Sandberg"],
49 | ["If the wind will not serve, take to the oars.", "Latin Proverb"],
50 | ["You can’t fall if you don’t climb. But there’s no joy in living your whole life on the ground.", "Unknown"],
51 | ["We must believe that we are gifted for something, and that this thing, at whatever cost, must be attained.", "Marie Curie"],
52 | ["Too many of us are not living our dreams because we are living our fears.", "Les Brown"],
53 | ["Challenges are what make life interesting and overcoming them is what makes life meaningful.", "Joshua J. Marine"],
54 | ["If you want to lift yourself up, lift up someone else.", "Booker T. Washington"],
55 | ["Limitations live only in our minds. But if we use our imaginations, our possibilities become limitless.", "Jamie Paolinetti"],
56 | ["You take your life in your own hands, and what happens? A terrible thing, no one to blame.", "Erica Jong"],
57 | ["I didn’t fail the test. I just found 100 ways to do it wrong.", "Benjamin Franklin"],
58 | ["In order to succeed, your desire for success should be greater than your fear of failure.", "Bill Cosby"],
59 | ["A person who never made a mistake never tried anything new.", " Albert Einstein"],
60 | ["The person who says it cannot be done should not interrupt the person who is doing it.", "Chinese Proverb"],
61 | ["There are no traffic jams along the extra mile.", "Roger Staubach"],
62 | ["It is never too late to be what you might have been.", "George Eliot"],
63 | ["You become what you believe.", "Oprah Winfrey"],
64 | ["I would rather die of passion than of boredom.", "Vincent van Gogh"],
65 | ["A truly rich man is one whose children run into his arms when his hands are empty.", "Unknown"],
66 | ["If you want your children to turn out well, spend twice as much time with them, and half as much money.", "Abigail Van Buren"],
67 | ["Build your own dreams, or someone else will hire you to build theirs.", "Farrah Gray"],
68 | ["Education costs money. But then so does ignorance.", "Sir Claus Moser"],
69 | ["I have learned over the years that when one’s mind is made up, this diminishes fear.", "Rosa Parks"],
70 | ["It does not matter how slowly you go as long as you do not stop.", "Confucius"],
71 | ["Remember that not getting what you want is sometimes a wonderful stroke of luck.", "Dalai Lama"],
72 | ["You can’t use up creativity. The more you use, the more you have.", "Maya Angelou"],
73 | ["Dream big and dare to fail.", "Norman Vaughan"],
74 | ["Our lives begin to end the day we become silent about things that matter.", "Martin Luther King Jr."],
75 | ["Do what you can, where you are, with what you have.", "Teddy Roosevelt"],
76 | ["If you do what you’ve always done, you’ll get what you’ve always gotten.", "Tony Robbins"],
77 | ["Dreaming, after all, is a form of planning.", "Gloria Steinem"],
78 | ["You may be disappointed if you fail, but you are doomed if you don’t try.", "Beverly Sills"],
79 | ["Remember no one can make you feel inferior without your consent.", "Eleanor Roosevelt"],
80 | ["Life is what we make it, always has been, always will be.", "Grandma Moses"],
81 | ["The question isn’t who is going to let me; it’s who is going to stop me.", "Ayn Rand"],
82 | ["It’s not the years in your life that count. It’s the life in your years.", "Abraham Lincoln"],
83 | ["Change your thoughts and you change your world.", "Norman Vincent Peale"],
84 | ["Either write something worth reading or do something worth writing.", "Benjamin Franklin"],
85 | ["Nothing is impossible, the word itself says, “I’m possible!”", "Audrey Hepburn"],
86 | ["The only way to do great work is to love what you do.", "Steve Jobs"],
87 | ["If you can dream it, you can achieve it.", "Zig Ziglar"]
88 | ]
89 |
--------------------------------------------------------------------------------
111 | 
112 |
113 |
114 |
112 |
115 |
123 | { displayNames.map((data, index) => 124 |
134 |
116 |
122 | -
117 |
- All 118 |
- Online 119 |
- Offline 120 |
123 | { displayNames.map((data, index) => 124 |