codebubb codebubb

🎯

Focusing

codebubb / package json

Last active October 16, 2020 12:18

ParcelJS Build

	{
	"name": "parcel-example",
	...
	"scripts": {
	"serve": "parcel serve src/index.html",
	"build": "parcel build --no-source-maps src/index.html"
	},
	...
	}

codebubb / app.js

Last active October 16, 2020 11:55

ParcelJS App JS

	import { btnEvent } from './Button';

	document
	.getElementById('btn')
	.addEventListener('click', btnEvent);

codebubb / Button.js

Created October 16, 2020 11:51

ParcelJS Button Event

codebubb / styles.scss

Last active October 16, 2020 12:24

Parcel JS styles

	h1 {
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 50px;
	}

codebubb / package.json

Created October 16, 2020 10:57

Parcel JS package file

	{
	"name": "parcel-example",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"serve": "parcel serve src/index.html"
	},
	"keywords": [],
	"author": "",

codebubb / index.html

Last active October 16, 2020 11:47

Parcel JS index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ParcelJS</title>
	<link rel="stylesheet" href="scss/styles.scss">
	</head>
	<body>
	<h1>Hello from Parcel!</h1>

codebubb / react-youtube-06-App.js

Last active November 6, 2020 11:06

React YouTube Viewer

	import React, { useState, useEffect } from 'react';
	import { Search } from './Search';
	import { Video } from './Video';

	export function App() {
	const [currentChannelId, setCurrentChannelId] = useState();
	const [videos, setVideos] = useState([]);

	const baseUrl = 'https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D';

codebubb / react-youtube-05-Video.js

Created October 14, 2020 14:29

React YouTube Viewer

	import React from 'react';

	export const Video = props => (
	<div className="videos__item">
	<div className="video__image">
	<a target="_blank" href={props.video.link}>
	<img src={`https://i4.ytimg.com/vi/${props.video.guid.split(':')[2]}/mqdefault.jpg`} />
	</a>
	</div>
	<div className="video__footer">

codebubb / react-youtube-04-App.js

Last active October 14, 2020 14:22

React YouTube Viewer

	import React, { useState, useEffect } from 'react';
	import { Search } from './Search';

	export function App() {
	const [currentChannelId, setCurrentChannelId] = useState();

	return (
	<div className="app-container">
	<h1>Latest YouTube Videos</h1>
	<Search setCurrentChannelId={id => setCurrentChannelId(id)}/>

codebubb / react-youtube-03-Search.js

Created October 14, 2020 14:06

React YouTube Viewer

	import React, { useState } from 'react';

	export const Search = props => {
	const [channelId, setChannelId] = useState('');
	return (
	<div>
	<div className="search">
	<input type="text" onChange={event => setChannelId(event.target.value)} placeholder="Enter your favourite channel ID" />
	<button disabled={!channelId.length} onClick={() => props.setCurrentChannelId(channelId)}>Get videos</button>
	</div>