用HTML5和CSS创建的Visma暑期实习比萨店网站

资源摘要信息:"该文档描述了一个由名为Audrius Savickas的个人在Visma进行的Web开发暑期实习项目，项目的核心任务是创建一个用于管理比萨店菜单的网站应用。该网站应用被设计为仅使用前端技术栈——HTML5，JavaScript和CSS，无需依赖任何第三方库或框架。项目的目标是实现一个简单的比萨菜单管理系统，通过这个系统，可以添加新的比萨到菜单中，查看比萨的详细信息，并利用sessionStorage进行数据存储。 项目要求具体如下： 1. 添加比萨功能：需要提供一个功能，允许用户输入比萨的名称、价格、热量、配料（toppings）以及选择照片，并将这些信息添加到菜单列表中。这些信息将被存储在sessionStorage中，以便在会话之间持久化数据，但不会被永久保存。 2. 比萨菜单显示：网站需要能够从sessionStorage中检索所有已添加的比萨信息，并在页面上以列表形式展示出来。列表中应展示比萨的名称、价格、热量（以辣椒图标形式展示）、配料列表以及选中的照片。配料列表应以逗号分隔的文本形式展现。 技术实现知识要点： 1. HTML5：用于构建网站的基础结构，包括表单元素、表格显示、图片展示等。 2. JavaScript：核心逻辑的实现语言，包括操作sessionStorage、处理用户输入、更新DOM等。 3. CSS：用于美化网站界面，包括设置表格样式、图片样式、添加辣椒图标等视觉元素。 4. sessionStorage：一种Web存储机制，用于在客户端临时存储用户会话数据，数据在页面会话期间保持，页面关闭后将被清除。 5. DOM操作：通过JavaScript对文档对象模型（DOM）进行操作，包括创建和添加元素，以及响应用户的交互。 6. 表单验证：确保用户输入的数据符合要求，例如名称的字符串长度不超过30个字符、价格为正数且精确到小数点后两位、热量为1到3之间的整数、配料数组长度至少为2。 7. 事件处理：监听用户操作，如点击按钮等，以触发添加比萨到菜单的逻辑。 8. 图像选择：允许用户从有限的硬编码图像选项中选择一个作为比萨的照片。 9. SVG/PNG图像：展示热量信息时，使用SVG或PNG格式的辣椒图标。 通过这个项目，实习者不仅能够提高前端开发技能，还能够加深对Web存储、DOM操作和事件处理等关键技术的理解和应用能力。"