I am creating a chatting project using python module http.server as server and on the client side i am using jquery ajax to send and recieve messages... But matter is that the client is able to send messages to the server and server is recieving messages(checked with print statement) but when its time to return back the messages again to all clients, i think the server is not responding the messages to clients. I am not getting what's problem with the code. It would be great help if you find the bug...
from http.server import BaseHTTPRequestHandler,HTTPServer,ThreadingHTTPServer
import json
class handler(BaseHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
self.send_header("Access-Control-Allow-Origin","*")
self.send_header('Content-type','text/html')
self.end_headers()
#just trying
message = {"room4":1,"room5":1,"room6":1}
self.wfile.write(json.dumps(message).encode())
def do_POST(self):
content_length = int(self.headers['Content-Length'])
body = self.rfile.read(content_length)
if content_length:
data=json.loads(body.decode())
keys=list(data.keys())
if keys[0]=="message":
self.send_response(200)
self.send_header("Access-Control-Allow-Origin","*")
self.send_header('Content-type','text/html')
self.send_header('Cache-Control', 'no-store')
self.end_headers()
message = {"welcome_msg":"success"}
print("Data:",data)
self.wfile.write(json.dumps(message).encode())
else:
self.send_response(200)
self.send_header("Access-Control-Allow-Origin","*")
self.send_header('Content-type','text/html')
self.send_header('Cache-Control', 'no-store')
self.end_headers()
serv=HTTPServer(("localhost",9889),handler)
serv.serve_forever()
javascript code:
$(document).ready(function(){
load();
var entereddata;
$("#submitbtn").click(function(){
var d=new Date()
var t=d.getTime()
var time = d.toLocaleTimeString();
entereddata=$("#msgarea").val()
$("#chat").append("<div id='msg' style='background-color:#dcf8c6;padding:5px 10px; border-radius:5px;margin-bottom:8px;width:fit-content' class='container_new' style='margin-left:200px;'>"+"You: "+entereddata+"<p class='time-right'> "+time+"</p>"+"</div>")
//var element = document.getElementById("msgarea");
//window.scrollTo(0,document.body.scrollHeight-element.clientHeight);
$.post("http://localhost:9889/",JSON.stringify({
"message":entereddata,
"port":location.port,
})
)
})
function load(){
//console.log("hhh")
$.post("http://localhost:9889/",JSON.stringify({
"port":location.port,
}),function(data,status){
console.log("ds")
console.log(data)
}
)
}
setInterval(load,1000)
})
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="test.js"></script>
<style>
body {
margin: 0;
overflow:hidden;
}
#chat{
height:88vh;
overflow:hidden;
padding: 10px;;
}
.container_new {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
#form{
display: flex;
}
input{
font-size:1.2rem;
padding:10px;
margin:10px 5px;
appearance:none;
border: 1px solid #ccc;
border-radius: 5px;
}
#msgarea{
flex:2
}
#msg{
background-color: #dcf8c6;
padding:5px 10px;
border-radius: 5px;
margin-bottom: 8px;
}
</style>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body id="bod">
<h2 id="head2"></h2>
<div class="container-fluid " id="chat">
</div>
<div id="form">
<input autofocus placeholder="Enter Message..." name="" id="msgarea" ></input>
<input type="button" id="submitbtn" value="Send">
</div>
</body>
</html>
Thanks
Related
In this code i want to try make validation phone number field.
I am using Tel-Input-Js.
if i am using
initialCountry: "AE",
for showing default selection country. but it's not working properly as you can see in image AE country flag is just append on US flag so volition not working properly.
Here my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>International telephone input</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<style>
.container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#phone,
.btn {
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
color: #ffffff;
background-color: #428BCA;
border-color: #357EBD;
font-size: 14px;
outline: none;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.btn:focus,
.btn:hover {
background-color: #3276B1;
border-color: #285E8E;
}
.btn:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.alert {
padding: 15px;
margin-top: 10px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-info {
border-color: #bce8f1;
color: #31708f;
background-color: #d9edf7;
}
.alert-error {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
© 2022 GitHub,
Inc. Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About
</style>
<body>
<div class="container">
<form id="login" onsubmit="process(event)">
<p>Enter your phone number:</p>
<input id="phone" type="tel" name="phone" />
<input type="submit" class="btn" value="Verify" />
</form>
<div class="alert alert-info" style="display: none"></div>
<div class="alert alert-error" style="display: none"></div>
</div>
</body>
<script>
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
const info = document.querySelector(".alert-info");
const error = document.querySelector(".alert-error");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "none";
error.style.display = "none";
if (phoneInput.isValidNumber()) {
info.style.display = "";
// info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
info.innerHTML = `Phone number in Valid`;
} else {
error.style.display = "";
error.innerHTML = `Invalid phone number.`;
}
}
var input = document.querySelector("#phone");
window.intlTelInput(input, {
excludeCountries: ["US","IN"],
preferredCountries: [ "AE" ],
initialCountry: "AE", //change according to your own country.
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
</script>
</html>
I am using
excludeCountries: ["US","IN"],
for removing us country but also it's appending on us flag.
i want to show default country as a AE and without country change "00971551234567" this number should be need to validate.
and i also need custom placeholder for the AE country how can i do it.?
help me to solve out this problem. advance thanks for who's help me to solve out this problem.
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
Here is the code. You are supposed to get from the left square to the right one without exiting the blue div or entering the red one. The problem is that both the red div and its child, the right square have the same event listener, but one ends the game in a loss and the other one in a victory. Is there a way to fix this without redoing everything?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
text-align: center;
}
.outer {
width: 500px;
height: 500px;
border-style: solid;
border-color: black;
border-width: 1px;
position: absolute;
left: 36%;
right: 50%;
margin-top: 100px;
background-color: lightskyblue;
}
.mid {
width: 440px;
height: 440px;
border-style: solid;
border-color: black;
border-width: 1px;
margin-left: 30px;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
background-color: #ffbcbc;
}
.inner {
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 1px;
display: inline-block;
margin-top: 170px;
background-color: rgb(134, 255, 134);
}
#in1 {
float: left;
border-left: none;
}
#in2 {
float: right;
border-right: none;
}
</style>
</head>
<body>
<div class="outer" id="outer">
<div class="mid" id="mid">
<div class="inner" id="in1">
</div>
<div class="inner" id="in2">
</div>
</div>
</div>
<script>
let out = document.getElementById("outer")
let mid = document.getElementById("mid")
let in1 = document.getElementById("in1")
let in2 = document.getElementById("in2")
in1.addEventListener("mouseover", GameStart)
function GameOver() {
alert("Pokušajte ponovno")
out.removeEventListener("mouseleave", GameOver)
mid.removeEventListener("mouseenter", GameOver)
in2.removeEventListener("mouseenter", GameWon)
return
}
function GameWon() {
alert("Pobijedili ste")
out.removeEventListener("mouseleave", GameOver)
mid.removeEventListener("mouseenter", GameOver)
in2.removeEventListener("mouseenter", GameWon)
return
}
function GameStart() {
in1.addEventListener("mouseleave", Game)
}
function Game() {
in1.removeEventListener("mouseleave", Game)
out.addEventListener("mouseleave", GameOver)
mid.addEventListener("mouseover", GameOver)
in2.addEventListener("mouseenter", GameWon)
}
</script>
</body>
</html>
You need to do event capture in this case. And explicitly look for the e.target (the element which was clicked) from which the event was fired and handle that logic seperately.
In the demo example, I have mimicked your game example : Try this
document.querySelector(".parent").addEventListener("click",(e)=>{
if(e.target.className === "child1"){
console.log("Continue the game")
}
if(e.target.className === "child2"){
console.log("Game Over !!!")
}
})
.child1,.child2{
background:teal;
height:100px;
width:300px;
}
.child1{
margin-bottom:2rem;
}
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
So I am having a couple of issues when using the voice library Artyom.js.
I have tried adding my own commands, and in theory, that should work. But the major issue is that the voice recognition stops immediately after enabling it. The following are the javascript, css and html files:
var five = require("johnny-five");
var keypress = require("keypress");
const artyom = new Artyom();
function startArtyom() {
artyom.initialize({
lang:"en-GB",
continous:true,
debug:true,
listen:true,
speed:1,
mode:"normal"
}).then(function(){
console.log("ready!");
})
}
var commandHello = {
indexes:["hello","good morning","hey"], // These spoken words will trigger the execution of the command
action:function(){ // Action to be executed when a index match with spoken word
artyom.say("Hey buddy ! How are you today?");
}
};
artyom.addCommands([commandHello]);
/*keypress(process.stdin);*/
/*var board = new five.Board();*/
body {
font-family: ebrima;
}
#body{
transition: all 3s ease-in-out;
}
#speech-cont {
background-color: gray;
height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
border-radius: 0.5vh;
padding: 10px;
}
#speech-cont h3 {
text-align: center;
color: white;
font-family: ebrima;
font-weight: lighter;
}
#speech-cont #box {
border-style: solid;
border-color: black;
border-radius: 0.5vh;
background-color: white;
height: 70%;
width: 90%;
margin-left: auto;
margin-right: auto;
border-width: 1px;
}
#recognizeButton {
height: auto;
line-height: 30px;
width: 200px;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="body">
<div id="speech-cont">
<h3>Speech to text recognition</h3>
<div id="box">
<h4 id="result">
</h4>
</div>
<button id="recognizeButton" onclick="startArtyom();">Recognize!</button>
</div>
<script src="artyom.win.min.js"></script>
<script src="main.js"></script>
</body>
</html>
As you see, I even straight up copy & pasted the example from Atryom.js' site to see if I had written a typo. Which turned out to not be the case.
I have absolutely no idea as to why artyom.js immediately stops voice recognition.
Thanks in advance :)
Went through a few questions on stackoverflow but could not solve the error.
The intention is to modify and add html to the main document reading a JSON structure.
Uncaught TypeError: Cannot read property 'appendChild' of undefined
Update 1:-
Typo was corrected, marked in code.
Defer was introduced at script load in head section, this makes sure the entire document is loaded before the script starts execution.
Here I am trying to read a JSON, and then looping across its content to add to my main html document.
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
//var cards = document.getElementsByClassName("content"); -- corrected typo
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" defer></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>
Why was content undefined
You try to get content by ClassName
var cards = document.getElementsByClassName("content")[0];
But find content in your html:
<div id="content">
Notice that the ID is content. Either change it to class="content" or change the previous code to document.getElementByID("content");
Two issues:
There is no element with class content. On the other hand there is an element with that id. So you probably want to do:
document.getElementById("content");
The script runs too soon -- the elements are not loaded yet when it runs. Either put the script just before the closing </body> tag, or put the code inside an event handler, like
window.addEventListener('DOMContentLoaded', function() {
// your code
});
You are trying to access an element with class name content var cards =document.getElementsByClassName("content")[0]; & there is no class named content
You can modify your code like this ,
var cards = document.getElementById("content");
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" ></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>