diff --git a/web-three-twitter-boilerplate b/web-three-twitter-boilerplate new file mode 160000 index 0000000..fdceacf --- /dev/null +++ b/web-three-twitter-boilerplate @@ -0,0 +1 @@ +Subproject commit fdceacf750fd799fa957787761b7aeb1e9450cfd diff --git a/week-3/js/test.js b/week-3/js/test.js new file mode 100644 index 0000000..e69de29 diff --git a/week-6.zip b/week-6.zip new file mode 100644 index 0000000..4fb3f26 Binary files /dev/null and b/week-6.zip differ diff --git a/week-6/week-6/css/style.css b/week-6/week-6/css/style.css new file mode 100644 index 0000000..248cddb --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/week-6/week-6/index.html b/week-6/week-6/index.html new file mode 100644 index 0000000..aec9046 --- /dev/null +++ b/week-6/week-6/index.html @@ -0,0 +1,40 @@ + + + + + + Tic Tac Toe + + + + + + + + +
+ + + +
+ +
+
+
+
+
+
+
+
+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/week-6/week-6/js/tic-tac-toe.js b/week-6/week-6/js/tic-tac-toe.js new file mode 100644 index 0000000..fd3cd89 --- /dev/null +++ b/week-6/week-6/js/tic-tac-toe.js @@ -0,0 +1,6 @@ +var app = new Vue({ + el: '#vue-app', + data: { + turn: 'x' + } +}); \ No newline at end of file diff --git a/week-7/index.html b/week-7/index.html new file mode 100644 index 0000000..2f0feb1 --- /dev/null +++ b/week-7/index.html @@ -0,0 +1,25 @@ + + + + + + + Cocktail Browser + + + + + +
+ +
    +
  1. + {{ drink.strDrink }} +
    2. +
+
+ + + + + \ No newline at end of file diff --git a/week-7/vue.js b/week-7/vue.js new file mode 100644 index 0000000..694742e --- /dev/null +++ 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; + }) + + + } + } +}) \ No newline at end of file