Open In App

Create ChatGPT Template using HTML CSS & JavaScript

Last Updated : 01 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Create a customizable ChatGPT interface using HTML, CSS, and JavaScript. Implement features like message input, display area, and toggle buttons for themes. Customize styles and interactions to suit your preferences and requirements.

imresizer-1714140066679

Prerequisites:

Approach

  • Create a new HTML file and include necessary CSS and JavaScript files. Design the chat interface using HTML and CSS, including input box, send button, and chat window.
  • Write JavaScript functions to handle user input, send messages, receive responses, and display them in the chat window.
  • Create a chat interface with input box and send button.
  • Use JavaScript to handle user input, send messages, and receive responses.
  • Simulate chatbot responses with random messages. Display messages in the chat window.
  • Style the chat interface to make it visually appealing and user-friendly.

Example: The example Creates Your Own ChatGPT in HTML CSS and JavaScript.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>ChatGPT</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="sidebar collapsed">
        <div class="tooltip">
            <span class="tooltiptext">
              Open Sidebar
              </span>
            <button id="sidebar-toggle">
              <i class="fas fa-chevron-right"></i>
              </button>
        </div>
        <div class="sidebar-content">
            <div class="conversation-list">
                <div class="conversation">
                    <p class="conversation-text">
                      Last Conversation:
                      </p>
                    <p class="conversation-content">
                      No conversation yet
                      </p>
                </div>
            </div>
            <button id="new-conversation-btn">
              Start New Conversation
              </button>
        </div>
    </div>
    <div class="chat-container light-mode">
        <div class="chat-content">
            <div class="chat-header">
                <div class="logo-container">
                    <h1>ChatGPT 3.5&nbsp;
                      <i class="fa fa-caret-down"></i>
                      </h1>
                </div>
                <div class="mode-toggle">
                    <label class="switch">
                        <input type="checkbox" 
                               id="mode-toggle-checkbox">
                        <span class="slider round"></span>
                    </label>
                </div>

            </div>
            <div class="chat-box" id="chat-box"></div>
            <div class="input-container">
                <input type="text" id="user-input" 
                       placeholder="Type your message...">
                <button id="send-button">
                  <b>&uarr;</b>
                  </button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>
CSS
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

.light-mode {
    background-color: #f5f5f5;
    color: #333;
}

.dark-mode .chat-container {
    background-color: #1e1e1e;
    color: #f5f5f5;
}

.sidebar {
    width: 300px;
    height: 100vh;
    background-color: #171717;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-x: hidden;
    transition: width 0.3s;
}

.light-mode .sidebar {
    background-color: #f5f5f5;
}

.sidebar.collapsed {
    width: 50px;
}

.tooltip {
    position: absolute;
    top: 0;
    right: -20px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(0, 0, 0);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

#sidebar-toggle {
    background-color: transparent;
    margin: -22%;
    align-items: center;
    margin-top: 600%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;

    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.sidebar-content {
    padding-top: 20px;
    transition: opacity 0.3s;
}

.sidebar.collapsed .sidebar-content {
    opacity: 0;
    pointer-events: none;
}

.conversation-list {
    padding: 0 20px;
}

.conversation {
    margin-bottom: 10px;
}

.conversation-text {
    font-weight: bold;
    color: #fff;
}

.conversation-content {
    color: #ddd;
}

#new-conversation-btn {
    background-color: #3a3b3b;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#new-conversation-btn:hover {
    background-color: #242020;
}

.chat-container {
    width: 70%;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.sidebar.collapsed+.chat-container {
    width: calc(100% - 50px);
    margin-left: 50px;
}

.chat-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.chat-header {
    margin-left: 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    height: 60px;
    background-color: #171717;
}

.light-mode h1 {
    color: black;
}

.dark-mode h1 {
    background-color: #1e1e1e;
    color: #f5f5f5;
}

.light-mode .chat-header {
    background-color: #f5f5f5;
    color: #333;
}

.dark-mode .chat-header {
    background-color: #1e1e1e;
    color: #f5f5f5;
}

h1 {
    color: #cfcfcf;
    font-family: 'Trebuchet MS', sans-serif;
}

.mode-toggle {
    display: flex;
    align-items: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

input:checked+.slider {
    background-color: #484849;
}

input:checked+.slider:before {
    transform: translateX(16px);
}

.slider.round {
    border-radius: 34px;
}

.chat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.chat-box p {
    margin: 10px 0;
    font-size: 16px;
}

.input-container {
    display: flex;
    padding: 15px;
    border-top: 0.01px solid #5c5b5b;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    margin-left: 5%;
    border-radius: 30%;
    border: 1px solid #ccc;
    background-color: #1e1e1e;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.light-mode input {
    color: #171717;
    background-color: #f9f9f9;
}

.dark-mode input {
    color: #ddd;
    background-color: #1d1c1c;
}

.light-mode button {
    color: #171717;
    background-color: #f9f9f9;
}

button {
    padding: 10px 20px;
    border: none;
    border: 1px solid #ccc;
    margin-right: 5%;
    background-color: #1d1c1c;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
JavaScript
const chatBox = 
    document.getElementById('chat-box');
const userInput = 
    document.getElementById('user-input');
const sendButton = 
    document.getElementById('send-button');
const sidebarToggle = 
    document.getElementById('sidebar-toggle');
const modeToggle = 
    document.getElementById('mode-toggle-checkbox');
const sidebar = 
    document.querySelector('.sidebar');

modeToggle.addEventListener('change', () => {
    document.body.classList.toggle('dark-mode');
});

sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        sendMessage();
    }
});

document.addEventListener('DOMContentLoaded', function () {
    const newConversationBtn = 
            document.getElementById('new-conversation-btn');
    const conversationContent = 
            document.querySelector('.conversation-content');
    const sidebarToggle = 
            document.getElementById('sidebar-toggle');
    const chatContainer = 
            document.querySelector('.chat-container');

    sidebarToggle.addEventListener('click', function () {
        const sidebar = document.querySelector('.sidebar');
        sidebar.classList.toggle('collapsed');

        if (sidebar.classList.contains('collapsed')) {
            chatContainer.style.width = '96%';
            chatContainer.style.marginLeft = '3%';
        } else {
            chatContainer.style.width = 'calc(100% - 300px)';
            chatContainer.style.marginLeft = '300px';
        }
    });
    newConversationBtn.addEventListener('click', function () {
        conversationContent.textContent = "New Conversation Started!";
    });

    modeToggleCheckbox.addEventListener('change', function () {
        chatContainer.classList.toggle('light-mode');
        chatContainer.classList.toggle('dark-mode');
    });
});

function sendMessage() {
    const message = userInput.value.trim();
    if (message !== '') {
        appendMessage('user', message);
        getResponse(message);
        userInput.value = '';
    }
}

function appendMessage(sender, message) {
    const p = document.createElement('p');
    p.textContent = `${sender}: ${message}`;
    chatBox.appendChild(p);
    chatBox.scrollTop = chatBox.scrollHeight;
}

function getResponse(message) {
    let response;
    const greetings = 
        ["Hello!", "Hi there!", "Hey!", "Greetings!"];
    const affirmatives = 
        ["Yes", "Certainly", "Of course", "Absolutely"];
    const negatives = 
        ["No", "Sorry, I can't do that", "Unfortunately not", "I'm afraid not"];
    const thanks = 
        ["You're welcome!", "No problem!", "Glad to help!", "Anytime!"];
    const commands = {
        "help": "You can ask me questions or chat about various topics.",
        "time": getCurrentTime(),
        "date": getCurrentDate(),
        "weather": getWeatherInfo(),
        "joke": getJoke(),
        "fact": getFact(),
        "quote": getQuote(),
        
        // Add more commands here as needed
    };

    if (message.toLowerCase() in commands) {
        response = commands[message.toLowerCase()];
    } else if (message.toLowerCase().includes("thank")) {
        response = getRandomElement(thanks);
    } else if (message.toLowerCase().includes("yes")) {
        response = getRandomElement(affirmatives);
    } else if (message.toLowerCase().includes("no")) {
        response = getRandomElement(negatives);
    } else {
        response = getRandomElement(greetings);
    }

    setTimeout(() => appendMessage('ChatGPT', response), 1000);
}

function getCurrentTime() {
    const now = new Date();
    return `Current time is ${now.toLocaleTimeString()}`;
}

function getCurrentDate() {
    const now = new Date();
    return `Today's date is ${now.toDateString()}`;
}

function getWeatherInfo() {

    // Simulate getting weather information from an API
    const weatherData = {
        temperature: getRandomNumber(10, 35),
        condition: getRandomElement(["Sunny", "Cloudy", "Rainy", "Windy"]),
    };
    return `Current weather: ${weatherData.temperature}°C,
                             ${weatherData.condition}`;
}

function getJoke() {
    
    // Simulate getting a random joke
    const jokes = ["Why don't scientists trust atoms? Because they make up everything!",
        "Parallel lines have so much in common. It's a shame they'll never meet.",
        "I told my wife she was drawing her eyebrows too high. She looked surprised.",
        "Why did the scarecrow win an award? Because he was outstanding in his field!"
    ];
    return getRandomElement(jokes);
}

function getFact() {
    
    // Simulate getting a random fact
    const facts = ["Ants stretch when they wake up in the morning.", 
                   "A group of flamingos is called a flamboyance.",
                   "Honey never spoils.",
                   "The shortest war in history lasted only 38 minutes.",
                   "Octopuses have three hearts."
    ];
    return getRandomElement(facts);
}

function getQuote() {
    
    // Simulate getting a random quote
    const quotes = 
        ["The only way to do great work is to love what you do. – Steve Jobs",
        "In the middle of difficulty lies opportunity. – Albert Einstein",
        "Success is not final, failure is not fatal: It is the courage to continue that counts. – Winston Churchill"
    ];
    return getRandomElement(quotes);
}

function getRandomElement(array) {
    const randomIndex = Math.floor(Math.random() * array.length);
    return array[randomIndex];
}

function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
getResponse('Hello');

Output:

6945794-ezgifcom-video-to-gif-converter



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads