Location>code7788 >text

Java Script Web Design Cases

Popularity：620 ℃/2024-08-29 22:27:00

1. JavaScript web design examples

Below I will provide a simple JavaScript web design example that will implement a dynamic to-do list (Todo List). The user can add new to-do items to the page, mark them as completed, and delete them. This example will use HTML to build the page structure, CSS to beautify the page, and JavaScript to add dynamic functionality.

1.1 HTML ()

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Todo List</title>  
    <link rel="stylesheet" href="">  
</head>  
<body>  
    <h1>Todo List</h1>  
    <input type="text"  placeholder="Add new todo...">  
    <button onclick="addTodo()">Add Todo</button>  
    <ul >  
        <!-- Todo items will be added here -->  
    </ul>  
  
    <script src=""></script>  
</body>  
</html>

1.2 CSS ()

body {  
    font-family: Arial, sans-serif;  
    margin: 20px;  
    padding: 0;  
}  
  
#todoList {  
    list-style-type: none;  
    padding: 0;  
}  
  
#todoList li {  
    margin: 10px 0;  
    padding: 10px;  
    background-color: #f4f4f4;  
    border: 1px solid #ddd;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
}  
  
#todoList  {  
    text-decoration: line-through;  
    opacity: 0.5;  
}  
  
#todoInput {  
    padding: 10px;  
    margin-right: 10px;  
    width: calc(100% - 120px);  
}  
  
button {  
    padding: 10px 20px;  
    cursor: pointer;  
}

1.3 JavaScript ()

function addTodo() {  
    const input = ('todoInput');  
    const list = ('todoList');  
    const itemText = ();  
  
    if (itemText) {  
        const itemElement = ('li');  
         = itemText;  
  
        // Checkbox for marking todo as completed  
        const checkbox = ('input');  
         = 'checkbox';  
         = function() {  
            ('completed', );  
        };  
  
        // Button for deleting todo  
        const deleteButton = ('button');  
         = 'Delete';  
         = function() {  
            (itemElement);  
        };  
  
        // Append elements to the list item  
        (checkbox);  
        (('\u00A0')); // Add space  
        (deleteButton);  
  
        // Append list item to the list  
        (itemElement);  
  
        // Clear input field  
         = '';  
    }  
}  
  
// Optionally, add event listener to input field for Enter key press  
('todoInput').addEventListener('keypress', function(event) {  
    if ( === 'Enter') {  
        addTodo();  
    }  
});

1.4 Description

（1）HTML section defines the basic structure of the page, including an input box for entering to-dos, a button for adding to-dos, and an unordered list for displaying to-dos.

（2）CSS Some of the pages have been beautified, including the style of the to-do list, input boxes and buttons.

（3）JavaScript Dynamic functionality is partially implemented:

  • Listen to the click event of the "Add To-Do List" button and call theaddTodo function.
  • addTodo The function takes the text from the input box, creates a new list item, and adds checkboxes and delete buttons to it.
  • The checkbox is used to mark the to-do list item as completed and toggles the style of the list item when clicked.
  • The Delete button is used to remove a to-do item from the list.
  • Listen to the input box'skeypress event to add a to-do item even when the Enter key is pressed.

This example shows how to use HTML, CSS, and JavaScript to create a web application with basic dynamic functionality.

2. JavaScript web design examples showing different functions and design ideas

In addition to the above to-do list example, there are many other similar JavaScript web design examples that demonstrate different features and design ideas. Below are some common examples and their brief descriptions:

2.1 Image Gallery (Image Gallery)

（1）Functional Description：

  • Displays a set of images with support for clicking on them to enlarge them for viewing.
  • Create image grid layouts using HTML and CSS.
  • Use JavaScript to handle the image click event and display the enlarged image.

（2）code example(simplified version):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <style>
        .gallery img {
            width: 100px; /* or other sizes */
            height: auto;
            margin: 10px;
            cursor: pointer;
        }  
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            /* Other modal box styles */
        }  
        .modal-content {
            /* Styles for enlarging images */
        }  
    </style>
</head>
<body>
  
<div class="gallery">
    <img src="" alt="Image 1">
    <img src="" alt="Image 2">
    <!-- More Pictures -->
</div>
  
<div class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" >
</div>
  
<script>
    // JavaScript coding，For handling click events and displaying modal boxes
    // ...（Omit Detailed Realization）  
</script>
  
</body>
</html>

2.2 Simple Weather App (Weather App)

（1）Functional Description：

  • Get and display weather information.
  • Use weather APIs such as OpenWeatherMap to get real-time weather data.
  • Use JavaScript to dynamically update page content.

（2）code example(Simplified version, need to replace API key):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
</head>
<body>
  
<h1>Weather App</h1>
<input type="text" placeholder="Enter city">
<button >Get Weather</button>
<div ></div>
  
<script>
    const apiKey = 'YOUR_API_KEY'; // Replace yourAPIkeys
  
    ('getWeather').onclick = function() {
        const city = ('cityInput').value;
        fetch(`/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
            .then(response => ())
            .then(data => {
                const temp = ;
                const weatherDescription = [0].description;
                ('weatherResult').innerHTML = `Temperature: ${temp}°C<br>Description: ${weatherDescription}`;
            })
            .catch(error => {
                ('weatherResult').innerHTML = 'City not found.';
            });
    };
</script>
  
</body>
</html>

2.3 Dynamic Table

（1）Functional Description：

  • Display a table whose contents can be dynamically added, deleted or modified.
  • Create a table structure using HTML.
  • Use JavaScript to handle data addition, deletion, and modification operations and to dynamically update table content.

（2）code example(Due to space constraints, only a conceptual description is provided):

  • Create an HTML table with a header and several rows.
  • Use JavaScript to add buttons or input boxes for users to enter new data.
  • Write JavaScript functions to handle the logic of adding, deleting and modifying data.
  • Dynamically update table content using DOM manipulation.

These examples cover different aspects of web design, from basic image display to useful weather queries to dynamic data handling. They are all good starting points for learning JavaScript web development and can be extended and customized to meet real-world needs.

<Previous Next>