Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nick js lab06 #247

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
121 changes: 0 additions & 121 deletions code/nick/javascript/lab02-number-to-phrase/lab02-a/index.html

This file was deleted.

17 changes: 0 additions & 17 deletions code/nick/javascript/lab02-number-to-phrase/lab02-b/index.html

This file was deleted.

124 changes: 0 additions & 124 deletions code/nick/javascript/lab02-number-to-phrase/lab02-b/lab-02-b.js

This file was deleted.

19 changes: 19 additions & 0 deletions code/nick/javascript/lab06-quotes/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}

main {
flex: 1 0 auto;
}

.input-field label {
color: #e57373;
}

p {
word-wrap: break-word
}

a { color: inherit; }
72 changes: 72 additions & 0 deletions code/nick/javascript/lab06-quotes/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js" defer></script>
<title>Hella Quotes</title>
</head>
<body class="container black darken-4">
<header class="section teal accent-4">
<h3 class="blue-grey-text text-lighten-4 center-align">Hella Quotes</h3>
</header>

<main class="cyan darken-3" id="app">

<!-- quote of the day -->
<div class="container blue-grey-text text-lighten-5 center-align" v-if="qotd && random">
<h4 class="lime-text text-darken-3">Quote of the Day</h4>
<p><h5 class="">"{{ qotd.body }}"</h5></p>
<h5 class="right">-{{ qotd.author }}</h5><br><br>
<h5 class="lime-text text-darken-3">Take a look at some random quotes!</h5>
</div>


<div class="row center">
<div class="input-field col s6">
<input placeholder="Search Term" type="text" class="validate" v-model="newSearchTerm">
</div>
<div class="input-field col s6">
<input placeholder="keyword, author, or tag" type="text" class="validate" v-model="newSearchType">
</div>
<div class="col s12">
<a class="waves-effect waves-light btn center" @click="newQuotesSearch()"><i class="material-icons right">search</i>Search</a>
</div>
</div>


<div class="container blue-grey-text text-lighten-5 center-align" v-if="!random">
<h5 class="lime-text text-darken-3">Results for the {{ cacheSearchType }}: {{ cacheSearchTerm }}</h5>
</div>


<ul class="pagination center">
<li :class="{ disabled: disabled, 'waves-effect': !disabled }"><a href="#!" @click="pageMove('down')"><i class="material-icons">chevron_left</i></a></li>
<li class="active"><a href="#!">{{ page }}</a></li>
<li :class="{ disabled: lastPage, 'waves-effect': !lastPage }"><a href="#!" @click="pageMove('up')"><i class="material-icons">chevron_right</i></a></li>
</ul>


<div class="row">
<template v-for="quote in quotesArray">
<quote-item :quote="quote" :key="quote.id"></quote-item>
</template>
</div>

</main>

<footer class="page-footer footer-copyright">
<div class="container row">
<p class="col s6">© 2022 Nicholas C. Murdaugh</p>
<div class="col s6"><p class="right">API used: <a href="https://favqs.com/api">favqs.com/api</a></p></div>
</div>
</footer>
</body>
</html>
Loading