initial commit for final

clr14003 · May 1, 2020 · f00d1d7 · f00d1d7
1 parent 1e804b6
commit f00d1d7
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 0 deletions.
diff --git a/web-three-twitter-boilerplate b/web-three-twitter-boilerplate
diff --git a/week-3/js/test.js b/week-3/js/test.js
diff --git a/week-6.zip b/week-6.zip
diff --git a/week-6/week-6/css/style.css b/week-6/week-6/css/style.css
@@ -0,0 +1,64 @@
+/* CSS files add styling rules to your content */
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --board-size: 200px;
+  --line-color: grey;
+  --gap: 5px;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+
+}
+
+main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+
+.gameboard {
+  width: calc( (3 * var(--board-size)) + (2 * var(--gap)) );
+  display: grid;
+  grid-template-columns: repeat(3, var(--board-size) );
+  grid-template-rows: repeat(3, var(--board-size) );
+  place-items: stretch;
+  background-color: var(--line-color);
+  grid-gap: 5px;
+
+}
+
+.square {
+  display: flex; 
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  color: #333;
+  font-size: var(--board-size);
+  line-height: var(--board-size);
+  text-transform: uppercase;
+  margin:0;
+  padding:0;
+  cursor: pointer;
+
+}
+
+.square:hover {
+  background-color: #eee;
+}
+
+
+.banner {
+  background-color: lightblue;
+  position: absolute;
+  top: 0px;
+  padding: 1em;
+  width: 100%;
+  text-align: center;
+}
diff --git a/week-6/week-6/index.html b/week-6/week-6/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic Tac Toe</title>
+    <link rel="stylesheet" href="css/style.css">
+
+
+
+</head>
+<body>
+
+
+    <main id="vue-app">
+
+        <div class="banner">
+            It's your turn, {{turn}}.
+        </div>
+
+        <div class="gameboard">
+
+            <div class="square"></div>
+            <div class="square"></div>
+            <div class="square"></div>
+            <div class="square"></div>
+            <div class="square"></div>
+            <div class="square"></div>
+            <div class="square"></div>
+            <div class="square"></div>
+            <div class="square"></div>
+
+        </div>
+
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+    <script src="js/tic-tac-toe.js"></script>
+</body>
+</html>
diff --git a/week-6/week-6/js/tic-tac-toe.js b/week-6/week-6/js/tic-tac-toe.js
@@ -0,0 +1,6 @@
+var app = new Vue({
+  el: '#vue-app',
+  data: {
+    turn: 'x'
+  }
+});
diff --git a/week-7/index.html b/week-7/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Cocktail Browser</title>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+</head>
+
+<body>
+	<div id="app">
+		<input type="text" v-model=searchValue placeholder="Search Query"><button @click="search">Search</button>
+		<ol>
+			<li v-for="drink in drinks">
+				<img v-bind:src="drink.strDrinkThumb" height="100" width="100"> {{ drink.strDrink }}
+			</li>
+		</ol>
+	</div>
+
+	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+	<script src="vue.js"></script>
+</body>
+</html>
diff --git a/week-7/vue.js b/week-7/vue.js
@@ -0,0 +1,24 @@
+//fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita').then(margarita => console.log(margarita))
+
+
+var app = new Vue({
+	el: '#app',
+	data: {
+		drinks: [],
+		searchValue: null,
+	},
+	methods: {
+		search(){
+			fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${this.searchValue}`)
+			.then((response) => {
+				return response.json();
+			})
+			.then((data) => {
+				console.log(data)
+				this.drinks = data.drinks;
+			})
+
+
+		}
+	}
+})