updates REAME.md for ip-address-tracker and fixes project styling

ip-address-tracker/README.md

@@ -44,18 +44,35 @@ Users should be able to:
 
 - Semantic HTML5 markup
 - CSS custom properties
+- Vue 3 with Composition API
 - Flexbox
 - CSS Grid
+- Ipify
+- Leaflet JS
+- OpenStreetMap
 - Mobile-first workflow
 
 ### What I learned
 
- I created a Vue project with Vite, and used the Vite import.meta object to store environmental variables.  The Vue 3 Composition API was useful with it's ```ref()``` function that allowed me to keep track of the changes in user input.  CSS Flebox and Grid styling made it easy to switch between desktop and mobile layouts.  LeafletJS was simple to install and add geolocation data from Ipify.
+#### Vue
+ I wanted to get some practice using Vue 3, Vite and the Composition API, and this project was perfect for all three.   Vite exposes environmental variables through the import.meta.env object, which made it easy to store the Ipify API key.  The Vue 3 Composition API has a useful reactive function called ```ref()``` that allowed me to keep track of the changes in user input.  When the user enters an IP address and clicks the search button, Vue stores the input in a ```ref()``` variable ```ipAddress```.  The ```ref()``` variables ```ip```, ```location```, ```timezone``` and ```isp```   are Vue templates variable used to display the IP Address response data in the modal container.
+ When the Vue project is mounted, I use the Vue Lifecycle hook ```onMounted``` to display the user IP Address information on initial page load.
 
+#### CSS Flexbox 
+I used CSS Flexbox to create the input for the IP address. Flexbox made it easy to position the input in the center of the container and give it a row orientation.  
+
+#### CSS Grid 
+I used CSS Grid to create the modal of the IP Address response data.  The modal needed four equal width columns for the IP Address, location, timezone and ISP.  I used ```grid-template-columns``` to create the four columns and the ```repeat()``` function to give them  equal widths.  I also used ```grid-template-rows``` to create a row of the IP address data, and give it the height required for the modal.
+
+#### Ipify
+Ipify was easy to use and start making API requests for the IP Address data. I created a ```.env``` file to store the Ipify API Key.  Next, I imported the environmental variable into my project using the Vite environmental variable object import.meta.env. When the user enters an IP address in the input field, its stored in the ```ref()``` variable ```ipAddress```  and then used make a ```fetch```  request to the Ipify Geolocation API to obtain the IP Address response data.  Finally the data is displayed in the Vue template using ```ref()``` variables ```ip```, ```location```, ```timezone``` and ```isp```.
+
+#### Leaflet JS 
+It was pretty straightforward to get Leaflet JS setup in my Vue project. I created an ```div``` with an ```id``` of ```mapContainer``` to mount the map.  I then created a function ```setupLeafletMap``` that sets up the map when the Vue project mounts, and centers the map.  When the user searches for an IP address, Vue will call the Ipify API and display the geolocation data on the map and zoom into the coordinates.  
 
 ### Continued development
 
-Vue has a simple API and great documentation that allows any developer to get started with making apps.  I will continue to use the Vue 3 Composition API, particularly the Events and Slots features in future projects.
+Vue has a simple API and great documentation that allows any developer to get started with making apps.  I will continue learning about the Vue 3 Composition API, in particular Vue's reactivity system using the ```ref()``` function. I would like to use LeafLet JS in future Vue projects and create more geolocation apps in Vue.
 
 ### Useful resources
 
@@ -64,4 +81,4 @@ Vue has a simple API and great documentation that allows any developer to get st
 ## Author
 
 - Website - [Laurie Jefferson](https://www.github.com/lauriejefferson)
-- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/lauriejefferson)
+- Frontend Mentor - [@lauriejefferson](https://www.frontendmentor.io/profile/lauriejefferson)

ip-address-tracker/src/App.vue

@@ -5,7 +5,6 @@ import L from "leaflet";
 import locationIcon from './images/icon-location.svg'
 
 const apiKey = import.meta.env.VITE_API_KEY;
-const defaultIP = import.meta.env.VITE_IP_ADDRESS;
 const showModal = ref(false);
 const ipAddress = ref(null);
 const ip = ref(null)
@@ -129,7 +128,7 @@ form {
 }
 
 input[type="text"] {
-    width: 80%;
+    width: 100%;
     padding: 0.7em 1.8em;
     border: none;
     border-top-left-radius: 10px;
@@ -159,6 +158,7 @@ button:hover {
     z-index: -1;
     width: 100%;
     height: 100vh;
+    max-width: 1440px;
 }
 
 .modal {
@@ -182,7 +182,9 @@ button:hover {
     .modal {
         display: grid;
         grid-template-columns: 1fr;
+        inset: 10em 1em;
         width: 70%;
+        height: 450px;
     }
 }
 
@@ -191,7 +193,7 @@ button:hover {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: 100px;
-        height: 150px;
+        height: 160px;
         inset: 10em 5em;
     }
 
@@ -209,8 +211,6 @@ button:hover {
     }
 
     .text {
-        font-size: 1.2rem;
-        font-weight: var(--fw-500);
         text-align: left;
     }
 }

ip-address-tracker/src/assets/style.css

@@ -133,7 +133,7 @@ body {
     color: var(--very-dark-gray);
     text-align: center;
     padding: 0.1em 0;
-    font-size: 1.25rem;
+    font-size: 1.45rem;
 }
 
 map {