Develop an AI Prompt UI using HTML, CSS, and JavaScript. Learn the basics and build your frontend skills effortlessly.
Table of Contents
Creating a user-friendly interface for AI prompts enhances user experience and interaction. In this tutorial, we'll walk through building a simple AI Prompt UI using HTML, CSS, and JavaScript.
Source Code
Step 1 (HTML Code):
Begin by creating the basic HTML structure for the AI Prompt UI. Use semantic HTML elements for better accessibility and SEO.
How to do it:
- Start with the <div> container to hold the entire UI elements.
- Structure the UI elements such as input fields, buttons, and output areas using appropriate HTML tags like <input>, <button>, and <div>.
Let's break down the HTML code:
1. <!DOCTYPE html>: This declares the document type and version of the HTML being used, which is HTML5 in this case.
2. <html lang="en">: This tag defines the root element of the HTML document and specifies the language of the content, which is English in this case.
3. <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and title.
- <meta charset="UTF-8">: This specifies the character encoding for the document, which is UTF-8, capable of representing most characters in the Unicode standard.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to ensure compatibility with Internet Explorer, instructing it to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring proper rendering and scaling on different devices.
- <title>AI Prompt UI</title>: This sets the title of the webpage displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This links an external stylesheet named "styles.css" to the HTML document, allowing for the styling of the webpage.
4. <body>: This section contains the visible content of the webpage.
- <div id="form" class="form">: This div element defines a container for a form with an id of "form" and a class of "form".
- <div id="heading" class="glass glass--gradient glass--heading">: This div element contains the heading of the form with an id of "heading" and classes "glass", "glass--gradient", and "glass--heading". These classes define some styling, such as a glass effect with a gradient.
- <span class="form-header">: This span element contains the header of the form.
- <span class="form-icon"></span>: This span element represents an icon for the form.
- <span class="form-title">What would you like to build today?</span>: This span element contains the title of the form, asking the user what they would like to build today.
- <button class="form-close-button">✕</button>: This button element represents a close button for the form.
- <div id="input" class="glass">: This div element contains an input field for the form with an id of "input" and a class of "glass", indicating some styling effect.
- <input type="text" placeholder="Type your request here">: This input element is a text field where users can type their requests. The placeholder text guides what to input.
5. <script src="script.js"></script>: This script tag links an external JavaScript file named "script.js" to the HTML document, allowing for dynamic behavior and interactivity on the webpage.
Step 2 (CSS Code):
Once the basic HTML structure of the prompt is in place, the next step is to add styling to the AI prompt using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our AI prompt.
Let's break it down:
1. :root: Defines global CSS variables that can be reused throughout the stylesheet. Variables like --r, --c, --light-reflect, --shadow-reflect, and --hh are defined here.
2. body: Styles applied to the body element of the HTML document. This includes setting the display to flex, defining padding, font color, font family, alignment, minimum height, and background.
3. .form: Styles applied to the form container. It sets its position to relative, defines maximum width, height, and transition effects.
4. .form.open: Additional styles are applied to the form container when it is in an open state.
5. button and input: Styles applied to buttons and input fields to remove default browser styling, set width and height, define padding, color, and placeholder opacity.
6. @keyframes: Defines animations named text and gradient used later in the stylesheet.
7. .glass: Styles applied to elements with the class "glass", creating a glass-like effect with a shadow and light reflection. It sets the position to relative and defines border-radius, width, background, blur effect, text-shadow, and box shadow.
8. .glass--gradient and .glass--heading: Styles specific to elements with these classes, defining gradients and font size for headings.
9. .form-header: Styles applied to the header section of the form, defining height, padding, and flexbox alignment.
10. .form-icon: Styles applied to the icon within the form, defining its position, background, size, and animation.
11. .form-close-button: Styles applied to the close button of the form, defining its position, color, background, size, border-radius, and visibility transition effects.
12. [id=heading] and [id=input]: Styles applied to elements with the IDs "heading" and "input", defining transitions and animations when the form is opened or closed.
This will give our AI prompt an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
:root {
--r: 20px;
--c: #171717;
--light-reflect: inset -5px 20px 2px -20px #fff, inset 5px -20px 2px -20px #fff;
--shadow-reflect: inset -19px 1px 2px -20px #000,inset 19px 1px 2px -20px #000, inset 19px 1px 2px -20px #000, inset -15px -26px 3px -30px #000;
--hh: 8rem;
}
body {
display: flex;
padding: 0 2rem;
color: var(--c);
font-family: sans-serif;
align-items: center;
justify-content: center;
min-height: 100svh;
background: radial-gradient(#ffffff54 2px, transparent 0) 0 0/40px 40px, radial-gradient(#00000026 2px, transparent 0) -1px 1px/40px 40px, radial-gradient(ellipse at 150% -50%, #6d788f, #fff);
}
.form {
position: relative;
--gap: .5rem;
max-width: 50rem;
flex: 1 1 auto;
height: var(--hh);
transition: 250ms ease all;
}
.form.open {
height: calc(var(--hh) * 1.5 + var(--gap));
}
button {
appearance: none;
border: none;
background: none;
}
input {
appearance: none;
border: none;
background: none;
width: 100%;
height: 4rem;
padding: 0 2rem;
color: var(--c);
}
input:focus {
outline: none;
}
input::placeholder {
opacity: 0.3;
}
@keyframes text {
0% {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
.form-title {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation: text linear 1s forwards;
animation-delay: 1s;
}
@keyframes gradient {
0% {
background-size: 100%;
}
50% {
background-size: 150%;
}
100% {
background-size: 100%;
}
}
.glass {
position: relative;
display: flex;
align-items: center;
min-height: 4rem;
border-radius: var(--r);
border: none;
width: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(2px);
text-shadow: 0.25em 0.25em 1px #00000010;
--shadow-color: 0deg 0% 64%;
--shadow-elevation-high:
0.5px 1px 1.1px hsl(var(--shadow-color) / 0.28),
1.4px 3.1px 3.4px -0.4px hsl(var(--shadow-color) / 0.27),
2.5px 5.3px 5.9px -0.7px hsl(var(--shadow-color) / 0.25),
3.9px 8.4px 9.3px -1.1px hsl(var(--shadow-color) / 0.24),
6px 12.9px 14.3px -1.5px hsl(var(--shadow-color) / 0.23),
9px 19.5px 21.6px -1.8px hsl(var(--shadow-color) / 0.21),
13.4px 28.9px 32px -2.2px hsl(var(--shadow-color) / 0.2),
19.3px 41.7px 46.2px -2.6px hsl(var(--shadow-color) / 0.19),
27.1px 58.5px 64.8px -2.9px hsl(var(--shadow-color) / 0.17),
37.1px 80px 88.6px -3.3px hsl(var(--shadow-color) / 0.16);
--inner-light: inset 0 -6px 2px -5px #ffffff24, inset 0 -8px 3px -5px #ffffff3b, inset 0 -20px 10px -15px #ffffff5c, inset 7px 25px 10px -20px #ffffff5c;
--inner-shadow: inset -20px 5px 10px -20px #00000021, inset -40px 50px 7px -55px #00000021;
--external-light: 5px -30px 30px -20px #ffffff70, 5px 10px 30px -20px #ffffff70;
--default: var(--external-light), var(--shadow-elevation-high), var(--inner-light), var(--inner-shadow);
box-shadow: var(--default);
}
.glass:focus {
outline: none;
}
.glass--gradient {
background-position: center;
animation: gradient 10s linear infinite;
background: linear-gradient(45deg, #85d5e757, #7a9ed254, #ba6ac93d, #de54c217, #f86b2d4f);
}
.glass--heading {
font-size: 1.1rem;
}
.glass--heading:before {
--i: 2px;
opacity: 0.6;
}
.glass--heading:after {
--i: 4px;
}
.glass--heading:before, .glass--heading:after {
content: "";
pointer-events: none;
position: absolute;
inset: var(--i);
border-radius: calc(var(--r) - var(--i));
box-shadow: var(--light-reflect), var(--shadow-reflect);
}
.glass > * {
position: relative;
z-index: 1;
}
.glass:before {
--r: 20px;
--bp: 50px;
--s: calc(0% + var(--bp) + var(--r));
--e: calc(100% - var(--bp) - var(--r));
--z: calc(0% + var(--bp));
--h: calc(100% - var(--bp));
content: "";
position: absolute;
}
.form-header {
height: var(--hh);
padding: 0 2rem;
display: flex;
align-items: center;
gap: 2rem;
}
@keyframes icon {
0% {
rotate: 0deg;
scale: 0.8;
filter: hue-rotate(0deg);
}
50% {
rotate: 180deg;
scale: 1.2;
filter: hue-rotate(90deg);
}
100% {
rotate: 360deg;
scale: 0.8;
filter: hue-rotate(0deg);
}
}
.form-icon {
position: relative;
background: rgba(255, 255, 255, 0.2);
display: block;
aspect-ratio: 1;
flex: 0 0;
border-radius: 50px;
height: 4rem;
box-shadow: var(--light-reflect), var(--shadow-reflect);
}
.form-icon:before {
animation: icon 5000ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
content: "";
position: absolute;
inset: 0;
background: url(https://cdn.discordapp.com/attachments/1050016262035619861/1159132066592591893/ia.png?ex=651ec55c&is=651d73dc&hm=162828e7743ded23e27d4fe81ee09e4df9f283e32a32bc322b99c116a4f307b7) center/90% 90% no-repeat;
}
.form-close-button {
position: absolute;
color: var(--c);
background: rgba(255, 255, 255, 0.3);
top: 0.75rem;
right: 0.75rem;
box-shadow: var(--light-reflect), var(--shadow-reflect);
display: grid;
place-content: center;
height: 1.5rem;
width: 1.5rem;
border-radius: 50px;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: 250ms ease opacity;
}
.open .form-close-button {
visibility: visible;
opacity: 1;
}
[id=heading] {
transition: 250ms ease all;
cursor: pointer;
}
.form:not(.open) [id=heading]:hover {
scale: 0.99;
filter: brightness(0.95);
}
.form:not(.open) [id=heading]:active {
scale: 0.98;
filter: brightness(0.8);
}
[id=input] {
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: var(--hh);
transition: 500ms ease all;
translate: 0 0;
opacity: 0;
}
.open [id=input] {
translate: 0 calc(var(--hh) + var(--gap));
height: calc(var(--hh) / 2);
opacity: 1;
z-index: 2;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Let's break down what each line does:
1. const form = document.getElementById("form");
- This line selects an HTML element with the ID "form" and assigns it to a constant variable named form. The document.getElementById() function is used to retrieve the element from the HTML document by its ID.
2. const heading = document.getElementById("heading");
- Similar to the previous line, this selects an HTML element with the ID "heading" and assigns it to a constant variable named heading.
3. heading.onclick = (e) => { ... }
- This line attaches an event listener to the heading element. Specifically, it listens for a click event. When the heading element is clicked, the code inside the curly braces ({}) will be executed.
4. (e) => { form.classList.toggle('open') }
- This is an arrow function, which is a concise way to define a function in JavaScript. When the heading element is clicked, this function is executed. Inside the function, it toggles the class "open" on the form element. The classList.toggle() method adds the class "open" to the form element if it's not already present, and removes it if it's already there.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const form = document.getElementById("form");
const heading = document.getElementById("heading");
heading.onclick = (e) => {
form.classList.toggle('open')
}Final Output:
Conclusion:
Congratulations! You've successfully built a simple AI Prompt UI using HTML, CSS, and JavaScript. Keep practicing and exploring more advanced techniques to enhance your frontend development skills.
Code by: Vincent Durand
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
