第三天
#100daysofmiva 編碼挑戰已經過去三天了。 ???
今天，我沒有在后端做任何事情。我需要加強我的前端技能。我將使用 javascript 進行簡單的按鈕用戶體驗設計。您是否曾經在任何網站或應用程序上提交過表單，而不僅僅是等待響應，您可以看到這些精美的文本在您單擊的按鈕上發生變化。
這就是我今天要編碼的內容。走吧！???
我們將使用基本的 html 和動態 js 開發客戶端（也稱為前端）。
超文本標記語言
對于 html，我編寫了一個帶有一個輸入和一個提交按鈕的基本表單。
<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>
登錄后復制
此表單是一個簡單的 html 結構，允許用戶輸入隨機單詞并提交。以下是每個元素的細分：
1.
用途：充當表單及其相關元素的容器。
內容： – 標有“按鈕 ui”的標題 (
)。
消息區域（），表單提交后向用戶顯示反饋。 – 實際表單（），其中包含一個輸入字段和一個提交按鈕。
2.
按鈕 ui
用途：為包含表單的頁面部分提供標題。
文字：“按鈕 ui”。
3.
用途：此 div 用于向用戶顯示消息，例如在提交表單后確認他們輸入的內容。最初，它是空的并且可能被隱藏，但它將填充文本并在表單提交后顯示。
4.
用途：這是將輸入字段和提交按鈕組合在一起的表單元素。
屬性：
id=”linkform”：為表單提供唯一標識符，以便可以在 javascript 中引用。
onsubmit=”submitform(event)”：指定提交表單時要調用的 javascript 函數。 submitform(event) 函數旨在處理表單提交過程并防止重新加載頁面的默認行為。
5.
用途：為輸入字段提供標簽，通過指示用戶應輸入的內容來提高可訪問性。
屬性： – for=”rand_word”：將標簽與 id=”rand_word” 的輸入字段關聯起來。
文字：“輸入隨機單詞”。
6.
用途：這是用戶輸入隨機單詞的輸入字段。
屬性：
type=”text”: 表示這是一個文本輸入字段。
id=”rand_word”：為輸入提供唯一標識符，將其鏈接到標簽并允許在 javascript 中引用它。
name=”rand_word”: 這是提交表單時將發送的表單數據密鑰的名稱。
placeholder=”e.g what is life?”：在用戶輸入任何內容之前在輸入字段內提供提示，建議他們可能輸入的內容的示例。
required：使此字段成為必填字段，這意味著在用戶輸入某些內容之前無法提交表單。
7.
用途：這是用戶點擊提交表單的按鈕。
屬性：
type=”submit”: 表示點擊此按鈕將提交表單數據。
id=”submitbutton”: 為按鈕提供唯一標識符，因此可以通過 javascript 輕松訪問和修改。
文本：“提交”——這是按鈕上顯示的文本。
html 概要
用戶交互：用戶在輸入字段中輸入隨機單詞，然后單擊“提交”按鈕。提交表單時，將調用 submitform(event) javascript 函數，該函數處理提交過程（例如，顯示消息、防止頁面重新加載、可能將數據發送到服務器）。
用途：此表單可用于各種目的，例如收集用戶輸入、與后端服務交互，甚至只是在用戶界面中演示表單處理。
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>
登錄后復制
此 javascript 代碼處理表單提交過程，通過使用動畫點和更改消息模擬動態等待期來提供增強的用戶體驗。
下面是結果
作為后端開發人員，我遇到的唯一問題是讓點動畫化。這花了一段時間，但我能夠克服它。我期待著明天的編碼??
點擊此處預覽最終結果 https://app.marvelly.com.ng/100daysofmiva/day-3/
