DEV Community: Tom Yotwongjai

#100DaysOfCode Recap day 7-13

Tom Yotwongjai — Sun, 26 Jun 2022 14:53:02 +0000

Second week summary challenge Recap:

This week big focus was not about building projects but more of backtracking and review some fundamentals. Sometimes we forget the fundamental once we start building some projects, after awhile of not reviews, we tend to forget what we learn. I went back to coding challenges, learning some problem solving from code wars and my custom Anki apps that have some good coding challenges using for loops. I'd use methods like split(), join(), includes(), filter(), and map(). train myself in problem solving and understand how to work out problems.

Next week:

More job search
Work with MERN Stack

How I quit negative BS (Belief System) and took a massive action. Remaster

Tom Yotwongjai — Mon, 06 Jun 2022 13:52:42 +0000

I remember envisioning myself as a web developer. I was in Chicago at the time, with no money saved up and two months until my lease would be over. It was January, and it was too cold to go out and do anything. So I started researching about a career in tech. Fascinated by the world of apps and websites, I bought a couple courses on android development and dove in with no sense of direction.

This did not work out.

I procrastinated and become stuck in, as Tony Robbin said it, “the mañana effect.” Soon enough, I gave up. Moved back to Hawaii. And settled for a mediocre job.

But Life has a way of slapping you in the face when it matters most.

I was about to settle into a bussing job and landscaping gig. And I dreaded the thought of going to work.

One day, when I was on my way to work, I just thought to myself, “Is this it?”

I pulled over. And I decided right then and there to quit my bussing job. Next, I went to the nearest Starbucks, pulled out my Android phone, and began researching anything that would give me direction.

I liked the idea of building apps and websites. So I started to research online bootcamps. I found a ton of schools, but Firehose really caught my attention. The name reminded me of when I talked to my brother about becoming a firefighter. I looked at the curriculum, read the wonderful reviews and many positive stories from past students, and watched some videos about a day in the life of a web developer.

This was the start.

Shortly after, I began to go down this exciting new path:

I took their 2 week course on HTML and Ruby, which took me 4 weeks to accomplish.
I cancelled all unnecessary expenses. I worked a full two weeks at my landscaping job to make enough for a deposit and extras.
I started the first week without giving up.

But Stuff happen

See, I wrote this in 2017 not knowing that it resonate with me more in 2022. At the time, when I was looking for a place to belong. I wasn't in the right mindset then. By the time I finished the coding bootcamp, my high was gone. I didn't know where else to go from there, no path to follow. So I went back to what I know best, work to just make ends meet and living life in the comfortable zone.

I found this post when I needed the most because 4 years after wrote this, I am at this spot again but this time, I am much different. I found that I have consistent flow of motivation that make me feel energize and desire to advance my skills in this ever changing world of web development. Continue below:

I can tell that this is the beginning to something very fascinating, and I’m so excited.

My emotions are driving my motion. And the direction is forward.

Here’s an interesting pattern that I’ve noticed since I started:

Interest >> Hobby >> Passion >> Vision

You can’t just skip to passion. That is, unless you were fed that passion since you were a kid, kind of like Tiger Woods! Many people gain interest, then interest turns to your activity…your hobby. Once you practice your hobby with extra intensity and drive, it becomes passion. The next step is that passion becoming vision.

Here’s the point of this: you can never settle for less.

Stop looking at your limitation and start looking at your assets. As soon as I stopped letting my self-doubt get in the way, I was able to take a massive action toward my ultimate goal. I’m now beginning to understand what it means to start with the end in mind.

I want to inspire and contribute to the ever-changing world.

Wow! Sometime you have to go back and see why you started this journey in the first place. This is what I should be written now!. Back then, I didn't believe any of it, but I am now.

What I learn from taking my first junior developer test.

Tom Yotwongjai — Sat, 07 May 2022 13:31:47 +0000

The past three weeks has been a hectic week. I applied to several companies during my journey to get hire as a developer. I finally was given opportunity to do so from one of the company looking to hire junior trainee web developer. The test I was given was create a basic CRUD project where user can add products and custom input filed for products size, weight, width, length, and height given which kind of product it was. How did it go? Not as well as I hope but I learn a lot from this project.

I learn how to work with database!

Since this project is need to allow user to store data somewhere, fetch and show that data when product is save, I learn how to use PHP/MySQL for database! I mean wow, I have never touch php in my life but being able to use phpMyAdmin to store my data and write php code connected through MySQL and show product when requested is awesome!

I learn how to connect backend with remote MySQL and Heroku

When working with php, the easiest way was to use XAMPP/WAMPP/ or MAMPP(in my case I use XAMPP). These software allowed beginner to get started utilizing phpMyAdmin and write php code without installing individual package, but the downside is, you can only use it locally for development. How would deploy it in production? Well, I did some research and found the easiest way was to use remote MySQL and hook it with Heroku. You can check it out on this link below, it give you many option with step by step instruction:

https://dev.to/jorenrui/6-ways-to-deploy-your-personal-websites--php-mysql-web-apps-for-free-4m3a

I learn form validation

Form validation is essential for your project because it prevent user from submitting form with the value you don't want and prevent empty submission. You can use external library to help with it but the thing with that is, you may not understand what is it really doing under the hood. I found great video's explaining how to implement form validation without using libraries. It's a great insight to handle errors:

validate form using react hook:
https://www.youtube.com/watch?v=EYpdEYK25Dc&t=412s

Validate form using switch case and custom hook:
https://www.youtube.com/watch?v=_ePL_Hu_cW4

I learn that if you get stuck, take a break

Before this, I had very little PHP and MySQL knowledge, or even backend. I was so focus on the frontend of things that once I receive this test, I was a bit scared. I had to at least understand some PHP and how to write PHP code. Now I had to figure out how to wrap all of this together? It was a lot of frustration and sometime I would sit on the screen for hours on end with no result. Don't be like me. I found that if something doesn't work or my head was overload, the best thing to do is stop. Go make some food, do push ups, walk or just took some nap, whatever you can do to stop thinking about coding for 20 to 30 minutes then comeback to it. This help me tremendously! It's like when I come back the answer just appear, it's the weirdest but the best feeling.

Wrap up

I don't think I did very well in this test since I didn't pass the automated test checklist. I think I got all of the core implementation but at the end I may or may not get the job, we will see. One thing I do know is, I am glad I was given the opportunity. This show that I am closer to my goal and show how long I have come from knowing nothing about programming eleven months a go to confident enough to take on the task given. Every step is a learning step and I am enjoying every step no matter how
hard or frustrated it is. This show that this is the right path for me.

Thanks for reading and hope anyone who are on the same road to remember:

Life is a marathon, Not a race.

What I learn from my Discord clone project

Tom Yotwongjai — Sat, 26 Mar 2022 19:02:14 +0000

So after about 2 weeks and countless hours of scratching my head, I had finish major functionality of my discord clone.

Tool I use for this project:

ReactJs
react-firebase-hook
firebase auth
firestore
Redux
Tailwind Css

first style homepage to look as close to discord homepage:

Add channel section:

Finally a message section:

additional features:

Login has a condition and change from "Login" to "open discord" if there is user.
Protected route so only if user who login are able to access else they are navigate to home page.

First style a homepage:

This project teaches me the important of reading code and documentation. I've been trying not to only following tutorial but also read source code which in this case was through GitHub repository. Follow tutorial and go step by step but I feel like reading other people code help me understand more of what I am doing and why I'm doing it, really dig deep and even implemented my own methods. In this project I've undated my fire store to the latest version(v9) but in the tutorials the version was version 8, which challenge me to read through firebase documentation to be able to implement the authentication, CRUD operations, react firebase hooks, and using redux to store the state of my channels using the updated code base.

It has been an overwhelming two weeks but at the end of the day it's has been quite rewarding. Every project you do you'll learning something new, not only in web development but about yourself as well. I though I would give up after a few days of just staring at the my code editor for hours on end going nowhere
trying to center a div :), adding channels, or just get distracted by funny dog video's.

Lesson learn for next project:

Take a step back when stuck, and com back with clear head.
Get better and reading code.
Read documentation for tools you're using
Take not when implementing features for future use

What I learn so far in my programming journey

Tom Yotwongjai — Sat, 19 Mar 2022 12:57:41 +0000

I have been committing to advance my skill in web development, and have been doing so for close to 8 months now. Looking back from when I started, I would say I have transform a lot. From being heavily focus on step by step tutorials to really put myself in an uncomfortable position and really go off on my own and really code. I still do use YouTube tutorials but I find myself stop the video, looking at source code, debugging it and really understand why it does the way it does. I learn so much but still feel like I am just scratching the surface.
It somewhat a humble experience to know that what you know, it's just a fraction of a whole piece of pie, and each time you think that you eat enough, there's a whole new big pieces added to it. I'm enjoying every little step that I've accomplish, I embrace the frustrations, the "damn, Am I that dumb" phase, the feel of temporary defeat. In many things I've tried, if I stumble on problem that frustrated, I would just avoid it and sometime never come back to it. I do feel like that with programming but as I have some form of doubt, my motivation and drive grew even higher to tackle what's in front of me and make it work. To be able to add cool styling or awesome functionalities give me a sense of joy that maybe I am underestimating my capability, and that in it self is something special.

10 Powerful Array Methods

Tom Yotwongjai — Thu, 02 Dec 2021 12:16:50 +0000

Array is commonly use in programming. I can look at an array as a storage of data or a collection of variables. This article will cover 10 must know array methods.

1: forEach()

Rather than using for loop to loop through arrays, this higher order function array methods let programmer write much nicer code when looping through data.

I have an array with some cardio workout for each day.

Example:

const cardio = [
  { Day: 'Monday', workout: 'bike', start: '9:00am', end: '9:30am' },
  { Day: 'Tuesday', workout: 'Running', start: '9:00am', end: '10:30am' },
  { Day: 'Wednesday', workout: 'Boxing', start: '9:00am', end: '10:00am' },
  { Day: 'Thursday', workout: 'Swimming', start: '9:00am', end: '9:30am' },
  { Day: 'Friday', workout: 'Soccer', start: '10:00am', end: '12:30am' },
];

Looping through cardio with for loop:

for (let i = 0; i < cardio.length; i++) {
  console.log(cardio[i]);
}
//Output:
{Day: 'Monday', workout: 'bike', start: '9:00am', end: '9:30am'}
{Day: 'Tuesday', workout: 'Running', start: '9:00am', end: '10:30am'}
{Day: 'Wednesday', workout: 'Boxing', start: '9:00am', end: '10:00am'}
{Day: 'Thursday', workout: 'Swimming', start: '9:00am', end: '9:30am'}
{Day: 'Friday', workout: 'Soccer', start: '10:00am', end: '12:30am'}

looping in forEach is quite elegant, I pass in a callback function I called it workout:

cardio.forEach(function (workout) {
  console.log(workout);
});

//Similar output with cleaner code

2: filter()

Like the name, filter use to filtering out something in the array.

If I wanted to get an even number inside an array.

Example:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15];

In for loop I would construct it like this:

// set evenNum to an empty array
let evenNum = [];
for (let i = 0; i < nums.length; i++) {
//if current iteration is even
  if (nums[i] % 2 === 0) {
//using push methods to push nums to evenNum array and pass in current iteration.
    evenNum.push(nums[i]);
  }
}
//outputs: 
[2, 4, 6, 8, 10, 12, 14]

Using filter methods:

const evenNum = nums.filter(function (even) {
  if (even % 2 === 0) {
    return true;
  }
});
console.log(evenNum);
//output: 
[2, 4, 6, 8, 10, 12, 14]

I can simplify it even more with ES6 arrow function:

const evenNum = nums.filter((even) => even % 2 === 0);
console.log(evenNum);

3: map()

This methods is very useful for when you want to get specific element inside an array or create an array within array.

In my cardio array, I want to log workout name.

Example:

const cardio = [
  { Day: 'Monday', workout: 'Bike', start: '9:00am', end: '9:30am' },
  { Day: 'Tuesday', workout: 'Running', start: '9:00am', end: '10:30am' },
  { Day: 'Wednesday', workout: 'Boxing', start: '9:00am', end: '10:00am' },
  { Day: 'Thursday', workout: 'Swimming', start: '9:00am', end: '9:30am' },
  { Day: 'Friday', workout: 'Soccer', start: '10:00am', end: '12:30am' },
];

 const workoutLog = cardio.map((item) => {
   return item.workout;
 });
console.log(workoutName);
//output: ['Bike', 'Running', 'Boxing', 'Swimming', 'Soccer']

what if I want the summary of my workout log? I can use ES6 template string `${}` to access that data like this:

const workoutLog = cardio.map((item) => `${item.Day}: ${item.workout} 
= 
[${item.start} - ${item.end}]`
);
console.log(workoutLog);


//output:
0: "[Monday: bike] [9:00am - 9:30am]"
1: "[Tuesday: Running] [9:00am - 10:30am]"
2: "[Wednesday: Boxing] [9:00am - 10:00am]"
3: "[Thursday: Swimming] [9:00am - 9:30am]"
4: "[Friday: Soccer] [10:00am - 12:30am]"

This method is very powerful and this method is use a lot in programming.

4: sort()

Sort method would sort compare two value and sorted the value according to the return.

In this example I want to sort my team from youngest to oldest.

Example:

const team = [
  { name: 'Tom', age: 33 },
  { name: 'Ann', age: 23 },
  { name: 'Tina', age: 35 },
  { name: 'Michael', age: 21 },
  { name: 'Aga', age: 27 },
  { name: 'John', age: 29 },
  { name: 'Landon', age: 30 },
];

 team.sort(function (a, b) {
   return a.age - b.age;
 });

//arrow function
team.sort((a, b) => a.age - b.age);
console.log(personList);

//output:
0: {name: 'Michael', age: 21}
1: {name: 'Ann', age: 23}
2: {name: 'Aga', age: 27}
3: {name: 'John', age: 29}
4: {name: 'Landon', age: 30}
5: {name: 'Tom', age: 33}
6: {name: 'Tina', age: 35}

5: reduce()

Reduce data in the array and return single value.

Example:

//Getting total price for all items

const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const total = items.reduce((item) => {

});

Reduce take in an item + another property of what I want to reduce everything into, in this case- total price:

const total = items.reduce((totalPrice, item) => {
 return totalPrice + item.price;
//take in second param as a starting point
}, 0);

console.log('total:' + total)

//output:
total:269

6: find()

Finding single object in an array.

Example:

const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const itemName = items.find((item) => {
return item.name === 'item3'
})

//output:
{name: 'item3', price: 50}

7: some()

Return true or false if element presented in an array.

Example:

//Check to see if any items is over $100
const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const itemIsExpensive = items.some((item) => {
  return item.price > 101;
});

console.log(itemIsExpensive);

//output: 
false
//since no items is over $100

8: every()

Like some(), every() return true or false but instead of check for a single item, it check if every items is or isn't presented in an array.

Example:

//check if every items is lessthan or equal $100
const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const itemIsExpensive = items.every((item) => {
  return item.price <= 100;
});

console.log(itemIsExpensive)

//output: 
true
//since every items in an array is $100 dollar or less

9: includes()

Checking if something is include inside an array.

Example:

const number = [1, 3, 5, 6, 4]
const include = number.includes(6);
console.log(include);

//output:
true

10: concat()

Join two or more array into one.

Example:

const a = [1, 2, 3];
const b = [true, false];

const c = a.concat(b);

//output:
[1, 2, 3, true, false]

//add new array and pass it in as a parameter
const a = [1, 2, 3];
const b = [true, false];
const d = ['tom', 'mikolaj', 'aga'];

const c = a.concat(b, d);
console.log(c);

//output:
[1, 2, 3, true, false, 'tom', 'mikolaj', 'aga']

And That is my top 10 array methods, comment below if there's other array methods I should include in my programming arsenal.

Thanks for reading :) !!!!

Equality Operators

Tom Yotwongjai — Sun, 28 Nov 2021 12:41:26 +0000

What is equality operators?

Equality operators comparing two values which will either return a Boolean value "true" or "false".

Equality is use in decision making scenario. There's two type of equality == "loose equality" & === "strict equality". Why is this important? Because in a situation when I want to compare an object and primitive data, these two does the same thing, but the result are different.

Loose equality will try convert value to match each other data type before compare the value.

console.log(1 == "1");
console.log('hello' == 'hello');

// output: 
true 
true

Strict equality does not do that, all it does is compare and considers operands of different type to be different, it's also faster since it skip one step.

console.log(1 === "1");
console.log('hello' === 'hello');

//output: 
false 
true

So Which to use? Unless there is a good reason to use == It is widely consider best practice to use ===. So now I know what to use, I will stick to strict equality. Let see how strict equality compare primitive and object.

When comparing object and primitive, in primitive- strict equality just comparing the actual value, whether it's a string, number, or Boolean.

//primitive

var obj1 = 1
var obj2 = 1
console.log(obj1 === obj2);

//output: true

While an object, it doesn't just look at the value in object but also in memory.

//object comparison

obj1 = {number: 1}
obj2 = {number: 1}
console.log(obj1 === obj2);

//output: false

The only time an object is equal to another object is when they are both the same.

let a = {number: 1};
let b = a;

console.log( a === b);

//output: true

Inequality

Opposite of equality operators is Inequality operator !==. Strict inequality operator check if two operands are not equal and return Boolean. Similar to strict equality strict inequality also consider operands of different type to be different. To not confuse myself since it is best practice to use strict equality, I will only use strict inequality when comparing if two operands are different.

console.log(1 !== "1");
console.log('hello' !== 'hello');
console.log(true !== 1);

//output: 
true
false
true

And that is my understanding on equality.

Array Methods Next!

My other post:
Control Flow
Logical Operators

Thanks for reading! :)

Logical Operators

Tom Yotwongjai — Fri, 26 Nov 2021 15:56:37 +0000

Note:

This is part of control flow which I forgot to mention and would like to add on to that with it's own explaination. Check out the control flow blog HERE

What is Logical Operators?

A logical operators job is simply connect two or more programming statements to return true or false.

Three logical operators are:

AND && | Return true if both operands are true.
OR  || | Return true if either operand is true.
NOT !  | Return true if operand is false.

Let say I want to evaluate if user password is long enough and have special character #, I can use && to evaluate like this:

const password = "#passwordislong";

if (password.length >= 10 && password.includes('#')) {
  console.log('very strong');
} else if (password.length >= 8) {
  console.log('strong');
} else {
  console.log('weak');
}

Above, the password is more than 10 character long and has a special character # so it safe to say the password is 'very strong'.

Now, what if I want to include || to else if statement so if the password length is 8 character or more or password length is greater or equal to 5 with special character # for example.

if (password.length >= 10 && password.includes('#')) {
  console.log('Very strong');
} else if (
  password.length >= 8 ||
  (password.length >= 5 && password.includes('#'))
) {
  console.log('strong');
} else {
  console.log('weak');
}

The else if take in two condition. If the password length is greater or equal to 8 or password length is greater or equal to 5 and it include '@', then the statement is true and the password is 'strong'

Last operator I will analyze is `!` or "Logical Not".

Logical not operator return something true to false and vice versa .

Example:

In normal behavior, the if statement only run the code block only if what it's evaluated inside is true.

//Let's evaluate if there's an item

let item = false;

if (item) {
  console.log('run something');
}
//output: Nothing since item is false, the code block will not run

But if I add the logical not ! in front of the item, it switch it to true and the code now run without changing the value item which will always be false.

//If we add ! to item

let item = false

const item = false;

if (!item) {
  console.log('run something');
}

//output: 'run something'

There we go! It is important for me to understand logical operators since it is the building block of control flow. Using this will help me develop and evaluate statements effectively.

Thanks for reading !! :)

Feel free to leave any comment or feedback!

Control Flow in JS

Tom Yotwongjai — Tue, 23 Nov 2021 14:44:14 +0000

I've been researching and trying to teach myself JavaScript and through my countless of hours looking for how to master this amazing language, I've made a list of topics that I think is important for me to tap in to the power of this library and better myself to write code that not only I can understand, but my future peers as well. This will be a series which entails 14 subjects beginner should focus on.

(This is from my experience and I'm not saying if you learn this, you will become a master in JavaScript)

Today, we start with:

Control Flow

Why is it important? Well, control flow let me dictate how the code should run when certain condition is met.

if(I'm stuck === true){
  take a break;
}else{
 keep going;
}

Among many different methods, I found that these three are most commonly use and beginner friendly
for loops, while loops(do while loop), if/else statements.

"The main job of a loop is to loop through portion of codes in set number of times."

Let's take a look and some example and different ways of writing each methods:
Let say I want to loop though an array and access data in that array. How would I go about it?

for loops:

In most cases, I would retrieve data from some data base but I will not do that here. So I will create my own data called tasks.

//first let setup constant(we will create some tasks data in this array)
const tasks = ['Walk Dog', 'Wash dishes', 'Take out trash', 'Wash cloths']

for(let i = 0; i < tasks.length; i++){
console.log('Loop through tasks:', tasks[i]
}
console.log('Loop finish')

The code above is doing four things:

1) I write my counter let i = 0;
2) for i is less than tasks.length, so as long as i is less than the length of tasks value in tasks array (which is four), then it will cycle through each tasks.
3)Finally I add increment i++ which add 1 to every loop(make sure to do this or else your code will be infinite loop).
4) for each cycle I want the name to logout so we console.log()

//if I only console.log(i) I will get:
0
1
2
//Why zero and not 1? Because programming are zero index, most programming language the first element is always 0

//to get my tasks data I use square bracket notation[] I link the tasks to the code and inside I add i like this:
console.log(tasks[i])

//this will print out each tasks in our array
Loop through tasks: Walk Dog
Loop through tasks: Wash dishes
Loop through tasks: Take out trash
Loop through tasks: Wash cloths
Loop finish

while loops & do while loops

Alternative to for loop but slightly different writing

let i = 0;
while(i < tasks.length){
console.log(tasks[i]);
i++;
}
console.log('Loop finish')

let i = 0;
do{
console.log(tasks[i]);
i++;
}while(i < tasks.length);
console.log('Loop finish')

//do while loops let the code block be executed at least once even if the condition is true or false.

If/Else statement (Decision making)

Let you check if the condition is true or false.

Let say if I want to check the password strength of user input and response according to the condition.

Example:

const password = 'Iampassword'

if(password.length >= 10){
console.log('Very strong')
}else if(password.length >= 7){
console.log('strong')
}else{
console.log('weak')
}

Clearly I know what will be the outcome of this code. console will log the password as 'very strong'.

As I can see, these are just three control flow example that I'm using, yes, there's switch statement, function, etc.. but I think as a beginner, if I understand how these three work, I will likely be able to quickly learn and understand other control flow methods and easily implemented into your code.

Feel free to leave any question or feedback.

Thanks for reading!!!

Fetching weather API Using async/await & axios in react.

Tom Yotwongjai — Fri, 19 Nov 2021 14:38:59 +0000

I learn an easy way to retrieve weather data from weathermap.org without too may lines of codes and I want to share with you. Let me know if there's a better way to do so.

I install axios into my react weather application:

//Axios is use to get HTTP request data from external sources like weather api.

npm install axios

I Go to openweathermap.org and create an account to get url and custom generated api key. Once account is created, click API Keys to create your api key. You will need the base URL & your custom key as shown below:

https://api.openweathermap.org/data/2.5/
[custom api key]

Define my api key in my react file. I have in my app.js file:

const apiKeys = {
  key: 'e902985907738b357b6a7c7a2651a108',
  base: 'https://api.openweathermap.org/data/2.5/',
};

import axios to my app.js file:

import axios from 'axios';

In my function called App I create async function:

async function fetchWeather(e) {
    e.preventDefault();
    try {
      const response = await axios(
//The base URL & api key
        `${apiKeys.base}weather?q=${city}&units=metric&APPID=${apiKeys.key}`
      );
      updateWeather(response.data);
//console.log to see if there's data
console.log(response);
    } catch (error) {
      setError({ message: 'Not Found' });
console.log(error);
    }
  }

The code above work like this: Async tell react that the function fetchWeather is asynchronous and await for axios to retrieve the data once it finish, return the result to response variable. Putting the code into try/catch block will catch an error of the code that could potentially fail. In this case if
there's no location found, the error message will be shown.

There you go! I hope this is helful. Leave any comment and constructive criticism. :)

See you next time!

Source code: https://github.com/tomyotwongjai/react-weather-app

DEV Community: Tom Yotwongjai

#100DaysOfCode Recap day 7-13

Second week summary challenge Recap:

Next week:

How I quit negative BS (Belief System) and took a massive action. Remaster

This did not work out.

But Life has a way of slapping you in the face when it matters most.

One day, when I was on my way to work, I just thought to myself, “Is this it?”

But Stuff happen

My emotions are driving my motion. And the direction is forward.

Interest >> Hobby >> Passion >> Vision

Here’s the point of this: you can never settle for less.

Wow! Sometime you have to go back and see why you started this journey in the first place. This is what I should be written now!. Back then, I didn't believe any of it, but I am now.

What I learn from taking my first junior developer test.

I learn how to work with database!

I learn how to connect backend with remote MySQL and Heroku

I learn form validation

I learn that if you get stuck, take a break

Wrap up

Thanks for reading and hope anyone who are on the same road to remember:

Life is a marathon, Not a race.

What I learn from my Discord clone project

Tool I use for this project:

Add channel section:

Finally a message section:

First style a homepage:

Lesson learn for next project:

What I learn so far in my programming journey

10 Powerful Array Methods

1: forEach()

Example:

2: filter()

Example:

3: map()

Example:

4: sort()

Example:

5: reduce()

Example:

6: find()

Example:

7: some()

Example:

8: every()

Example:

9: includes()

Example:

10: concat()

Example:

Thanks for reading :) !!!!

Equality Operators

What is equality operators?

Inequality

Array Methods Next!

Thanks for reading! :)

Logical Operators

Note:

What is Logical Operators?

Last operator I will analyze is ! or "Logical Not".

Example:

Thanks for reading !! :)

Feel free to leave any comment or feedback!

Control Flow in JS

(This is from my experience and I'm not saying if you learn this, you will become a master in JavaScript)

Control Flow

"The main job of a loop is to loop through portion of codes in set number of times."

for loops:

The code above is doing four things:

while loops & do while loops

If/Else statement (Decision making)

Feel free to leave any question or feedback.

Thanks for reading!!!

Fetching weather API Using async/await & axios in react.

I learn an easy way to retrieve weather data from weathermap.org without too may lines of codes and I want to share with you. Let me know if there's a better way to do so.

There you go! I hope this is helful. Leave any comment and constructive criticism. :)

See you next time!

Last operator I will analyze is `!` or "Logical Not".