Day03：Set User Name(存放使用者名称)

全文同步於个人 Docusaurus Blog

在这一章中，主要处理下述两个问题：

  1. 初始进入页面的建立

  2. 存放使用者输入的名称

Introduction Page

建立 HTML 结构

<body>
  <main class="wrapper">
    <div class="enter-box">
      <input type="text" class="enter-input" placeholder="Create New Name" />
      <button type="button" class="enter-btn">Enter Chat</button>
    </div>
  </main>
</body>

设置基础样式

.wrapper {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.enter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 580px;
  height: 300px;
  background: linear-gradient(96.78deg, #7CB8F7 0%, #2A8BF2 100%);
  border-radius: 6px;
}

.enter-input {
  width: 200px;
  height: 30px;
  border-radius: 6px;
}

.enter-btn {
  width: 120px;
  height: 30px;
  background: linear-gradient(92.68deg, #7CB8F7 0%, #2A8BF2 100%);
  border-radius: 6px;
  color: #fff;
  margin-top: 12px;
  cursor: pointer;
}

现在页面上已经有了静态的 input 和 button，先针对 input 做处理。

Set Name

切换到 client.js，先抓取 input 的 class

const nameInput = document.querySelector('.enter-input');

因为可以预期这个输入框的动作，是让使用者输入名称，所以需要监听输入的动作

nameInput.addEventListener('keyup', (e) => {
  console.log(e.target.value);
});

运行 terminal 後，测试输入结果

keyup text

可以正常监听输入的文字没问题。

Store.js

再来，建立一个 store.js 用来管理未来存取使用者名称的状态

store

切到 store.js 输入以下内容

let username = null;

const getUserName = () => {
  return username;
};

const setUserName = (value) => {
  username = value;
};

export default {
  getUserName,
  setUserName,
};

回到 client.js 进行引入，不过在引入前需要注意，module 直接使用的话，浏览器编译上会解析失败，所以需要替 index.html 引入 js 的地方加入 type="module"：

<script type="module" src="./js/client.js"></script>

// client.js
import store from './store.js';

// ...

nameInput.addEventListener('keyup', (e) => {
  store.setUserName(e.target.value);
});

// store.js

const setUserName = (value) => {
  // ...
  console.log(username);
};

现在运行测试看看，可以发现输入的文字，已经被改存在 store.js 中。

store username


<<:  Day5:今天我们来介绍一下Microsoft Defender for Endpoint

>>:  认识HTML(二)

[13th][Day25] kubernetes & docker

为什麽会从 docker 聊到 k8s(kubernetes) 呢？ 因为每个专案里面一定有 doc...

Day 48 (Node.js)

1.制作成物件 score = Object scoreList2: [ {value : 100,...

[FGL] 再探资料库 - 使用 fgldbsch 工具

Genero FGL为一个出自於资料库的语言，但怎麽和资料库搭上边的，我们还是需要来做一下理解。 ...

RISC-V on Rust 从零开始(4) - Rust 测试工具

这次要来谈的是Rust的测试框架，并且重新调整目录架构。 撰写测试 Rust本身就自带测试框架，无须...

Day 0x18 - 使用 Laravel 串接之结尾及自我检讨

今天会是单纯的自我对话，没有任何程序 0x1 回想 Laravel 开发过程 Laravel 对我来...