diff --git a/code/logan/javascript/lab04/index.html b/code/logan/javascript/lab04/index.html new file mode 100644 index 00000000..89d2c752 --- /dev/null +++ b/code/logan/javascript/lab04/index.html @@ -0,0 +1,63 @@ + + + + + + + Vue-tiful Quotations + + + + + + + +
+ +

{{headline}}

+ + +
+
+ +

{{faveQ}}

+

- {{qAuthor}}

+ +
+ +

Random Quotes

+ +
  • + {{quote}} +
    • + +
    +
    + + + +
    + + + +
    + +

    {{results}}

    + +
  • + {{quote.body}} +
    • + +
    + +
    + + +
    + + + \ No newline at end of file diff --git a/code/logan/javascript/lab04/script.js b/code/logan/javascript/lab04/script.js new file mode 100644 index 00000000..14a553b3 --- /dev/null +++ b/code/logan/javascript/lab04/script.js @@ -0,0 +1,103 @@ +const App = { + data () { + return { + test: 'Hello World', + headline: 'Vue Quotes', + faveQ: "", + qAuthor: "", + qotdURL: "https://favqs.com/api/qotd", + baseURL: "https://favqs.com/api/quotes/", + fQuotes: [], + sQuotes: undefined, + searchTerm: "", + error: "", + sQuoteData: undefined, + pagButton: false, + pagData: undefined, + pagCounter: 1, + results: "", + + } + }, + + created () { + + let i = 0 + while (i < 5) { + i++ + this.getQuote() + } + }, + + methods: { + // heavily indebted to that Pete code + getQuote () { + // console.log({ 'this in getDadJoke': this }) // this is the vue app + // this.dadJoke = 'Dad joke incoming...' + axios({ // this entire thing will return a promise + // url: this.baseUrl, + url: this.qotdURL, + headers: { Accept: 'application/json' }, + method: 'get' + }).then(res => { + // console.log({ 'this in .then': this }) // this is the Window if not in an arrow function + // this will still be the vue app if in an arrow function + + this.faveQ = res.data.quote.body + this.qAuthor = res.data.quote.author + this.fQuotes.push(this.faveQ) + + + + })}, + // heavily indebted to that Pete code + searchQuote () { + this.pagButton = false + this.pagCounter = 1 + this.error = '' + this.results = "Results" + axios({ + method: 'get', + url: this.baseURL, + headers: { Accept: 'application/json', Authorization: "Token token=75781e1e8edbf2eb68848384abbbd2bb"}, // doesn't work + params: { filter: this.searchTerm }, + }).then(res => { + // throw new Error('Something went wrong. Please try again.') + console.log(res.data) + this.sQuotes = res.data.quotes + this.sQuoteData = res.data + this.pagData = res.data.last_page + + if (this.pagData === false){ + this.pagButton = true} + }).catch(err => this.error = err.message) // .catch will run if an error occurs + + }, + + nextPage () { + this.error = '' + this.pagCounter += 1 + // alert("this is working") + axios({ + method: 'get', + url: this.baseURL, + headers: { Accept: 'application/json', Authorization: "Token token=75781e1e8edbf2eb68848384abbbd2bb"}, // doesn't work + params: { filter: this.searchTerm, page: this.pagCounter}, + }).then(res => { + // throw new Error('Something went wrong. Please try again.') + console.log(res.data) + this.sQuotes = res.data.quotes // might need to fool with this .results + this.sQuoteData = res.data + this.pagData = res.data.last_page + if (this.pagData === false){ + this.pagButton = true} + else {pagButton = false} + + }).catch(err => this.error = err.message) // .catch will run if an error occurs + + +}}} + + +const app = Vue.createApp(App) +app.mount('#app') \ No newline at end of file diff --git a/code/logan/javascript/minicapstone/minicap.html b/code/logan/javascript/minicapstone/minicap.html new file mode 100644 index 00000000..39be0eef --- /dev/null +++ b/code/logan/javascript/minicapstone/minicap.html @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + Capstone + + + +
    + +

    {{message}}

    + + + +
    + +
    + +
    + +

    Hall of Fame

    + + +
    + +
    + +

    Hall of Shame

    + + +
    + + + +
    + + +
    +

    Judge Me

    + + + +
    + + + +
    + +
    + +
    + + +
    + +

    FUN FACTS BY BREED

    + +

    + {{desc}} +

    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + +
    + + + + + + + + \ No newline at end of file diff --git a/code/logan/javascript/minicapstone/testscript.js b/code/logan/javascript/minicapstone/testscript.js new file mode 100644 index 00000000..abe80aae --- /dev/null +++ b/code/logan/javascript/minicapstone/testscript.js @@ -0,0 +1,124 @@ +const App = { + // the data property is a function that returns an object + data() { + return { + message: 'CAT JUDGMENT', + baseURL: " https://api.thecatapi.com/v1/images/search", + breedURL: "https://api.thecatapi.com/v1/breeds", + breedSearchURL: "https://api.thecatapi.com/v1/breeds/search", + breedSearchURLAlt: "https://api.thecatapi.com/v1/breeds/search?q=", + breedParam: undefined, + catFetch: undefined, + urlFetch: undefined, + imgObj: undefined, + searchTerm: "", + imgURLs: [], + hallOfFame: [], + hallOfShame: [], + breedData: undefined, + breedList: [], + breedIDList: [], + breedDict: {}, + shortDict: {}, + clickCheck: false, + desc: undefined, + // newKey: undefined, + // newVal: undefined, + // select: document.getElementById("selectBreed"), + + } + }, + created () { + this.breedGrab() + + }, + + methods: { + getCat () { + this.imgURLs = [] + this.clickCheck=true + axios({ + url: this.baseURL, + headers: { Accept: 'application/json', Authorization:"9bf907ff-5c70-40c1-93a1-16d55b35d6bb" }, + method: 'get', + + }).then(res => { + this.catFetch = res.data // + this.urlFetch = this.catFetch[0].url + this.imgObj = {"url": this.urlFetch} + this.imgURLs.push(this.imgObj) + + + + })}, + + + + + + + + searchCat (breed) { + this.imgURLs = [] + let i = this.breedList.indexOf(breed) + this.breedParam = this.breedIDList[i] + // alert(this.breedParam) + this.clickCheck=true + + + axios({ + url: this.breedSearchURL, + // url: this.baseURL, + // url: this.breedSearchURLAlt, + headers: { Accept: 'application/json', Authorization:"9bf907ff-5c70-40c1-93a1-16d55b35d6bb" }, + method: 'get', + params: {q:this.breedParam}, + + }).then(res => { + this.catFetch = res.data // + this.desc = this.catFetch[0].description + // alert(this.catFetch) + // this.urlFetch = this.catFetch[0].url + // this.imgObj = {"url": this.urlFetch} + // this.imgURLs.push(this.imgObj) + + + })}, + + breedGrab () { + axios({ + url: this.breedURL, + headers: { Accept: 'application/json', Authorization:"9bf907ff-5c70-40c1-93a1-16d55b35d6bb" }, + method: 'get', + + }).then(res => { + this.breedData = res.data + let i = 0 + while (i < this.breedData.length) { + this.breedList.push(this.breedData[i].name) + i++} + i = 0 + while (i < this.breedData.length) { + this.breedIDList.push(this.breedData[i].id) + i++} + + + })}, + rFame () { + this.hallOfFame.push(this.imgObj) + + }, + + rShame () { + this.hallOfShame.push(this.imgObj) + + }, + + + + }, + + + } + // this is how you create & mount the app in Vue 3: + Vue.createApp(App).mount('#app') \ No newline at end of file diff --git a/code/logan/javascript/todos/index.html b/code/logan/javascript/todos/index.html new file mode 100644 index 00000000..b051d230 --- /dev/null +++ b/code/logan/javascript/todos/index.html @@ -0,0 +1,118 @@ + + + + + + + To Dos! + + + + + +
    +

    {{ headline }}

    + +
    + + + +
    + +
    +
    + +

    Incompleted Tasks

    + + + + +
    +
    + + +

    Completed Tasks

    + + + +
    +
    + +

    Mark Complete

    + +
    + + + +
    + +
    +
    + +

    Mark Incomplete

    + +
    + + + +
    + +
    +
    + +

    Remove

    + +
    + + + +
    + + + + +
    + + + + + + \ No newline at end of file diff --git a/code/logan/javascript/trial/test.html b/code/logan/javascript/trial/test.html new file mode 100644 index 00000000..1bcfbfb4 --- /dev/null +++ b/code/logan/javascript/trial/test.html @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + Capstone + + + +
    + +

    {{message}}

    + +

    + {{urlFetch}}

    + + {{breedList}}

    + {{breedIDList}}

    + {{shortDict}}

    +

    + +
    + +
    + +
    + +

    Hall of Fame

    + + +
    + +
    + +

    Hall of Shame

    + + +
    + + + +
    + + +
    +

    Random Cat

    + + + +
    + + + +
    + +
    + +
    + + + +
    + +
    + + + + + + + + + + + + + + + + + + + +
    + + + + + + + + \ No newline at end of file diff --git a/code/logan/javascript/trial/testscript.js b/code/logan/javascript/trial/testscript.js new file mode 100644 index 00000000..263d9869 --- /dev/null +++ b/code/logan/javascript/trial/testscript.js @@ -0,0 +1,116 @@ +const App = { + // the data property is a function that returns an object + data() { + return { + message: 'CAT JUDGMENT', + baseURL: " https://api.thecatapi.com/v1/images/search", + breedURL: "https://api.thecatapi.com/v1/breeds", + catFetch: undefined, + urlFetch: undefined, + imgObj: undefined, + searchTerm: "", + imgURLs: [], + hallOfFame: [], + hallOfShame: [], + breedData: undefined, + breedList: [], + breedIDList: [], + breedDict: {}, + shortDict: {}, + clickCheck: false + // newKey: undefined, + // newVal: undefined, + // select: document.getElementById("selectBreed"), + + } + }, + created () { + this.breedGrab() + // for(let i = 0; i < this.breedList.length; i++) { + // var opt = this.breedList[i]; + // var el = document.createElement("option"); + // el.textContent = opt; + // el.value = opt; + // this.select.appendChild(el); + // } + // didn't work + let i = 0 // under construction might not work + + + + }, + + methods: { + getCat () { + this.imgURLs = [] + this.clickCheck=true + axios({ + url: this.baseURL, + headers: { Accept: 'application/json', Authorization:"9bf907ff-5c70-40c1-93a1-16d55b35d6bb" }, + method: 'get', + + }).then(res => { + this.catFetch = res.data // + this.urlFetch = this.catFetch[0].url + this.imgObj = {"url": this.urlFetch} + this.imgURLs.push(this.imgObj) + + + + })}, + + + + + + + + searchCat () { + axios({ + url: this.baseURL, + headers: { Accept: 'application/json', Authorization:"9bf907ff-5c70-40c1-93a1-16d55b35d6bb" }, + method: 'get', + parameters: "", + + }).then(res => { + + + })}, + + breedGrab () { + axios({ + url: this.breedURL, + headers: { Accept: 'application/json', Authorization:"9bf907ff-5c70-40c1-93a1-16d55b35d6bb" }, + method: 'get', + + }).then(res => { + this.breedData = res.data + let i = 0 + while (i < this.breedData.length) { + this.breedList.push(this.breedData[i].name) + i++} + i = 0 + while (i < this.breedData.length) { + this.breedIDList.push(this.breedData[i].id) + i++} + + + })}, + rFame () { + this.hallOfFame.push(this.imgObj) + + }, + + rShame () { + this.hallOfShame.push(this.imgObj) + + }, + + + + }, + + + } + // this is how you create & mount the app in Vue 3: + Vue.createApp(App).mount('#app') \ No newline at end of file diff --git a/code/logan/lab00/text.txt b/code/logan/lab00/text.txt deleted file mode 100644 index e69de29b..00000000