Tuesday, June 15, 2021
EXERCISE 12 CHAT BOX (INTERACTIVE MEDIA)
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="Exercise 012 Chat box css.css">
</head>
<body>
<section>
<h1> Click the chat button below to start chatting </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.fmnl9-2.fna.fbcdn.net/v/t1.6435-9/160717144_1060963257760965_2837933381773745912_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=09cbfe&_nc_ohc=ChQkPJGen28AX-n6J0q&tn=yRHVMOXFu00onmAh&_nc_ht=scontent.fmnl9-2.fna&oh=3030078dfc465d62ac69841275883746&oe=60CCCC1A" class="emman" alt="emman">
<span class="msg"> Emman: What? </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="Exercise 012 Chat box js.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: #ec97fc;
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;
}
}
JAVASCRIPT
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="" class="Emman">
</div>`;
chatArea.insertAdjacentHTML("beforeEnd", temp);
nameInput.value = '';
messageInput.value = '';
})
Monday, June 14, 2021
EXERCISE 11 COUNTING GAME (INTERACTIVE MEDIA)
Let's Count!
Let's count the shapes on the screen!
Sunday, June 13, 2021
Friday, June 11, 2021
Thursday, June 10, 2021
Subscribe to:
Posts (Atom)
-
Enter your name: Enter your Score: Enter total number of items: Compute
