最近我完成了学校的CSS与JS期末作业，这个项目是专门为了帮助我们加深对CSS和JavaScript的理解，同时也让我们学习如何构建Web页面和应用程序。这次的任务要求我们设计一个简单的Web应用程序，其中包含各种CSS和JavaScript代码。

我一开始结合自己的兴趣爱好和经验，想要设计一个类似于电影建议网站的应用程序，用户可以通过该应用程序搜索电影，查看电影的剧情和演员名单，收藏电影，并分享给其他用户。

在这个过程中，我使用了很多CSS和JavaScript的知识。在CSS方面，我使用了不同的选择器，以及布局、盒模型和动画。例如，使用下面的CSS代码实现了对搜索框的样式设置和动画效果：

.search-input {
background-color: #fff;
border: none;
padding: 10px;
font-size: 16px;
width: 200px;
margin-right: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07), 
0 2px 2px rgba(0, 0, 0, 0.07), 
0 4px 4px rgba(0, 0, 0, 0.07), 
0 10px 8px rgba(0, 0, 0, 0.07);
transition: width 0.4s ease-in-out;
}
.search-input:focus {
width: 300px;
}

在JavaScript方面，我使用了事件处理器、函数、AJAX、localStorage、面向对象编程等技术。例如，使用下面的JavaScript代码获取用户输入的电影名字，并通过AJAX请求API数据，并使用localStorage保存收藏的电影：

const form = document.querySelector('#searchForm');
form.addEventListener('submit', async function (e) {
e.preventDefault();
const searchTerm = form.elements.query.value;
try {
const searchResults = await searchMovies(searchTerm);
const results = searchResults.results;
displayResults(results);
} catch (error) {
console.log(error);
}
});
function addToFavorites(imdbID) {
// retrieve the favorites list from localStorage
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
// add the imdbID to the favorites list
favorites.push(imdbID);
// save the updated favorites list to localStorage
localStorage.setItem('favorites', JSON.stringify(favorites));
}

在完成这个期末作业的过程中，我学到了很多CSS和JavaScript的知识，同时也培养了自己构建Web应用程序的能力。不仅如此，这个作业也让我认识到了Web开发和设计的重要性，它们可以让我们创造出更好的用户体验和更优秀的应用程序。