Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to check if a string is a palindrome with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to check if a string is a palindrome with JavaScript.

In this article, we’ll look at how to check if a string is a palindrome with JavaScript.

How to check if a string is a palindrome with JavaScript?

To check if a string is a palindrome with JavaScript, we can use the JavaScript string’s split and JavaScript array’s reverse and join methods.

For instance, we write:

const isPalindrome = (s) => {
  return s === s.split("").reverse().join("");
}

console.log(isPalindrome('foobar'))
console.log(isPalindrome('abba'))

to create the isPalindrom function to check the string s is the same as the original after we reversed the letters in it.

We reverse s by splitting it with split with an empty string to return an array of characters in the string.

Then we call reverse to reverse the array.

And we call join with an empty string to join the characters back into a string.

Finally, we return s compared with the reversed version of s with ===.

Therefore, from the console log, we should see false and then true logged respectively.

Conclusion

To check if a string is a palindrome with JavaScript, we can use the JavaScript string’s split and JavaScript array’s reverse and join methods.

Categories
JavaScript Answers

How to Convert a Map to JSON Object with JavaScript?

white and brown shih tzu puppy

Sometimes, we want to convert a map to JSON object with JavaScript.

In this article, we’ll look at how to convert a map to JSON object with JavaScript.

How to Convert a Map to JSON Object with JavaScript?

To convert a map to JSON object with JavaScript, we can use the Object.fromEntries method.

For instance, we write:

const map1 = new Map([
  ['foo', 'bar'],
  ['baz', 12]
]);

const obj = Object.fromEntries(map1);
console.log(obj)

then we get that obj is {foo: 'bar', baz: 12} according to the console log.

Conclusion

To convert a map to JSON object with JavaScript, we can use the Object.fromEntries method.

Categories
Chart.js JavaScript Answers

How to disable everything on hover with Chart.js?

selective focus photography of white dog

Sometimes, we want to disable everything on hover with Chart.js.

In this article, we’ll look at how to disable everything on hover with Chart.js.

How to disable everything on hover with Chart.js?

To disable everything on hover with Chart.js, we can set the options.events property to an empty array.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<canvas id='myChart' style='width: 300px; height: 300px'></canvas>

to add the Chart.js script and canvas.

And we write:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1,
      borderColor: 'green'
    }]
  },
  options: {
    events: []
  }
});

to select the canvas and add a line chart into it.

We set options.events to an empty array to disable everything on hover.

Now when we hover over the graph, we shouldn’t see any tooltips or hover effects displayed.

Conclusion

To disable everything on hover with Chart.js, we can set the options.events property to an empty array.

Categories
JavaScript Answers jQuery

How to show a “are you sure?” dialog when we click on a link with JavaScript or jQuery?

white and brown long coated small dog

Sometimes, we want to show a "are you sure?" dialog when we click on a link with JavaScript or jQuery.

In this article, we’ll look at to show a "are you sure?" dialog when we click on a link with JavaScript or jQuery.

How to show a "are you sure?" dialog when we click on a link with JavaScript or jQuery?

To show a "are you sure?" dialog when we click on a link with JavaScript or jQuery, we can call the confirm function in the click event handler of a link.

For instance, we write:

<a href="/DoSomethingDangerous" class='confirm'>do something dangerous</a>

to add the link.

Then we write:

$(() => {
  $('.confirm').click((e) => {
    return window.confirm("Are you sure?");
  });
});

We select the link with $.

And we call click with the click event handler for the link.

In the click event handler, we call window.confirm with the text we want to show in the dialog.

Now when we click on the link, we see ‘Are you sure?’ displayed.

And we can click OK or Cancel to dismiss it.

Conclusion

To show a "are you sure?" dialog when we click on a link with JavaScript or jQuery, we can call the confirm function in the click event handler of a link.

Categories
React Answers React Native

How to create a weather app with React Native?

(Source code is at https://github.com/jauyeunggithub/rook-hotel-answers/blob/master/q5.txt)

Sometimes, we want to create a weather app with React Native.

In this article, we’ll look at how to create a weather app with React Native.

How to create a weather app with React Native?

To create a weather app with React Native, we can make requests to a weather API to get weather data when someone enters a query in the search box.

For instance, we write:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import { useState, useEffect } from 'react';
import { Card } from 'react-native-paper';
import { TextInput, Button } from "react-native";


export default function App() {
  const [data, setData] = useState({});
  const [query, setQuery] = useState('');

  const getWeather = async () => {
    const res = await fetch(`https://www.metaweather.com/api/location/search/?query=${query}`);
    const [{woeid}] = await res.json();
    const resWeather = await fetch(`https://www.metaweather.com/api/location/${woeid}`);
    const d = await resWeather.json();
    setData(d);
  };

  return (
    <View style={styles.container}>
      <TextInput value={query} onChange={e => setQuery(e.target.value)} placeholder='Type Location to Search' />
      <Button title='Search' onPress={getWeather} />      
      <Card>
        {JSON.stringify(data)}
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

We define the data state to store the weather data.

And we have the query state to store the query input value.

Next, we define the getWeather function to make GET requests to the MetaWeather API with fetch.

And we call setData to set data to the result of the 2nd request.

Then we render a Virew with a TextInput to let users enter a query to search for weather data.

We have a Button which calls getWeather to make requests for the weather data according to the query value.

Then we display the retrieved data in a Card.

We add some styles to the View to center the content with justifyContent set to center and set a backgroundColor.

Conclusion

To create a weather app with React Native, we can make requests to a weather API to get weather data when someone enters a query in the search box.