Skip to main content

Is there a way to select an unselect multiple buttons with hover effect?

I am making a sort of chatbot in HTML, CSS, and javascript with the website here > https://chatroombot.n8thedev.repl.co/

If you click the menu button you will find a page to change the background, so far hovering over the 27 different buttons creates a border inside the button that is somewhat transparent. I attempted to make a click effect where it makes the clicked button border darker (higher alpha value). The issue I ran into was when I cleared the other borders when you click on the button. EX: if (Click button 1) { border: none for button 1,2,3... }

But when I tried to do that the hover effect didn't work anymore because it cleared the button's border permanently.

I am here for suggestions on a solution.

Also here is the existing code:

index.html:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CHAT!!</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <script src="script.js" defer>
 
    </script>
    <div class="chatBoxContainer" id="chatBoxContainer" style="">
 
    </div>
    <div class="entryMessage">
        <div class="container">
            <div class="inputBg" id="inputBg"></div>
            <input type="text" placeholder="Type a message" autocomplete="off" class="inputMessage" id="inputMessage" onkeypress="return demoForEnterKey(event)" style="font-size: 16px;" onclick="this.style.color='white';"></input> 
    </div>
  </div>
  <button class="menuButton" id="menuButton" style= "cursor:pointer" onclick="menuClick()">
    <img src="menu.png" class="menuButtonImage"></img>
  </button>
  <div class="newScreen" id="newScreen">
    <div class="colorSelectorTitle">
      <div>
        <div class="backText">Set Chat Wallpaper</div>
        <button class="backButton" style="background-color: transparent; border-style: none; cursor: pointer;" onclick="bringBack()">
          <img src="back-arrow.png" class="backArrowImg"></img>
        </button>
      </div>
    </div>
    <div class="backgroundChooserContainer">
      <div class="backgroundSelector">
        <button class="_3sW34" id="clr1" style="background-color: rgb(5, 5, 5);">
          <span class="defaultText">Default</span>
        </button>
        <button class="_3sW34" style="background-color: rgb(15, 36, 36);" id="clr2"></button>
        <button class="_3sW34" style="background-color: rgb(18, 38, 31);" id="clr3"></button>
        <button class="_3sW34" style="background-color: rgb(17, 36, 28);" id="clr4"></button>
        <button class="_3sW34" style="background-color: rgb(17, 30, 39);" id="clr5"></button>
        <button class="_3sW34" style="background-color: rgb(15, 34, 36);" id="clr6"></button>
        <button class="_3sW34" style="background-color: rgb(31, 29, 37);" id="clr7"></button>
        <button class="_3sW34" style="background-color: rgb(33, 33, 33);" id="clr8"></button>
        <button class="_3sW34" style="background-color: rgb(31, 33, 28);" id="clr9"></button>
        <button class="_3sW34" style="background-color: rgb(35, 35, 27);" id="clr10"></button>
        <button class="_3sW34" style="background-color: rgb(38, 36, 25);" id="clr11"></button>
        <button class="_3sW34" style="background-color: rgb(38, 31, 23);" id="clr12"></button>
        <button class="_3sW34" style="background-color: rgb(38, 23, 23);" id="clr13"></button>
        <button class="_3sW34" style="background-color: rgb(38, 15, 16);" id="clr14"></button>
        <button class="_3sW34" style="background-color: rgb(38, 10, 16);" id="clr15"></button>
        <button class="_3sW34" style="background-color: rgb(25, 5, 11);" id="clr16"></button>
        <button class="_3sW34" style="background-color: rgb(33, 16, 12);" id="clr17"></button>
        <button class="_3sW34" style="background-color: rgb(15, 12, 12);" id="clr18"></button>
        <button class="_3sW34" style="background-color: rgb(16, 25, 25);" id="clr19"></button>
        <button class="_3sW34" style="background-color: rgb(10, 29, 37);" id="clr20"></button>
        <button class="_3sW34" style="background-color: rgb(13, 21, 35);" id="clr21"></button>
        <button class="_3sW34" style="background-color: rgb(13, 15, 17);" id="clr22"></button>
        <button class="_3sW34" style="background-color: rgb(10, 12, 13);" id="clr23"></button>
        <button class="_3sW34" style="background-color: rgb(17, 11, 18);" id="clr24"></button>
        <button class="_3sW34" style="background-color: rgb(30, 31, 31);" id="clr25"></button>
        <button class="_3sW34" style="background-color: rgb(38, 38, 24);" id="clr26"></button>
        <button class="_3sW34" style="background-color: rgb(35, 35, 31);" id="clr27"></button>
      </div>
    </div>
  </div>
</body>
</html>

script.js:

var txt = document.getElementById("inputMessage");
var newScreen = document.getElementById("newScreen");
newScreen.style.display = "none";
 
window.onload = function () {
  var chatBoxHeight = window.innerHeight - 80;
  var realChatBoxHeight = chatBoxHeight + "px";
  var chatBox = document.getElementById("chatBoxContainer").style.height = realChatBoxHeight;
}
 
window.onresize = function () {
  var chatBoxHeight = window.innerHeight - 80;
  var realChatBoxHeight = chatBoxHeight + "px";
  var chatBox = document.getElementById("chatBoxContainer").style.height = realChatBoxHeight;
}
 
function bringBack() {
  newScreen.style.display = "none";
}
 
function createBotChat (botChatText) {
  var chatContainer = document.getElementById("chatBoxContainer");
  var newBotChat = document.createElement("div");
  newBotChat.className = "newBotChat";
  newBotChat.textContent = botChatText;
  chatContainer.appendChild(newBotChat);
  newBotChat.scrollIntoView();
}
 
function demoForEnterKey(eventName) {
  if (eventName.keyCode == 13 && document.getElementById("inputMessage").value != "") {
    var txt = document.getElementById("inputMessage");
    var newChat = document.createElement("div");
    newChat.textContent = txt.value + "                   ";
    var chatContainer = document.getElementById("chatBoxContainer");
    newChat.className = "newChat";
    var timeStamp = document.createElement("div");
    timeStamp.className = "timeStamp";
    var today = new Date();
    var hour = today.getHours();
    var min;
    var amOrPm;
    if (today.getHours() > 24 && today.getHours() < 13) {
      amOrPm = "AM";
    } else {
      amOrPm = "PM";
    }
    if (hour == 13){
      hour = 1;
    } else if (hour ==14){
      hour = 2;
    }
    else if (hour == 15){
      hour = 3;
    }
    else if (hour == 16){
      hour = 4;
    }
    else if (hour == 17){
      hour = 5;
    }
    else if (hour == 18){
      hour = 6;
    }
    else if (hour == 19){
      hour = 7;
    }
    else if (hour == 20){
      hour = 8;
    }
    else if (hour == 21){
      hour = 9;
    }
    else if (hour == 22){
      hour = 9;
    }
    else if (hour == 23){
      hour = 10;
    }
    else if (hour == 24){
      hour = 11;
    }
    else if (hour == 1){
      hour = 12;
    }
    if (today.getMinutes() == 0){
      min = "00";
    } else if (today.getMinutes() == 1){
      min = "01";
    }
    else if (today.getMinutes() == 2){
      min = "02";
    }
    else if (today.getMinutes() == 3){
      min = "03";
    }
    else if (today.getMinutes() == 4){
      min = "04";
    }
    else if (today.getMinutes() == 5){
      min = "05";
    }
    else if (today.getMinutes() == 6){
      min = "06";
    }
    else if (today.getMinutes() == 7){
      min = "07";
    }
    else if (today.getMinutes() == 8){
      min = "08";
    }
    else if (today.getMinutes() == 9){
      min = "09";
    } else if (today.getMinutes() > 9) {
      min = today.getMinutes();
    }
    timeStamp.textContent = hour + ":" + min + " " + amOrPm;
    newChat.appendChild(timeStamp);
    chatContainer.appendChild(newChat);
    newChat.scrollIntoView();
    if (newChat.textContent.toLowerCase().includes("help") == true) {
      createBotChat("List of all commands:");
      createBotChat("• Clear - Clears the previous chats" + "\n" +" • Website - Displays our main page" + "\n" + "")
    } else if(newChat.textContent.toLowerCase().includes("clear") == true) {
      location.reload();
    } else if(newChat.textContent.toLowerCase().includes("website") == true) {
      createBotChat("Our website: example.com")
    }
    document.getElementById("inputMessage").value = "";
  }
}
 
createBotChat("Welcome to N8TheDev's ✨NEW✨ chatroom bot!!🎉");
createBotChat("Type 'Help' to see a list of all the  bots's commands");
 
function menuClick () {
  newScreen.style.display = "block";
}

style.css:

body{
  background-color: rgb(255, 255, 255);
}
 
.newScreen {
  background-color: #1E2428;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.menuButtonImage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
}
 
.backArrowImg {
  background-color: transparent;
  width: 32px;
  height: 32px;
  filter: invert(100%);
}
 
.backText {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 85px;
  color: white;
  font-size: 19px;
  font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
}
 
.backButton{
  position: absolute;
  left: 20px;
  width: 32px;
  height: 32px;
  top: 50%;
  transform: translateY(-50%);
}
 
.colorSelectorTitle {
  background-color: #323739;
  position: relative;
  width: 100%;
  min-height: 60px;
  height: 15%;
  max-height: 80px;
}
 
.menuButton {
  position: absolute;
  background-color: transparent;
  top: 15px;
  border-style: hidden; 
  right: 15px;
  width: 50px;
  height: 50px;
}
 
.entryMessage {
  background: transparent;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 62px;
  width: 100%;
}
 
.container{
  position: relative;
  height: 100%;
}
 
.inputMessage{
  border-color: transparent;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 30px;
  transform: translate(-50%, -50%);
  color: white;
}
 
.inputBg{
  border-radius: 50px 50px 50px 50px;
  border-color: transparent;
  background: #33383B;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 99%;
  height: 43px;
  transform: translate(-50%, -50%);
}
 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #818486;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #818486;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #818486;
}
:-moz-placeholder { /* Firefox 18- */
  color: #818486;
}
 
textarea:focus, input:focus{
outline: none;
}
 
.chatBoxContainer {
  position: relative;
  width: 100%;
  overflow: auto;
  background-color: transparent;
}
 
.newBotChat {
  text-align: left;
  color: lightgray;
  font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
  white-space: pre-line;
  background-color: #3b4044;
  width: max-content;
  max-width: 60%;
  height: auto;
  padding: 4px 6px 4px 6px;
  margin: 7px 0px 7px 0px;
  border-radius: 6px;
  word-wrap: normal;
}
 
.newChat {
  text-align: left;
  color: lightgray;
  font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
  background-color: #1d6f70;
  width: max-content;
  max-width: 60%;
  height: auto;
  padding: 4px 6px 4px 6px;
  margin: 7px 0px 7px 0px;
  border-radius: 6px;
  word-wrap: break-word;
}
 
* {
  scrollbar-color: rgba(0,0,0,.2) hsla(0,0%,100%,.1);
  scrollbar-width: thin;
}
 
::-webkit-scrollbar {
  width: 6px!important;
  height: 6px!important;
}
 
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}
 
::-webkit-scrollbar-track {
  background: hsla(0,0%,100%,.1);
}
 
.timeStamp {
  color: #f1f1f2a1;
  position: relative;
  flex: none;
  font-size: 11px;
  line-height: 19px;
  display: inline-block;
}
 
 ._2brEy {
  background-color: #0d1418;
}
 
 ._2RSZp {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
  position: relative;
}
 
._3sW34 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin-bottom: 15px;
  text-align: center;
  border: 4px solid transparent;
  float: left;
  margin-left: 15px;
}
 
.defaultText {
  text-align: center;
  color: lightgray;
  font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
  max-height: 72px;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
._3sW34:hover {
  cursor: pointer;
  border: 4px solid rgba(225, 225, 225, 0.2);
}
 
.backgroundChooserContainer {
  position: relative;
  width: 100%;
  height: 75%;
  overflow: auto;
  background-color: transparent;
  margin: 10px;
}
 
.backgroundSelector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
}
 
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Labels:

Comments

Post a Comment

Popular posts from this blog

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

The number of nodes and edges I calculated manually and by a method provided by networkx library dont match

I am trying to analyse a graph using networkx library in Python. I have implemented a function that returns the nodes and edges of that graph. After that I counted the number of nodes and edges by implementing the len() function for nodes and edges, which gave me 17 for both nodes and edges. However, when I used the method graph.number_of_nodes() of networkx library it gave me 53. My code: import pandas as pd import networkx as nx import matplotlib.pyplot as plt header_list = ["a","b","w"] E =pd.read_csv("aves-barn-swallow-contact-network.edges",sep=" ",header= None,names=header_list) # print(E.head()) # prints first few rows of the csv file G = nx.from_pandas_edgelist(E,"a","b",["w"]) nx.draw(G) plt.show() class GraphAnalyse: #finding nodes and edges def nodeEdge(self,Graph): nodes = Graph.nodes() edges = Graph.edges() ...
Post a Comment
Read more