INTERACTIVE MEDIA DESIGN EXERCISE :12 CHAT BOX OR MESSAGE BOX

-







HTML CODE
 <!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="CHATBOX.CSS">
</head>

<body>

<section>

<h1> LETS CHAT WITH RYU  </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://scontent.fmnl4-3.fna.fbcdn.net/v/t1.6435-9/cp0/131567044_1116978968826060_6402764416804090011_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=730e14&_nc_ohc=GfPXJEyQDD0AX--aFQf&tn=YuajwRwIQTrn3Wu1&_nc_ht=scontent.fmnl4-3.fna&tp=29&oh=8cbd6b8627438b82fa88300782ee5036&oe=60CB662B" class="RYU" alt="RYU">
<span class="msg"> RYU: YES,HANDSOME? </span>
</div>
</div>
<div class="input-area">
<input id="name-input" type="name" size="10" style="margin-right:8px;" placeholder="Type your 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="CHATBOX.JS"> </script>

</body>
</html>


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

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

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

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

h1 {
font-size: 3rem;
margin-bottom: 2rem;
}

.chat-btn {
position: fixed;
right: 50px;
bottom: 50px;
background: white;
color: black;
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 0.8;
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: 80px;
right: 120px;
height: 400px;
width: 425px;
background-color: #C7C7C7;
flex-direction: column;
justify-content: space-between;
padding: 0.75rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
border-radius: 10px;
}

.show {
display: flex;
}

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

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

.kai {
width: 45px;
height: 45px;
border-radius: 50%;
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: 1px solid gray;
word-break: break-all;
}

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


JAVA CODE
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://scontent.fmnl4-4.fna.fbcdn.net/v/t1.6435-9/cp0/200910498_1116979112159379_2981784980764956936_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=730e14&_nc_ohc=CY-ch3iB00MAX9LfxF-&_nc_ht=scontent.fmnl4-4.fna&tp=29&oh=e33444ef08b37a6b6609d46e48f4f944&oe=60CCCC11" class="RYU">
</div>`;
chatArea.insertAdjacentHTML("beforeEnd", temp);
nameInput.value = '';
messageInput.value = '';
})

Comments

Post a Comment

Popular posts from this blog

-
Image
W elcome To My Art Blog Portraits are works of art that record the likenesses of humans or animals that are alive or have been alive. The word  portraiture  is used to describe this category of art. The purpose of a portrait is to memorialize an image of someone for the future. It can be done with painting, photography, sculpture or almost any other medium. Some portraiture is also created by artists purely for the sake of creating art, rather than working on commission. The human body and face are fascinating subjects that many artists like to study in their personal work. Many artists also choose to do a "self-portrait." It is a work of art depicting the artist created by their own hand. These are typically made from a reference photo or by looking in a mirror. Self-portraits can give you a good sense of how an artist views themselves and, quite often, it is rather introspective. Some artists will regularly create self-portraits
Read more
-
Image
 html EXERCISE NUMBER 1  PROFILE html   <!DOCTYPE html> <html> <head> <title>My Profile</title> <style> body {background-color: Skyblue;} // styles applied to body tag h1 {color: black;} // styles applied to h1 tag p {color: red;} // styles applied to p tag hr{ border: 10px solid red; } </style> </head> <body> <h1> Name : EMMANUEL B UBALDO </h1> <h1>My favorite Songs </h1> <hr> <ol> <li> 2002 by edge sheeran <li> centimeters by peggies <li> thru these tears lany <li> Gospel by panic at the disco <li> Meant it Lany and Lauv </lol> <h2>My favorite Subjects </h2> <ul> <li> Web programming <li> 3D modelling  <li> Drawing </ul> <h1> Links to your portfolio </h1> <p> <a href="https://www.instagram.com/emmonztah/"> instagram </a> </p> <p><a href="https://portaitart.blo
Read more