Day[34] – I Got the Scholarship

After 3 months, I did it. I got a scholarship to a Udacity Nanodegree.

It was a long wait today but I was so happy to get this email.

—————

Udacity

Grow with Google Developer Scholarship

Hi Jon,

You have earned a full 6-month Grow with Google Developer Scholarship to the Front-End Web Developer Nanodegree program!

Out of tens of thousands of students in the Grow with Google Challenge Scholarship, your progress in the course and dedication in the community really stood out. We’ve been impressed and we’re excited for you to continue the journey and grow even stronger as a developer!

In the full Nanodegree program, you’ll build off your earlier coursework, receive support from a personal mentor in your classroom, submit projects for official review and feedback, and earn a Udacity Nanodegree credential upon successful completion of all of your projects.

Class begins April 24, 2018

As a scholarship student, you will be automatically enrolled into the program on April 24 and will be able to access your Nanodegree program directly in your classroom. Your 6-month scholarship will last through October 24, 2018, giving you ample time to complete all of the projects and graduate. We’ve also created a brand new Slack workspace for Nanodegree scholarship recipients so that your classmates and you can continue learning together. Use this invite link to join now!

Per the terms of the scholarship, you have committed to participating regularly in the program and if you have not logged-in and begun learning by May 8, you may lose access to your scholarship.

We will be following up with more details on the Nanodegree program itself on Tuesday, April 24 to let you know once you’ve been formally enrolled.

We can’t wait for you to start and to see what you’ll create this time around!

Warm regards,
Brenda, Kathleen, Kelsey, and Nick

On another note, I continued with my node.js classes from FreeCodeCamp.

Day[33] – A Few More Hours Left Before We Find Out

Our Grow with Google Udacity Challenge ended last week on the 11th. We find out tomorrow if we got scholarships to the Nanodegree or not. While we were waiting, we were working on other stuff.

Here’s what I have been working on.

Finished the chingu project. It’s a clone of atomist.com. Here’s the live page.

http://jonmaldia.com/atomistclone-chingu/

Along with that, I also started the node section of freecodecamp.com.

Aside from that, I was busy working on taxes. Since I worked as a freelancer for the first time, I didn’t think of sending estimated payments to the IRS. So, I owe a lot of money. It’s not too bad but lesson learned.

I’ll update you tomorrow on what happened. to GwG

Day[32] – How to Create a Simple Image Carousel for your Website

Today, I’ll walk you through creating a simple slideshow that you can add on your website. We need HTML, CSS, and jQuery to do this. To see a sample of what we’ll do, check out the feature image above. ☝

The HTML

Let’s build the HTML first. For this tutorial, we’ll use 3 images to cycle through with. We’ll enclose each image in a div and and then enclose the 3 divs in another div.  The code will look like this.

<div class="slideshow">
  <div class="slide">
    <img src="img/image-01">
  </div>
 <div class="slide">
   <img src="img/image-02">
 </div>
 <div class="slide">
   <img src="img/image-03">
 </div>
</div>

The CSS

We’ll keep this style’s simple. We’ll give the main div and the child divs a width of 100%.

.slideshow, .slide {
  width: 100%;
}

The JS

Now let’s animate this. There are different ways of creating a slideshow. We will be using the hide and show methods to hide and show divs as needed.  I’ll write the code first then I’ll explain what each element is doing.

$(".slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('.slideshow > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(1200)
    .end()
    .appendTo('.slideshow');
},  5000);

The first line of the JS code is what we’ll run as soon as the page loads.

$(".slideshow > div:gt(0)").hide();

This code grabs all the divs in the div with class slideshow. the gt(0) gets elements from the first (0) index all the way to the last one. Then, hide() hides all this elements from view.

setInterval(function(),  5000);

The code above allows us to loop through the function that we pass to it. The 5000 is a time parameter that tells setInterval to fun our function() every 5000 milliseconds (every 5 seconds).

Now inside that function our this.

$('.slideshow > div:first') 
   .fadeOut(0) 
   .next() 
   .fadeIn(1200) 
   .end() 
   .appendTo('.slideshow');

// This is just another way of writing:
// $('.slideshow > div:first').fadeOut(0).next().fadeIn(1200).end().appendTo('.slideshow');

This $('.slideshow > div:first')  grabs the first div inside the slideshow div. Then, it fades it out with fadeOut(0). The 0 argument tells fadeOut not to add any transition.

After that, we go to the next div  using the next() method and fade that in to view with fadeIn(1200). We used a parameter here of 1200 milliseconds so that the image fades in slowly instead of just flashing in.

We then end the current filtering chain with end().

After that, we append this whole filter to the main div called slideshow. This last method is what allows us to loop through our images infinitely.

Well, that’s it. I hope that helps. Let me know in the comments below if that works for you. If you also have other methods of creating a carousel or if you have suggestions to improve mine, please drop a comment below.

 

 

Day[30] – Finishing up

Deadlines are coming up for some of the projects that I have – Project Newbs, NYPL, and Chingu. To top that off, it’s tax time. So, this is a hectic week.

I’ll try to keep blogging but some, like this one, will be super short.

Today, I focused on helping my teammates with the Project Newbs project. We worked on hover effects for our team section. It’s still a work in progress but we should be done with it by tomorrow.

That’s all folks!

Day[29] – Update on the Chingu Project – 2 More Issues to go

Before I start writing, I want to thank you for reading my blog and following me on my journey. I appreciate it.


I’m not sure if I mentioned this before but I’m going solo now on my Chingu project. My teammates quit the project a few weeks ago and I decided to work on the project. I have been coding it for about 2-3 weeks now. I will be able to finish it by the April 20 deadline.

I only have 2 issues left.

  • A testimonial carousel
  • A fake chat option at the bottom

This week I worked on the code tabs. It’s a tabbed section that consists of 3 tabs. Each tab displays some code.

I was actually having difficulties with this before. I started it Monday, I think. I was using toggleClass on jQuery to apply an active and inactive class. However, it wasn’t working the way I expected.

So, I stopped working on it for a couple of days. During that time, I helped one of my teammates on my Grow with Google – Udacity project make a carousel work. Our project has a slideshow as the main header to show images from the 3 cities we are from.

I was able to make it work using show() and hide() methods.

This actually became the answer to my chingu problem. I tried it out. Voila! It worked. Instead of changing the classes, I just shows the first tab and hid the 2 other tabs on load. Then, I added a listener for each tab button that showed the clicked tab and hid the others when the button was clicked.

I think the code is still a bit messy but it works. Once the project is done, I will revisit it to see if I can implement it in a better way.

Alright, check out the site here.

http://htmlpreview.github.io/?https://github.com/chingu-voyage4/Toucans-Team-5/blob/master/index.html

Day[28] – Update on Project Newbs

Our project newbs project is coming along nicely. Today, I helped my team mate make our carousel work. Then, I implemented the slider animation that I blogged about on our cards.

We just need the team section and the footer and we’re all set.

Also, today, I sent out a proposal to a possible client for a project. I’m excited for it because it involves the backend and working with APIs. There is also another project that involves building a site for an architectural firm.

Anyway, here’s a preview of our site.

http://htmlpreview.github.io/?https://github.com/jmaldia/project-newbs/blob/master/index.html

Day[27] – Using CSS Transform Property to Create a Sliding Card

This one is going be short and sweet. I won’t go too in depth but just explain what I did to create the card. Here’s a preview of what we’ll build.

To build this card, I created 1 div for the card. Within that div, are 2 other divs – 1 for the image and 1 for the description.

On the image div, I added the image I wanted and set both width and height to 100%. I made sure that the image I have has the same dimensions as the card (or at least the same proportion) to avoid distortion.

The description div has an title and description. It also has the same height and width. I set the property overflow to hidden because the description div goes beyond the div.

Now for the fun part. We need to position the description div to where we want it to be. So, I used transform to move it in position. Here’s the code I used.

.card-text {
 transform: translateY(-80px);
}

I only want to move the div vertically so I used the translateY value. Since I need to move it up, the value is negative.

In order to move the div up when we hover on it, we just change the value of translateY to a higher negative number like so.

.card-text:hover {
 transform: translateY(-350px);
}

This essentially accomplishes what we need. However, if you want a nicer effect where the card eases in when sliding up (instead of just jumping to position), we’ll change the transition using cubic-bezier values.  Here’s the updated code.

.card-text {
 transform: translateY(-80px);
 transition: 1s;
 transition-timing-function: cubic-bezier(.42,0,.58,1);
}

The cubic-bezier values are too complicated for me. So, I just go to a site to get the values. Here it is if you’re interested – cubic-bezier.com. They have a lot of transition effects. You can also make your own.

Here’s the codepen if you want to play around with it.

Day[26] – A Tutorial on Creating your own Color Picker Using Range Sliders for RGB

Yesterday, I updated you on my Pixel Art project for my Grow with Google Udacity class.  Today, I added more features including a custom color picker. I only had 10 or so colors before. I wanted to provide an option to users to pick their own color.

Someone on our GwG class slack asked if there was a way for you to create a color picker without using a plugin. I told him that I was plannning on doing this already and I told him my plan. He asked if he can see an example. I didn’t have one yet but I wanted to challenge my self, so, I decided to build the color picker.

Luckily, it only took me less than an hour to do it. Having a plan for how you want to build something helps with the execution part.

Here’s what we’ll build.

The HTML

Let’s first set up the HTML. Since we are using RGB, let’s set up the 3 sliders. We are using sliders because it’s easier to control and it allows us to limit the range. We will have a range between 0 and 255 inclusive to correspond to 256. Here’s the HTML.

<html>
 <head>
 <title>Range Sliders</title>
 </head>
 <body>
// This will be the div that we'll display the color picked. 
<div class="current-color-box">
 <p>Current color</p><div class="current-color"></div>
</div>

// The range sliders from top to bottom - red, green, blue
<div class="range-slider">
 <div class="range-colors">
 <span class="range-slider-text">R</span>
 <input class="range-slider-range" id="slider-red" type="range" value="0" min="0" max="255">
 <span class="range-slider-value">0</span>
</div>

<div class="range-colors">
 <span class="range-slider-text">G</span>
 <input class="range-slider-range" id="slider-green" type="range" value="0" min="0" max="255">
 <span class="range-slider-value">0</span>
</div>

<div class="range-colors">
 <span class="range-slider-text">B</span>
 <input class="range-slider-range" id="slider-blue" type="range" value="0" min="0" max="255">
 <span class="range-slider-value">0</span>
</div>

We only really need the inputs here but we will us the spans with classes range-slider-text and range-slider-value as labels to help with user experience. range-slider-text will tell the user if he/she is changing Red, Green, or Blue. range-slider-text will show the current value from 0 to 255. We will change this using jQuery.

Inside the input, we have an id and a class. However, the most important things here are min="0" and max="255". These are the ranges for our sliders. We also set the value to 0. That’ll be our starting point. Basically, rgb(0, 0, 0) or black.

I won’t talk about what the ids and classes mean. We’ll deal with those once we go to our JS and CSS.

The JS

NOTE: To preview the code, scroll down and come back up here.

Now let’s get to the good stuff. JavaScript will help us grab the values from the slider inputs that we built on our HTML. We’ll use these values to format an RGB combination like this – rgb(RED, GREEN, BLUE).

Before we start, make sure that you add jQuery to your HTML. I suggest adding it right before the closing body tag to ensure that all DOM elements are loaded.

I used jQuery.com as my CDN. You can also use Google or even add the files and folders to your project. Here’s what I used.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Now, the first thing that we’ll do is to define our jQuery variables. It’s good practice to assign your jQuery selectors to variables because it’s expensive to use jQuery all the time. By assigning it, we are getting what we need just one time and then reuse it when needed.

The following are the variables that we need.

  • rangeColors to select the div that contains all the sliders
  • currentColor so that we can access that later on to change it’s background
  • sliderRed to target just the red slider
  • sliderBlue to target just the blue slider
  • sliderGreen to target just the green slider

We also need to define variables that hold the values we will grab from the slider inputs – red, blue,  and green.

Lastly, we’ll define a variable that will build the rgb combo – customColor.

After that, we are now ready to create the event listener that will allow us to create our own colors.

For this example, I am use jQuery’s change event. I want to be able to grab the values everytime the user slides one of the sliders. To listen to all of them, I have targeted the entire div that holds all the sliders.

After that, we define the callback function that will actually build the colors.

Inside the function, we will grab the values of each slider input and assign them to the appropriate variables. Here’s an example.

red = sliderRed.val();

Using the .val() method, we will grab the value of the input with id #slider-red. Remember that we assigned  $('#slider-red') to the variable sliderRed .

We will do this for all 3 color variables.

As soon as any change is made (user slides the slider), the customColor variable will be assigned the rgb combo like so:

customColor = `rgb(${red}, ${green}, ${blue})`

NOTE: If you are wondering what the back ticks are, please check this out – Template Literals

To illustrate, if the user slides the red slider all the way to the right end, red will be 255. Since our initial value for all colors are 0 (defined on our HTML), the comboColor‘s value will become rgb(255, 0 ,0 which is red.

Now that we have our color, we can use this to change things on our code. For this example, we’ll just change a div‘s background color to indicate that it’s our current color.

To do this, we’ll be using some chaining. Here’s the code. I’ll explain it section by section.

currentColor.css({'background-color': `${gridColor}`});
  • currentColor – this is the div with class current-color that we created on our HTML to indicate what color we have picked
  • .css({'background-color': `${gridColor}`}) – I’ll explain this in 2 parts
    • .css() – this method will help us change a property within the selector that we chained this method to. In this case, currentColor
    • {'background-color': `${gridColor}`} – this is the argument we pass on to css(). This tells the method that we want to change the background color of the element to the color assigned to the variable gridColor

Another thing we’ll be doing is changing the numbers on the right side of our sliders. This number will display the current value for that slider.  Here’s the code and I’ll break it down also.

$(this).find('.range-slider-value').html($(this).find('.range-slider-range').val());
  • $(this) – this refers to the selector that we were listening to. In this case, we were listening to the div with class range-colors.
  • .find('.range-slider-value') – this looks for an element under the range-colors div with class `range-slider-value`. This is the div that holds the number on the right of our slider.
  • .html($(this).find('.range-slider-range').val()) – I will break this down further
    • html() – This will change the value of what’s inside the element we are targeting with the argument we passed to it
    • $(this).find('.range-slider-range').val() – this is the argument we will pass to html()
      • $(this) – same as above
      • .find('.range-slider-range') – this will find the an element with class `range-slider-range`. This is our input.
      • .val() – This grabs the value of the input

That’s basically it. Here’s the code.

let rangeColors = $('.range-colors');
let currentColor = $('.current-color');
let sliderRed = $('#slider-red');
let sliderGreen = $('#slider-green');
let sliderBlue = $('#slider-blue');
let customColor;
let red;
let blue;
let green;

rangeColors.on('change', function(){
 red = sliderRed.val();
 green = sliderGreen.val();
 blue = sliderlue.val();
 customColor = `rgb(${red}, ${green}, ${blue})`

$(this).find('.range-slider-value').html($(this).find('.range-slider-range').val());

currentColor.css({'background-color': `${gridColor}`});
});

I’m not going to talk about styling here. Otherwise, this post is going to even longer than it already is. However, I created a codepen for you so that you can see it in action and you can also see how I styled it.

Have fun!