100 Days of Code: Day 18

Home / Technology / Web Development / 100 Days of Code: Day 18
The Sparrow Photography portfolio is taking flight! I've made a ton of progress and pushed it to GitHub.

[vc_row css=”.vc_custom_1526680382655{margin-top: 15px !important;margin-bottom: 60px !important;padding-right: 10% !important;padding-left: 10% !important;}”][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%2218%22%2C%22color%22%3A%22blue%22%7D%5D” title=”100 Days of Code, Round 1″ percentage_value=”27″ title_color=”#3e3e3e” bar_color=”#1b7da9″ track_height=”20px” track_color=”#e7f6fc” m=”20″ extra_class=”” units=”%”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Goals For Today:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][ultimate_icon_list icon_size=”16″ icon_margin=”20″][ultimate_icon_list_item icon_type=”custom” icon_img=”id^4091|url^https://www.blissfullemon.com/wp-content/uploads/2018/05/done.png|caption^null|alt^null|title^done|description^null”]Work on Sparrow Photography portfolio page for 30 Days, 30 Sites challenge[/ultimate_icon_list_item][/ultimate_icon_list][vc_custom_heading text=”The Good:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I got a lot done with the Sparrow Photography portfolio, including adding a category filter. I thought the filter would have taken me a lot longer to figure out, but I actually managed to get it done in just a matter of a few hours. Next time I want to do something similar, I will be even more efficient now that I’ve done it once. That’s what I call progress![/vc_column_text][vc_custom_heading text=”The Bad:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I got a little frustrated when I couldn’t get my jQuery working properly. I kept alternating back to JavaScript to see if it would make a difference and eventually realized it was actually because the ID that I was trying to access was mistyped.

I blamed the language when really I should have blamed my typing. Alas, some time away from the computer and a few slices of greasy pepperoni pizza later, I was able to come back with a clear mind, do some debugging, and recognize my mistake.[/vc_column_text][vc_custom_heading text=”Notes/Comments:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I am finally ready to share my progress on the Sparrow Photography portfolio page![/vc_column_text][vc_single_image image=”5135″ img_size=”full” style=”vc_box_outline” onclick=”link_image”][vc_column_text]I think I’ve done an adequate job of creating a page that closely resembles my original interface design concept.

Fixed-Width Sidebar

I wanted to create a fixed-width sidebar, so I deviated a bit from the standard Bootstrap grid layout. While I am still using Bootstrap 4, I created the sidebar as its own element and added a standard 3-column responsive container for the portfolio images on the right. The sidebar and main content are in the same container/row. This keeps them together without allowing the sidebar to be resized.[/vc_column_text][vc_wp_text]

<div class="sidebar">

     <img id="logo" src="images/sparrow_logo.png" alt="Sparrow Photography Logo">

     <div class="flex-column">
          <ul class="nav">
               <li class="nav-item" id="portfolio">
                    <a class="nav-link" href="#">Portfolio</a>
               </li>
               <ul class="nav flex-column sub-nav">
                    <li class="sub-item">
                         <a class="nav-link photo-category" id="citiscapes" href="#">Citiscapes</a>
                    </li>
                    <li class="sub-item">
                         <a class="nav-link photo-category" id="weddings" href="#">Weddings</a>
                    </li>
                    <li class="sub-item">
                         <a class="nav-link photo-category" id="children-babies" href="#">Children & Babies</a>
                    </li>
                    <li class="sub-item">
                         <a class="nav-link photo-category" id="animals" href="#">Animals</a>
                    </li>
               </ul>
               <li class="nav-item top-margin-50">
                    <a class="nav-link" href="#">Journal</a>
               </li>
               <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
               </li>
               <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
               </li>
               </ul>
     </div>

     <div id="copyright">
          Copyright © 2018 <br> Sparrow Photography
     </div>
</div>

[/vc_wp_text][vc_column_text]

Category Filter

Like I mentioned, I used JavaScript/jQuery to create a filter that shows only the images that are in a particular category when the category link is clicked. When the page loads or you click on the ‘Portfolio’ link, all portfolio categories are displayed. Then if you click on a specific category, like Weddings, it will hide all the images and show only those that are in that class.

var portfolioElements = 0;

function portfolioFilter(category) {

     portfolioElements = $(".portfolio-img").length;
     console.log(portfolioElements);
     $("."+ category).show();

     return portfolioElements;
 }

window.onload = function() {

     $("#portfolio").click(function() {
          $(".portfolio-img").show();
     });

     $("#weddings").click(function() {
          $(".portfolio-img").hide();
          portfolioFilter("weddings");
     });

     $("#citiscapes").click(function() {
          $(".portfolio-img").hide();
          portfolioFilter("citiscapes");
     });

     $("#children-babies").click(function() {
          $(".portfolio-img").hide();
          portfolioFilter("children-babies");
     });

     $("#animals").click(function(){
          $(".portfolio-img").hide();
          portfolioFilter("animals");
     });

}

FYI: Don’t worry about the variable portfolioElements that was created. I’m not actually doing anything with that right now, but it may be used later.

You can see in the images below that the filter is working properly. One shows the Weddings category and the other shows only Animals.[/vc_column_text][vc_gallery type=”nivo” interval=”3″ images=”5137,5136″ img_size=”full”][vc_custom_heading text=”Important Links” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: