Character counter in input field not working - Javascript - javascript

I am playing around with a little project as I am learning JS and I made a plate calculator.
Long story short, you enter your name and every letter costs 5 dollars, so your name's length * 5 dollars = cost of the plate. (little project seen on "Javascript & Jquery" book by Jon Duckett).
As said in the title, I can't seem to get the input's value lenght. When I click on calculate button I get 'Your plate costs NaN dollars'.
I'm pretty sure I'm doing something stupidly obvious, but can't figure out what. .length seemed like the most logical option to me.
Also, why in the event listener for the refresh button, when I tried writing personName = '' didn't work, but when I wrote document.querySelector('.input').value = ''; worked? Why it didn't accept the variable declared at the beggining?
Here the JS code
let personName = document.querySelector('.input').value;
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
cost.innerText = personName.lenght * 5;
yourPlate.classList.add('show')
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
})
And HERE the snippet
let personName = document.querySelector('.input').value;
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
cost.innerText = personName.lenght * 5;
yourPlate.classList.add('show')
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
background: url('utah2.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-blend-mode: darken;
}
.body {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(20,0,0,.5);
}
.container {
height: 55vh;
min-width: 90vw;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding-top: 20px;
background: url('utah.jpg');
background-size: cover;
background-position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
box-shadow: 3px 3px 10px black;
}
.calculate {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.yourplate {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.4em;
position: absolute;
top: 43%;
display: none;
}
.yourplate.show {
display: block;
}
.cost {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.8em;
}
h1 {
border-bottom: 1px solid black;
}
h3 {
position: relative;
top:-25px;
}
.input {
outline: none;
border: none;
border-radius: 5px;
height: 2em;
width: 70%;
}
.button {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
}
.refresh {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
position: relative;
top: 20px;
background: lightgreen;
}
.button:active {
transform: scale(.95);
background: rgba(0,147,255,0.5);
outline: none;
}
.dot1, .dot2, .dot3, .dot4 {
width: 15px;
height: 15px;
background: radial-gradient(rgba(150,150,150,.7), rgba(50,50,50));
border-radius: 50%;
position: absolute;
box-shadow: 1px 1px 5px black, 0 0 10px rgb(183, 65, 14);
}
.dot1 {
top: 20px;
left: 20px;
}
.dot2 {
bottom: 20px;
right: 20px;
}
.dot3 {
bottom: 20px;
left: 20px;
}
.dot4 {
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Plate Cost</title>
</head>
<body>
<div class="body"></div>
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<h1>PLATE CALCULATOR</h1>
<h3>Enter your name and calculate the cost</h3>
<p class="yourplate">Your plate costs <span class="cost"></span> dollars</p>
<div class="calculate">
<input type="text" class="input"><br>
<button type="submit" class="button">Calculate</button>
<button class="refresh">Refresh</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

There are a couple of problems with your code.
You need to wait for the DOM ready event. That is the point when you can start to query the DOM.
You are querying the personName value on the start of your script (so it's always empty), but in fact you should do it when you click the button.
You had a typo in code (length not lenght)
document.onreadystatechange = function () {
if (document.readyState === 'interactive') {
let personName = document.querySelector('.input');
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
cost.innerText = personName.value.length * 5;
yourPlate.classList.add('show')
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
})
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
background: url('utah2.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-blend-mode: darken;
}
.body {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(20,0,0,.5);
}
.container {
height: 55vh;
min-width: 90vw;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding-top: 20px;
background: url('utah.jpg');
background-size: cover;
background-position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
box-shadow: 3px 3px 10px black;
}
.calculate {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.yourplate {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.4em;
position: absolute;
top: 43%;
display: none;
}
.yourplate.show {
display: block;
}
.cost {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.8em;
}
h1 {
border-bottom: 1px solid black;
}
h3 {
position: relative;
top:-25px;
}
.input {
outline: none;
border: none;
border-radius: 5px;
height: 2em;
width: 70%;
}
.button {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
}
.refresh {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
position: relative;
top: 20px;
background: lightgreen;
}
.button:active {
transform: scale(.95);
background: rgba(0,147,255,0.5);
outline: none;
}
.dot1, .dot2, .dot3, .dot4 {
width: 15px;
height: 15px;
background: radial-gradient(rgba(150,150,150,.7), rgba(50,50,50));
border-radius: 50%;
position: absolute;
box-shadow: 1px 1px 5px black, 0 0 10px rgb(183, 65, 14);
}
.dot1 {
top: 20px;
left: 20px;
}
.dot2 {
bottom: 20px;
right: 20px;
}
.dot3 {
bottom: 20px;
left: 20px;
}
.dot4 {
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Plate Cost</title>
</head>
<body>
<div class="body"></div>
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<h1>PLATE CALCULATOR</h1>
<h3>Enter your name and calculate the cost</h3>
<p class="yourplate">Your plate costs <span class="cost"></span> dollars</p>
<div class="calculate">
<input type="text" class="input"><br>
<button type="submit" class="button">Calculate</button>
<button class="refresh">Refresh</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

Just need some minor changes to your addEventListener. Your personName.length had spelling issues :
btn.addEventListener('click', () => {
cost.innerText = personName.length * 5;
yourPlate.classList.add('show');
});
Also it is better for long term to try to name all of your functions so that maintaining the code will be easier later on :
const calculatePrice = () => {
cost.innerText = personName.length * 5;
yourPlate.classList.add('show');
}
btn.addEventListener('click',calculatePrice, false);
I also assumed that you have already added the jQuery library to your project.

You shloud place this:
let personName = document.querySelector('.input').value;
in your Method:
btn.addEventListener('click', () => {
Because else it will be executed on site load (where it will be empty)
EDIT

Related

Onclick Function in Dropdown Menu not working

I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>

How to make Text Editor like Codepen

Hi Everyone!
I want to make an editor for my website with functions like working light/dark toggle button, Working editor that really shows the result and Syntax Hilighting. I have made the frame of the editor...
function compile(){
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function(){
code.open();
code.writeln(html.value+"<style>"+css.value+"<\/style>" + "<script>"+js.value+"<\/script>")
code.close();
}
}
compile();
* {
padding: 0;
margin: 0;
outline: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #444444;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
textarea ::-webkit-scrollbar {
width: 8px;
}
textarea ::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
textarea ::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
header#playground_header {
background: #1e1f26;
height: 65px;
}
header#playground_header > h1 {
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
line-height: 35px;
font-family: 'IBM Plex Sans', sens-serif;
}
iframe#code {
bottom: 0;
position: relative;
width: 100%;
height: 40vh;
border: unset;
background: #f2f4f6;
}
.prism-live {
min-height: 350px;
overflow-x: hidden;
width: 100%;
}
div#coding_area > div {
width: 100%;
border-left: 15px solid #555865;
}
div#coding_area > div:first-child {
border-left: none;
}
div#coding_area {
width: 100%;
height: calc(60vh - 60px);
min-height: 125px;
display: flex;
overflow: hidden;
border-bottom: 15px solid #555865;
}
textarea {
font-size: 15px;
color: #fff;
background: #000000;
}
div#code_output {
height: 100%;
}
<head>
<title>Coding Playground | #Programmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div id="coding_playground_outer">
<header id="playground_header">
<h1>Coding Playground | #Programmer</h1>
</header>
<hr color="#fff">
<div class="page-wrap twilight">
<div class="boxes">
<div id="coding_area">
<textarea id="html" placeholder="HTML" class="prism-live language-html"></textarea>
<textarea id="css" placeholder="CSS" class="prism-live language-css"></textarea>
<textarea id="js" placeholder="JavaScript" class="prism-live language-js"></textarea>
</div>
<div id="code_output">
<iframe id="code"></iframe>
</div>
</div>
</div>
</div>
<body>
This code is 65% working as I imagined it. Just need a working toggle light/dark switch button now and a Syntax Hilight. Please help me as soon as possible...

RangeSlider using combination of HTML, CSS and JS not working in Squarespace

I have a code for a dynamic range slider which works on other sites but not on Squarespace. I am using the theme, Merida and the page can be found here. The code is meant to show the values in a teardrop shaped bubble which moves with the slider.
the full code is below, just incase i am wrong and it isn't the javascript that is faulty. Any help will be greatly appreciated. Thanks!
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #664AFF;
}
.range{
height: 80px;
width: 380px;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
.sliderValue{
position: relative;
width: 100%;
}
.sliderValue span{
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -40px;
line-height: 55px;
z-index: 2;
color: #fff;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.sliderValue span.show{
transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #664AFF;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.field{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value{
position: absolute;
font-size: 18px;
color: #664AFF;
font-weight: 600;
}
.field .value.left{
left: -22px;
}
.field .value.right{
right: -43px;
}
.range input{
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-progress{
background: #664AFF;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="range">
<div class="sliderValue">
<span>100</span>
</div>
<div class="field">
<div class="value left">
0</div>
<input type="range" min="10" max="200" value="100" steps="1">
<div class="value right">
200</div>
</div>
</div>
<script>
const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.left = (value/2) + "%";
slideValue.classList.add("show");
});
inputSlider.onblur = (()=>{
slideValue.classList.remove("show");
});
</script>
</body>
</html>

Toggle Between Search Icon and Cancel Icon

I need to toggle between two icons (basically search icon and cancel icon) when a particular element is clicked using jQuery. In the case of the code below, the telegram icon changes to whatsapp icon on click. I want to change back to telegram icon when the whatsapp icon is clicked. I would be grateful if the same code can also be written in JavaScript.
$(document).ready(function() {
$(".searchIcon").click(function() {
$(".search").toggleClass("active");
$(".searchIcon").attr(
"src",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0"
);
});
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" alt="" style: "width: 20px; height:20px;"/>
</div>
</div>
</div>
Have a go with this
I extracted the style (you had a typo -colon after style instead of equal sign) and hid the second icon
.searchIcon {
width: 20px;
height: 20px;
}
.searchIcon:nth-child(2) {
display: none;
}
jQuery
$(function() {
$(".searchIcon").on("click",function() {
$(".search").toggleClass("active");
$(this).toggle()
$(this).siblings().toggle()
});
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
.searchIcon {
width: 20px;
height: 20px;
}
.searchIcon:nth-child(2) {
display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" />
<img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
</div>
</div>
</div>
Vanilla JS
I added a new class
.searchIcon {
display: none;
}
.isVisible {
display:block
}
window.addEventListener("load", function() { // page load
document.querySelector(".searchIcon-wrapper").addEventListener("click", function(e) { // delegation
const tgt = e.target;
if (tgt.classList.contains("searchIcon")) { // one of the images
document.querySelector(".search").classList.toggle("active");
tgt.classList.toggle("isVisible");
const sib = tgt.classList.contains("whatsapp") ? 1 : 2; // which did we click?
document.querySelector(".searchIcon:nth-child("+sib+")").classList.toggle("isVisible");
}
});
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
.searchIcon {
width: 20px;
height: 20px;
}
.searchIcon {
display: none;
}
.isVisible {
display:block
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon isVisible" src="https://www.telegram.org/img/t_logo.png" />
<img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
</div>
</div>
</div>
So what I personally would do is use psuedo elements on the iconWrapper div and then just toggle a class on and off hiding or showing the respective pseudo element. You can either put the images as their content value or use the background-image property and set the images there.
var el = document.querySelector('.iconWrapper');
el.onclick = function() {
el.classList.toggle('active');
}
.iconWrapper {
width: 100px;
height: 50px;
background: blue;
position: relative;
}
.iconWrapper:before, .iconWrapper:after {
width: 50px;
height: 50px;
content: '';
display: block;
position: absolute;
top: 0;
right: -50px;
}
.iconWrapper:before {
background: green;
display: none;
}
.iconWrapper:after {
background: red;
}
.iconWrapper.active:before { display: block; }
.iconWrapper.active:after { display: none; }
<div class="iconWrapper"></div>
I created a reusable function so that you can change another img src like this in the future if you wanted to.
var searchIcon = document.getElementsByClassName("searchIcon")[0];
function togglesrc(obj, icon_off, icon_on){
if(obj.src == icon_off){
obj.src = icon_on;
}
else{
obj.src = icon_off;
}
}
searchIcon.addEventListener("click",function(){
document.querySelector(".search").classList.toggle("active");
var icon_on = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0";
var icon_off = "https://www.telegram.org/img/t_logo.png";
togglesrc(this, icon_off, icon_on);
});
body {
padding: 0 !important;
margin: 0 !important;
font-size: 16px;
background: black;
}
* {
box-sizing: border-box;
}
.container {
background-color: navy;
}
.preTopNav-Items {
display: flex;
flex-flow: row wrap;
padding-top: 10px;
padding-bottom: 10px;
}
.preTopNav-Items img {
width: 20px;
height: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: flex-end;
width: calc(250px + 20px + 7px + 7px);
border-radius: 6px;
padding: 0;
overflow: hidden;
border: none;
position: relative;
height: 28px;
}
.search img:hover {
cursor: pointer;
}
.searchIcon-wrapper {
background-color: navy;
position: absolute;
right: 0;
z-index: 1;
padding: 0 7px;
display: flex;
align-items: center;
border-radius: 4px;
}
.search input {
position: absolute;
right: 0px;
width: 250px;
padding: 3px 10px;
font-size: 16px;
transform: translateX(calc(100% + 34px));
transition: transform 0.5s ease-in-out;
}
.search.active input {
transform: translateX(-34px);
}
.search.active {
box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
transition: box-shadow 1.5s;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
<div class="preTopNav-Items search">
<input type="text" class="searchBar" placeholder="Search..." />
<div class="searchIcon-wrapper">
<img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" alt="" style: "width: 20px; height:20px;"/>
</div>
</div>
</div>

Javascript / remove hover after click close button

Help me please!
Show me please how can I remove hover effect after click close button on the right corner?
I can’t figure out how to turn off the effect when you click on the close button
Help me please. I just started to learn javascript, I would like for me to solve this problem, so that I can see how you solved it
I'm insert code snippet!
$(".close_help").click(function() {
$('.close_help').removeClass(".product__element");
setInterval(function() {
$('.product__element').addClass('.product__element')
}, 100);
});
// // $(".close-hover").click(function () {
// const resetClose = document.querySelector('.close-hover');
// $(".close-hover").click(function () {
// resetClose.style.display = 'none';
// })
// // $('.product__element').removeClass("product__element");
// // setInterval(function () { $('.product__element').addClass('product__element') }, 500);
// // });
.product__element {
z-index: 9;
background-color: #fbfbfb;
width: 20%;
margin: 2%;
padding: 10px 10px 10px 20px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 5px;
-webkit-transform: translateY(0);
-webkit-transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.prodact_sezon {
content: "";
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(196, 196, 196, 0.4);
}
.close_help {
position: absolute;
top: 4px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.interact:hover .close_help {
display: block;
}
/* .prodact_sezon .product__element:hover {
transform: scale(02);
} */
.product__element:hover {
background-color: white;
transform: scale(1.02);
box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, .09);
z-index: 10;
margin-bottom: 0px;
}
.elem123 {
margin-top: -1px;
margin-bottom: 0px;
display: none;
position: absolute;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .09);
}
.product__element:hover .elem123 {
display: block;
background: #FFFFFF;
left: 0%;
right: 0%;
margin-bottom: 0%;
padding: 20px;
box-shadow: 0px 10px 12px 0 rgba(0, 0, 0, .09);
border-radius: 10px;
}
.product__img {
max-width: 80%;
height: auto;
padding-top: -20px;
}
.product__name {
width: 100%;
padding: 1px 5px 10px 5px;
text-align: center;
font-weight: bold;
}
.product__name__two {
width: 100%;
font-size: 15px;
padding: 0px 5px 7px 5px;
text-align: center;
font-weight: regular;
}
.product__description {
width: 100%;
font-size: 14px;
padding: 10px 2px 2px 2px;
text-align: center;
font-weight: regular;
text-rendering: auto;
}
.product__price {
text-align: center;
padding: 10px 5px;
/* border: 1px solid #e2e2e2; */
border-radius: 10px;
margin-bottom: 0px;
color: #edaf26;
font-weight: bold;
z-index: 330;
font-size: 17px;
}
.product__size {
display: flex;
align-items: center;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
.product__size-element {
width: 48%;
border: 2px solid #e2e2e2;
font-size: 14px;
padding: 5px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 0px;
border-radius: 10px;
}
.product__size-element_active {
border: 3px solid #76AA6F !important;
border-radius: 10px;
}
.product__add-to-cart-button {
width: 100%;
height: 45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
-webkit-appearance: none;
border-radius: 10px;
background: #76AA6F;
color: #fff;
cursor: pointer;
margin: 15px 0 0;
-webkit-transition: .3s;
transition: .3s;
font-size: 16px;
outline: none;
}
.product__add-to-cart-button:hover {
background: #63915D;
-webkit-transition: .3s;
transition: .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product__element interact">
<span class="close_help">×</span>
<img alt="Манго Махачонок" class="product__img" src="https://unsplash.com/photos/7iLlgS5o09c">
<div class="product__name">
Манго Махачонок
</div>
<div class="product__price">
<span class="product__price-number">220</span> Грн
</div>
<div class="elem123">
<div class="product__size">
<div class="product__size-element" data-sb-curent-id-or-vendor-code="003" data-sb-curent-price="220" data-sb-curent-size="1 шт.">
1 шт.
</div>
<div class="product__size-element" data-sb-curent-id-or-vendor-code="004" data-sb-curent-price="190" data-sb-curent-size="1 кг">
1 кг.
</div>
</div>
<div class="product__quantity"></div><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="003" data-sb-product-img="images/shop/2-min.png" data-sb-product-name="Манго Махачонок" data-sb-product-price="220" data-sb-product-quantity="003" data-sb-product-size="1 шт."><i class="fas fa-cart-plus"></i> В корзину</button>
<div class="product__description">
По вкусовым качествам Mango Махачонок идет на первом месте среди всех тайских сортов. У него самая не волокнистая мякоть. Он самый сладкий.
</div>
</div>
</div>
While mentioning the class in any of these functions(addClass() or removeClass()) you do not start it with . because these functions are all about classes and you just need to specify them.
And to turn off the hover, change your jQuery code to
$(".close_help").click(function() {
$('div').removeClass("product__element");
setInterval(function() {
$('div').addClass('product__element')
}, 1000);
});
Here is the working example of how it works.

Categories

Resources