Category: JavaScript

Categories
React Projects

Create an Image Slider App with React and JavaScript

white and brown long coated small dog

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to image slider app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app image-slider

with NPM to create our React project.

Create the Image Slider App

To create the image slider app, we write:

import { useState } from "react";

const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc"
];

export default function App() {
  const [index, setIndex] = useState(0);

  const next = () => {
    setIndex((i) => (i + 1) % images.length);
  };

  const prev = () => {
    setIndex((i) => (i - 1) % images.length);
  };

  return (
    <div className="App">
      <button onClick={prev}>&lt;</button>
      <img src={images[index]} alt="" />
      <button onClick={next}>&gt;</button>
    </div>
  );
}

We have 3 image URLs in the images array.

In the App component, we have the index state, which is set by setIndex .

We set its initial value to 0.

Then we have the next and prev functions to set the index by incrementing by 1 and then get the remainder of that by dividing by images.length .

This gets the index of the next image to show.

prev is similar except we subtract by 1 instead of add to get the index of the previous image.

We go back to the first one after we reach the last image and we’re clicking the next button.

And we show the last image after we reach the first image and click on the previous button.

Then we return JSX with buttons to call the next and prev functions when we click them.

We show the image in the img element.

We can also make an image slider that moves to the next slide automatically by writing:

import { useEffect, useState } from "react";

const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc"
];

export default function App() {
  const [index, setIndex] = useState(0);

  const next = () => {
    setIndex((i) => (i + 1) % images.length);
  };

  useEffect(() => {
    const timer = setInterval(() => {
      next();
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <div className="App">
      <img src={images[index]} alt="" />
    </div>
  );
}

Most of the code is the same except that we removed the prev function.

And we added the useEffect hook with a callback that calls next every second with setInterval .

We return a callback to call clearIntveral to clear the timer when we unmount the component.

The empty array in the 2nd argument lets us run the useEffect callback only when we mount the component.

Conclusion

We can create an image slider easily with React and JavaScript.

Categories
React Projects

Create a Counter App with React and JavaScript

white and brown long coated small dog lying on white textile

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a counter app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app counter

with NPM to create our React project.

Create the Counter App

To create the counter app, we write:

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((c) => c + 1);
  };

  const decrement = () => {
    setCount((c) => c - 1);
  };

  return (
    <div className="App">
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <p>{count}</p>
    </div>
  );
}

We have the count state created by the useState hook.

We set the initial value to 0.

Then we have the increment and decrement functions to increase and decrease count by 1 respectively.

We pass in a function that has the current value of the count state as the parameter and return the new value in the setCount callbacks.

Then we have buttons that calls increment and decrement respectively when we click them.

And we display the count as the result of our clicks.

Conclusion

We can create a counter app with React and JavaScript.

Categories
React Projects

Create an Image Slider App with React and JavaScript

closeup photo of yellow Labrador retriever puppy

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to image slider app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app image-slider

with NPM to create our React project.

Create the Image Slider App

To create the image slider app, we write:

import { useState } from "react";

const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc"
];

export default function App() {
  const [index, setIndex] = useState(0);

  const next = () => {
    setIndex((i) => (i + 1) % images.length);
  };

  const prev = () => {
    setIndex((i) => (i - 1) % images.length);
  };

  return (
    <div className="App">
      <button onClick={prev}>&lt;</button>
      <img src={images[index]} alt="" />
      <button onClick={next}>&gt;</button>
    </div>
  );
}

We have 3 image URLs in the images array.

In the App component, we have the index state, which is set by setIndex .

We set its initial value to 0.

Then we have the next and prev functions to set the index by incrementing by 1 and then get the remainder of that by dividing by images.length .

This gets the index of the next image to show.

prev is similar except we subtract by 1 instead of add to get the index of the previous image.

We go back to the first one after we reach the last image and we’re clicking the next button.

And we show the last image after we reach the first image and click on the previous button.

Then we return JSX with buttons to call the next and prev functions when we click them.

We show the image in the img element.

We can also make an image slider that moves to the next slide automatically by writing:

import { useEffect, useState } from "react";

const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc"
];

export default function App() {
  const [index, setIndex] = useState(0);

  const next = () => {
    setIndex((i) => (i + 1) % images.length);
  };

  useEffect(() => {
    const timer = setInterval(() => {
      next();
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <div className="App">
      <img src={images[index]} alt="" />
    </div>
  );
}

Most of the code is the same except that we removed the prev function.

And we added the useEffect hook with a callback that calls next every second with setInterval .

We return a callback to call clearIntveral to clear the timer when we unmount the component.

The empty array in the 2nd argument lets us run the useEffect callback only when we mount the component.

Conclusion

We can create an image slider easily with React and JavaScript.

Categories
Vue 3 Projects

Create a Landing Page with Vue 3 and JavaScript

Labrador retriever puppy walking on green grass

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a landing page with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create landing-page

and select all the default options to create the project.

Create the Landing Page

To create the landing page, we write:

<template>
  <form v-if="!submitted" @submit.prevent="submitted = true">
    <div>
      <label>your name</label>
      <input v-model.trim="name" />
    </div>
    <button type="submit">submit</button>
  </form>
  <div v-else>
    <p>Welcome {{ name }}</p>
    <p>The time is {{ dateTime }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "",
      dateTime: new Date(),
      timer: undefined,
      submitted: false,
    };
  },
  methods: {
    setDate() {
      this.dateTime = new Date();
    },
  },
  mounted() {
    this.timer = setInterval(() => {
      this.setDate();
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

We have a form that lets the user submit their name.

Inside it, we have an input that binds to the name reactive property with v-model .

The trim modifier lets us trim leading and trailing whitespaces.

The form has the v-if directive to show the form if submitted is false .

And triggering the submit event with the submit button with set submitted to true .

Below that, we should the landing page content by showing the name and dateTime .

In the script tag, we have the data method to return our reactive properties.

The setDate method sets the dateTime to the current date.

The mounted hook calls setInterval to call setDate to update dateTime every second.

The beforeUnmount hook calls clearInterval to clear the timer when we unmount the component.

Conclusion

We can create a landing page with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Drag and Drop App with Vue 3 and JavaScript

white and brown shih tzu puppy

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a drag and drop app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create drag-and-drop

and select all the default options to create the project.

Create the Drag and Drop App

To create the drag and drop app, we write:

<template>
  <h2>Draggable Elements</h2>
  <div
    class="draggable"
    :draggable="true"
    @dragstart="drag($event, o)"
    v-for="o of origin"
    :key="o"
    @click.stop
  >
    {{ o }}
  </div>

<h2>Target</h2>
  <div id="target" @dragover.prevent @drop="drop">
    <div class="draggable" v-for="t of target" :key="t">
      {{ t }}
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      origin: ["apple", "orange", "grape"],
      target: [],
    };
  },
  methods: {
    drag(ev, text) {
      ev.dataTransfer.setData("text", text);
    },
    drop(ev) {
      const text = ev.dataTransfer.getData("text");
      const index = this.origin.findIndex((o) => o === text);
      this.origin.splice(index, 1);
      this.target.push(text);
    },
  },
};
</script>

<style scoped>
.draggable {
  border: 1px solid black;
  margin-right: 5px;
}

#target {
  border: 1px solid black;
  width: 95vw;
  height: 100px;
  padding: 5px;
}
</style>

In the template, we have divs under the Draggable Elements heading.

We style the divs by setting the class of each div to draggable .

Then we add a border to the draggable class.

To make the divs draggable, we set the draggable prop to true .

Next, we add the @dragstart directive to listen for the dragstart event, which is triggered when we first start dragging the div.

We use v-for to render the items in the origin array.

And we set the key to the origin entry so that Vue 3 can identify the items.

The entries are unique so we can just assign them as the value of the key prop.

Also, we have the @click.stop directive to stop the propagation of the click event.

Below the Target heading, we have the container div for the draggable items.

We have the @dragover.prevent directive to prevent the default behavior when we drag over the div which lets us keep dragging the item.

The @drop directive lets us call drop to put the items in the target array.

We render the target array inside the div with ID target with v-for .

In the script tag, we have the data method which has the origin and target reactive properties.

The drag method calls ev.dataTransfer.data to set the data we’re transferring when we start dragging the element.

In the drop method, we call ev.dataTransfer.getData to get the data by the key and return the item with key 'text' .

Then we find the item in the origin array and remove it from it with splice .

Then finally, we call this.target.push to append the item to the target array.

The style tag has some styles for the draggable items and the target container div.

Now we can drag the items from the Draggable Elements section to the Target section.

Conclusion

We can add drag and drop features easily into our app with Vue 3 and JavaScript.