We Keep Coding

How to highlight the input button by clicking to a button?

I can't code jquery javascript therefore i have no idea how to highlight (border or background change) the submit button for a few seconds. I tried some of the scripts that have been shared on this platform but i wasn't lucky. What code do you suggest?
The button i need to highlight is submitbtn
and the button that needs to highlight it by click is eventbtn
I appreciate the help
Thanks
Edited: I Want to add class to the submit button once the button is clicked
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
h

The key is to remove the highlighting after a few seconds, this can be done with setTimeout() function:
function highlight(id)
{
clearTimeout(highlight.timer);
const el = document.getElementById(id);
//highlight the button
el.classList.add("highlighted");
//remove highlight after 3sec
highlight.timer = setTimeout(() => el.classList.remove("highlighted"), 3000);
}
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
/* added */
.highlighted
{
box-shadow: 0 0 2em 1px red;
}
.wpcf7-submit {
transition: box-shadow 0.2s;
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight" onclick="highlight('form-submit')"> <<<<<<<<<<< </button>
</div>

Do you mean highlight submitbtn when clicking eventbtn?
Add a js to handle the click event, and then add highlight class to submitbtn.
var eventbtn = document.getElementById('highlight');
var submitbtn = document.getElementsByClassName('submitbtn')[0];
eventbtn.addEventListener('mousedown', function () {
submitbtn.classList.add('highlight');
});
eventbtn.addEventListener('mouseup', function () {
submitbtn.classList.remove('highlight');
});
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
.highlight {
background-color: #8beccc;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>

Simply add a class to the element you want to highlight. Then remove the class with the setTimeout function.
Add a class in CSS with a high specificity that contains all visible changes you want to apply. It does not matter what it is. It can be background, border, box-shadow...
In JS use an eventListener to listen to click-events on the button.
Apply the class you have specified in CSS with classList.add().
Add a setTimeout function to remove the class after a specified time with classList.remove()
Vanilla JavaScript:
// button element that will be clicked
var button = document.querySelector('button[class="eventbtn"]'),
// element that should be highlighted
input = document.querySelector('#form-submit'),
// timer in ms
timer = 2000;
// eventListener to execute the script on button click
button.addEventListener('click', function() {
// adds a class to apply CSS changes for the highlighting
input.classList.add('highlight');
// timeout function
setTimeout(function() {
// removes the class after the timer has been reached
input.classList.remove('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
jQuery:
// button element that will be clicked
var $button = $('button[class="eventbtn"]'),
// element that should be highlighted
$input = $('#form-submit'),
// timer in ms
timer = 2000;
//Eventlistener looking for a click event
$button.click(function() {
//adds a class for highlighting
$input.addClass('highlight');
//timeout function
setTimeout(function() {
//removes class for highlighting
$input.removeClass('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>

I tryed to answer with pure css by using animation and keyframes. My attempt only works the first time and once everytime after you change the target.
(Note that I'm not used to these properties so there may be a better way to do this)
#form-submit{
background-color: transparent;
}
#keyframes changeBackground {
0% {
background-color: orange;
}
99.999% {
background-color: orange;
}
100% {
background-color: transparent;
}
}
#form-submit:target{
animation: changeBackground 1s;
}
<input type="submit" value="submit" id="form-submit" />
highlight
<br>
change target

Passing quiz score using html

Hello I need some help in developing a quiz using HTML.
Here is the code, if you require pictures I can provide them, I need some help getting the score counter to count over around 10 pages, and it keeps the right score so for a correct answer it will be 1, for a wrong answer it will be -0.25. Thanks.
<html>
<head>
<style> {
box-sizing: border-box;
}
body{
background-image: url('background.png');
font-family: sans-serif: ;
}
button{
font:inherit;
font-size:100%;
color:black;
line-height:normal;
vertical-align:baseline
}
#hello{
width: 96%;
background-color: palegreen;
color: black;
padding: 10px;
margin: 10px auto;
border: 6px double limegreen;
border-radius: 10px;
}
#quiz{
position: relative
width: 96%;
color: white;
padding: 10px;
margin: 10px auto;
border: 6px double black;
border-radius: 10px;;
}
h1{
font-size: 28px;
clear: both;
}
#quiz h1{
width: 100%;
text-align: left;
background-color: black;
color: yellowF;
padding: 8px;
border-radius: 15px;
filter: drop-shadow(3px 3px 3px grey);
background-image: "background.img"
}
.option{
background-color: Black;
color: white;
padding: 8px;
border-radius: 10px;
border: 2px solid Black ;
}
#quiz button{
width: 100%;
display: block ;
margin: 10px auto;
text-align: left;
}
#quiz .option:hover{
background: white;
color: lightgreen ;
border: 2px solid lightgreen;
}
.green{
background: white;
border: 2px solid green;
color: green;
border-radius: 10px;
padding: 8px;
}
.green:before,#score:before{
content: 'Correct ✔️ ';
}
.red{
background-color: white;
}
.red:before,#wrong:before{
content:'Incorrect ✖️ ';
}
.score{
background-color: lightgreen;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
.wrong{
border-radius: 10px;
background-color: red;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
}
#show button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
#start{
text-align: center;
}
#start button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
.hidden{
display: none;
}
#sticky{
position: sticky;
position: -webkit-sticky;
top: 5px;
width: 100%;
border-radius: 10px;
padding: 0px auto 20px auto;
z-index: 1;
}
#sticky span{
float: right;
display: inline-block;
margin: 5px 4px;
}
#fscore{
background: purple;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
p{font-size: 30px
}
p1 {font-size: 30px}
p2{font-size: 30px}
</style>
<title>Next Question</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<body>
<div id="main">
<div id="hello">
<br />
<div id="start">
<button type="button">Start Quiz</button>
</div>
</div>
<!--Quiz Start-->
<div id="quiz" class="hidden">
<div id="sticky">
<span class="wrong"><span id="wrong">0</span></span>
<span class="score"><span id="score">0</span></span>
</div>
<h1>1. What does CPU stand for?</h1>
<div class="choose">
<button class="option" value="wrong" type="radio">Certain process units</button>
<button class="option" value="wrong" type="radio">Central processing unix</button>
<button type="radio" class="option" value="right">Central processing unit</button>
<button class="option" value="wrong" type="button">Computer's proessing unit</button>
</div>
<br />
<br />
<div id="show">
<button type="button">Show Correct Answers</button>
</div>
<form method="get" action="t2.html" hidden>
<button type="submit">Press to start</button>
</form>
<!--Final Score-->
<div id="fscore">You Scored <span class="fscore">0</span> out of <span class="total"></span>
</div>
</div>
</div>
</body>
<script> $(function(){
var tot = $(".choose").length;
$(".total").html(tot);//total Score
$("#start").click(function(){
$('#hello').addClass('hidden');
$("#quiz").removeClass('hidden');
$('html, body').animate({
scrollTop: $("#quiz").offset().top
}, 10);//smooth scrolling effect to min quiz
});
$(".option").click(function(){
var score = 0;
var wrong = 0;
$(this).removeClass("option");//disable it's css
$(this)
.addClass(($(this).val() === "right") ? 'green' : 'red');//right or wrong css
$(this).siblings().attr("disabled",true);//prevent to choose other options
for (i=0;i<$(".green").length;i++){
if ($(this).val() === "right"){
score++;
$("#score").html(score);//update score
}
}
for (k=0;k<$(".red").length;k++){
if ($(".red").val() === "wrong"){
wrong++;
$("#wrong").html(wrong);//update negative score
}
}
var p = +$("#score").text();
var m = +$("#wrong").text();
var n = m*0.25;//0.25marks deducted for each wrong answer
var t = p-n;//get final score considering negative marking
$(".fscore").html(t);//update final score
});
$("#show button").click(function(){
for (j=0;j<$(".choose").length;j++) {
$(':button[value="right"]').addClass('green')
.removeClass("option");//show correct option
}
$('.choose>button').attr("disabled",true);//disable all Buttons
});
});
</script>
</html>

You can use localStorage to store data in the client's web browser. Data saved using localStorage has no expiry date. It will stay there intact unless deleted. You can read about localStorage here
You can do something like this.
First, calculate the score on the first page.
Assuming you have some kind of button click or simply a click on an element to navigate to the next page. You can add an event listener to this element using JavaScript. This event listener will execute a function which will first, calculate the result on the first page and then store it in the web browser using localStorage like this localStorage.setItem("score", quizScore);
After navigating to the next page you can run a function when the page completely loads that retrieves this score using this var score = localStorage.getItem("score");
Then you can display the current score, carry on with the quiz, calculate the result, add it to the previous score, update the key score value, and repeat the first, second, third, and fourth steps for all the future pages again until you have calculated the final score of the quiz.
Lastly, you can retrieve the final value, show it to the client in whatever way you like, and delete it using localStorage.removeItem("score"); if you wish to.

localStorage.setItem("score", 1.5);
// Retrieve
var cnt = localStorage.getItem("score");
console.log(cnt)
js fiddle

make the search bar input on a same line with the website logo and login button?

How i can push the search bar to the top?
I want to make it in the same line with the Iread logo
I tried (margin-top 0px) and margin-bottom but not work
form.sbar input[type=text] {
margin-top: 0px;
padding: 10px;
font-size: 17px;
border: 1px solid grey;
width: 50%;
background: #f1f1f1;
}
form.sbar button {
margin-top:0px;
width: 10%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.sbar button:hover {
background: #0b7dda;
}
form.sbar::after {
content: "";
clear: both;
display: table;
}
<center>
<div>
<form class="sbar">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</center>
the image is in div and the search form in div
and they both in parent div
enter image description here

You have just to control the parent div with some css rules use the css flex rule
your parent div css would be something like this :
.parentCssClass{display:flex;flex-direction:row;align-items:center;}

jQuery slideToggle function not having the desired effect on my input box

I have an input box that I'd like to slide up/down so that it looks like it is coming from behind the element above.
My input HTML looks like this:
<input type="text" placeholder="Add New Todo">
The CSS for the input looks like this:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
And my JS looks like this:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
Currently, the slide gets stuck at the start/finish, as it seems the height cannot be reduced to 0.
Here is a full example of what happens.
How can I make my input box animate smoothly?

I'd wrap the input in a containing element with hidden overflow and animate that one.
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})
#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>

You can add condition
http://jsfiddle.net/pr2szjhu/1/
<input type="text" placeholder="Add New Todo" id="test">
JS
$("#dropdown").click(function(){
if ($('#test').is(':visible')){
$("#test").removeAttr('placeholder');
$("input[type='text']").slideToggle(1800);
}else{
$("input[type='text']").slideToggle(1800,function() {
$("#test").attr('placeholder','Add New Todo');
});
}
})

Why the following button does not work?

This question is completely different due to the fact that this Time I am integrating the code from a jsfiddle with the answer of another question but I am asking about an error that I am getting in the process,
I am writing an small script to produce some tables, the main idea is to copy text into my first text area called:
<textarea cols="70" rows="15" id="text" ></textarea>
to the press the button called: Generate tables:
<button id="generate">Generate tables</button><br>
That calles the function called: generate
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
to produce the tables in the second text area called: out1
<div cols="3" rows="15" id="out1" ></div>
I don't know why when I copy text to the fist area an press the button nothing happens, I would like to appreciate any suggestion to fix the code, thanks in advance, I really appreciate the support,
<!DOCTYPE html>
<html>
<head>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</head>
<style>
table{background:#CCC;border:1px solid #000;}
table td{padding:15px;border:1px solid #DDD;}
textarea {
color:GreenYellow ;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {background-color:#000C17;}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float:center;
width:700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
<body>
<textarea cols="70" rows="15" id="text" ></textarea>
<div cols="3" rows="15" id="out1" ></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
</body>
</html>

Your javascript is fine.. The problem is your code is executed before the DOM loaded properly. Since your DOM is not loaded when the script executed, so your JS thrown error.
Look at my snippet, I've correcting your script.
<!DOCTYPE html>
<html>
<head>
<style>
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
textarea {
color: GreenYellow;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {
background-color: #000C17;
}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float: center;
width: 700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<textarea cols="70" rows="15" id="text"></textarea>
<div cols="3" rows="15" id="out1"></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function () {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g
, '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</body>
</html>