DEV Community: Damilola Oyeyipo

Day 1: Building a Tic-Tac-Toe Game with a Valentine’s Twist Using React

Damilola Oyeyipo — Thu, 30 Jan 2025 02:04:59 +0000

Introduction

As a developer, every project comes with its own set of challenges. When I started building a Tic-Tac-Toe game using React, I expected a straightforward journey, but reality had other plans. React, with its component-based architecture, can be tricky for beginners, and I faced my fair share of struggles. However, with patience and practice, I started to understand key concepts like state management, component reusability, and event handling.

The Valentine’s Twist

Instead of the traditional "X" and "O," I decided to give my game a more heartfelt twist—literally! I replaced the symbols with a heart and a broken heart, making the game more relatable to Valentine’s Day. The idea was to create a game that not only entertains but also connects with emotions.

Challenges and Breakthroughs

One of the biggest challenges I faced was managing state changes efficiently. In a game like this, tracking the board’s status, determining the winner, and handling resets require a solid understanding of React’s useState and event handling. At first, my state updates were buggy, and the game wouldn’t recognize a winner properly. After debugging, I realized the importance of lifting state up and handling updates correctly.

Another challenge was pushing my code to GitHub. I encountered the dreaded non-fast-forward error, preventing me from pushing my local changes. It turned out that my remote branch had updates that my local branch didn’t, requiring me to pull changes first before pushing. After some trial and error, I was finally able to sync my repository and commit my progress.

What I Learned

This project taught me more than just React; it reinforced the importance of problem-solving and perseverance in coding. Some key takeaways include:

The power of component-based development in React
Handling state and props effectively
Debugging and reading error messages carefully
Understanding Git conflicts and how to resolve them.

Conclusion

Building this Tic-Tac-Toe game was a rollercoaster ride, but it was worth every challenge. If you're a beginner struggling with React, keep pushing forward. Every error message is a lesson in disguise!
Would you like any edits or additions?
😊

Day7 #100days Miva challenge

Damilola Oyeyipo — Tue, 27 Aug 2024 22:41:15 +0000

            ## How to Install node.js

Step 1: Go to https://nodejs.org/en/download/package-manager/current

and click on the prebuilt installer.

Step 2: Download the installer and follow the prompts to install node.js without making any changes to the default settings.

Step 3: After installation, open a command prompt and run "node --version" or "node -v" to verify the installation. If successful, install the create-react-app script using the command "npm install create-react-app -g" (the -g flag installs the package globally).

_Step 4: _To verify the installation of create-react-app, type "create-react-app -h" in the command prompt.

_Step 5: _With the create-react-app installed, you can create a new react application in your desired folder by navigating to the folder location in the command prompt and running *"create-react-app name-of-project" *,

mine will be *"create-react-app cookies" *

(Note: It must start with a small letter and may take some time to complete the creation process).

it will take a while before it creates, hold on to it

Because React is robust it will take a while please make sure your internet is connected

Step 6: Once the application is created, you will see a "happy hacking" message. You can then open the project folder with VSCode.

Just like this👆

your folder, very important you know where your folder is stored, I always stored mine in my desktop files

## Challenges you may encounter during this process

1. Unusual Interruption: Due to the robust nature of React, interruptions could occur during the creation process. This can be due to internet connection issues or a bad network, as React requires an internet download of 200MB or more.

2. Error in Commands: Common issues include mistyping commands, such as using "NPM" instead of "npm," or adding extra spaces in commands like "Create-react-app name-of-project." please let is to be like this "Create-react-app name-of-project." or one use capital letter instead of small letter

3. Understanding JavaScript: It is important to have a basic understanding of JavaScript, as React uses JavaScript syntax and JSX language. You can learn JavaScript basics from resources like W3 and YouTube.

## How To run the server

1 Go to src

2 Then click on app.js that is where you will make changes but first leave it.

3 Go to your terminal and enter this command"npm start"

( make sure you enter the directory of your project before calling the command else it won't work)

4 You will need to go to your web browser to view this:

It tells you that your server is running.

Conclusion

It was tough, but practice makes perfect. Never give up, put your hope in God, and continue to be grateful. So, smash that like button, share it with your friends who love programming languages, and comment on which is better: Django or React.
Thank you 🤗🤗🤗

Day 1 of the #100daysofMiva Challenge.

Damilola Oyeyipo — Wed, 21 Aug 2024 00:20:30 +0000

Day 1 of the 100 Days Challenge

Date: 8/21/2024

Objective: To learn and understand variables, logical operations, and data types in JavaScript, solve a mathematical problem using JavaScript, and begin learning about event listeners and conditional statements.

1. Introduction to JavaScript Variables

Today, I started my journey into JavaScript by learning about variables. A variable in JavaScript is like a container that holds data, which can be a number, a piece of text, or any other type of value. I learned how to declare a variable using the let, const, and var keywords.

let allows you to create a variable that can change later.
const creates a variable that cannot be reassigned.
var is an older way of declaring variables but is still used.

2. Understanding Logical Operations and Data Types

Next, I explored logical operations, which are used to make decisions in JavaScript. I learned about the basic logical operators:

I also learned about different data types such as:

3. Solving a Mathematical Problem with JavaScript

I applied my knowledge of variables and data types to solve a simple mathematical problem. The problem was to calculate the area of a rectangle given its width and height.

4. Introduction to Event Listeners

Moving on, I began learning about event listeners. An event listener is a function that waits for a specific event to occur, such as a user clicking a button, and then triggers some action.

In Simple Terms:
Event listeners allow JavaScript to respond to user actions on a webpage, like clicking a button, typing in a text box, or hovering over an element.

When not click

When it is clicked it will show loading data.. then end up showing "Data Loaded Via Callback"

This is the work of an event listener In javascript

5. Understanding Conditional Statements

I also learned about conditional statements, which allow me to make decisions in my code. A conditional statement checks whether a condition is true or false and then executes a block of code based on the result.

6 Understanding While Loops and For Loops in JavaScript

While Loop:
A while loop in JavaScript keeps executing a block of code as long as a specified condition is true. I tried hard to grasp this concept by imagining it as someone repeatedly asking a question until they got the right answer.

Simple Definition:
A while loop continues to run as long as a certain condition remains true.

Example:

let number = 1;

while (number <= 5) {
    console.log(number);
    number++;
}

In this example, the loop starts with number = 1 and keeps running if number is less than or equal to 5. It prints the value of number and then increases it by 1 each time.

For Loop:
A for loop is similar to a while loop but is usually more concise and easier to write when you know how many times you want to run the loop.

Simple Definition:
A for loop repeats a block of code a specific number of times.

Example:

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

In this for loop, i starts at 1 and increases by 1 after each loop until it reaches 5. The loop runs 5 times, just like the while loop.

Difference Between While and For Loops:

While Loop: Best when you don't know how many times the loop should run, but you have a condition to check.
For Loop: Best when you know exactly how many times the loop should run.

Scenario:
Imagine you’re flipping a coin. You want to keep flipping until you get heads. Since you don’t know how many flips it will take, you’d use a while loop to keep flipping until you get heads.

Now, if you want to flip the coin exactly 5 times, you’d use a for loop because you know you need exactly 5 flips, no matter the outcome.

In summary:

While Loop: Keeps flipping until you get heads.
For Loop: Flips the coin exactly 5 times.

Understanding loops took some effort, but this exercise helped me see how they are useful in repeating tasks efficiently in my code.

My Experience

I was so frustrated and stressed out. It was really getting to me, to the point where I almost felt like smashing my PC. It was just so overwhelming! Can you please help me figure out where it all went wrong?....🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️, I had to deal with so many bugs, and debugging it was just adding to my stress. But I decided to take a break, reset my mind, and finally figured out the problem. I kept telling myself that I could be the best version of myself, no matter what.

But javascript...😓😓😓😢

Conclusion

Day 1 was productive as I laid a solid foundation in JavaScript by learning about variables, logical operations, data types, and conditional statements. I also started exploring how JavaScript interacts with user actions through event listeners. I'm excited to continue this journey and deepen my understanding of JavaScript in the future.

Please like, share, subscribe, and follow up for more, and also comment on what drink I should take for this javascript hamburger...lol😂😂🤲

Day 0 of the #100daysofMiva Challenge.

Damilola Oyeyipo — Mon, 19 Aug 2024 21:41:30 +0000

Embarking on the 100DaysMIVAChallenge was a significant milestone in my journey as a budding software developer. Tis is my first time participating in such an intensive challenge, and I decided to focus on enhancing my Coding skills, which had always intrigued me but felt somewhat daunting.

I Thought of it to my self and I said, This challenge is more just than a daily routine; it is a commitment to self-improvement and consistent learning. I knew that if I could dedicate myself to this journey, it would not only deepen my understanding of IT but also improve my overall discipline and coding practices as a dev .

Setting Up My GitHub Repository

To document my progress,With the help of W3school, I was able to creat a GitHub repository where I could store and showcase my daily achievements. This repository, will reflecting my daily struggles, small victories, and growing confidence in Python, Javascript, django, boostrap and React. It was also a way to keep myself accountable, as I knew others could see my progress.

MY Goal

In this 100dayschallenge, I believe i will be ready to build big project with Three frame work django, boostrap and react, and 3 Programming languages
python , Javascript and C, making my Goals 6

Learning JavaScript

I first started By learning Javascript because it was new to me, and diving into it was both exciting and challenging. Today brought in a new concepts, from basic syntax. I started with the fundamentals, ensuring I had a strong foundation before moving on to more advanced topics
, Honsetly it was confusing but i was determine not to give up and get distracted.

I started by creating a folder called "MIVA_site" then I created a javascript file for me to implement some code, having a bit of understanding of python made it alot easier for Me to scale through.

The Experiences

in 0 days, I experienced a range of emotions—from frustration when I couldn’t solve a problem to exhilaration when a piece of code finally worked. The journey taught me not just about JavaScript but also about perseverance, problem-solving, and the importance of consistent practice.

Conclusion

I believe Completing the 0 Days was a transformative experience and the 100days will be a success . Not only did I gain a solid grasp of JavaScript, but I am also developing a habit of daily coding that I intend to carry forward in my career. The GitHub repository I created stands as a testament to my growth and a reminder of what can be achieved with dedication and hard work.

FYI: Am still learning so please help your fellow genZ..Like they say knowledge is power, Empower me with your knowledge by liking, share, comment and subscribe. Thank you 🤗