遇见 | 「青训营 X 码上掘金」主题创作

---

当青训营遇上码上掘金

生活中的遇见不仅仅是偶然的，它们有时会对我们产生深远的影响，甚至改变我们的人生。因此，我们应该珍惜每一次遇见，吸取它们给我们带来的知识和感悟。

码上掘金片段

---

具体描述

当我们按下 添加遇见 按钮时，页面会出现弹出框。

之后我们便可以输入遇见的名字，点击确定。名字便会出现在网页上并且进行了美化操作。

当鼠标移入到名字的所属框中时，背景颜色将会变成橙色，同时有一个缩小放大的效果。再次点击名字所属框便会将当前名字删除。

---

思路

HTML

01.页面设计

<div id="app">
        <h1>遇见</h1>
        <p>在这里我们遇见了：</p>
        <ul id="meetings"></ul>
        <button id="addMeetingBtn">添加遇见</button>
</div>

HTML部分如上图所示，并没有什么难度的点，主要就是js部分的实现。然后页面背景颜色是采用的渐变色的效果

---

JavaScript

02.定义函数

    const app = document.getElementById('app');
    const meetingsList = document.getElementById('meetings');
    const addMeetingBtn = document.getElementById('addMeetingBtn');
    
    let meetings = [];
    
    const addMeeting = (name) => {
            meetings.push(name);
            renderMeetings();
        };

        const removeMeeting = (index) => {
            meetings.splice(index, 1);
            renderMeetings();
        };

1.首先使用document.getElementById()方法获取三个元素
2.然后定义了一个空数组用来存储之后输入的名字
3.定义addMeeting()函数，用来接收name参数并添加到数组中最后刷新数组
4.定义removeMeeting()函数，接收index参数。并且在数组中可以删除该参数，删除之后刷新数组

---

03.创建li添加至页面

const renderMeetings = () => {
            meetingsList.innerHTML = '';
            meetings.forEach((meeting, index) => {
                const meetingEl = document.createElement('li');
                meetingEl.innerHTML = meeting;
                meetingEl.onclick = () => removeMeeting(index);
                meetingsList.appendChild(meetingEl);
            });
        };

首先创建一个renderMeetings()函数通过创建HTML元素li并使用appendChild()函数将其添加到"meetingsList"元素中。这样，当我们在页面输入一个名字时，便可以形成一个li并添加到mettings的ul中，在页面显示出输入的名字同时再点击li可以删除这个元素

---

CSS

这里css主要说明的是li的部分

 li {
            width: 25%;
            height: 200px;
            background-color: skyblue;
            border-radius: 10px;
            margin: 10px;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
            color: black;
            box-shadow: 2px 2px 5px gray;
            transition: all 0.3s ease-in-out;
        }

        li:hover {
            transform: scale(1.1);
            background-color: orange;
        }

主要代码是阴影，放缩大小和转换时间。

题外

其实我刚开始想创建一个遮罩层和添加数据的表单。在平常时隐藏起来，当"添加遇见"按钮被点击时，表单不在隐藏，同时也可以输入名字等后续操作。但是因为时间的问题和感觉有点麻烦就没有弄遮罩层这个了😂😂😂😂