Refresh/Reload Web Page with HTML, CSS, and JavaScript

Refresh Your Web Page in a Button Click: A Guide to Refreshing a Browser Using HTML, CSS, and JavaScript

Refreshing a web page is a common functionality in web development, especially when dealing with dynamic content. In this blog, we will learn how to refresh a browser using HTML, CSS, and JavaScript.

 

Demo:


HTML Code:

Let's start by creating an HTML file. We will create a button that, when clicked, will refresh the page.

<!DOCTYPE html>

<html>

  <head>

    <title>Refresh Example</title>

    <link rel="stylesheet" href="styles.css">

  </head>

  <body>

    <!-- Container for refresh content -->

    <div class="refresh-container">

      <!-- Heading to instruct user to refresh the page -->

      <h1>Click the button to refresh the page</h1>

      <!-- Button to trigger page refresh -->

      <button id="refreshButton">Refresh</button>

    </div>

    <!-- JavaScript to handle page refresh -->

    <script src="script.js"></script>

  </body>

</html>

 

JavaScript Code:

We will add JavaScript code to our HTML file. We will use the location.reload() method to refresh the page when the button is clicked.

const refreshButton = document.getElementById('refreshButton');

 

// Add event listener to refresh button

refreshButton.addEventListener('click', () => {

  // Reload the current page when button is clicked

  location.reload();

});

 

location.reload()

location.reload() is a method in JavaScript that reloads the current web page. When this method is called, the browser refreshes the page, which can be useful in situations where the content of the page needs to be updated or reloaded.

location is a built-in object in the browser's JavaScript environment that contains information about the current web page. The reload() method is a property of the location object that instructs the browser to reload the current page.

It's important to note that calling location.reload() will cause any unsaved changes to be lost, and may also cause any scripts or stylesheets to be reloaded as well. Therefore, it should be used judiciously and only when necessary.

 

CSS Code:

Finally, we will add some CSS to make our page look visually appealing. We will centre the button and the heading using Flexbox. Additionally, we will add a background image to our container to make it more attractive.

body {

  font-family: Arial, sans-serif;

}

 

.refresh-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 200px;

  border: 1px solid #4caf50;

  width: 70%;

  text-align: center;

  margin: 25% auto;

  background-image: url('https://wallpaperaccess.com/full/6264348.jpg');

  background-repeat: no-repeat;

  background-size: cover;

}

 

h1 {

  margin-bottom: 20px;

  color: aliceblue;

  -webkit-text-stroke: 1px #0d5d74;

  text-stroke: 2px black;

  font-weight: 800;

}

 

button {

  padding: 10px 20px;

  background-color: #4caf50;

  color: white;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}

 

And that's it! With these three pieces of code, you can refresh your web page with a click of a button. Feel free to customize the design and add more functionality to make it more useful for your website visitors.

 

Follow us on social media for more coding tips and updates:

YouTube: https://www.youtube.com/@codelsc

Instagram: Instagram@codelsc_0122


#webdevelopment #codingtips #javascript #HTML #CSS #frontend #refreshpage #codelsc #location.reload()method #location.reload()methodinvocationexception #location.reload()method____ #location.reload()methodand #location.reload()methodandroidstudio #refreshingyourwebpagewithhtml #refreshingyourwebpagewithhtmlcssandjavascript #refreshingyourwebpagewithhtmlcssandjavascriptworktogether #refreshingyourwebpagewithhtmlcssandjavascriptandbuildawebsite

Comments

Post a Comment