My First App

For my Phase One Project at Flatiron school, I created a single-page application that accesses compiled US Census Bureau data from DATA USA’s public API.

The app is a quality of life comparison tool that allows the user to search for information on nearly 30,000 cities across the United States. The front end is a simple HTML/CSS/JS build based on a preliminary mock-up I created using Adobe XD.

Preliminary Adobe XD static mockup

My goal for this project was to create a minimalistic tool that would allow users to compare cities of interest with the location-specific information that mattered most to them. It was my hope, in the beginning, to allow the user to select the 4–5 data points of interest, that would populate into the page but that turned into more work than I’d initially thought, and also resulted in a much slower program.

Tackling the HTML

The HTML portion of the project went smoothly and didn't require too much work to set up the header, form, card container, and footer that would be the bare-bones components of the page.

The main challenge I ran into was deciding how I wanted to set up the form to capture the user’s search input. I’d initially considered prompting the user to submit multiple different location-specific inputs — City, State, and State Abbreviation — but soon realized if a user were to submit any misspelled information, it could jeopardize my fetch request that relies on the above input being correct.

I settled on a 2-part form that takes user text input for the city name, and then a drop-down selection box for the state name, with each state’s HTML value being the state’s two-letter abbreviation. This way, I could easily access the user's input as strings, for example:

‘Bozeman’, ‘Montana’, ‘MT’.

<form id='search-form'>
  <input id='city' type='text' name='city' placeholder="City">
  <select id="states">
    <option value="AL" class="Alabama">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    ...
  </select>
  <input id='search-btn' type='submit' name='submit' value="Add"/>
</form>

Challenges with JavaScript

The majority of the application is written in JavaScript. This is where I fetched data from the DATA USA API, added event listeners, and manipulated the DOM.

After creating the HTML form, I switched over to my index.js file to build out a ‘Handle Submit’ function to target the user’s input. For this function, I prevented the default form action of reloading the page, using e.preventDefault(), and created a location Object with 4 keys and values pulled from the user’s search.

The newLocationObject held values that allowed me to fetch data — using the getData function—with custom URL queries that apply to the city/state being searched.

Get Win Feigle’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Finally, the form.reset() cleared the user’s text from the previous search.

function handleSubmit(e){
  e.preventDefault()
    let newLocationObject = {
      city: e.target.city.value,
      st: e.target.states.value,
      state: states.options[states.selectedIndex].text,
      stateStr: `${e.target.city.value.replace(' ','- ')}-${e.target.states.value}`.toLowerCase(),
    }
getData(newLocationObject, renderCard)
form.reset()
}

For me, the most technical and challenging aspect of this js file was determining how to render a new ‘card’ to the DOM based on the user’s search input. After fetching the requested location data, I opted for a single function that takes multiple parameters pertaining to the returned data:

function renderCard(location, income, age, property, population){}

Finishing Touches with CSS

I am experienced with design, but inexperienced with CSS. So, when it came to implementing the styles I wanted to see into my app, it wasn’t as easy as I had initially hoped it would be. Changing font families, and adding colors, margins, and padding was a breeze… but figuring out how to center, use flex, justify, and align my content was a completely different story.

.card-container{
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  max-width: 75%;
  justify-content: center;
}

It took a few hours of trial and error before I had much of a clue about what I was actually tinkering around with. I happened to have some very helpful guides from CSS-Tricks that laid out the basic principles of containers, grids, and flexbox into beautiful infographics. Leveraging those infographics and utilizing Chrome dev tools allowed me to test out CSS adjustments in real-time rather than having to save my CSS file and re-launch my project with every new line of test code.

End Result

In the end, the app came just as I’d imagined it would. It is almost identical to my original Adobe XD mock-up, and considering this was my first full-fledged HTML/CSS/JS app, I was happy with my ability to deliver on my initial vision for the project. A link to the final project is listed below:

View the finished project on my GitHub.