changes

MattRoger · Sep 24, 2019 · 5584da5 · 5584da5
2 parents a9e4b22 + 4a19526
commit 5584da5
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 41 deletions.
diff --git a/assets/country.js b/assets/country.js
@@ -1,3 +1,29 @@
+$(document).ready(function start() {
+
+    $.ajax({
+        url: "https://restcountries.eu/rest/v2/name/USA",
+        method: "GET"
+
+
+    }).then(function (response) {
+        $(".country-info").css({ display: "block" })
+        $("#name").text("Country: " + response[0].name)
+        $("#native-name").text("Native Name: " + response[0].nativeName)
+        $("#capital").text("Capital: " + response[0].capital)
+        $("#population").text("Population: " + response[0].population)
+        $("#region").text("Region: " + response[0].region)
+        $("#currency").text("Currency: " + response[0].currencies[0].name)
+        console.log(response, "test")
+        console.log(response[0].nativeName)
+        console.log(response[0].capital)
+        console.log(response[0].population)
+        console.log(response[0].region)
+        console.log(response[0].currencies[0].name)
+        //   
+
+    })
+}
+)
 var countrySearch;
 console.log("start");
 $(".search").submit(function (event) {
@@ -31,6 +57,7 @@ $(".search").submit(function (event) {
         var cityLocation = response[0].capital;
         var APIKey = "08201fdb1a365def49e6181967f0815d";
         var queryURL = "https://api.openweathermap.org/data/2.5/weather?q=" + cityLocation + "&appid=" + APIKey + "&units=imperial";
+
         $.ajax({
             url: queryURL,
             method: "GET"

diff --git a/assets/css/grid.css b/assets/css/grid.css
@@ -0,0 +1,28 @@
+.main-section{
+    display:inline-grid;
+    grid-template-columns: 1fr 2fr 1fr;
+}
+.news{
+    grid-column-start:1;
+    grid-column-end: 2;
+    grid-row-start: 1;
+}
+.country-info{
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    justify-self: center;
+
+}
+.search{
+    grid-column-start: 3;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    justify-self: end;
+}
+.weather{
+grid-column-start: 3;
+grid-row-start:2;
+justify-self: stretch;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,6 +1,4 @@
-body {
-display: flex;
-}
+
 * {
     box-sizing: border-box;
 }
@@ -37,44 +35,53 @@ footer {
     border-top: 4px solid #2b3624;
     color: azure;
     font-family: 'Fira Sans', sans-serif;
-}
-.main-section {
-  float: left;
-  width: 100%;
-  height: auto;
-  max-width: 960px;
-  padding: 30px;
-  margin: 150px;
-  position: absolute;
-  color: azure;
+  }
+  .main-section {
+  width:90%;
+
+  margin:100px auto;
 }
 #cSearch {
   background:rgba(242, 242, 242, 0.623);
     border: 1px solid #dddddd;
     width: auto;
-    padding: 4%;
-    margin: 5%;
+    display: block;
+    height:2.5em;
+    margin-top:1.25em;
+    margin-bottom:1.25em;
+
     box-shadow: 1px 1px 2px black, 0 0 1em rgb(103, 182, 103), 0 0 0.2em rgb(110, 221, 110);
 }
 #cSearch:focus {outline-color: #443006}
 
 #search {
     font-size: large;
 }
+
 .search {
-    /* position: relative;
-    float: right;
-    margin: 20px;
-    width: 250px; */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    /* justify-content: space-between; */
-
+  display: block;
+  color:white;
+
 }
+.outer-wrapper{
+  z-index: 50;
 
+  margin-top:100px;
+}
+.country-info,
+.news,
+.weather{
+  background:#F2F2F2;
+  border:4px solid #2b3624;
+  color:#424242;
+
+}
+.country-info{
+  width:80%;
+}
+  .weather,
   .country-info{
-    padding:1.25em;
+    padding:.55em 1.15em;
     font-size: 1.25em;
     line-height: 2.5em;
     background:rgba(242, 242, 242, 0.623);
@@ -83,7 +90,16 @@ footer {
     width:16em;
     display:none;
     z-index:500;
+    /* display:none; */
   }
+  .weather{
+    margin-top:1.25em;
+  }
+
+.news{
+  margin-left:1.25em;
+}
+
 button {
     display: flex;
     margin: 0 0.3em 0.3em 0;
@@ -99,10 +115,9 @@ button {
     text-align: center;
     position: relative;
     font-family: 'Fira Sans', sans-serif;
-    z-index: 100;
+    z-index: 1000;
 }
 .meet {
-  /* position: fixed; */
   top: 50px;
   left: 50px;
 }
@@ -174,10 +189,10 @@ button:focus {outline-color: #443006}
   transition: margin-left .5s;
   /* padding: 20px; */
 }
-.weather {
+/* .weather {
   
   flex-direction: column;
-}
+} */
 
 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 @media screen and (max-height: 450px) {
@@ -198,7 +213,7 @@ background-color: rgba(128, 128, 128, 0.753);
 #close {
   display: block;
   margin: auto;
-  margin-top: 10px;s
+  margin-top: 10px;
 
 
 }
diff --git a/index.html b/index.html
@@ -7,23 +7,27 @@
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
         <link rel="stylesheet" type="text/css" href="assets/css/style.css">
+        <link rel="stylesheet" type="text/css" href="assets/css/grid.css">
         <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,800&display=swap" rel="stylesheet">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <title>Project 1</title>
     </head>
 
     <body>
         <div id="main">
-            <header>The World Watcher
-                <div id="mySidenav" class="sidenav">
-                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-                    <a href="https://mattroger.github.io/responsive-portfolio/portfolio.html">Matt Roger</a>
-                    <a href="https://wduesenberg.github.io/Responsive-Portfolio/">Wyatt Duesenberg</a>
-                    <a href="https://sneezynam3.github.io/Bootstrap-Portfolio/">James Snell</a>
-                    <a href="https://tcary.github.io/Responsive-Portfolio/">Tetiana Cary</a>
-                </div>
-            </header>
+            <header>The World Watcher</header>
+
+            <div id="mySidenav" class="sidenav">
+                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                <a href="https://mattroger.github.io/responsive-portfolio/portfolio.html">Matt Roger</a>
+                <a href="https://wduesenberg.github.io/Responsive-Portfolio/">Wyatt Duesenberg</a>
+                <a href="https://sneezynam3.github.io/Bootstrap-Portfolio/">James Snell</a>
+                <a href="https://tcary.github.io/Responsive-Portfolio/">Tetiana Cary</a>
+            </div>
+
             <span onclick="openNav()"><button class="meet bouncy">Meet the team</button></span>
+
+
             <div class="main-section">
                 <form class="search">
                     <label for="cSearch">Enter a country you would like to search for: </label>
@@ -33,7 +37,7 @@
                     </div>
                 </form>
             </div>
-            <!-- Make some placeholder images at the page load and then replace it with user results -->
+
             <div class="country_list country-info">
                 <div id="name"></div>
                 <div id="native-name"></div>
@@ -52,9 +56,19 @@
                 <div class="temp"></div>
             </div>
         </div>
+
+        <div id="enterCountry">
+            <p>
+                Please enter a Country
+                <button id="close">Okay</button>
+            </p>
+        </div>
         </div>
+
+        </div>
+
         <footer id="foot">
-            <p class="down">&copy</p>
+            <p class="down">&copy 2019 DU BOOTCAMP TEAM</p>
         </footer>
         <script src="assets/country.js"></script>
         <script src="assets/javascript/project.js"></script>