This week, I started a new tutorial project. Building clones is one of my favorite challenges — there’s something so rewarding about building a clone of something I use in real life. So when I saw Scrimba had a tutorial on how to build an Instagram clone with lots of technology I’ve been itching to practice or learn, I knew I had to take it on. It’s a fairly lengthy project so I’ll be breaking it up over the next few weeks. This week I’ll be focusing on something brand new to me: setting up Firebase.
Firebase will act as…
In the last installment, we finished up by adding a toggle button that allows the user to choose if they would like to lighten or darken the color when they change it. Now it is time to add in that functionality and wrap up the project!
We want our code to address two things when the button is toggled: we want to think about what numerical value the user has in the slider and if the user has chosen to lighten or darken the color. To do this, we want our values (where we have
slider.value in our code) to…
In the previous installment of this series, we created our toggle button. This week, we will address adding the button’s ability to change when toggled and updating a few design elements.
One of the main purposes of a toggle button is that the button should be able to transform when toggled to show the selected state. As of right now, we only have one form of the toggle button created. To do this, we will add some styles to the
inner-circlethat will only take effect if the
toggle-btn has a class of
While this is great, it doesn't actually…
The next element to tackle is a button that allows a user to toggle between darkening and lightening the color. The first thing we’ll need is a container div with a class name of
toggle. Within that, we will separate
darkenText. In between these two divs we will have another div named
toggleBtn that contains a div named
(You can find part one of this project here.)
Now that we’ve got the basic layout formatted and the slider has the ability to display the change in percentages, it’s time to add the color-changing functionality! Specifically, we want to change the color based on the percentage selected with the slider we just built. To do this, we are going to take in two parameters from the user: the hex code they provide and the percentage from the slider. From there, we will convert our hex value to an RGB value using the
convertHexToRGB() function we previously created. Then, we…
This week, I decided to get some practice with React Hooks. Hooks are such a useful tool, but I haven’t used them enough that I’m as comfortable with them as I’d like to be. So when I came across this tutorial for a to do app that utilizes them, I decided to do it.
The app is relatively simple and only contains three components — Todo, TodoForm, and TodoList. I started with TodoForm, which as the name implies is a component that provides the user with a form to add an item to the to do list. This is also…
Today I completed a code along where I was given a prototype in Figma and had to recreate it using HTML and CSS. Here is what the prototype I was given looked like:
I began with the HTML. Because the design given has two sections, I created
<div>s with class names of
right-col. The first section
left-col is fairly simple — I give it a
<div> with an
<p> and the copy provided in the prototype. The second,
right-col, contains a form so it is a bit more complex. The
<div> makes an appearance…
This week, in addition to some work I’ve been doing on my Park Planner app, I started toying around with Figma. If you aren’t familiar with Figma, it is a UI and UX design tool used for building prototypes. I had heard about it during bootcamp but never had the time while in class to use it. But as someone who values design in web projects but is not naturally much of an artist or designer, it felt like it was necessary for me to look into it.
Figma is great for someone like me who needs to be able…
While my blogs are usually more technically focused, this one is going to be less about the actual code/language and more about planning for the overall product. For me, this is the most fun part of a project. It’s creative and exciting to sit down and imagine all of the possibilities. When I start a project, it all comes down to one question: what would I use?
The best way to determine if the tool you have in mind is one that people would use is to ask if you yourself would. If you would, chances are you are not…