DEV Community: CodeMonk

API populate async await

CodeMonk — Wed, 10 Apr 2024 11:24:48 +0000

Check out this Pen I made!

CSS GRADIENT WAREHOUSE! Just one click away !!!

CodeMonk — Sun, 17 Sep 2023 10:04:50 +0000

Yes you heard it right !.Today while looking for css color palette, I somehow landed on this site. Very easy to use just click and you good to go. Tons of eye pleasing gradients are here. I have bookmarked it now.
Share with your UI/UX or Frontend developers.
Follow me for more!!!
Link

ChatGPT helped me to convert my code from Xml API to Fetch API

CodeMonk — Tue, 04 Jul 2023 04:28:21 +0000

## I USED AN OPEN API-REST COUNTRIES-
MY PROMPT - could you convert my code from xml api to fetch api

ChatGPT - Certainly! Please provide me with the code snippet you would like to convert from XML API to Fetch API, and I'll do my best to assist you with the conversion.

My code-

'use strict';

const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');

///////////////////////////////////////
const country = function (country) {
  const request = new XMLHttpRequest();
  request.open('GET', `https://restcountries.com/v3.1/name/${country}`);
  request.send();
  request.addEventListener('load', function () {
    const [data] = JSON.parse(this.responseText);
    console.log(data);
    let curr = data.currencies[Object.keys(data.currencies)[0]];
    const html = `
  <article class="country">
  <img class="country__img" src="${data.flags.png}" />
  <div class="country__data">
          <h3 class="country__name">${data.name.official}</h3>
          <h4 class="country__region">${data.subregion}</h4>
          <p class="country__row"><span>👫</span>${(
            +data.population / 1000000
          ).toFixed(1)} people</p>
          <p class="country__row"><span>🗣️</span>${data.languages.eng}</p>
          <p class="country__row"><span>💰</span>${curr.name}</p>
        </div>
        </article>
        `;
    countriesContainer.insertAdjacentHTML('beforeend', html);
  });
};

country('usa');
country('canada');

ChatGPT -

'use strict';

const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');

///////////////////////////////////////
const country = function (country) {
  fetch(`https://restcountries.com/v3.1/name/${country}`)
    .then(response => response.json())
    .then(data => {
      const [countryData] = data;
      console.log(countryData);
      let curr = countryData.currencies[Object.keys(countryData.currencies)[0]];
      const html = `
        <article class="country">
          <img class="country__img" src="${countryData.flags.png}" />
          <div class="country__data">
            <h3 class="country__name">${countryData.name.official}</h3>
            <h4 class="country__region">${countryData.subregion}</h4>
            <p class="country__row"><span>👫</span>${(
              +countryData.population / 1000000
            ).toFixed(1)} people</p>
            <p class="country__row"><span>🗣️</span>${countryData.languages.eng}</p>
            <p class="country__row"><span>💰</span>${curr.name}</p>
          </div>
        </article>
      `;
      countriesContainer.insertAdjacentHTML('beforeend', html);
    });
};

country('usa');
country('canada');

Here is how ChatGPT helped me to fix my piece of code.

CodeMonk — Tue, 20 Jun 2023 04:48:25 +0000

hey correct my javascript code which i need in es6 version

Of course! I'll be happy to help you convert your JavaScript code to the ES6 version. Please provide me with the code you'd like me to assist you with.

'use strict';

class Car {
  constructor(make, speed) {
    this.make = make;
    this.speed = speed;
  }

  accelerate() {
    this.speed += 10;
    console.log(`${this.make} is going at ${this.speed} km/h`);
  }
  brake() {
    this.speed -= 5;
    console.log(`${this.make} is going at ${this.speed} km/h`);
  }
  car1 = Car('BMW', 120);
  car2 = Car('Mercedes', 95);
}
accelerate();

Sure! I have made some corrections to your code to align it with ES6 syntax. Here's the corrected code:

'use strict';

class Car {
  constructor(make, speed) {
    this.make = make;
    this.speed = speed;
  }

  accelerate() {
    this.speed += 10;
    console.log(`${this.make} is going at ${this.speed} km/h`);
  }

  brake() {
    this.speed -= 5;
    console.log(`${this.make} is going at ${this.speed} km/h`);
  }
}

const car1 = new Car('BMW', 120);
const car2 = new Car('Mercedes', 95);

car1.accelerate();

Here's what has changed:

Removed the car1 and car2 assignments from within the class definition as they should be separate instances outside the class.
Created car1 and car2 instances using the new keyword and the Car constructor.
Called the accelerate method on the car1 instance outside the class.

Now, you can run the code and it should work as expected. Let me know if you need any further assistance!

Setting countdown timer in JS -oneliners

CodeMonk — Sat, 03 Jun 2023 04:45:38 +0000

Best ES6 version of JavaScript of generating random colors using time interval

CodeMonk — Fri, 02 Jun 2023 05:25:30 +0000

const body = document.getElementsByTagName('BODY')[0];

setInterval(function () {
const random = Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, '0');
body.style.backgroundColor = '#' + random;
}, 5500);