diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..31f5bed
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,104 @@
+/******************************************
+/* CSS
+/*******************************************/
+
+/* Box Model Hack */
+*{
+ box-sizing: border-box;
+ }
+
+ /******************************************
+ /* LAYOUT
+ /*******************************************/
+ img{
+ display: block;
+ margin: 0 auto;
+ }
+
+
+ /******************************************
+ /* ADDITIONAL STYLES
+ /*******************************************/
+ html {
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ background-color: lightcyan;
+}
+
+.app {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 600px;
+ background-color: white;
+ border-radius: 5px;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+header {
+ width: 100%;
+ font-size: 30px;
+ text-align: center;
+ padding: 10px;
+ border-bottom: 1px solid #ebebeb;
+}
+
+.quotes {
+ padding: 20px 50px;
+ min-height: 200px;
+}
+
+.quote-text {
+ padding-bottom: 20px;
+ font-size: 25px;
+ color: black;
+}
+
+.controls {
+ width: 100%;
+ padding: 20px 50px;
+}
+
+.button {
+ display: block;
+ color: black;
+ border-radius: 4px;
+ border: none;
+ padding: 10px 20px;
+ margin: 20px;
+ cursor: pointer;
+ text-align: center;
+ width: 100%;
+ font-size: 20px;
+}
+
+input {
+ border: 2px solid #eee
+ padding: 20px;
+ margin: 10px 0;
+ border-radius:2px;
+ justify-content: center
+}
+
+
+@media screen and (max-width: 600px) {
+ .app {
+ width: 100%;
+ }
+
+ .quote-text {
+ font-size: 18px;
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7e0eb3e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+ Trump Quotes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..944b1b6
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,37 @@
+// Selects the js-new-quote class to generate a new quote
+
+const newQuoteButton = document.querySelector('#js-new-quote')
+const personalQuoteButton = document.querySelector('#js-personal-quote')
+
+newQuoteButton.addEventListener('click', getQuote);
+personalQuoteButton.addEventListener('click', getPersonal);
+
+function getQuote() {
+ const url = 'https://api.whatdoestrumpthink.com/api/v1/quotes/random'
+
+ fetch(url)
+ .then(res => res.json()) // parse response as JSON
+ .then(data => {
+ console.log(data)
+ document.querySelector('h2').innerText = data.message
+ })
+ .catch(err => {
+ console.log(`error ${err}`)
+ });
+
+}
+
+function getPersonal() {
+ const choice = document.querySelector('input').value
+ const url = 'https://api.whatdoestrumpthink.com/api/v1/quotes/personalized?q=' + choice
+
+ fetch(url)
+ .then(res => res.json()) // parse response as JSON
+ .then(data => {
+ console.log(data);
+ document.querySelector('h2').innerText = data.message
+ })
+ .catch(err => {
+ console.log(`error ${err}`)
+ });
+}