Completing a Pricing Plan Coding Challenge

I found Frontend Mentor where you can improve your front-end coding skills by building real projects. You can pick a challenge that appeals to you. Then, download the design documents, images and other assets that you need.

Pricing Plan Coding Challenge

Pricing Component With Toggle

The challenge I chose was the pricing component with toggle. It has three options: Basic, Professional and Master. You have to use a toggle switch to show the prices for Annually or Monthly.

How I Built It

I built it using HTML, Bootstrap and JavaScript. With Bootstrap, I had to override some of its styles to get rid of the column margin and create custom styles for the button.

I wrote JavaScript that watches for when the toggle is selected. When you open the page, it defaults to monthly pricing. If you select Annually, you see the Annual prices. When you select Monthly, it switches back to Monthly prices.

What I Learned

The style guide defined colors in HSL and included a linear gradient. The linear-gradient is a CSS function that allows you to create a transition between two or more colors along a straight line. You can choose the direction or angle of the transition. For two of the buttons and toggle, the gradient moves from left to right. The professional plan card moves from top to bottom.

I used two structural pseudo-classes in CSS to create the design. The :first-of-type and :last-of-type selectors allow you to target the first and last occurrence of an element in a container.

Bootstrap has a toggle switch available. It was not customizable with CSS. You have to compile custom Bootstrap in order to change how it looks. I found CSS toggle solution that works like the design. I modified it to work with my CSS.

Frontend Mentor asks developers to post their solutions to their site. If you get stuck on a project, you can look at their solution to see how they approached it.

You can see my version of the pricing plan with toggle.

6 Tips For Debugging Your Code

Why isn’t my code working? When you write code, that is a question you will be asking yourself frequently. To find the problem, you will need to debug your code. Here are a few strategies to help you find the bugs in your code.

6 Tips For Debugging Your Code
Image by JohnArtsz from Pixabay

When you code isn’t working, try creating a few print statements. A simple message like “Got here!” can tell you if your code is doing what you expect it to. Whether you send the message to your window, page or console.log, simple print statements can help you determine find problems.

Run your code after making a small change

Small changes are easier to find problems than in code that you spent all day writing. When you make a bunch of changes at once, it can be difficult to figure out which one is causing the error. You may be forced to undo everything that you did and put it back one item at a time until you find the error.

Read the error message

Most error messages tell you what the problem is and where to look.

Copy the error message and search online for an answer

Sometimes you get an error message that makes no sense to you. By copying it and entering it into your favorite search engine, you may find the solution. Someone may written about it on Stackoverflow.com or their own blog.

Comment out the code

When you didn’t know exactly where the problem is, comment out your code and rerun. If it works, uncomment a line of code and run it again. Keep repeating until you find the problem.

Read your code

When you can’t find the error, read your code. Forwards. Backwards and out load if you need to. It may be as simple as a typo. If your missing a semicolon or using the wrong character, your code may compile and still not work. Use your eyes to double check your code.

Talk to someone about the problem

Sometimes, explaining the problem to another person can help you figure out the problem. If you can’t find a person to talk to, you can use the a rubber duck or action figure instead.

More Debugging Tips and Tricks

Notes on JavaScript Frameworks

A framework is a standard way to build and deploy applications. It provides code libraries, tool sets, apis and more. JavaScript frameworks make it easier and fun for developers to write code.

Notes on JavaScript Frameworks
Image by Alltechbuzz from Pixabay

If you build apps in JS, you have different frameworks to choose from. React, Vue and Angular are three popular choices. How do you choose? It depends. If you are working on a side project, you get to choose. When you work for a company, the choice may be made for you.

In the Ladybug Podcast entitled React, Vue && Angular, Oh My!, Kelly Vaughn, Ali Spitel and Emma Bostian share which frameworks they like and when to use them. For side projects, you may want to consider Vue or React. React is flexible and allows you to interact with other libraries and frameworks. When you need this type of flexibility, React is a good choice. If you are working on an Enterprise App with a team, Angular is the better choice.

If you have a framework that works for you, why switch to something else?

“Frameworks are not tools for organizing your code, they are tools for organizing your mind.” – Rich Harris

Building applications with Svelte

Svelte is a tool for building fast, small web applications using languages that you already know – HTML, CSS and JavaScript. It is similar to JavaScript frameworks like React and Vue. The difference is the type of code you write. Svelte converts your code into Vanilla JavaScript at build time instead of interpreting it at run time.

With Svelte, you can build an entire app or slowly add it to an existing codebase. Also, you can create components as standalone packages that work anywhere without depending on a conventional framework.

Rethinking Reactivity in JavaScript and Apps

Which framework is right for you? The one that works for you.

Image by Alltechbuzz from Pixabay

Programming With a Free API

What is an API? An application programming interface acts as an intermediary between your application and the API’s server. You request information from the server and it gives you information that you requested. When you get the data that you need, you can build a front-end design to display the information in a readable format.

Programming with a Free API
Photo by Flickr from Pexels

Find An API

You can use websites like Programmable Web, RapidAPI or API List. While you are evaluating APIs to use, consider whether or not you want to pay to use it. You can find free APIs for your projects.

Farmsense API

I found a free API on ProgrammableWeb called Farmsense. Farmsense provides three APIs to farmers: Day Lengths, Frost Dates and Moon Phases. I used the Moon Phases API to display the current phase of the moon.

Farmsense API Demo

Farmsense API uses the date to tell you what phase the moon is in, what percentage of full it is, how long the day is and more.

When I reviewed the AstroWidget, it shows way more information than I want. I wanted to display the current phase of the moon using HTML, JavaScript and CSS. First, I sketched out a design so that I would know what I wanted to build. Then, I read the API’s documentation. Farmsense API doesn’t require an API key. It does requires the current date.

I used JavaScript to get the current date and choose Milwaukee, WI as the location. Farmsense requires your location in longitude and latitude. To simplify, I decided to use one location.

Getting the Data From the API

How do you get data from the API? It returns the data in JSON. Instead of using the Astro-Widget’s method of retrieving the data, I used the JavaScript Fetch API to get it. The Fetch API made it simple and easy to retrieve the data and put it spots I wanted it.

The API doesn’t include images of the moon in each phase. I found icons of Moon Phases on Icons8. Then, I wrote a JavaScript function to determine the moon phase and displayed an icon image that closely matches the phase.

Screenshot of Moon Phase - Dec. 2, 2019

APIs let you work with data to create something more interesting. With HTML, CSS and JavaScript, you can create a simple user interface that retrieves data from an API. No database required for you to maintain. You can get start learning how to work with an API quickly. Have you built something fun with an API?

More Tips to Help You Program Better

Programming can be fun and challenging. Every programmer has their own list of tips, tricks and tools that help them solve problems and build things. Reading code, writing code, working with a team and taking breaks from coding all help you to improve your code. The collection below includes these tips and more.

More Tips For Programming Better
Photo by Kevin Ku on Unsplash

All my best programming tips

Jason Swett shares his best programming and debugging tips. He reminds you to work on one thing at a time, use clear names for things, don’t allow yourself to stay stuck and close unneeded tabs.

Top 5 tips to be a better programmer without programming!

You can become better at programming by focusing on your health and well being. Luke Garrigan talks about why you need to sleep, get moving, take breaks away from the computer and more.

10 Ways to Become a Better Developer

Whether you work on a team or as a freelance programmer, you need to work with or for others. Elizabeth at Praxent share her tips for being a better developer by embracing “teams”, how to say “no” to others, code for the future and make sure you do some coding for fun. Use it to explore ideas and problems that interest you.

10 Tips for Better Coding

Writing code can be difficult. You want to stay organized and embrace practices and process that help you write better code. In 10 Tips For Better Coding, Abdullah Abouzekry gives you tips that you can incorporate into your coding practice.

8 Ways to Become a Better Coder

Esther Schindler shares her eight actionable ways to become a better programmer. Her tips include how to read code, write code for fun, work with other developers and learn techinques instead of tools.

Whether you are a beginner or more experience programmer, sometimes you need to be reminded on what you can do to write better code.