第三天
#100daysofmiva 編碼挑戰(zhàn)已經(jīng)過去三天了。 ???
今天，我沒有在后端做任何事情。我需要加強(qiáng)我的前端技能。我將使用 javascript 進(jìn)行簡(jiǎn)單的按鈕用戶體驗(yàn)設(shè)計(jì)。您是否曾經(jīng)在任何網(wǎng)站或應(yīng)用程序上提交過表單，而不僅僅是等待響應(yīng)，您可以看到這些精美的文本在您單擊的按鈕上發(fā)生變化。
這就是我今天要編碼的內(nèi)容。走吧！???
我們將使用基本的 html 和動(dòng)態(tài) js 開發(fā)客戶端（也稱為前端）。
超文本標(biāo)記語(yǔ)言
對(duì)于 html，我編寫了一個(gè)帶有一個(gè)輸入和一個(gè)提交按鈕的基本表單。
<div>
<h2>button ui</h2>
<div id="message"></div>
<form id="linkform" onsubmit="submitform(event)">
<label for="rand_word">enter random word</label>
<input type="text" id="rand_word" name="rand_word" placeholder="e.g what is life?" required><button type="submit" id="submitbutton">submit</button>
</form>
</div>
登錄后復(fù)制
此表單是一個(gè)簡(jiǎn)單的 html 結(jié)構(gòu)，允許用戶輸入隨機(jī)單詞并提交。以下是每個(gè)元素的細(xì)分：
1.
用途：充當(dāng)表單及其相關(guān)元素的容器。
內(nèi)容： – 標(biāo)有“按鈕 ui”的標(biāo)題 (
)。
消息區(qū)域（），表單提交后向用戶顯示反饋。 – 實(shí)際表單（），其中包含一個(gè)輸入字段和一個(gè)提交按鈕。
2.
按鈕 ui
用途：為包含表單的頁(yè)面部分提供標(biāo)題。
文字：“按鈕 ui”。
3.
用途：此 div 用于向用戶顯示消息，例如在提交表單后確認(rèn)他們輸入的內(nèi)容。最初，它是空的并且可能被隱藏，但它將填充文本并在表單提交后顯示。
4.
用途：這是將輸入字段和提交按鈕組合在一起的表單元素。
屬性：
id=”linkform”：為表單提供唯一標(biāo)識(shí)符，以便可以在 javascript 中引用。
onsubmit=”submitform(event)”：指定提交表單時(shí)要調(diào)用的 javascript 函數(shù)。 submitform(event) 函數(shù)旨在處理表單提交過程并防止重新加載頁(yè)面的默認(rèn)行為。
5.
用途：為輸入字段提供標(biāo)簽，通過指示用戶應(yīng)輸入的內(nèi)容來提高可訪問性。
屬性： – for=”rand_word”：將標(biāo)簽與 id=”rand_word” 的輸入字段關(guān)聯(lián)起來。
文字：“輸入隨機(jī)單詞”。
6.
用途：這是用戶輸入隨機(jī)單詞的輸入字段。
屬性：
type=”text”: 表示這是一個(gè)文本輸入字段。
id=”rand_word”：為輸入提供唯一標(biāo)識(shí)符，將其鏈接到標(biāo)簽并允許在 javascript 中引用它。
name=”rand_word”: 這是提交表單時(shí)將發(fā)送的表單數(shù)據(jù)密鑰的名稱。
placeholder=”e.g what is life?”：在用戶輸入任何內(nèi)容之前在輸入字段內(nèi)提供提示，建議他們可能輸入的內(nèi)容的示例。
required：使此字段成為必填字段，這意味著在用戶輸入某些內(nèi)容之前無法提交表單。
7.
用途：這是用戶點(diǎn)擊提交表單的按鈕。
屬性：
type=”submit”: 表示點(diǎn)擊此按鈕將提交表單數(shù)據(jù)。
id=”submitbutton”: 為按鈕提供唯一標(biāo)識(shí)符，因此可以通過 javascript 輕松訪問和修改。
文本：“提交”——這是按鈕上顯示的文本。
html 概要
用戶交互：用戶在輸入字段中輸入隨機(jī)單詞，然后單擊“提交”按鈕。提交表單時(shí)，將調(diào)用 submitform(event) javascript 函數(shù)，該函數(shù)處理提交過程（例如，顯示消息、防止頁(yè)面重新加載、可能將數(shù)據(jù)發(fā)送到服務(wù)器）。
用途：此表單可用于各種目的，例如收集用戶輸入、與后端服務(wù)交互，甚至只是在用戶界面中演示表單處理。
javascript
<!-- JavaScript Code -->
<script>
function submitForm(event) {
event.preventDefault(); // Prevent the form from submitting the default way
const formData = new FormData(document.getElementById('linkForm'));
const submitButton = document.getElementById('submitButton');
const message = document.getElementById('message');
const randWord = formData.get('rand_word'); // Get the value of the rand_word field
let dotCount = 0;
const updateDots = () => {
dotCount = (dotCount + 1) % 4;
return '.'.repeat(dotCount);
};
const baseMessages = [
"Submitting",
"Still working on it",
"Hold on",
"Almost done"
];
submitButton.innerText = `${baseMessages[0]}${updateDots()}`;
submitButton.classList.add('submitting');
submitButton.disabled = true;
message.style.display = 'none'; // Hide the message box initially
// Generate a random delay between 1 and 10 seconds const delay = Math.floor(Math.random() * 9000) + 1000;
if (delay > 2000) {
let messageIndex = 0;
const messageInterval = setInterval(() => {
submitButton.innerText = `${baseMessages[messageIndex]}${updateDots()}`;
if (dotCount === 0) {
messageIndex = (messageIndex + 1) % baseMessages.length;
}
}, 500); // Clear the interval after the delay to stop the loop
setTimeout(() => clearInterval(messageInterval), delay - 500);
}
// Simulate a wait time of random delay
setTimeout(() => { message.innerText = 'You typed: ' + randWord; // Show the submitted data in the message box
message.style.display = 'block';
submitButton.innerText = 'Submitted';
submitButton.classList.remove('submitting');
submitButton.classList.add('submitted');
// Reset the button state after 2 seconds
setTimeout(() => { submitButton.innerText = 'Submit';
submitButton.classList.remove('submitted'); submitButton.disabled = false;
}, 4000);
document.getElementById('linkForm').reset(); // Reset the form fields
}, delay); // Wait for the random delay before showing the message
}</script>
登錄后復(fù)制
此 javascript 代碼處理表單提交過程，通過使用動(dòng)畫點(diǎn)和更改消息模擬動(dòng)態(tài)等待期來提供增強(qiáng)的用戶體驗(yàn)。
下面是結(jié)果
作為后端開發(fā)人員，我遇到的唯一問題是讓點(diǎn)動(dòng)畫化。這花了一段時(shí)間，但我能夠克服它。我期待著明天的編碼??
點(diǎn)擊此處預(yù)覽最終結(jié)果 https://app.marvelly.com.ng/100daysofmiva/day-3/
