I've just started doing some web dev on my own and trying to experiment with the basic HTML,CSS and JS. I'm trying to make search bar with changes color on hovering but after one click it does not changes its color. I have uploaded my code on CodePen. Need some guidance, thank you!
https://codepen.io/Usmaneeyy/pen/PoPwqgm
This is my HTML code for the SearchBar i want to create:
<body>
<div class="topBar">
<div id="logo">
<img src="images/logo.png" style="height: 40px;">
</div>
<div id="searchBar">
<input id="textBar" placeholder="Search.." onclick="expand();" type="text" name="searchedItem" onblur="reset();">
</div>
</div>
This is the CSS Code:
body {
margin: 0;
padding: 0;
background-color: white;
font-family: "Poppins", sans-serif;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: white;
}
body::-webkit-scrollbar-thumb {
background: rgb(100, 100, 100);
}
.topBar {
background-color: black;
height: 41px;
width: auto;
text-align: center;
}
#logo {
float: left;
padding-left: 5px;
}
#searchBar input {
padding: 6px;
margin-top: 2px;
margin-right: 140px;
background-color: black;
font-size: 18px;
color: black;
/*border: none;*/
cursor: pointer;
border-radius: 10px;
border: 2px solid white;
width: 150px;
transition: width 0.5s;
}
#searchBar input:hover {
background-color: white;
}
And this is my JS code:
function expand() {
var x = document.getElementById("textBar");
x.style.backgroundColor = "white";
x.style.width = "300px";
x.style.borderRadius = "10px";
x.style.outline = "none";
}
function reset() {
var x = document.getElementById("textBar");
x.value = "";
x.style.width = "150px";
x.style.backgroundColor = "black";
x.style.borderRadius = "10px";
x.style.outline = "none";
}
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Event binding on dynamically created elements?
(23 answers)
Closed last year.
I can't figure out why the for loops won't iterate. I had them working at one point inside of the printInput function, but not outside. BTW, I'm still working on the code portion of the for both loops. One is supposed to close the object by removing it. The other is supposed to make the html element editable.
// close button
var closes = document.getElementsByClassName("closes");
for (var i = 0; i < closes.length; i++){
closes[i].onclick = function (){
var l = closes[i];
l.remove();
}
}
// edit button
var edit = document.getElementsByClassName("edit");
for(var i = 0; i < edit.length; i++){
edit[i].onclick = function (){
var x = this.parentElement;
x.contentEditable = true;
}
}
// Submits input by hitting enter
document.addEventListener("keyup", function(e) {
if (e.keyCode === 13) {
printInput();
}
});
// Toggles checked class for finished chores
let selection = document.querySelector('ul');
selection.addEventListener("click", function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('checked');
}
}, false);
// This creates a new list object.
function printInput() {
let input = document.getElementById('todotext').value;
if (input === "" || null){
alert("You haven't written anything!");
} else {
const newItem = document.createElement('li');
const newNode = document.createTextNode(input);
newItem.className = "closes";
newItem.appendChild(newNode);
document.getElementById("list").appendChild(newItem);
const img = document.createElement("img");
img.src = 'edit.png';
img.className = "edit";
const newSpan = document.createElement("span");
const xBtn = document.createTextNode("x");
newSpan.className = "close";
newSpan.appendChild(xBtn);
newItem.appendChild(img);
newItem.appendChild(newSpan);
document.getElementById("todotext").value = "";
}
}
body {
min-width: 850px;
font-family: sans-serif;
background-color: #ece0d9;
}
h1.title {
width: auto;
margin: auto;
padding: 25px;
text-align: center;
-webkit-text-stroke: 1px #460a1e; /* width and color */
font-family: sans-serif; color: white;
}
div.form {
display: flex;
padding: 10px;
width: 50%;
margin: auto;
}
input {
width: 75%;
padding: 10px 14px 11px 14px;
margin: 0;
border-radius: 0;
border-width: thin;
font-size: inherit;
}
input:focus {
border-radius: 0;
outline: none;
}
span.addTo {
width: 25%;
padding: 8px 14px 10px 14px;
margin: 0;
border-style: solid;
border-width: thin;
border-color: black;
border-left: none;
text-align: center;
background-color: rgb(236, 235, 235);
}
span.addTo:hover {
background-color: #e0e0e0;
cursor: pointer;
}
ul.list{
width: 50%;
display: table;
text-align: left;
padding: 0;
margin: auto;
}
ul.list li{
padding: 10px 10px;
background-color: snow;
clear: right;
margin: 0;
position: relative;
cursor: pointer;
}
ul.list li:nth-child(2n){
background-color: rgb(240, 239, 239);
}
ul.list li.checked:nth-child(2n){
text-decoration: line-through;
background-color: rgb(170, 168, 168);
}
ul li.checked {
text-decoration: line-through;
background-color: rgb(170, 168, 168);
}
img.edit {
position: absolute;
right: 40px;
top: 0;
padding: 1px;
width: 34px;
height: 36.4px;
cursor: pointer;
background-color: transparent;
color: rgb(75, 71, 71);
}
img.edit:hover {
padding: 0;
width: 34px;
height: 36.4px;
transition-property: background-color;
transition-duration: .3s;
border-style: ridge;
border-color: black;
border-width: 1px;
}
span.close {
position: absolute;
right: 0;
top: 0;
padding: 10px 14px 10px 14px;
cursor: pointer;
background-color: transparent;
color: rgb(75, 71, 71);
}
span.close:hover {
color: black;
padding: 9px 13px 9px 13px;
transition-property: background-color;
transition-duration: .3s;
border-style: ridge;
border-color: black;
border-width: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<meta charset="en">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="title">To-Do List</h1>
<div class="form">
<input type="text" id="todotext">
<span onclick="printInput()" id="addTo" class="addTo">Add</span>
</div>
<ul style="list-style-type:none;" class="list" id="list">
<li hidden id="close">Clean room<img src="edit.png" class="edit"><span class="close">x</span></li>
</ul>
<script src="main.js">
</script>
</body>
</html>
im in the process of taking two projects that i found on instagram. i am making a random color generator and on the side of the text it shows a clipboard button so i can or who ever can randomly generate a color and copy the hex code. i have went over the code and both projects and i am getting a "Uncaught TypeError: Cannot read property 'select' of null " in the console.
the project can be found at the following link https://codepen.io/nhmalbone0311/pen/KKmYQbQ.
let letters = "0123456789ABCDEF";
const body = document.querySelector("body");
const colorElement = document.querySelector("#color");
function getColor() {
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * letters.length)];
}
body.style.backgroundColor = color;
colorElement.innerHTML = color;
}
function copyText() {
var copyText = document.getElementById("#color");
copyText.select();
document.execCommand("copy");
document.getElementById("notification").style.opacity = "1";
setTimeout(() => {
document.getElementById("notification").style.opacity = "0";
}, 1000);
}
console.log(copyText);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #494e6b;
transition: 0.1s;
}
/* p field */
.colors {
float: left;
margin-bottom: 20px;
font-size: 26px;
padding: 10px 57px;
text-align: center;
color: #fff;
background: #000;
}
/* btns */
.btn {
cursor: pointer;
width: 50px;
height: 47px;
border: none;
margin: 0 5px 0;
font-size: 25px;
}
.g-color {
padding: 5px 13px;
border: 3px solid #111;
letter-spacing: 1px;
outline: none;
font-size: 25px;
transition: 100ms ease-in-out;
cursor: pointer;
}
.g-color:hover {
outline: none;
color: red;
}
.tooltip {
position: relative;
display: flex;
align-item: center;
justify-content: center;
width: 180px;
height: 50px;
font-size: 20px;
padding: 10px;
border-radius: 10px;
bottom: 7rem;
left: 14rem;
color: #fff;
background: #98878f;
opacity: 0;
transition: .5s;
}
.tooltip:after {
position: absolute;
content: "";
width: 25px;
height: 25px;
top: -8rem;
right: 50px;
background: #985e6d;
transform: rotate(45deg);
}
<div class="container">
<p id="color" class="colors">#</p>
<button onclick="copyText()" class="btn"><i class="far fa-copy"></i></button>
<div class="generate-color">
<button onclick="getColor()" class="g-color">Generate Color</button>
</div>
<!-- notification -->
<div class="tooltip" id="notifaction">
<p>Text Copied!</p>
</div>
</div>
im using code pen as i do this as a hobby for now in its just easier for me to show my work off and have people me if i need it.
im just now working on getting out of tutorial hell and founding projects on the web in intergrading them into my own style and changing things up.
remove the # from the "#color" in var copyText = document.getElementById("#color");
My code makes this shape keep changing from green Hi to blue Hello with a button I want to make it change automatically
<html>
<head>
<script>
function functionl() {
Array.from(document.getElementsByClassName('L1')).forEach(e => helper(e));
Array.from(document.getElementsByClassName('L2')).forEach(e => helper(e));
}
helper = (e) => {
if (e.innerText == 'Hi') {
e.style.backgroundColor = 'blue';
e.innerText = 'Hello';
} else {
e.style.backgroundColor = 'green';
e.innerText = 'Hi';
}
}
</script>
<style>
.L1
{
padding: 0px;
border: 1px;
border-radius: 200% 0px 200% 0px;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.L2
{
padding: 0px;
border: 1px;
border-radius: 0px 200% 0px 200%;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.button1
{
height=5%;
font-size: 35;
background-color: Red;
color: blue;
border-radius: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<button class="L2">Hi</button><button class="L1">Hi</button><br>
<button class="L1">Hi</button><button class="L2">Hi</button>
<center><button class="button1" onclick="functionl()">Click me</button></center>
</body>
</html>
It works with a button I want it to work as a gif to keep looping between green Hi and the blue Hello automatically (and please consider adding how could I stop this looping or start it with a button)
Use window.setInterval like below. You can change the number (500) to change the time. The time is in milliseconds.
function functionl() {
Array.from(document.getElementsByClassName('L1')).forEach(e => helper(e));
Array.from(document.getElementsByClassName('L2')).forEach(e => helper(e));
}
helper = (e) => {
if (e.innerText == 'Hi') {
e.style.backgroundColor = 'blue';
e.innerText = 'Hello';
} else {
e.style.backgroundColor = 'green';
e.innerText = 'Hi';
}
}
window.setInterval(functionl, 500);
.L1 {
padding: 0px;
border: 1px;
border-radius: 200% 0px 200% 0px;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.L2 {
padding: 0px;
border: 1px;
border-radius: 0px 200% 0px 200%;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.button1 {
height=5%;
font-size: 35;
background-color: Red;
color: blue;
border-radius: 30px 30px 30px 30px;
}
<html>
<head>
</head>
<body>
<button class="L2">Hi</button><button class="L1">Hi</button><br>
<button class="L1">Hi</button><button class="L2">Hi</button>
<center><button class="button1" onclick="functionl()">Click me</button></center>
</body>
</html>
I frantically need your help,
The variable "x" can normally be set using the following method (default)
var x = prompt("Please enter your name:","John Smith")
I'd very much similarly like to mimic the same idea and writting it such that it will work with my existing dynamic/custom dialog/prompt box. To this end, I am very not much familiar with asynchronous javascript and have little experience in that impossible department.
Expected result:
var x = alertBox('Enter your firstname','prompt','John Smith')
Here is the HTML/CSS and Javascript Markup:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testit() {
var x = alertBox('Enter your firstname','prompt','John Smith')
alert(x)
}
function alertBox(text, type, ptext) {
var button = '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
var field = '<div><input id="ptext" class="field" type="text"></div>'
if (type == "err") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "ok") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "prompt") {
document.getElementById('alertBox_text').innerHTML = text + field + button
document.getElementById('alertBox_text').style.top = "25%"
document.getElementById('alertBox_button').value = "OK"
if (ptext) { document.getElementById('ptext').value = ptext }
}
else {
document.getElementById('alertBox_text').innerHTML = text
}
document.getElementById('alertBox_container').style.visibility = 'visible'
}//end function
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
<style type="text/css">
.field {
border: 1px solid #808080;
width: 475px;
font-family: Arial;
font-size: 9pt;
padding-left: 3px;
font-weight: bold;
margin: 1px;
}
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
visibility: hidden;
}
#alertBox_container {
border: 1px solid #808080;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
color: rgb(11,63,113);
}
#alertBox_titlebar {
cursor: pointer;
height: 22px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 17px;
margin-top: 2px;
margin-right: 2px;
padding: 1px;
position:absolute;
top:0;
right:0;
font-size: 10px;
font-family: tahoma;
font-weight: bold;
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
#alertBox_close:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
.button {
color: #464646;
font-family: Arial;
font-size: 9pt;
height: 23px;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
width: 67px;
}
}
.button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
</style>
</head>
<body>
<input type="button" value="testme" onclick="testit()">
<br>
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</body>
</html>
add a return value to your alertBox() function.
function alertBox(arg1,arg2,arg3)
{
// do your stuff here
var ishallreturn = document.getElementById("ptext").value;
return ishallreturn;
}
I need your help.
Normally one can use the:
var x = prompt("Please enter your name:","John Smith")
alert(x)
I'd similarly like to mimic the code above with my existing custom dialog/prompt box, but I cannot seem to get it to work and retrieve the value of x:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testit() {
var x = alertBox('Enter your firstname','prompt','John Smith')
alert(x)
}
function alertBox(text, type, ptext) {
var button = '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
var field = '<div><input id="ptext" class="field" type="text"></div>'
if (type == "err") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "ok") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "prompt") {
document.getElementById('alertBox_text').innerHTML = text + field + button
document.getElementById('alertBox_text').style.top = "25%"
document.getElementById('alertBox_button').value = "OK"
if (ptext) { document.getElementById('ptext').value = ptext }
}
else {
document.getElementById('alertBox_text').innerHTML = text
}
document.getElementById('alertBox_container').style.visibility = 'visible'
}//end function
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
<style type="text/css">
.field {
border: 1px solid #808080;
width: 475px;
font-family: Arial;
font-size: 9pt;
padding-left: 3px;
font-weight: bold;
margin: 1px;
}
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
visibility: hidden;
}
#alertBox_container {
border: 1px solid #808080;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
color: rgb(11,63,113);
}
#alertBox_titlebar {
cursor: pointer;
height: 22px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 17px;
margin-top: 2px;
margin-right: 2px;
padding: 1px;
position:absolute;
top:0;
right:0;
font-size: 10px;
font-family: tahoma;
font-weight: bold;
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
#alertBox_close:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
.button {
color: #464646;
font-family: Arial;
font-size: 9pt;
height: 23px;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
width: 67px;
}
}
.button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
</style>
</head>
<body>
<input type="button" value="testme" onclick="testit()">
<br>
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</body>
</html>
Since the value of x is not known until a future event, you need an async callback. So instead of this:
var x = alertBox('Enter your firstname','prompt','John Smith');
alert(x);
You need something like this instead:
alertBox('Enter your firstname','prompt','John Smith', function(x) {
alert(x);
// call other code here, pass "x" as parameter
});
The alertBox function should have one extra parameter callback, which you invoke when the value is ready, for example:
function alertBox(text, type, ptext, callback) {
// ...
document.getElementById('alertBox_button').addEventListener("click", function() {
callback(document.getElementById('ptext').value);
});
}
Here is a Fiddle demo.