10 Fun JavaScript Ideas to Try Today
Tags: javascript, webdev, html, bitcoin
Published: 2024-07-02 16:37:48

JavaScript is a powerful programming language that allows developers to build dynamic and interactive web applications. Whether you're just starting out or have years of experience, working on real projects is a great way to improve your JavaScript skills.

This guide presents a collection of practical JavaScript examples that cover a wide range of common tasks and features for web applications.

Each example includes code snippets along with explanations of how they work. By exploring these, you'll gain hands-on experience with key JavaScript concepts and learn how to create more interactive and user-friendly web pages.

**Examples**

**Finding Operating System Details**

```js
const os = navigator.platform;
alert("Your Operating System: " + os);

```
- `navigator.platform`: This property returns a string representing the platform (operating system) of the browser.
- The alert function is used to display a pop-up box that shows the detected operating system. This is useful for understanding the environment in which your web application is running.

**Detecting User's Browser**

```js
const browser = navigator.userAgent;
alert("Your Browser: " + browser);

```
- `navigator.userAgent`: This property returns the user-agent string of the browser. It contains information about the browser version, operating system, and other details.
- This information can be used for browser-specific functionality or for analytics purposes to understand what browsers your users are using.

**Creating a Digital Clock**

```html
<div id="clock"></div>
<script>
  setInterval(() => {
    const now = new Date();
    document.getElementById('clock').innerText = now.toLocaleTimeString();
  }, 1000);
</script>

```
- `<div id="clock"></div>`: This is an HTML element where the current time will be displayed.
- `setInterval(callback, 1000)`: This JavaScript function repeatedly calls the callback function every 1000 milliseconds (1 second).
- `new Date()`: Creates a new Date object representing the current date and time.
- `now.toLocaleTimeString()`: Formats the current time as a human-readable string.
- `document.getElementById('clock').innerText = now.toLocaleTimeString()`: Updates the content of the div with the current time.

**Form Validation**

```html
<html>
<head>
    <title>Form Validation</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="name" placeholder="Enter your name">
        <button type="submit">Submit</button>
    </form>
    <script>
        document.getElementById('myForm').addEventListener('submit',
function(event) {
            const name = document.getElementById('name').value;
            if (!name) {
                alert("Name is required");
                event.preventDefault();
            }
        });
    </script>
</body>
</html>


```
- `<form id="myForm">`: A form element where users can input their name.
- `document.getElementById('myForm').addEventListener('submit', function(event) { ... })`: Adds an event listener to the form's submit event.
- `document.getElementById('name').value`: Gets the value entered in the input field.
- `if (!name) { ... }`: Checks if the input field is empty.
- `alert("Name is required")`: Displays an alert if the input field is empty.
- `event.preventDefault()`: Prevents the form from submitting if the validation fails, ensuring the user corrects their input before proceeding.

**Displaying Mouse Coordinates**

```html
<div id="coords">Move your mouse over this area.</div>
<script>
  document.addEventListener('mousemove', function(event) {
    const coords = `X: ${event.clientX}, Y: ${event.clientY}`;
    document.getElementById('coords').innerText = coords;
  });
</script>

```
- `<div id="coords">Move your mouse over this area.</div>`: A div element to display the mouse coordinates.
- `document.addEventListener('mousemove', function(event) { ... })`: Adds an event listener to the document's mousemove event.
- `const coords = \X: ${event.clientX}, Y: ${event.clientY}`: Gets the mouse coordinates relative to the viewport.
- `document.getElementById('coords').innerText = coords`: Updates the div with the current mouse coordinates.

**Generating Random Numbers**

```html
<button id="generate">Generate Random Number</button>
<p id="randomNumber"></p>
<script>
  document.getElementById('generate').addEventListener('click',
function() {
    const randomNumber = Math.floor(Math.random() * 100) + 1;
    document.getElementById('randomNumber').innerText = "Random Number: " + randomNumber;
  });
</script>
```
- `<button id="generate">Generate Random Number</button>`: A button to generate a random number.
- `<p id="randomNumber"></p>`: A paragraph to display the generated random number.
- `document.getElementById('generate').addEventListener('click', function() { ... })`: Adds a click event listener to the button.
- `const randomNumber = Math.floor(Math.random() * 100) + 1;`: Generates a random number between 1 and 100.
- `document.getElementById('randomNumber').innerText = "Random Number: " + randomNumber;`: Displays the generated random number in the paragraph.

**Changing Background Color Randomly**

```html
<button id="randomColor">Change Background Color</button>
<script>
  document.getElementById('randomColor').addEventListener('click', function() {
    const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = randomColor;
  });
</script>

```
- `<button id="randomColor">Change Background Color</button>`: A button to change the background color.
- `document.getElementById('randomColor').addEventListener('click', function() { ... })`: Adds a click event listener to the button.
- `const colors = ['red', 'green', 'blue', 'yellow', 'purple'];`: An array of color options.
- `const randomColor = colors[Math.floor(Math.random() * colors.length)];`: Selects a random color from the array.
- `document.body.style.backgroundColor = randomColor;`: Sets the body's background color to the randomly selected color.

**Building a To-Do List**

```html
<input type="text" id="taskInput" placeholder="Enter a task">
<button id="addButton">Add Task</button>
<ul id="taskList"></ul>
<script>
  document.getElementById('addButton').addEventListener('click', function() {
    const task = document.getElementById('taskInput').value;
    const li = document.createElement('li');
    li.innerText = task;
    document.getElementById('taskList').appendChild(li);
  });
</script>
```

- `<input type="text" id="taskInput" placeholder="Enter a task">`: An input field for entering tasks.
- `<button id="addButton">Add Task</button>`: A button to add the task to the list.
- `<ul id="taskList"></ul>`: An unordered list to display the tasks.
- `document.getElementById('addButton').addEventListener('click', function() { ... })`: Adds an event listener to the button's click event.
- `document.getElementById('taskInput').value`: Gets the value entered in the input field.
- `const li = document.createElement('li')`: Creates a new list item element.
- `li.innerText = task`: Sets the text of the list item to the entered task.
- `document.getElementById('taskList').appendChild(li)`: Adds the new list item to the task list.

**Creating a Dropdown Menu**

```html
<select id="dropdown">
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</select>
<button id="showSelection">Show Selected Option</button>
<script>
  document.getElementById('showSelection').addEventListener('click',
function() {
    const selectedOption = document.getElementById('dropdown').value;
    alert("Selected Option: " + selectedOption);
  });
</script>

```
- `<select id="dropdown">`: A dropdown menu with three options.
- `<button id="showSelection">Show Selected Option</button>`: A button to show the selected option from the dropdown menu.
- `document.getElementById('showSelection').addEventListener('click', function() { ... })`: Adds a click event listener to the button.
- `const selectedOption = document.getElementById('dropdown').value;`: Gets the value of the selected option.
- `alert("Selected Option: " + selectedOption);`: Displays an alert with the selected option.

**Toggling Visibility of an Element**

```html
<div id="toggleDiv">This is a toggleable div.</div>
<button id="toggleButton">Toggle Visibility</button>
<script>
  document.getElementById('toggleButton').addEventListener('click',
function() {
    const div = document.getElementById('toggleDiv');
    if (div.style.display === 'none') {
      div.style.display = 'block';
    } else {
      div.style.display = 'none';
    }
  });
</script>
```
- `<div id="toggleDiv">This is a toggleable div.</div>`: A div element with some text that we want to show or hide.
- `<button id="toggleButton">Toggle Visibility</button>`: A button to toggle the visibility of the div.
- `document.getElementById('toggleButton').addEventListener('click', function() { ... })`: Adds a click event listener to the button.
- `const div = document.getElementById('toggleDiv');`: Selects the div element.
- `if (div.style.display === 'none') { div.style.display = 'block'; } else { div.style.display = 'none'; }`: Toggles the display property of the div between 'none' (hidden) and 'block' (visible).