<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ruslan Khait</title>
    <description>The latest articles on DEV Community by Ruslan Khait (@rusty619).</description>
    <link>https://dev.to/rusty619</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F842017%2F7d83072b-c9b5-473c-8dd7-0f77f3bdf081.png</url>
      <title>DEV Community: Ruslan Khait</title>
      <link>https://dev.to/rusty619</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rusty619"/>
    <language>en</language>
    <item>
      <title>The attr_accessor in Ruby?</title>
      <dc:creator>Ruslan Khait</dc:creator>
      <pubDate>Sun, 12 Jun 2022 00:22:09 +0000</pubDate>
      <link>https://dev.to/rusty619/the-attraccessor-in-ruby-2i82</link>
      <guid>https://dev.to/rusty619/the-attraccessor-in-ruby-2i82</guid>
      <description>&lt;p&gt;Ruby has object methods by default that are public and also has data that is private. To access and have the able to modify this data, we use the attr_reader and attr_writer. &lt;/p&gt;

&lt;p&gt;attr_accessor is a shorter way to have the ability of both attr_reader and attr_writer because people usually use data for both reading and writing. So the method attr_accessor is really quite useful.&lt;/p&gt;

&lt;p&gt;Suppose you want to gain access and modify a variable of a Ruby object. Normally, methods would be define separately for reading and writing the data into a variable:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;name&lt;/span&gt;
    &lt;span class="vi"&gt;@name&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="vi"&gt;@name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;str&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But, all of the data above could be written in one line using attr_accessor:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt;
  &lt;span class="nb"&gt;attr_accessor&lt;/span&gt; &lt;span class="ss"&gt;:name&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Putting it all together. Let's make a class, lets call it Person, with a variable (name). With attr_accessor, you can gain the ability to read and write to the name variable outside the class scope.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt;
  &lt;span class="nb"&gt;attr_accessor&lt;/span&gt; &lt;span class="ss"&gt;:name&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;

&lt;span class="n"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;

&lt;span class="n"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"Educative"&lt;/span&gt; &lt;span class="c1"&gt;# you can both modify ...&lt;/span&gt;
&lt;span class="nb"&gt;puts&lt;/span&gt; &lt;span class="n"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;name&lt;/span&gt;          &lt;span class="c1"&gt;# ... and read variable&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>Databases</title>
      <dc:creator>Ruslan Khait</dc:creator>
      <pubDate>Mon, 16 May 2022 01:46:02 +0000</pubDate>
      <link>https://dev.to/rusty619/databases-2kmh</link>
      <guid>https://dev.to/rusty619/databases-2kmh</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is a database?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A database is a collection of data. Its organized to structure information that is usually controlled by a database management system or refered to as DBMS. The most common type of database is typically modeled in rows and columns in. a series of tables to make processing and data query efficient. Most databases use Structured Query Language(SQL) for writing and querying data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Structured Query Language(SQL)?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;SQL is a programming language used by relational databases to query, manipulate, define data, and to provide access control. The data is stored in database objects that's called tables. A table is a collection of related data entries and it consists of columns and rows.&lt;/p&gt;

&lt;p&gt;Let's have a table called Customers. The following example is to look at the "Customers" table:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;Customers&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The keyword "SELECT" means to get access to the following table. "*" means for all the columns, "FROM" keyword is to refer to which table you want and Customers is the table. So all together the statement is saying we select to see all the columns from the table Customers.&lt;/p&gt;

&lt;p&gt;Every table is broken up into smaller entities called fields. A field is a column in a table that is designed to contain information about every record in the table. There is also a row sometimes refer to as a record. A row is each indivdual entry that exist in a table. Think in the Customers table. A record is a horizontal entity in a table. A column is a vertical entity in a table that contains all information within a specific field in a table.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Binary Search</title>
      <dc:creator>Ruslan Khait</dc:creator>
      <pubDate>Mon, 09 May 2022 01:14:51 +0000</pubDate>
      <link>https://dev.to/rusty619/binary-search-1bog</link>
      <guid>https://dev.to/rusty619/binary-search-1bog</guid>
      <description>&lt;p&gt;An Algorithm is a set of instructions for solving a problem You can think of an algorithm like a recipe in a cookbook, which tells the reader the specific steps for preparing a meal. There are different types of algorithms. One of them is to search through an array, they are refferred to as searching algorithm. One of these searching algorithm is called Binary Search.&lt;/p&gt;

&lt;p&gt;The main point of Binary Search is for finding an element's position in a sorted array. Binary Search tackles the problem with the divide and conquer approach. Meaning it would divide the problem to the smallest possibility to get the answer. The first step would be to have an array to perform the search. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gq7afCMX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h63vv72olrvu1r86jjy7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gq7afCMX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h63vv72olrvu1r86jjy7.png" alt="Image description" width="654" height="176"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let try to find the value 4. We would need to set 2 pointers. One pointer would be called low and placed on the lowest position and the other would be called high and it would be for the highest position&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--K5Ln-kHn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0x9m7od5trjwnxjf5ig.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--K5Ln-kHn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0x9m7od5trjwnxjf5ig.png" alt="Image description" width="654" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We also need to find the middle element in our array. We can create a variable called mid and equal it to the sums of the lowest index and the highest index then the divide the sum by 2. This will give us the middle position of the array: &lt;code&gt;arr[(low + high)/2] = 6&lt;/code&gt;  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0YpMXfMF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1st2nv50sncedvbygco.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0YpMXfMF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1st2nv50sncedvbygco.png" alt="Image description" width="654" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, we need to check if the value we are looking for is mid, less than mid, or more than mid. If it's equal to mid then we return mid. If the value we're looking for is greater then we replace low to &lt;code&gt;low = mid + 1&lt;/code&gt;. Meaning that we are focusing on the indexs of the array after the mid index. If the value is less than mid, then we replace high to &lt;code&gt;high = mid + 1&lt;/code&gt;, where we focuse on the elements before the middle position.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8Im26C-R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubs4j9qunretknht16b5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8Im26C-R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubs4j9qunretknht16b5.png" alt="Image description" width="654" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We will repeat these steps until low meets high or until our value is found &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--q_XYQwgC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urt8q8o19ztg68bj0rvb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--q_XYQwgC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urt8q8o19ztg68bj0rvb.png" alt="Image description" width="334" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GREATTTTT!!!!!! 4 was found&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TwhRP_gA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p25725gm931ijf37sljw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TwhRP_gA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p25725gm931ijf37sljw.png" alt="Image description" width="334" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Pseudocode:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;do until the pointers low and high meet each other.
    mid = (low + high)/2
    if (x == arr[mid])
        return mid
    else if (x &amp;gt; arr[mid]) // x is on the right side
        low = mid + 1
    else                       // x is on the left side
        high = mid - 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The code in JavaScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Program to implement iterative Binary Search&lt;/span&gt;


&lt;span class="c1"&gt;// A iterative binary search function. It returns&lt;/span&gt;
&lt;span class="c1"&gt;// location of x in given array arr[low..high] is present,&lt;/span&gt;
&lt;span class="c1"&gt;// otherwise false&lt;/span&gt;

 &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;binarySearch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;   
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;low&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;high&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;high&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;low&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;high&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;low&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="c1"&gt;// If the element is present at the middle&lt;/span&gt;
        &lt;span class="c1"&gt;// itself&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;mid&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="c1"&gt;// If element is smaller than mid, then&lt;/span&gt;
        &lt;span class="c1"&gt;// it can only be present in left subarray&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;mid&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="nx"&gt;high&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="c1"&gt;// Else the element can only be present&lt;/span&gt;
        &lt;span class="c1"&gt;// in right subarray&lt;/span&gt;
        &lt;span class="k"&gt;else&lt;/span&gt;
            &lt;span class="nx"&gt;low&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// We reach here when element is not&lt;/span&gt;
    &lt;span class="c1"&gt;// present in array&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>Phase 1 Project: Weather App</title>
      <dc:creator>Ruslan Khait</dc:creator>
      <pubDate>Mon, 04 Apr 2022 18:57:26 +0000</pubDate>
      <link>https://dev.to/rusty619/phase-1-project-weather-app-2ofi</link>
      <guid>https://dev.to/rusty619/phase-1-project-weather-app-2ofi</guid>
      <description>&lt;p&gt;The Project for phase 1 at Flatiron School had the following requirments:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The web app that you are creating needs to be a single page application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The app must be created using html/css/js that accesses data from a pubic api. The api must be handled asynchronously and use JSON.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You need to use at least 3 event listeners.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So, these are the rules. Seems challenging, you just learned these new concepts and you are thrown in a situlation where you need to make something with them. The hardest part for me was finding an API. I looked at API’s that tell dad jokes to APIs that have data about cocktails. I didn’t know what app to make with them. Luckly, I found a weather API called openWeatherMap. It tells you the current weather of every place in the world. You just need to create an account on their site and they will give you an API key. I chose the basic free version.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZF0i0rhJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stjyaj10elun3xlfvxz0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZF0i0rhJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stjyaj10elun3xlfvxz0.png" alt="Image description" width="880" height="146"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I decided to make a simple weather app. At the search bar, users would enter a city, click on the submit button and basic information would appear.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1_auo7U_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8llyncpjp6sayw99wthh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1_auo7U_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8llyncpjp6sayw99wthh.png" alt="Image description" width="880" height="384"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After users entered a city name, it would persent new content into the screen. The way I fetch the api was that it would get the JSON data for only the city the user was looking for. This new content on the top has the city’s name, an image of the current weather. Followed by the temperture and how it feels like outside. If you notice there’s text that says “&lt;strong&gt;More Details&lt;/strong&gt;”. If a user clicks on it then they would get extra information about the weather in that city.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---grmI7jP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbpdwl5xi49a66veozua.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---grmI7jP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbpdwl5xi49a66veozua.png" alt="Image description" width="880" height="441"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The “&lt;strong&gt;More Details&lt;/strong&gt;” is treated like a button that toggles. It’s like a switch that shows the extra information and hiddens it the second time you click on it. &lt;/p&gt;

&lt;p&gt;Check it out for yourself&lt;br&gt;
&lt;a href="https://github.com/rusty619/weather-app"&gt;weather-app github&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Scoping In JavaScript</title>
      <dc:creator>Ruslan Khait</dc:creator>
      <pubDate>Mon, 04 Apr 2022 18:53:05 +0000</pubDate>
      <link>https://dev.to/rusty619/scoping-in-javascript-22on</link>
      <guid>https://dev.to/rusty619/scoping-in-javascript-22on</guid>
      <description>&lt;p&gt;In JavaScipt, scoping is the able of accessing variables. Back in the day, you could only use the keyword “var” to declare a variable. It was a terrible practice of declaration. When variables are declared with the keyword “&lt;strong&gt;var&lt;/strong&gt;”, it can’t have a block scope. For example, when declaring a variable inside a {} block, it can also be accessed outside of the {} block.&lt;br&gt;
ex:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="c1"&gt;// a can be used here&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Meaning you could of created a variable inside of the block and declare the same variable locally. Both of these variables would of modified the variable.&lt;br&gt;
To fix this problem, JavaScript introduced two new keywords: “&lt;strong&gt;let&lt;/strong&gt;” and “&lt;strong&gt;const&lt;/strong&gt;”. “&lt;strong&gt;let&lt;/strong&gt;” is used to declare a variable inside a block scope. “&lt;strong&gt;const&lt;/strong&gt;” keyword is used when you don’t want the variable to change it’s value after it was declared.&lt;/p&gt;

&lt;p&gt;The two ways of scoping is &lt;strong&gt;Global scope&lt;/strong&gt; and &lt;strong&gt;Function Scope&lt;/strong&gt;. Any variable declared outside of a function can be used Globally. These variables can be accessed from anywhere in the file.&lt;br&gt;
ex:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="c1"&gt;// Global Scope&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A variable declared inside a function aren’t accessible or in other words, visible from outside the function. This is known as &lt;strong&gt;function scope&lt;/strong&gt;. It is accessible only within the scope of the function.&lt;br&gt;
ex:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="c1"&gt;// Function Scope&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
  </channel>
</rss>
