DEV Community: Christopher Ninman

Consider This Before Starting Your Spotify API Project

Christopher Ninman — Tue, 14 Jun 2022 17:46:23 +0000

The Spotify API is home to an incredible wealth of information about artists, albums, and songs, as well as individual Spotify users. If you are a Spotify user, you know obviously know how amazing it is to have access to almost any music ever released in one place. As a developer, it is exciting to know that all that information is available for you to use, too. But not in the snap of a finger. If you have not tried your hand yet at developing an app using the Spotify API, this article will attempt to tackle some of what you can expect, and hopefully help you decide if the effort is worth your time.

CONSIDERATION #1: You Need a Spotify Account

Head to the Spotify Developer Dashboard and log into your Spotify Account. Once logged in, you'll have the opportunity to "Create An App". You will find that you have a "Client ID", and a hidden "Client Secret". These will be used when making requests to the API. The process of registering your App to get started is remarkably simple.

CONSIDERATION #2: Using OAuth

If you are unfamiliar with OAuth, you may be in for a world of frustration here, though it is no doubt a good skill to add to your arsenal. Basically, what you need to do is create a multi-faceted custom link which contains your client ID, multiple scopes, and a redirect link. A user will click and be sent to this link, where they will log into Spotify and give permission for your app to access various information from them, which you have declared in your scopes. Once they have logged in and granted permission, they will be sent to your redirect link and the URL will now contain and "code" param which you'll need to use to get an access token.

NOTE: Make sure any redirect link is registered on your app's dashboard under the Edit Settings > Redirect_URIs section.

CONSIDERATION #3: Using .env Variables

You obviously don't want to share your Client ID and especially your Secret Client ID with just anyone who's using your app. You'll need to keep them hidden in a .env variable, another new concept for coding beginners. And the setup of a .env variable will almost certainly differ from your development phase to when you deploy it.

CONSIDERATION #4: Development vs. Deployment

Just as your .env setup will differ, you'll also have to consider how your redirect links from Spotify will work. When developing, you'll be redirecting Spotify to "localhost:3000" or something similar, which will change once you have deployed your app and are sending it to the "herokuapp.com" url. Seems simple in theory, but in my experience caused more headache than expected.

CONSIDERATION #5: Getting an Access Token

In order to make a request that returns data from the Spotify API, you'll need an access token. You'll need to exchange the "code" param that was returned earlier to get an access token. This "code" will be used in a fetch request along with your Client ID and Secret Client Id (which you'll want in a .env variable). The Spotify documentation states that you will need to Base64 encode and set the 'Content-Type' to 'application/x-www-form-urlencoded'.

As a student at a programming bootcamp, my requirement was to use Rails as the backend of my project. Days of frustration over trying to properly Base64 encode my IDs, only to finally succeed when finding a blog that I had previously dismissed because it did not have any Base64 encoding done, and seemed to be outdated as it doesn't seem to match up with the Spotify documentation. Which leads to:

CONSIDERATION #6: Using a Library

Depending on which programming language you're planning to use, someone may have already made the process easier for you. Spotify has actually compiled a list of libraries in their docs which can be a huge help. I recommend checking out any libraries specific to your planned language.

CONSIDERATION #7: Follow Along With a Youtube Video

There are many walkthroughs on Youtube for how to implement the Spotify Authorization Flow and create an app. There is a lot to explain, so be prepared to be flown through the essentials. And you may get lost if you stray from their flow, or are using a different setup.

CONSIDERATION #8: The Access Token is Only Valid for One Hour

You will rejoice once you finally receive an access token and can make your first API call. But be warned, that access token will only work for 1 hour, and will then expire.

When you receive your access token, you will also receive a refresh token. Whenever your user's access token is expired (or almost expired) you'll need to use the refresh token to make a request to the Spotify API to receive another access token. So you'll have to figure out a clever way to make sure that your user never ends up with an expired access token where their request for information returns a 401 error and they wonder why they ever decided to use your app.

CONSIDERATION #9: Development Mode

You finally have your app deployed and out there for the world to use. So why can't they use it?

Your app is automatically considered to be in the development phase by Spotify, which means:

Your application is limited to 25 users (Spotify accounts)
Each of those users must be added to the "Users and Access" section on the dashboard
A limited number of requests can be made to the API within any given 30 seconds

CONSIDERATION #10: Extended Quota Mode

In order for your app to be used by anyone (at least to make calls to Spotify API), you'll need to submit a "Quota Extension Request". "Submitting a quota extension request will trigger a review by Spotify to ensure your app complies with the Spotify Developer Policy."

This means that Spotify has the right to disable or block your app from being used by the general public if it isn't up to their standards. Additionally, any changes made to the your app's OAuth scopes will require another Quota Extension Request, and you are currently limited to one such request.

FINAL VERDICT

Navigating the Spotify API will consume a great deal of your time, unless you are already a seasoned veteran. If you are planning a small project or just interested in toying around with the Spotify API, you may find yourself investing way more time and energy than it is worth.

However, if you are passionate about your music and really interested and dedicated to creating an app that allows people (and yourself) to experience music in a new way, you will be hard-pressed to find a more expansive and organized database to help you accomplish your vision. And you will be certain to learn many new coding concepts along the way.

Sounds appealing?

Photo by Thibault Penin on Unsplash

CSS Styled React Components

Christopher Ninman — Tue, 14 Jun 2022 15:53:56 +0000

You're making React Components that have all the information that you had planned. The problem is that they're not looking how you had envisioned. We'll be taking a look at the options of styling your components without the need to download outside libraries.

What We're Starting With

For the remainder of this article, we'll be using a React Component with an image, an h1, and an h2. It will remain constant throughout, and we'll style it the same each time. We'll just use different methods to accomplish that.

Our barebones React Component without any styling:

import casaDelArbol from '../images/CSS-in-React.JPG'

function StyledReactComponent() {
  return (
    <div>
      <img src={casaDelArbol}/>
      <h1>Casa Del Arbol</h1>
      <h2>Banos, Ecuador</h2>
    </div>
  );
}

export default StyledReactComponent;

Which gives us:

We have a div that contains three elements: our img, h1, and h2. Our image is named "CSS-in-React.JPG" and is located in a folder called "images". We are importing it from there into our StyledReactComponent and giving it the name casaDelArbol.

How We Want Our Component To Look

Here's what we want to change in our component:

DIV

Change the background color
Give it a border
Round the corners

IMG

Make it smaller, not covering entire div
Give it margins
Round the corners

Center the text
Underline the text
Change the color
Decrease the margins

Center the text
Italicize the text
Change the color
Decrease the margins

OPTION #1: Inline Styling

We can style each element right inside the JSX of that component. We'll need to use the following syntax to achieve that:

style={{}}

A few things to note:

Make sure to use double curly brackets
CSS attributes are camelCase (text-align becomes textAlign)
A colon follows the attribute name
Attribute values are inside quotes
Multiple attributes can be used, separated by a comma

Here's our component using inline styling:

function StyledReactComponent() {
    return (
        <div style={{backgroundColor: ' #F8F0E3', width: '400px', border: '5px solid #6C5B7B', borderRadius: '10px'}}>
            <img style={{width: '90%', marginRight: '5%', marginLeft: '5%', marginTop: '10px', borderRadius: '5px'}} src={casaDelArbol}/>
            <h1 style={{textAlign: 'center', margin: '3px', color: '#355C7D', textDecoration: 'underline'}}>Casa Del Arbol</h1>
            <h2 style={{textAlign: 'center', margin: '3px', color: '#6C5B7B', fontStyle: 'italic'}}>Banos, Ecuador</h2>
        </div>
    );
}

Which returns:

We can hit enter and rearrange our code to place attributes on separate lines, but if we're using multiple attributes, inline styling can quickly make our code much more difficult to read. Inline styling is the quickest and easiest method to implement, but is best served in limited use. A possible example would be when you just want to change the bottom margin of an element.

OPTION #2: Inline Styling Using Variables

We can clear up our code a bit by creating a variable for each styled element with all our style attributes.

function StyledReactComponent() {

  const styledDiv = {
    backgroundColor: ' #F8F0E3', 
    width: '400px', 
    border: '5px solid #6C5B7B', 
    borderRadius: '10px'
  }
  const styledImg = {
    width: '90%', 
    marginRight: '5%', 
    marginLeft: '5%', 
    marginTop: '10px', 
    borderRadius: '5px'
  }
  const styledH1 = {
    textAlign: 'center', 
    margin: '3px', 
    color: '#355C7D', 
    textDecoration: 'underline'
  }
  const styledH2 = {
    textAlign: 'center', 
    margin: '3px', 
    color: '#6C5B7B', 
    fontStyle: 'italic'
  }

  return (
    <div style={styledDiv}>
      <img style={styledImg} src={casaDelArbol}/>
      <h1 style={styledH1}>Casa Del Arbol</h1>
      <h2 style={styledH2}>Banos, Ecuador</h2>
    </div>
  );
}

Note: Within our JSX, when we define our style={variable}, we need to use single brackets.

OPTION #3: Define a className and use CSS file

This is the method recommended in the React Docs, in which they state that "CSS classes are generally better for performance than inline styles."

Inside our CSS file:

.styled-div {
  background-color: #F8F0E3;
  width: 400px;
  border: 5px solid #6C5B7B;
  border-radius: 10px;
}

.styled-img {
  width: 90%; 
  margin-right: 5%; 
  margin-left: 5%; 
  margin-top: 10px; 
  border-radius: 5px;
}

.styled-h1 {
  text-align: center; 
  margin: 3px; 
  color: #355C7D; 
  text-decoration: underline;
}

.styled-h2 {
  text-align: center; 
  margin: 3px; 
  color: #6C5B7B; 
  font-style: italic;
}

And our squeaky clean React component:

function StyledReactComponent() {

  return (
    <div className='styled-div'>
      <img className='styled-img' src={casaDelArbol}/>
      <h1 className='styled-h1'>Casa Del Arbol</h1>
      <h2 className='styled-h2'>Banos, Ecuador</h2>
    </div>
  );
}

A few things to note:

className is camelCased in our React component
className is declared inside quotes
The dot prior to the class-name in our CSS file denotes that it is a class
Attributes in CSS have a dash when containing multiple words
CSS does not contain quotes or commas

Make sure to import your CSS file into your React project. If you are using one file, such as the index.css file to define all your styling for the project, you can import it at the top of your App component, the highest level component.

import '../index.css';

import './index.css';

depending on the location of the CSS file.

Another option is to create a CSS file specifically for this component, which contains all styles relevant to it. This CSS file can then be imported at the top of our StyledReactComponent file.

Happy coding!

VSCode Like a Pro on Your Mac

Christopher Ninman — Mon, 13 Jun 2022 21:21:56 +0000

You’ve made the big decision to learn how to code. Your workspace is set up and you have started learning some of the big concepts of programming. You watch as your instructors or favorite YouTube teachers jump through their code with speed and wonder how they did it.

Well, you are a programmer now, and you should look and feel like it. In time, your mousepad will begin to feel like it slows you down and you’ll do most of your navigating on your new best friend, your keyboard. Here is a walkthrough of some of the commands you’ll be using the most on your journey using VSCode on your Mac.

Flip Through Open Apps

Command-tab

This command will bring up a list of all open applications. Hold Command and press tab to select the next program to the right. Release Command when you have selected the desired app. Apps will be arranged from left to right in the order that they were last opened. Using Command-shift-tab will cycle through open applications from right to left.

Flip Through Tabs

Control-tab

Once you are in VSCode or in your browser, hold Control and press tab to cycle through all open tabs. In VSCode, this will be all files that are currently open. In Google Chrome, or your browser of choice, it will cycle through all open tabs. Use Control-Shift-tab to cycle from right to left.

Zoom In/Out

Command-plus / Command-minus

This command will work in VSCode or your browser, as well as many other programs. If you are creating a screen recording, this can be a particularly helpful command in order to quickly zoom in or out and more easily see what you are working on.

Undo

Command-Z

In my short life as a programmer, this is the most used command in my arsenal - UNDO!!! Trying to code a new idea or refactor one that’s already there, only to discover that it really was not a good idea and you want humanity to forget that it ever happened. Hold Command and press Z to your heart’s content. Alternately, Command-Shift-Z will allow you to redo any changes that you undid. This is not strictly for VSCode. Command-Z will work in your browser/Google Docs/etc…

Save

Command-S

Save often!!! Seriously.

Go To Top/Bottom of Document

Command-Up / Command-Down

Quickly head to the first line or the last line of the current document in a fraction of a second.

Go To First/Last Character Of The Line

Command-left / Command-right

This command has increased my productivity tenfold(ish). Let’s say that I need to remove a bracket at the end a long line of code. Rather than switching over to my mousepad and clicking at the end of the line, all I need to do is to make sure to navigate my cursor to the proper line and press Command-right to send my cursor to the last character of the line. Or if I need to indent a line of code to make it more readable, once I’m on the correct line, I can press Command-left to move my cursor to the beginning of the line.

Highlight A Section Of Code

Shift-direction

Holding Shift plus up or down will highlight an entire line of code. If you have a five-line function that you need to copy or move, once your cursor is positioned at the beginning of the function, hold Shift and press down five times until you have arrived at the end of the function. Hold Shift and press right to highlight the next character to the right (or unhighlight if it already is.)

Highlight All Text Until the End Of The Line Or File

Command-Shift-direction

This command will allow you to navigate in the same manner as using Command-direction, but will simultaneously highlight the text as well.

Let’s say you want to select all text until the end of the line without including the closing bracket. From the start of the line, press Command-Shift-right to select the entire line, then press Shift-left to unhighlight the bracket which is the final character of the line.

Search For A File

Command-P

You’ve moved beyond a single JavaScript file for your project and need to move between many files. Command-P allows you to search for a file based on its name.

Search For A Term Within a File

Command-F

Now where did I call that function? Press Command-F to open the search bar for the current file.

Search For A Term Within All Files

Command-Shift-F

I remember declaring a variable with a certain classname somewhere, but it could be anywhere. Press*Command-Shift-F* to open the search bar for all files in your application.

Move Line Up/Down

Option-Up/Down

There’s no need to cut and paste every time you need to move some text to another location. Press Option and Up (Down) to move a line of code up (down). If you have multiple lines of code highlighted, all of those lines will be moved.

Toggle Word Wrap

Option-Z

Lines of code can get pretty long. If there isn’t a good space to hit Enter and start a new line, you may want to use word wrap to make each line of code wrap onto the following line whenever it goes beyond the width of your VSCode window. Option-Z allows you to switch quickly between wrapping the text or not.

View/Change User Settings

Command-comma(,)

One of the beautiful things about programming is that there is rarely one correct way to do it. Within the confines of a computer language, you can find your own style. Command and , will bring up all your VSCode personal settings. One option for personalization is selecting your default number of spaces when pressing tab. Default is 4 spaces, I (many others) prefer 2 spaces. Whatever makes sense for you is just fine.

Toggle Sidebar Visibility

Command-B

At times you need to see all the files you have in the sidebar, but once you have selected one, they take up too much space and are distracting. Command-B allows you to quickly toggle between showing or hiding the sidebar .

Find All Matching Terms In The File

Command-D

Another command to greatly increase productivity. Let’s say you have a variable that is used 15 times in a file. You realized, for whatever reason, that you want/need to change its name. If you forget to correctly change a single one of those fifteen instances, your program will not work as planned (or at all). Select the text you want to change, then hold Command and press D to select the next instance in which that exact text is used. Each time you press D, the next instance of that text will be highlighted as well. Now you can change all fifteen instances of that variable at the same time.

Best of luck in all your future coding endeavors!!!

Photo by Ales Nesetril on Unsplash

Building a Rails API to Track Student Progress

Christopher Ninman — Fri, 08 Apr 2022 01:03:01 +0000

What is the most difficult thing about being a teacher? Actually, that's a trick question. Everything is difficult, hence, my switch to becoming a software developer. But one of those difficult teacher tasks is gathering data, as a means to guide your instruction, along with a way to show parents that you know their children well. As a teacher, I was always hoping to find the balance of a fun, engaging app that actually taught my students, while giving me some information about them after they finished.

As a 3rd grade teacher, I tried to make sure every one of my students was able to walk away with the ability to recite their multiplication facts in no time. But it was difficult to keep track of what each of them knew. So, after a switch to programming, I began my quest to create an application that could track students' knowledge of the times tables.

The Database

I'll be covering the set up of the database using Ruby on Rails and ActiveRecord. Setting up the frontend is a whole other story, but what we're really after here, and what a teaching application should create, is data.

The structure of a classroom lends itself easily to being created using Active Record associations. Here is how we can set up our models:

Teacher model - has_many :classrooms, has_many: students, through: :classrooms

Classroom model - has_many :students, belongs_to: teacher

Student model - belongs_to: classroom

As a teacher, sometimes you need data on individual students, other times you'll need data on your whole classroom. Think about how you'll want to access the data throughout whatever app you have planned.

If you want the teacher to have simple access to all of their students, you can include that association.

class TeacherSerializer < ActiveModel::Serializer
  attributes :id, :username, :is_teacher

  has_many :classrooms
  has_many :students, through: :classrooms

end

With this set up through your ActiveRecord associations, an array of students will now be available at the first level of your data that you fetch, along with all of the data they hold. Though you can serialize their data and return their classroom_id, they will not be nested in the second level within a classroom. You'll need to handle that logic on the front end.

Another option is to take away the has_many :students, through: :classrooms association, and instead serialize your classroom data to include the students.

class TeacherSerializer < ActiveModel::Serializer
  attributes :id, :username, :is_teacher
  has_many :classrooms
end


class ClassroomSerializer < ActiveModel::Serializer

  belongs_to :teacher
  has_many :students

  attributes :id, :classroom_name, :students

Create a Problem model

In my case, building an app to track student knowledge of the times tables, I created a Problem model, with 100 entries, each one containing a problem (string: "6 x 7"), and an answer (integer: 42).

In order to create student data to track, I needed to create a joins table through my ActiveRecord associations to keep tabs on a student's progress.

Create a Mastery model

The Mastery model is a table created to house a student's data on each of the entries in the Problem model. (You could alternately think of this as a Quiz model, rather than one single problem.)

Now to set up the joins the table:

class Problem < ApplicationRecord
  has_many :masteries
  has_many :students, through: :masteries
end

class Student < ApplicationRecord
  has_many :masteries
  has_many :problems, through: :masteries
end

class Mastery < ApplicationRecord
  belongs_to :student
  belongs_to :problem
end

Each time a student takes a quiz, you can create a new instance of a Mastery (or Quiz), giving it attributes such as :times_answered, :times_correct, :mastery_level, or custom methods, such as :mastery_percentage. And thanks to our associations, each instance of a Mastery will also have a :student_id and a :problem_id.

In the case of the multiplication tables, students will review facts multiple times, so their scores can be updated regularly to reflect how many times each fact was answered and how many times it was answered correctly.

Customizing our Data

Now comes the fun part. What sort of data do we want our teachers to have access to? We can build custom methods to return whatever we think will be valuable information about the students.

class Student < Application Record

  def mastery_percentage 
    self.masteries.average(:total_score).to_f
  end

  def difficult_facts
    self.masteries.where("total_score" < ?", 20) 
  end

end

In the first method, we make a call to the database, which will return to us a method for each student, searching through each of the student's Masteries, and returning the average of all of them. In the second custom method, we're returning a custom list that searches through each student's masteries and finds all cases where their :total_score is less than our chosen number.

Just make sure you add your custom defined method into your Student serializer.

class StudentSerializer < ActiveModel::Serializer
  attributes :id, :username, :mastery_percentage,  
  :difficult_facts, :classroom_id, :masteries,

  belongs_to :classroom
  has_many :masteries

end

Teachers deserve all the help they can get. Educational apps with well thought out databases are just what those teachers are looking for.

Photo by John Schnobrich on Unsplash

Sinatra: Accessing Data and Methods with {include:}

Christopher Ninman — Thu, 10 Feb 2022 22:36:52 +0000

So you've been using ActiveRecord/Sinatra for your backend and have come up with a clever method to filter your database and achieve world peace. Or maybe you just created a Class method to calculate the average rating of a particular location in your app, like me. Good for you!!! But now what? How can you access that brilliant/less brilliant but useful information?

My Project

I like to have something tangible as an example when trying to learn a new concept. So here's a brief scenario (part of a project that I created during bootcamp) to be our spirit guide:

The backend contains these Models:

City has_many :users, has_many: locations
User belongs_to :city, has_many :reviews, has_many :locations, through: :reviews
Location belongs_to :city, has_many :reviews, has_many :users, through: :reviews
Review belongs_to :location, belongs_to :user

Each user can write a review for a location. This review includes a rating, which is an integer between 1 and 5.

Several Users have written Reviews for the Location, so now our location has several Reviews. Luckily, ActiveRecord has given us a very non-original, but ridiculously simple, way to calculate a Location's rating.

Class.average(:attribute)

Creating Our Method

Time to put the Class.average method to use in our current scenario

class Location < ActiveRecord::Base
  belongs_to :city
  has_many :reviews
  has_many :users, through: :reviews

  def average_rating
    self.reviews.average(:rating).to_f
  end
end

// Assuming you'll want to use that average as a decimal,
// we're calling `to_f` on our 'average_rating'

Previously we had access to instance methods on instances of locations, such as Location.first.reviews, Location.first.users, Location.first.reviews.first, etc. Now we have an additional method we can call on our Location instances: Location.first.average_rating. This will return us the average of all the ratings that have been given in the Reviews of that instance.

How Can I Get That to My Front-End?

Let's begin by taking a look at our Locations Controller, and what we can access when we make a fetch request to our backend.

class LocationsController < ApplicationController

  def serialize_locations(objects)
    objects.to_json(include: [:reviews, :users, :city])
  end

  get '/locations' do
    serialize_locations(Location.all)
  end
end

// Rather than calling 
// Location.all.to_json(include: [:.......]),
// we are using the serialize_locations function to do 
// that work, as we may want to reuse that logic in other
// fetch requests we make, such as '/locations/:id', or 
// post, patch, and delete requests

Since we may want access to the Location instance's reviews, users, and city information, we're using include: and an array of it's connected models. We could now call something like Location.first.city.name and have access to the name of the city where the Location belongs.

The problem is, we still can't access the average rating of a Location instance.

Time to Access the Method

We can dig further and further into our data and create nested routes using include:, example: calling include inside of the Location's Users and including the Location's User's Review. Check out this great post for more info.

But there is something else that we can include: methods

class LocationsController < ApplicationController

  def serialize_locations(objects)
    objects.to_json(include: [:reviews, :users, :city], methods: :average_rating)
  end

  get '/locations' do
    serialize_locations(Location.all)
  end
end

We have included an array of related tables, along with the named method (average_rating) inside our Locations class.

id: 1,
location_name: "Prospect Park",
city_id: 2,
neighborhood: "Paradise Creek",
times_visited: 8,
average_rating: 3.25,
+reviews: [...],
+users: [...],
+city: {...}

Oh, you actually have several methods that you created in your Location class that you want? Let's include an array of methods!

  def serialize_locations(objects)
    objects.to_json(include: [:reviews, :users, :city], methods: [:average_rating, :sum_times_visited])
  end

Photo by fabio on Unsplash

React Quiz with Unlimited Questions

Christopher Ninman — Sun, 12 Dec 2021 02:02:15 +0000

Wouldn't it be awesome if you could create a quiz app that wouldn't require you to write hundreds of questions along with a correct response and multiple incorrect responses? Though this is by no means the only way to make this happen, here is an solution to make it work.

Before you continue on to find out how, here is the caveat: This method requires the same question each time, and in turn generates multiple buttons with one correct response and all others incorrect. I'll give you an example of how I used this method, and then explain how.

My Project

My 4-year-old son is currently obsessed with world flags, which inspired me to create a React App with information about flags, population, capitals, and continents. After exploring the site, users can take quizzes for each category.

I used the Rest Countries API to get data about each country for each of the categories above.

In order to create a quiz on flags, I used the countries data to create a flag image, along with four buttons, one with the country that corresponds to the flag image, and three other random countries. In another div is the 'Next' button.

Data Fetch

Using your API of choice, make a GET request and save the data, or whichever part of the data that will be useful to you, to a state variable. A regular old variable should work for what we're doing here as well. If you decide to make a state variable, import and run useEffect to make your data fetch, and include an empty dependencies array so that your fetch only runs once.

const [countries, setCountries] = useState([])

useEffect (() => {
  fetch('https://restcountries.com/v3.1/all')
    .then(res => res.json())
    .then(data => {
      const unMemberCountries = data.filter((country) {
        country.unMember === true 
      }
    setCountries(unMemberCountries)
  })
}, [] )

Additional State Variables

We're going to need a lot more state variables. In my case, I added seven more. One for the country that is the correct answer, and three incorrect ones, along with state variables to keep track of the question number, score, and whether or not a question has been answered. The four countries are set with a function to choose a random country from the array of countries saved in the countries variable.

 const [flagQuizCountry, setFlagQuizCountry] = useState(countries[Math.floor(Math.random()*countries.length)])
  const [incorrectFlagOne, setIncorrectFlagOne] = useState(countries[Math.floor(Math.random()*countries.length)])
  const [incorrectFlagTwo, setIncorrectFlagTwo] = useState(countries[Math.floor(Math.random()*countries.length)])
  const [incorrectFlagThree, setIncorrectFlagThree] = useState(countries[Math.floor(Math.random()*countries.length)])
  const [flagResponseGiven, setFlagResponseGiven] = useState(false)
  const [currentFlagQuestion, setCurrentFlagQuestion] = useState(0)
  const [flagQuizScore, setFlagQuizScore] = useState (0)

Create your buttons

In your JSX, create four buttons. Each button should have its value set to equal the text inside the button. So if I'm asking "Which country's flag is this?" I have four buttons that are set to my state variables: flagQuizCountry (correct answer), incorrectOne, incorrectTwo, and incorrectThree. Then in a following div, add your 'Next' button.

<div'>
  <ul style={{display: 'flex', flexDirection: 'row', justifyContent: 'center'}} 
    <li>
      <button 
        value={flagQuizCountry.name}
        onClick={handleFlagAnswer} > 
        {flagQuizCountry.name} 
      </button>
    </li>
    <li>
      <button 
        value={incorrectOne.name}
        onClick={handleFlagAnswer} > 
        {incorrectOne.name} 
      </button>
    </li>
    <li>
      <button 
        value={incorrectTwo.name}
        onClick={handleFlagAnswer} > 
        {incorrectTwo.name} 
      </button>
    </li>
    <li>
      <button 
        value={incorrectThree.name}
        onClick={handleFlagAnswer} > 
        {incorrectThree.name} 
      </button>
    </li>
  </ul
</div>
<div>
  <button onClick={flagOnClick}>Next</button>
</div>

And here comes someone else creative solution that I found to randomize the button order. My gratitude to the wise thinker who posted this solution here. Create each of your buttons inside a li tag, and place all the buttons inside a ul tag. Then use this code to randomize the order of the items in the list.

function randomizeItems(items) {
  let cached = items.slice(0), temp, i = cached.length, rand;
  while(--i) {
    rand = Math.floor(i * Math.random());
    temp = cached[rand];
    cached[rand] = cached[i];
    cached[i] = temp;
  }
  return cached;
}

function randomizeList() {
  let list = document.getElementById("capital-quiz-buttons");
  let nodes = list.children, i = 0;
  nodes = Array.prototype.slice.call(nodes);
  nodes = randomizeItems(nodes);
  while(i < nodes.length) {
    list.appendChild(nodes[i]);
    ++i;
  }
}

Style your buttons as you see fit, but make sure that you style your ul in the following fashion to take away the bullet points.

ul {
  list-style-type: none;
  padding: 0;
}

Add an onClick event to each button which calls something similar to the following function.

function handleFlagAnswer (event) {
    if (flagResponseGiven === false) {
      if (event.target.value === flagQuizCountry.name.common) {
        setFlagQuizScore(flagQuizScore + 1)
      } 
    setFlagResponseGiven(true)
    }
  }

The function will only run if no response has been given yet, and we will set the responseGiven to true onClick. If the button's value equals the flagQuizCountry, a point will be added the flagQuizScore.

Now we need a function that will run when we click the 'Next' button. We'll set each of our four buttons to a new random country. We'll increase the 'currentFlagQuestion' by one, reset 'flagResponseGiven' to false, and set limits for however many questions we want on the quiz, and then decide what you want to do once the end has been reached.

function setNextFlagQuestion () {
  setFlagQuizCountry (countryData[Math.floor(Math.random()*countryData.length)])
  setIncorrectFlagOne (countryData[Math.floor(Math.random()*countryData.length)])
  setIncorrectFlagTwo (countryData[Math.floor(Math.random()*countryData.length)])
  setIncorrectFlagThree (countryData[Math.floor(Math.random()*countryData.length)])

  let nextQuestion = currentFlagQuestion + 1
  setCurrentFlagQuestion(nextQuestion)
  setFlagResponseGiven(false)
  resetButtonColors()
  if (currentFlagQuestion >= 25){
      // insert desired outcome
  }
}

If you have a quiz that can use the same question each time, you now have a limitless number of randomized quiz questions.

Photo by Ana Municio on Unsplash

DOM Selectors in JavaScript

Christopher Ninman — Mon, 08 Nov 2021 21:50:26 +0000

While creating interactive content with JavaScript, you will often find yourself needing to access various HTML elements in order to make changes to them. We'll go through some of the main ways you can grab elements in the DOM, and how you can make use of what they hold.

Different Types of Selectors

ID

If you want to manipulate one single element, the easiest and most straight-forward approach is to find that element by id. Only one HTML element can have a specific id attribute, and each ID is unique to one element.

Class

Multiple elements can be grouped together when they are given the same class name. An example would be if you have multiple buttons that serve the purpose of deleting content, and you want all of those buttons to be manipulated in the same manner.

Tag

Some common tags in HTML are body, h1, p, div, span, and img, though there are numerous others. Another DOM selector is tagName, which selects elements based on the type of element they are.

Accessing an Element by ID

In order to access an element with a specific id, you have a few options. You can either use:

document.getElementById('element-id')

document.querySelector('#element-id')

Either option will search the entire document and return the element with a matching id as an object. If no element with the given id is found, null will be returned. If you encounter a TypeError: Cannot read properties of null, it is likely that no element with that id was found.

You can also use these methods to create a variable, and then manipulate the DOM by calling that variable.

let foundElement = document.getElementById('first-header')
foundElement.style.color = 'blue'

If an element does not exist in the HTML file and is created using JavaScript, you can still give that element an id using JavaScript with the following syntax:

let createdWithJsElement = document.createElement('p')
createdWithJsElement.id = 'js-element'

Accessing an Element by ClassName

Similar to accessing an element by id, you have a few choices for selecting elements by class. You can access elements by class name with the following methods.

document.querySelector('.element-class')

This will return only the first element that matches the specified class name.

document.getElementsByClassName('element-class')

The use of getElementsByClassName will return a live HTMLCollection of all the elements matching that class.

document.querySelectorAll('.element-class')

Using the querySelectorAll method will return a static NodeList of all the elements matching that class. Distinguishing between a NodeList and an HTMLCollection is a whole other topic which you can explore here.

Note the use of a dot prior to the class name, as opposed to the hash-tag prior to doing a query selector on an id.

In order to manipulate every element that is returned from the getElementsByClassName or querySelectorAll methods, you'll need to run a for loop to iterate the array-like object and make the desired changes to each element.

let allButtons = document.getElementsByClassName('button')

function testButtons () {
  for (let i = 0; i < allButtons.length; i++) {
    console.log(`I am button ${[i+1]}`);
  }
}

You can create or change an element's class, or other attribute, by accessing that element by its [index].

allButtons[5].className = 'delete-button'

Accessing an Element by TagName

Yet another way to select elements in the DOM is to select the elements by their tag name.

let allParagraphs = document.getElementsByTagName('p')

You can get even more specific with your search for specific elements based on tag name. Suppose you want to change the color of the text in all the paragraphs of a "Skills" section. You can search for elements by tag name within a specific div.

const mySkills = document.getElementById("skills-div");
const skillParagraphs = mySkills.getElementsByTagName("p");

Like when the getElementsByClassName method is called, getElementsByTagName will return a live HTML collection of elements. This can be iterated over with a for loop just like the list of elements gathered with the getElementsByClassName method.

Wrapping It Up

If you can't precisely locate elements, you'll have difficulty making your JavaScript code come to life. These selectors are just the tip of the iceberg for making your creations dynamic.

Photo by Max Duzij on Unsplash