Exercise 12 Chat box (IMD)


 

HTML___

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Message Box </title>

<link rel="stylesheet" href="Exercise 012 Chat box css.css">

</head>


<body>


<section>


<h1> HI! Welcome to Alexa 👩 click the button to assist you </h1>

<button class="chat-btn"> <b> CHAT </b> </button>

<div id="chat-container" onclick="changeColor()" class="chat-popup">

<div class="chat-area">

<div class="income-msg">

<img src="https://i.ibb.co/31dgnVS/rikkaasa.png" class="Alexa" alt="Alexa">

<span class="msg"> What can I help you?  </span>

</div>

</div>

<div class="input-area">

<input id="name-input" type="name" size="10" style="margin-right:8px;" placeholder="name">

<input id="message-input" type="text" placeholder="Type your message here">

<input type="color" id="colorpicker" class="colors" value="#C7C7C7">

<button class="submit"> SEND </button>

</div>

</div>

</section>


<script src="Exercise 012 Chat box js.js"> </script>


</body>

</html>



CSS____


*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

button {
border: none;
outline: none;
cursor: pointer;
}

body {
font-family: Century Gothic, Helvetica, sans-serif;
background-color: #3da160;
display: flex;
justify-content: center;
height: 100vh;
width: 100%;
}

section {
max-width: 1200px;
margin: auto;
text-align: center;
padding: 0 1.5rem;
}

h1 {
font-size: 4rem;
margin-bottom: 40rem;
}

.chat-btn {
position: fixed;
right: 1000px;
bottom: 300px;
background: brown;
color: white;
width: 300px;
height: 300px;
border-radius: 20%;
opacity: 0.7;
transition: opacity 0.3s;
box-shadow: 0 5px 5px rgba(0,0,0,0.4);
}

.chat-btn:hover, .submit:hover, .colors:hover {
opacity: 1;
}

.chat-popup {
display: none;
position: fixed;
bottom: 270px;
right: 340px;
height: 400px;
width: 625px;
background-color: #b59e88;
flex-direction: column;
justify-content: space-between;
padding: 1.75rem;
box-shadow: 10px 5px 5px rgba(0,0,0,0.4);
border-radius:60px;
}

.show {
display: flex;
}

.chat-area{
height: 80%;
overflow-y: auto;
overflow-x: hidden;
}

.income-msg {
display: flex;
align-items: center;
}

.Alexa {
width: 60px;
height:60px;
border-radius: 80%;
object-fit: cover;
}

.income-msg .msg {
background-color: white;
color: black;
padding: 0.6rem;
border-radius: 8px;
margin-left: 1rem;
box-shadow: 0 2 5px rgba(0,0,0,0.4);
border: 1px solid gray;
}

.input-area {
position: relative;
display: flex;
justify-content: center;
}

input [type="text"], input [type="name"] {
width: 100%;
border: 1px solid #ccc;
font-size: 1rem;
border-radius: 5%;
height: 2.2rem;
padding: 2px;
}

.colors {
margin-left: 0.5rem;
background-color: white;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
opacity: 0.7;
}

.submit {
padding: 0.25rem 0.5rem;
margin-left: 0.5rem;
background-color: white;
color: black;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
border: 1px solid gray;
opacity: 0.7;
}

.out-msg {
display: flex;
justify-content:flex-end;
align-items: center;
}

.my-msg {
display: flex;
justify-content: flex-end;
margin: 0.75rem;
padding: 0.6rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px, 5px rgba (0,0,0,0.4);
border: 5px solid gray;
word-break: break-all;
}

@media (max-width:500px){
.chat-popup{
bottom: 120px;
right: 10%;
width: 80vw;
}
}


Js__

const popup = document.querySelector('.chat-popup');
const chatBtn = document.querySelector('.chat-btn');
const submitBtn = document.querySelector('.submit');
const chatArea = document.querySelector('.chat-area');
const inputElm = document.querySelector('input');
const nameInput = document.getElementById('name-input');
const messageInput = document.getElementById('message-input');

chatBtn.addEventListener('click', ()=>{
popup.classList.toggle('show');
})

function changeColor() {
document.getElementById("chat-container").style.backgroundColor = 
document.getElementById("colorpicker").value;
}

submitBtn.addEventListener('click', ()=>{
let name = nameInput.value;
let message = messageInput.value;
let temp =
`<div class="out-msg">
<span class="my-msg">${name}: ${message}</span>
<img src="https://i.ibb.co/Ld0R6H2/John-Wick-4.png" class="Alexa">
</div>`;
chatArea.insertAdjacentHTML("beforeEnd", temp);
nameInput.value = '';
messageInput.value = '';
})



Comments

Post a Comment

Popular posts from this blog

Exercise 11 : Counting Drill Game (IMD)

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Game 0v0 </title> <style> html { font-family: Century Gothic; margin-left: 20%; background-color: #17b8d4;     }        body { max-width: 100px; min-width: 480px;     } fieldset { background-color:#ae94e0; } button { background-color:#c9c012; color: black; border-radius: 30px; width: 200px; height: 60px; } </style> </head> <body> <h1>Count Game!!!</h1> <p> Let's count the shapes on the screen!!!</p> <fieldset> <canvas id="myCanvas" width="995" height="500" style="border:20px;"> </canvas> <label> How many shapes do you see??? </label> <input type="number" id="answer"> </input> <!-- <button id="colors" onclick="colors()" > Colors </but...
Read more

Exercise 12 Responsive Web Page Design (WP)

Image
  HTML <!DOCTYPE html> <html> <head>     ​<meta name="viewport" content="width=device-width, initial-scale=1"> <style> fieldset     { background: #9e4333;       }                body {background-color: #00A4E4;}     }           iframe:focus {   outline: none; } iframe[seamless] {   display: block; } .navbar {   overflow: hidden;   background-color: #121211; } .navbar a {   float: left;   font-size: 16px;   color: #9e4333;   text-align: center;   padding: 14px 16px;   text-decoration: none; } .dropdown {   float: left;   overflow: hidden; } .dropdown .dropbtn {   font-size: 16px;     border: none;   outline: none;   color:#9e4333;   padding: 14px 16px;   background-color: inherit;   font-family: inherit;   margin: 0;...
Read more