DEV Community: Desmond Owusu Ansah

Build a number guessing game in Ruby

Desmond Owusu Ansah — Mon, 19 Sep 2022 01:16:24 +0000

In this article I will show you how to create a simple number guessing game in Ruby. The game will be a command line application that will ask the user to guess a number between 0 to 9. If the user guesses correctly, the game will print a message and exit. If the user guesses incorrectly, the game will print a message and ask the user to guess again.

Prerequisites

You will need to have Ruby installed on your computer. If you don't have Ruby installed, you can download it from ruby-lang.org.

Getting started

To get started, create a new file called guessing_game.rb and open it in your favorite text editor. We will start by printing a welcome message to the user.

puts "Welcome to the guessing game!"

Next, we will generate a random number between 0 to 9 and store it in a variable called secret_num.

secret_num = rand(0 .. 9)

The rand method will generate a random number between 0 to 9. The .. operator will create a range from 0 to 9.

Next, we will create a initialize the following variables:

guess - this will store the user's guess
guess_count - this will store the number of guesses the user has made
guess_limit - this will store the maximum number of guesses the user can make
out_of_guesses - this will store a boolean value indicating if the user has reached the maximum number of guesses

guess = nil
guess_count = 0
guess_limit = 3
out_of_guesses = false

Next, we will create a while loop that will run as long as the user has not reached the maximum number of guesses and the user has not guessed the secret number.

while guess != secret_num and !out_of_guesses
    # if guess count is less than guess limit then increment guess count
    if guess_count < guess_limit
        puts "Enter your guessed number"
        guess = gets.chomp.to_i
        guess_count += 1;
    else 
        # if guess count is greater than guess limit then set out_of_guesses to true
        out_of_guesses = true
        break
    end
end

The gets method will read a line from the user's input. The chomp method will remove the newline character from the end of the string. The to_i method will convert the string to an integer.

The if statement will check if the user has reached the maximum number of guesses. If the user has reached the maximum number of guesses, the out_of_guesses variable will be set to true and the while loop will exit.

Next, we will check if the user has reached the maximum number of guesses. If the user has reached the maximum number of guesses, we will print a message to the user and exit the game. If the user has not reached the maximum number of guesses, we will print a message to the user and ask them to guess again.

if out_of_guesses
    puts "You lose!"
    puts "You have reached the maximum number of guesses."
    puts "The secret number was #{secret_num}"
else
    puts "Congratulations! You won!"
    puts "You guessed the secret number #{secret_num} and you did it in #{guess_count} guesses."
end

Finally, your code should look like this:

puts "Welcome to the number guessing game!"

secret_num = rand(0 .. 9)
guess = nil
guess_count = 0
guess_limit = 3
out_of_guesses = false

while guess != secret_num and !out_of_guesses
    # if guess count is less than guess limit then increment guess count
    if guess_count < guess_limit
        puts "Enter your guessed number"
        guess = gets.chomp.to_i
        guess_count += 1;
    else 
        # if guess count is greater than guess limit then set out_of_guesses to true
        out_of_guesses = true
        break
    end
end

if out_of_guesses
    puts "You lose!"
    puts "You have reached the maximum number of guesses."
    puts "The secret number was #{secret_num}"
else
    puts "Congratulations! You won!"
    puts "You guessed the secret number #{secret_num} and you did it in #{guess_count} guesses."
end

To run the game, open a terminal and navigate to the directory where you saved the guessing_game.rb file. Then run the following command:

ruby guessing_game.rb

Conclusion

In this article, we created a simple number guessing game in Ruby. The game will ask the user to guess a number between 0 to 9. If the user guesses correctly, the game will print a message and exit. If the user guesses incorrectly, the game will print a message and ask the user to guess again.

Follow me

If you enjoyed this article, please follow me on

Learn React Concept and Create your first app with React

Desmond Owusu Ansah — Sun, 31 Jul 2022 02:04:29 +0000

In this article, we will learn what and why React. We will also create our first React application.

What is React?

React is a JavaScript library created by Facebook and released in the May of 2003 for front-end development.
Front-end development consists of HTML, CSS, and JavaScript. As a front-end developer, you will easily find it is very difficult for the front-end with HTML, CSS, and JavaScript when a website or web app is more interactive (have a lot of different moving parts). Eventually, Facebook developers decided there must have a better way to manage these difficulties and that was when React was created as a JavaScript library to make front-end development easier and faster.

Why React?

Interactive websites need to update the DOM(Document Object Model) whenever a change happens. Compared to other libraries that manipulate the DOM, React uses a Virtual DOM (a lightweight copy of the actual DOM) that allow updating the part of the website that has changed and this increases the speed of updates.

How to use React

You can use react in two ways Adding react to your website or Creating react app.

Adding React to a website

React can be added to a website without any special tools and installations. But before that, we have to include the React library as two script tags to the head of the HTML Document
<script src="https://unpkg.com/react@16/umd/react.development.js" >crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react->dom.development.js" crossorigin></script> 
Next, we need to add another script, to enable the use of JSX.
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"</script> 

Creating react app

Facebook has created a tool called Create React App that makes it easy to set up a React project with a command!

Now, we will be creating our first react app called my-app.

To get started, make sure you have a recent version of Node installed on your machine.

After the installation of the node, Run the command below in your terminal with the path you want to create the app.
npx create-react-app my-app
After the execution of this command, this will install all the required dependencies and a directory name my-app will be created in the path you run the command. Change the directory to the my-app by running the command below in the terminal.
cd my-app
Run the app with this command.
npm start
Start the app on localhost:3000 in any browser. This is the default output of our project in the browser:

React Project Structure

Let's explore the structure of our project by opening it using a code editor.

Now, this is the project structure after creating react app. By default, it contains two directories public and src, a ReadMe.md file that contains how the app can be run, and other information about the app. It also contains a package,json, and package-lock.json file which contains the dependencies installed.

The public folder contains files related to how the application will display on the client, the most important of those being index.html, which is the HTML template of our page:

The src folder contains all of the JavaScript, CSS, and image files that will be compiled into a bundle file and injected into index.html

Although there are other files in the src folder that comes with Create React App when it is generated, the two files below are the only critical files:

index.js: This file is the entry point into our application. In the index.js file, a method called ReactDOM.render() is used to find an element with id="root" in the HTML and add our React application inside of that element.
App.js: This file is the main component that will be rendered to the DOM, which currently includes the React logo image and the default text, that we see in the output.

How is React App compiled?

React uses a file loader. In the case of Create React App, Webpack is used to set up.
Webpack creates a "bundle" file containing the content of multiple files that need to be "bundled" together and it is all added together into a single file and injected into the index.html file for compilation.

Note : Webpack search for all CSS, JavaScript, and images in the src directory and create a bundle for them so they should always be in your src folder in case of Create React App.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on
LinkedIn
GitHub
Twitter

Software Development Best Practices(DRY, KISS and YAGNI)

Desmond Owusu Ansah — Sun, 17 Jul 2022 01:29:53 +0000

What is DRY, KISS, YAGNI?

They are just acronyms of common best practices and best principles to write clean code. In this article, we will discuss what they mean and why they are important. Let's first discuss "why clear code is important"

Importance of clean code in software development.

Would be great to know why it's important to make code easier to maintain and understandable. Would be great to cover some of the background of it. E.g. code is much more often read compared to written. It helps when working in teams. It helps other engineers to get quicker in context. Clean code improves code quality and gives confidence in software development.

Now let's get to the principles that have been embraced by the community, independent of the language you are working on. Some of the most popular are:

DRY

DRY simply means (Don't repeat yourself!). This principle clearly means we should try to avoid having duplicated code. Instead, we should reuse your code when possible.

To make this clear let us discuss this scenario;

A student was asked to write a JavaScript program to reverse two words begins and resume.

Student code
// reverse "begins"
const reverseBegins = () => {
   const reverseWord = "begins".split('').reverse().join('');
   return reverseWord;
}
console.log(reverseBegins()) // prints snigeb

// reverse "good"
const reverseGood = () => {
   const reverseWord = "good".split('').reverse().join('');
   return reverseWord;
}
console.log(reverseGood()) // prints doog
Did the Student follow DRY?

No

Why the student didn't follow DRY

Explanation: This student code works perfectly as expected but it duplicates a block of code that performs the same function hence the code above does not obeys the DRY principle. Assume how complicated and duplicated the above code will be if the student were asked to reverse five(5) words.😂

How can this student improve the code to make it DRY?

The student can use a function with a parameter. So whenever the student wants to reverse a word, the student can pass the word as a parameter when the function is called. For instance, In the code below, a function called reverseWord takes in word as a parameter which reverses any word that will be passed as a parameter when the function is called. So it now will be simple when I have to reverse five(5) words as compared to the student code.
// reverse word function
const reverseWord = (word) => {
    const reverseWord = word.split('').reverse().join('');
    return reverseWord;
}
console.log(reverseWord("begins")) // prints snigeb
console.log(reverseWord("good")) // prints doog

KISS

KISS means (Keep It Simple, Stupid). KISS simply means we should try to avoid unnecessary complexity, we shouldn't over-engineer our code and there should be no further explanations. Our code should be simple, small, and easy to understand.

Let's see if the JavaScript code below which gets and returns items from the localStrorage of the browser but returns an empty array if there are no items in the localStrorage.
// get items from localStorage function
const getItemsFromStore = () => {
    const items = JSON.parse(localStorage.getItem("Items"))
    if (!items) {
        return [];
    } else {
        return items;
    }
}
I understand, if someone says nothing is wrong with this code but let's realize that the use of if-function in this code makes it complicated and long.

The code below is simple, small, and easy to understand which follows the KISS principle because it far away from been complicated.
In the code below the items variable is representing two things JSON.parse(localStorage.getItem("Items")) and an empty array []. The items variable only returns an empty array [] when JSON.parse(localStorage.getItem("Items")) is falsy which is exactly the same as the using the if-statement to check if it’s falsy.
// get items from localStorage function
const getItemsFromStore = () => {
    const items = JSON.parse(localStorage.getItem("Items")) || [];
    return items;
}

YAGNI

YAGNI fully means (You Aren't Gonna Need It).The YAGNI principle says you shouldn't add anything you don't strictly need. Functionality should only be implemented in a program when it is clear that it is really needed. Try to avoid the temptation of adding the most trendy technologies just because you think they may be useful in the future. Add things gradually, when they are really needed.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on LinkedIn or Facebook

Open this link and see one of my javascript application programs.

Desmond Owusu Ansah — Fri, 10 Dec 2021 12:33:12 +0000

This program is a quadratic equation solver which solves quadratic equations with second degree..
I am going to write a program for an equation with degree third.
Please try this program and send me feedback.
Here is the link.
https://complex-quadratic-equation-solver.netlify.app/