1. JavaScript web design case
Below I will provide a simple JavaScript web design case that will implement a dynamic to-do list (Todo List). Users can add new to-do items on the page, mark them as completed, and delete them. This case will use HTML to build the page structure, CSS to beautify the page, and JavaScript to add dynamic features.
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="" rel="external nofollow" >
</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）HTMLThe section defines the basic structure of the page, including an input box for entering a to-do item, a button for adding a to-do item, and an unordered list for displaying a to-do item.
（2）CSSPartially beautified the page, including the style of the to-do list, the style of the input box and the button.
（3）JavaScriptPartially implemented dynamic functions:
- Listen to the click event of the "Add to do" button and call
addTodoFunction. -
addTodoThe function gets text from the input box, creates a new list item, and adds check boxes and delete buttons to it. - The check box is used to mark the to-do item as completed and toggles the style of the list item when clicked.
- The Delete button is used to delete a to-do item from the list.
- Listen to the input box
keypressEvents so that to-do items can be added when the Enter key is pressed.
This case shows how to use HTML, CSS, and JavaScript to create a web application with basic dynamic features.
2. Display of different functions and design ideas of JavaScript web design cases
In addition to the to-do list case mentioned above, there are many other similar JavaScript web design cases that show different features and design ideas. Here are some common cases and their brief descriptions:
2.1 Image Gallery
（1）Function description：
- Displays a set of pictures and supports clicking to enlarge and viewing.
- Create image grid layouts using HTML and CSS.
- Use JavaScript to process image click events and display enlarged images.
（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 size */
height: auto;
margin: 10px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
/* Other modal box styles */
}
.modal-content {
/* The style of enlarge the picture */
}
</style>
</head>
<body>
<div class="gallery">
<img src="" alt="Image 1">
<img src="" alt="Image 2">
<!-- More images -->
</div>
<div class="modal">
<span class="close">&times;</span>
<img class="modal-content" >
</div>
<script>
// JavaScript code for handling click events and displaying modal boxes // ... (Detailed implementation is omitted)</script>
</body>
</html>2.2 Simple Weather App (Weather App)
（1）Function description：
- Get and display weather information.
- Use the weather API (such as OpenWeatherMap) to get real-time weather data.
- Dynamically update page content using JavaScript.
（2）Code Example(Simplified version, need to replace the 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 with your API key ('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）Function description：
- Display a table, the content of the table can be dynamically added, deleted, or modified.
- Create a table structure using HTML.
- Use JavaScript to process data addition, deletion and modification operations, and update the table content dynamically.
（2）Code Example(Due to space limitations, only conceptual descriptions are provided):
- Create an HTML table with headers and several rows.
- Use JavaScript to add buttons or input boxes so that users can enter new data.
- Write JavaScript functions to handle the logic of adding, deleting, and modifying data.
- Use DOM operations to update table content dynamically.
These cases cover different aspects of web design, from basic image presentation to practical weather queries to dynamic data processing. They are all good starting points for learning JavaScript web development and can be expanded and customized according to actual needs.
This is the end of this article about Java Script web design cases. For more related Java Script web design cases, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!