Erik Hanchett ErikCH

## setup-web-comp.html
<!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>

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

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

## app.js
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}`;

## index.html
<!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>

## App.vue
<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>

## fetch-json.vue
<script setup lang="ts">
import { ref, useSlots, getCurrentInstance } from "vue";

const props = defineProps<{ url: string }>();
const slots = useSlots();

let res = ref("");
let loading = ref(true);

fetch(props.url)

## App.vue
<script setup>
import { watchEffect, ref, computed, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const welcome = ref("Hello!");
const count = ref(0);
const count2 = ref(0);

// Writes to a pre tag (Like console.log)
const write = ref("");

## index.html
<body>
    <div id="app">
        <div class="nes-container with-title is-centered">
            <p class="title">Vue Form Test</p>
            <form @submit.prevent="submit">
                <div class="nes-field">
                    <label for="name_field">Character Name</label>
                    <input placeholder="Enter name here" type="text"
                         name="name"
                         id="name_field" class="nes-input" />

## vue3
<div id="app"></div>

<script src="vue.global.js"></script>
<script>
const MyComponent = {
  data: {
    name: 'Erik'
  },
template: `<h1>{{ name }}</h1>`
}

## Home.vue
<template>
  <div class="home">
    <h1>Random Dog Images</h1>
    <h2>Dog Count {{counter}}</h2>
    <button @click="getDog">Get Dogs</button>
    <div class="dog-wrapper">
      <div class="picture-dog">
        <img :src="image" alt />
      </div>
      <button v-on:click="pressMe">Increment Dog Count</button>
	<!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>
	* {
	font-size: 1.4rem;
	font-family: "Roboto", arial, sans-serif;
	}

	html {
	font-size: 62.5%;
	padding: 1rem;
	}
	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}`;
	<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>
	<script setup lang="ts">
	import { ref, useSlots, getCurrentInstance } from "vue";

	const props = defineProps<{ url: string }>();
	const slots = useSlots();

	let res = ref("");
	let loading = ref(true);

	fetch(props.url)
	<script setup>
	import { watchEffect, ref, computed, watch } from "vue";
	import { useRoute } from "vue-router";
	const route = useRoute();
	const welcome = ref("Hello!");
	const count = ref(0);
	const count2 = ref(0);

	// Writes to a pre tag (Like console.log)
	const write = ref("");
	<body>
	<div id="app">
	<div class="nes-container with-title is-centered">
	<p class="title">Vue Form Test</p>
	<form @submit.prevent="submit">
	<div class="nes-field">
	<label for="name_field">Character Name</label>
	<input placeholder="Enter name here" type="text"
	name="name"
	id="name_field" class="nes-input" />
	<div id="app"></div>

	<script src="vue.global.js"></script>
	<script>
	const MyComponent = {
	data: {
	name: 'Erik'
	},
	template: `<h1>{{ name }}</h1>`
	}
	<template>
	<div class="home">
	<h1>Random Dog Images</h1>
	<h2>Dog Count {{counter}}</h2>
	<button @click="getDog">Get Dogs</button>
	<div class="dog-wrapper">
	<div class="picture-dog">
	<img :src="image" alt />
	</div>
	<button v-on:click="pressMe">Increment Dog Count</button>