Erik Hanchett ErikCH

🏠

Working from home

I'm a developer at @aws! I'm also an author of the Ember.js Cookbook and Vue.js in Action. Open source fan!

ErikCH / App.vue

Created January 14, 2022 03:52

App.vue for Renderless Component Video

	<script lang="ts" setup>
	import FetchJson from "./components/fetch-json.vue";
	// import { useFetch } from "@vueuse/core";

	const url = "https://api.thecatapi.com/v1/images/search";
	// const { isFetching: loading, error, data: response } = useFetch(url).json();
	</script>

	<template>
	<h3>Random Cat Pics!</h3>

ErikCH / index.html

Created February 7, 2022 02:02

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Erik's Google Search</title>
	<link rel="stylesheet" href="styles.css" />
	<link rel="stylesheet" href="https://unpkg.com/normalize.css" />
	<script src="app.js" defer></script>

ErikCH / app.js

Created February 7, 2022 02:03

	const URL = "https://www.google.com/search?q=";
	const FEELING_LUCKY = "&btnI=&sourceid=navclient&gfns=1";

	const inputDetails = document.querySelector("input");
	const lucky = document.querySelector("button[data-lucky]");

	lucky.addEventListener("click", () => {
	console.log("here", inputDetails.value);
	if (!inputDetails.value) return;
	document.location = `${URL}${inputDetails.value}${FEELING_LUCKY}`;

ErikCH / styles.css

Created February 7, 2022 02:03

	* {
	font-size: 1.4rem;
	font-family: "Roboto", arial, sans-serif;
	}

	html {
	font-size: 62.5%;
	padding: 1rem;
	}

ErikCH / setup-web-comp.html

Created February 20, 2022 18:37

setup-web-comp

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Tester</title>
	</head>
	<body>
	<h1>Does this work?</h1>
	<my-custom-text customText="'heyyou'"></my-custom-text>