Placeholder With Icons

INFORMATION & CODE

Placeholder With Icons

What the Code Does

This code creates a retro-styled, interactive web component designed to capture and validate user email input. Visually, the design leans heavily into an arcade or terminal aesthetic, featuring a double-bordered green neon container, custom rounded buttons, and specialized typography imported from Google Fonts (Press Start 2P and VT323).

Functionally, the code handles form submission locally using JavaScript. When a user clicks the submit button, the script checks if the input field is empty. If it is empty, it triggers an error message prompting the user to fill out the field. If the user successfully enters text, the form hides itself and dynamically updates the DOM to display a success message confirming the captured email address. In both scenarios, a timer (setInterval) is utilized to eventually clear the inputs, reset the view, and return the interface to its original state. Additionally, the input field creatively incorporates a FontAwesome icon directly into its HTML placeholder text (using the Unicode value  for an email envelope).

How It Works

The functionality is split across three standard web development layers: HTML, CSS, and JavaScript.

HTML Structure: The HTML document lays out the container (.inputWrapper), a <form> element containing a text input for the email, and a submit button. It also provides empty .heading and .paragraph elements that remain hidden until activated by JavaScript. External resources are linked in the <head>, including a custom favicon, a CSS stylesheet, Google Fonts, and the FontAwesome script needed to render the placeholder icon.
CSS Styling: The stylesheet styles the elements to achieve a retro aesthetic. It uses bold green double-borders (border: 7px double #0f0), rounded edges, and specific positioning (like centering the text input using transform: translateX(-50%)). Crucially, the CSS includes utility classes like .active which are toggled to control the visibility of specific elements (display: none vs. display: block).
JavaScript Logic: The script queries the DOM to cache references to the form elements, inputs, headings, and paragraphs. It listens for a click event on the submit button. When clicked, it reads the value inside the input field.
- If the input is empty (inp === ''), it applies the .active class to the paragraph element, populates it with an error message, and sets a 15-second interval to execute a reset function (closePage).
- If the input contains text, it hides the input wrapper by adding the .active class to it, reveals the heading and paragraph, formats a success message (Email=${inp}), and sets a 10-second interval to reset the page.
- The closePage function reverses these state changes by removing the .active classes, clearing the input value, and wiping the text content of the heading and paragraph.

How to Use It

To implement and use this code in your own project, follow these steps:

Separate into Files: Create three separate files in the same directory:
- Paste the HTML code into a file named index.html.
- Paste the CSS code into a file named styles.css.
- Paste the JavaScript code into a file named scripts.js.
Customize Styles: Note that the CSS references a custom CSS variable (var(--bg-secondary)). You will either need to define this variable in a root selector within your CSS or replace it with a standard color hex code (e.g., #000 for a black background) to ensure the container background renders properly.
Host and Run: Open the index.html file in any modern web browser (or run it using a local development server like Live Server in VS Code).
Test the Interaction: Click the "SUBMIT" button without typing anything to test the error handling state. Then, type a dummy email address (e.g., test@example.com) and click "SUBMIT" again to see the confirmation message appear before the script automatically resets the form back to its initial state.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placeholder With Icons</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link rel="stylesheet" href="styles.css"> 
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js">crossorigin="anonymous"></script>
   </head>
  <body>
    <div class="inputWrapper">
      <form method="get">
        <label>Email:</label>
        <input class="input" type="text" placeholder=" Email Address *" required="true">
        <button type="button" class="submit">SUBMIT</button>
      </form>
    </div>
    <h3 class="heading"></h3>
    <p class="paragraph"></p>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                * {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}

body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  font-size: 16px;
  line-height: 1.5;
}
                  
.input-wrapper {
  width: 100%;
  display: block;
}
      
.active.inputWrapper {
  display: none;
}
      
form {
  width: 100%;
  padding: 30px 20px;
  background: #e1e1e1;
  border: 7px double #0f0;
  border-radius: 34px;
  outline-color: #0d0;
  color: #0a0;
}
      
input[type="text"] {
  position: relative;
  top: 10px;
  left: 50%;
  transform: translatex(-50%);
  width: 100%;
  padding: 15px 10px;
  border: 7px double #0f0;
  border-radius: 34px;
  outline-color: #0d0;
  color: #0a0;
  font-size: 18px;
  cursor: pointer;
}
      
.input::placeholder {
  position: relative;
  width: 100%;
  padding: 5px 2px;
  color: #7c7;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 15px
}
      
button[type="button"] {
  width: 50%;
  padding: 22px;
  margin: 30px 0 0 50%;
  background: #0c0;
  border: 0;
  outline: 0;
  color: #fff;
  border-radius: 34px;
}

.heading {
  display: none;
}

.active.heading {
  display: block;
}

.paragraph {
  display: none;
  padding: 15px 5px;
  background: #fff;
  border: 1px solid #a0a0a0;
  font-size: 26px;
}

.active.paragraph {
  display: block;
}

JAVASCRIPT


                const inpWrap = document.querySelector('.inputWrapper');
const input = document.querySelector('.input');
const submit = document.querySelector('.submit');
const heading = document.querySelector('.heading');
const para = document.querySelector('.paragraph');

submit.addEventListener('click', () => {
  let inp = input.value;
  if (inp === '') {
    para.classList.add('active');
    para.textContent = 'You must add your email address to the above input field.';
    setTimeout(closePage, 15000);
  }else{
    inpWrap.classList.add('active');
    heading.classList.add('active');
    para.classList.add('active');
    heading.textContent = `Your input was received as:`
    para.textContent = `Email=${inp}`;
    setTimeout(closePage, 10000);
  }
});

function closePage() {
  inpWrap.classList.remove('active');
  heading.classList.remove('active');
  para.classList.remove('active');
  input.value = '';
  let inp = input.value;
  heading.textContent = '';
  para.textContent = '';
  form.reset();
}

MENU

INFORMATION & CODE