I need your help. I have button. With the press on it I can make text. With click on this text I can edit this text. And I have colorpicker. I need, when I choose color the text which I created also will change color(it will change on this value of colorpicker) I don't know how to do this. Help me please
function addText() {
var type = $(".select-txt").val();
var align = $(".form-align").val();
var float = "text-align:";
var id = Date.now();
var editBlock = "$('.edit-block')";
var display = ",'block'";
var colorValue = $(".color").val();
var color = "color:";
var closeTag = ";";
var onclick = "onclick="+editBlock+".css('display'"+display+");";
var ordinary = "<div class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+closeTag+
">text</div>";
var h = "<"+type+" class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+">text</"+type+">";
if(type == "ordinary") {
$(".preview").append(ordinary);
}
else if(type.startsWith("h")) {
$(".preview").append(h);
}
$(".color").minicolors({
defaultValue: "#000"
});
$(".color").on("change", function() {
var colorValue = $(".color").val();
ordinary.append(color+colorValue);
});
}
function showTextWindow() {
var modal = $(".modal-txt-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
}
else {
modal.css('display', "none");
}
}
function showTextWindow() {
var modal = document.querySelector(".modal-txt-container");
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
}
}
function showElement() {
var modal = document.querySelector(".choose-option");
var add = document.querySelector('.add');
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
add.style.display = "block";
}
}
* {
outline: none;
padding: 0;
margin: 0;
}
.choose-option {
background-color: #352a2c;
position: fixed;
color: white;
font-family: 'Scada', sans-serif;
padding: 15px;
width: 14%;
}
.insert-txt-block {
padding-bottom: 3%;
font-size: 1.3em;
}
.btn-txt::before {
content: '\f031';
font-family: "fontAwesome";
margin-right: 3%;
}
.btn-txt {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.btn-txt:hover {
background-color: #727272;
}
.modal-insert-txt {
background-color: #352a2c;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
padding-right: 25px;
width: 130%;
border-radius: 4px;
}
.modal-txt-container {
display: grid;
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.container {
position: fixed;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background-image: none;
width: 85%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
cursor: pointer;
color: black;
background: white;
border-radius: 1px 0px 0px 1px;
}
.form-group::after {
content: '\25BC';
position: absolute;
padding: 0 0.5em;
background: rgb(59, 61, 52);
pointer-events: none;
line-height: 1.7em;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
color: white;
}
.form-group {
position: relative;
display: block;
height: 1.7em;
margin: 1% 0% 5% 0;
border: 1px solid #272822;
}
.btn-insert-txt {
border: none;
color: white;
background: #ff5959;
padding: 5px;
font-size: 1.01em;
border-radius: 2px;
cursor: pointer;
}
.btn-insert-txt:hover {
background: #e54040;
}
.modal-insert-txt span {
font-size: 1.1em;
}
.modal-insert-txt h2 {
padding-bottom: 2%;
}
.modal-insert-txt hr {
margin-bottom: 3%;
}
.flex-close-title {
display: flex;
justify-content: space-around;
}
.type-insert li {
cursor: pointer;
}
.close {
font-size: 1.7em;
margin-top: -1%;
cursor: pointer;
}
.close::after {
content: '\f057';
font-family: "fontAwesome";
color: #ff5959;
}
.add {
font-size: 2em;
cursor: pointer;
display: none;
position: fixed;
left: 1%;
top: 2%;
}
.add::after {
content: '\f055';
font-family: "fontAwesome";
color: #ff5959;
}
#textarea-edit {
width: 80%;
height: 100px;
resize: none;
border: 2px solid #3B3D45;
background: #3B3D45;
color: white;
padding: 4%;
font-size: 1.05em;
border-radius: 4px;
display: flex;
justify-content: center;
position: relative;
top: 1%;
}
.edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
top: 0;
right: 0;
}
.edit-block span {
font-size: 1.3em;
}
.minicolors-theme-default .minicolors-input {
height: 29px !important;
padding-left: 30px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site Bilder</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Scada:400,700&subset=cyrillic" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
</head>
<body>
<span class="add" onclick="showElement()"></span>
<div class="choose-option">
<div class="flex-close-title">
<div class="insert-txt-block">Insert elements</div>
<span class="close" onclick="showElement()"></span>
</div>
<ul class="type-insert">
<li class="btn-txt" onclick="showTextWindow()">Text</li>
</ul>
</div>
<div class="modal-txt-container">
<div class="modal-insert-txt">
<h2>Insert text</h2>
<hr>
<span>Тип Текста</span>
<div class="form-group">
<select class="select-txt">
<option value="ordinary" selected>Plain text</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</div>
<span>Text alignment</span>
<div class="form-group">
<select class="form-align">
<option value="left">left</option>
<option value="center">Center</option>
<option value="right">right</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addText()">Insert text</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="edit-block">
<div class="wrap">
<span class="title-textarea">
Цвет
</span>
<input type="text" id="hue" class="color" data-control="hue">
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
The solution I decided on is simple enough, I add a class to know which piece of text I'm currently editing, and then set the color CSS attribute to the colour picker's selection for that selected class.
So your onclick is now:
var onclick = 'onclick="editTextColour(this)"';
I made a new function to handle the basics, (this) as the param for onclick is treated as the element that calls it:
function editTextColour(elem) {
$('.editing').removeClass('editing');
$(elem).addClass('editing');
$('.edit-block').show();
}
And then your change event for the color picker is just this:
$(".color").on("change", function() {
var colorValue = $(".color").val();
$('.preview .editing').css('color', colorValue);
});
JSFiddle
Related
I have this star rate form and wanted you to start typing in the text area and it will show you the star rate form right away, but if the text area is empty, it will hide.
I discovered the following code:
<HTML>
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
<JS>
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
How can I combine this code into mine? Because it only does that now when I click outside of the text area and then show the stars. Please advise me on this!
#import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
input.star {
display: none;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
.rev-box {
height: 0;
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}
<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review" onchange="asd(this)"></textarea>
</div>
<div id="rateYo" style="visibility: hidden;"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
<script>
function asd(txt) {
var something = txt.value;
var star = document.getElementById("rateYo");
star.style.visibility = "visible";
}
$(function MyFunction() {
$("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
rating = Math.ceil(rating);
$('#rating_input').val(rating); //setting up rating value to hidden field
var bod = document.getElementById("review").value;
window.location.href = 'mailto:your#gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
});
});
</script>
</body>
</html>
I have taken the liberty of rewriting your code to accomplish what you are trying to do.
Two tips I want to give you:
Decouple the data layer with the presentation layer. You are mixing CSS styles in stylesheets, HTML and JavaScript. You are also having JavaScript as strings in your HTML attributes. This gets confusing quite rapidly! We have gone a long way since HTML4 and the 90's!
If you use a library, then use it. For example, you are using jQuery, then use it as it should instead of adding event handlers directly to the HTML attributes; jQuery has $(element).on(event, handler), don't do <div onclick="something(this)"></div>.
$(function MyFunction() {
const textInput = $("#review").on('input', function () {
if (textInput.val().length) {
rateStar.show();
} else {
rateStar.hide();
}
});
const ratingInput = $('#rating_input');
const rateStar = $("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
let inputValue = textInput.val();
ratingInput.val(Math.ceil(rating)); //setting up rating value to hidden field
console.log( rating, inputValue );
// window.location.href = 'mailto:your#gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
}).hide();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
.rev-box {
/* height: 0; */
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}
<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review"></textarea>
</div>
<div id="rateYo"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
</body>
</html>
I want to do it like in the video I uploaded below. That's what I've done for now, but when I click the search icon, I can't replace it with the x icon. I think I couldn't do this because I have little knowledge of Javascript. I would be very happy if you could help me with this.
https://files.fm/f/856dwf9kj
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var qutu = $('.qutu');
var isOpen = false;
$(document).mouseup(function(){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
qutu.removeClass('noborder');
qutu.addClass('bborder');
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
qutu.removeClass('bborder');
qutu.addClass('noborder');
isOpen = false;
}
});
});
body{
margin: 40px 60px;
}
*{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.5s;
}
form{
display: inline-block;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 50px;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.5s;
-webkit-backface-visibility: hidden;
}
.bborder{
opacity: 1;
}
.noborder{
opacity: 0;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
width: 300px;
height: 50px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
color: #fff;
}
.sb-search-input:-moz-placeholder {
color: #fff;
}
.sb-search-input::-moz-placeholder {
color: #fff;
}
.sb-search-input:-ms-input-placeholder {
color: #fff;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: black;
background: #fff;
width: 35px;
height: 0px;
z-index: 90;
margin: -5px;
top: 1px;
right: 6px;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 300px;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #fff;
color: black;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
<form>
<input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"><i class="fa fa-search"></i></span>
</form>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
I made a really simple example below from the snippet you gave.
The only differences are inside the submitIcon.click.
You just have to do how you have done for your elements searchBox and qutu by adding/removing classes. Thanks to this, you will be able to change the FontAwesome icon you want to use for the element. It is probably perfectible, like by checking if the class exists before remove or add it (in a straight cae it should not, but we never know).
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var qutu = $('.qutu');
var isOpen = false;
$(document).mouseup(function(){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
qutu.removeClass('noborder');
qutu.addClass('bborder');
searchBox.find('i.fa').removeClass('fa-search');
searchBox.find('i.fa').addClass('fa-times');
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
qutu.removeClass('bborder');
qutu.addClass('noborder');
searchBox.find('i.fa').removeClass('fa-times');
searchBox.find('i.fa').addClass('fa-search');
isOpen = false;
}
});
});
body{
margin: 40px 60px;
}
*{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.5s;
}
form{
display: inline-block;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 50px;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.5s;
-webkit-backface-visibility: hidden;
}
.bborder{
opacity: 1;
}
.noborder{
opacity: 0;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
width: 300px;
height: 50px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
color: #fff;
}
.sb-search-input:-moz-placeholder {
color: #fff;
}
.sb-search-input::-moz-placeholder {
color: #fff;
}
.sb-search-input:-ms-input-placeholder {
color: #fff;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: black;
background: #fff;
width: 35px;
height: 0px;
z-index: 90;
margin: -5px;
top: 1px;
right: 6px;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 300px;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #fff;
color: black;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
<form>
<input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"><i class="fa fa-search"></i></span>
</form>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
https://github.com/ProjectCubit/website.git
I have a little problem that I just cannot seem to solve.
How do I center align? I tried various methods, but nothing seem to work.
I tried position: absolute, flex, and other methods from W3. Sorry, if this seems like a silly question.
I'm a bit new to Programming, thanks.
var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;
words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
splitLetters(words[i]);
}
function changeWord() {
var cw = wordArray[currentWord];
var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = 'letter behind';
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}
currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = 'letter out';
}, i*80);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = 'letter in';
}, 340+(i*80));
}
function splitLetters(word) {
var content = word.innerHTML;
word.innerHTML = '';
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement('span');
letter.className = 'letter';
letter.innerHTML = content.charAt(i);
word.appendChild(letter);
letters.push(letter);
}
wordArray.push(letters);
}
changeWord();
setInterval(changeWord, 4000);
.header_logo {
width: 110px;
height: 65px;
margin-top: -16px;
display: inline-block;
vertical-align: middle;
}
body{
font-family: Helvetica;
font-size: 1.6rem;
}
/*Reset*/
/* colors 8a3aff, 6f79ff, 3a9fff black-> 1f4568 grey->8198ae*/
.sect{
padding: 90px 0;
position: relative;
}
.collapse{
display: block;
}
.sect--grey{
/*background-color: #ebeff9;*/
}
.sect--violet{
background-color:#6f79ff;
}
.sect--padding-bottom{
padding-bottom:115px;
}
.sect--padding-top{
padding-top:90px;
}
.row--center{
max-width: 1000px;
margin: 0 auto;
}
.row--margin{
margin-top:45px;
}
.row__title{
text-align: center;
font-size: 26px;
font-weight: 400;
margin-top: 0px;
}
.row__sub{
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0px;
color: #8198ae;
}
/*menu header*/
.header{
padding: 30px 25px;
font-weight: bold;
}
.header__elenco {
padding: 0;
margin: 0;
list-style: none;
}
.header__menu {
float: right;
}
.header__el{
padding: 0 25px;
display: inline-block;
}
.header__logo, .header__menu{
display: inline-block;
vertical-align: middle;
}
.header__title{
font-size: 18px;
margin: 0;
margin-left: 10px;
display: inline-block;
line-height: 18px;
vertical-align: middle;
}
.header__light{
color: #8198ae;
}
.header__link{
color: #1f4568;
font-size: 14px;
}
.header__link:hover{
text-decoration: none;
color:#3a9fff;
}
.navbar-toggle .icon-bar{
background-color: black;
}
.navbar-toggle {
margin: 5px 0;
}
.text {
position: absolute;
width: 450px;
left: 50%;
margin-left: -225px;
height: 40px;
top: 50%;
margin-top: -20px;
}
p {
display: inline-block;
vertical-align: top;
margin: 0;
}
.word {
position: absolute;
width: 220px;
opacity: 0;
}
.letter {
display: inline-block;
position: relative;
float: left;
transform: translateZ(25px);
transform-origin: 50% 50% 25px;
}
.letter.out {
transform: rotateX(90deg);
transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
transform: rotateX(-90deg);
}
.letter.in {
transform: rotateX(0deg);
transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria {
color: #8e44ad;
}
.belize {
color: #2980b9;
}
.pomegranate {
color: #c0392b;
}
.green {
color: #16a085;
}
.midnight {
color: #2c3e50;
}
#media screen and (max-width:1024px){
.collapse{
display: none;
}
.navbar-toggle {
margin: 0;
display: inline-block;
margin-right: 10px;
margin-top: 10px;
}
.header__container{
width: 100%;
padding: 0;
}
.header__menu {
width: 100%;
}
.header{
background-color:#fff;
padding: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
.header__logo{
padding: 12px 20px 12px 20px;
}
.header__el {
display: block;
padding: 10px 20px;
border-top: 1px solid #ededed;
}
.header .btn--white, .header .btn--white:hover{
padding: 0;
border: 0;
box-shadow: none;
color:#fff;
background-color:transparent;
}
.header__el--blue{
background-color:#3a9fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>WEB 3.0 Payments Infrastructure - Brix</title>
<meta charset="UTF-8">
<meta name="description" content="Brix provides a set of Tools for Businesses and Developers to integrate Cryptocurrency payments and payouts in their Solutions.">
<meta name="keywords" content="Cryptocurrency, Blockchain, Payments">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="https://image.ibb.co/fOur3b/favicon.png"/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<!--Navbar-->
<body>
<header class="header">
<div class="container header__container">
<div class="header__logo"><img class="header_logo" src="./images/branding/Brix_Logo.svg"></div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="header__menu">
<nav id="navbar" class="header__nav collapse">
<ul class="header__elenco">
<li class="header__el">Home</li>
<li class="header__el">Products</li>
<li class="header__el">Brix for Consumers</li>
<li class="header__el">About us</li>
Contact Us →</li>
</ul>
</nav>
</div>
</div>
</header>
<!---->
<!-- partial:index.partial.html -->
<div class="text">
<p>Nachos are</p>
<p>
<span class="word wisteria">tasty.</span>
<span class="word belize">wonderful.</span>
<span class="word pomegranate">fancy.</span>
<span class="word green">beautiful.</span>
<span class="word midnight">cheap.</span>
</p>
</div>
<!-- partial -->
</body>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script><script src="./script.js"></script>
</html>
You can use text-align: center;, and <br> if you want. Here's a snippet:
.text {
text-align: center;
position: absolute;
width: 450px;
left: 50%;
margin-left: -225px;
height: 40px;
top: 50%;
margin-top: -20px;
}
p {
display: inline-block;
vertical-align: top;
margin: 0;
}
<div class="text">
<p>Nachos are</p><br/>
<p>
<span>tasty.</span><br/>
<span>wonderful.</span><br/>
<span>fancy.</span><br/>
<span>beautiful.</span><br/>
<span>cheap.</span><br/>
</p>
</div>
Here it's all in one line:
.text {
text-align: center;
position: absolute;
width: 450px;
left: 50%;
margin-left: -225px;
height: 40px;
top: 50%;
margin-top: -20px;
}
p {
display: inline-block;
vertical-align: top;
margin: 0;
}
<div class="text">
<p>Nachos are</p>
<p>
<span>tasty.</span>
<span>wonderful.</span>
<span>fancy.</span>
<span>beautiful.</span>
<span>cheap.</span>
</p>
</div>
If you want to align inline all in one line, and center it in the middle of the page
you can use flex to your parent only;
.text {
display:flex;
justify-content: center;
align-items:center;
}
I checked out your code & it centers after adding text-align: center to .text.
Adding flex to .text does not work for the following reason:
The 2nd <p> containing the span.word has 0 width & height, due to its children being absolutely positioned. In order for flex to work you need to set appropriate width & height to the 2nd <p>.
But text-align: center unlike flex is inherited by all descendants, and not just the children.
this question has been posted here by someone else before and the problem with the node-children has been solved but i still have a problem when toggling the complete option it removes everything from the page but the uncompleted and all option it shows all list whether they have been checked done or not is not relevant please help me understand and fix the problem
// SELECTING
const myClick = document.querySelector(".myclick");
const myList = document.querySelector(".mylist");
const myInput = document.querySelector(".myinput");
const myFilter = document.querySelector(".filter-todo");
// EVENT LISTENERS
myClick.addEventListener("click", addItem);
myList.addEventListener("click", deleteMe);
myFilter.addEventListener("click", filterOption);
// FUNCTIONS
function addItem(e) {
//prevent from submiting form (here we dont have form )
e.preventDefault();
//creating div to put check and delte btns inside and then putting it inside the myList.
const newDiv = document.createElement("div");
newDiv.classList.add("newdiv");
myList.appendChild(newDiv);
const newItem = document.createElement("li");
newItem.classList.add("newitem");
newItem.innerText = myInput.value;
myInput.value = "";
newDiv.appendChild(newItem);
// adding the checked btn
const checkBtn = document.createElement("button");
checkBtn.classList.add("check");
checkBtn.innerHTML = '<i class="lni lni-checkmark"></i>';
newDiv.appendChild(checkBtn);
// adding the trash btn
const trashBtn = document.createElement("button");
trashBtn.classList.add("trash");
trashBtn.innerHTML = '<i class="lni lni-trash"></i>';
newDiv.appendChild(trashBtn);
}
function deleteMe(e) {
const myTarget = e.target;
// delete list
if (myTarget.classList[0] === "trash") {
const list = myTarget.parentElement;
// create class to add the remove animation
list.classList.add("fal");
// we removed the remove() here because it removed the animation before it took effect
list.addEventListener("transitionend", function () {
list.remove();
});
}
if (myTarget.classList[0] === "check") {
const list = myTarget.parentElement;
list.classList.toggle("complete");
}
}
function filterOption(e) {
const todos = [...myList.children];
todos.forEach(function (todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
}
else {
todo.style.display = "none";
}
break;
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #d05fda;
background: -webkit-linear-gradient(top left, #d05fda, #72b1f2);
}
.container {
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}
.container h1 {
font-family: "Roboto", sans-serif;
font-weight: 500;
margin-bottom: 30px;
color: #ffffff;
}
.box {
display: flex;
}
.mybtn {
height: auto;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.myinput,
.myclick {
border: none;
height: 30px;
background: cornsilk;
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #292626;
}
.myinput:focus {
outline: none;
}
.myclick {
cursor: pointer;
width: 30px;
color: #ffffff;
background: #a300ee;
transition: all 0.5s ease;
}
.myclick:focus {
outline: none;
}
.myclick:hover {
background: #ffffff;
color: #a300ee;
}
.mylist {
list-style: none;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 20px;
margin-top: 30px;
color: #292626;
}
.newdiv {
transition: all 0.7s ease;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(240, 214, 228);
margin: 5px;
background: rgb(245, 237, 245);
}
/* make the check mark to go to the ned of the div */
.newdiv li {
flex: 1;
}
.check {
margin: 5px;
height: 25px;
width: 25px;
border: none;
color: #128812;
cursor: pointer;
}
.check,
.trash:focus {
outline: none;
}
.check:hover {
background: rgb(228, 188, 196);
}
.trash:hover {
background: rgb(237, 238, 175);
}
.check i {
pointer-events: none;
}
.trash {
margin: 5px;
height: 25px;
width: 25px;
border: none;
color: #ee5700;
cursor: pointer;
}
.trash i {
pointer-events: none;
}
.complete {
text-decoration: line-through;
opacity: 0.4;
}
.fal {
transform: translateY(100px) rotateZ(25deg);
opacity: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
}
.select {
margin: 5px;
position: relative;
overflow: hidden;
}
select {
font-family: "Roboto", sans-serif;
color: #7c05b3;
cursor: pointer;
height: 30px;
padding: 5px;
}
.select::after {
content: "\25BC";
position: absolute;
top: 0;
right: 0;
pointer-events: none;
padding: 5px;
background: #a300ee;
color: #ffffff;
transition: all 0.5s ease;
}
.select:hover::after {
background: #ffffff;
color: #a300ee;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<link href="your-project-dir/font-css/LineIcons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>My List</h1>
<div class="box">
<div class="mybtn">
<input class="myinput" type="text">
<button class="myclick"><i class="lni lni-plus"></i></button>
</div>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">ALL</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</div>
<ul class="mylist">
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>
// SELECTING
const myClick = document.querySelector(".myclick");
const myList = document.querySelector(".mylist");
const myInput = document.querySelector(".myinput");
const myFilter = document.querySelector(".filter-todo");
// EVENT LISTENERS
myClick.addEventListener("click", addItem);
myList.addEventListener("click", deleteMe);
myFilter.addEventListener("click", filterOption);
// FUNCTIONS
function addItem(e) {
//prevent from submiting form (here we dont have form )
e.preventDefault();
//creating div to put check and delte btns inside and then putting it inside the myList.
const newDiv = document.createElement("div");
newDiv.classList.add("newdiv");
myList.appendChild(newDiv);
const newItem = document.createElement("li");
newItem.classList.add("newitem");
newItem.innerText = myInput.value;
myInput.value = "";
newDiv.appendChild(newItem);
// adding the checked btn
const checkBtn = document.createElement("button");
checkBtn.classList.add("check");
checkBtn.innerHTML = '<i class="lni lni-checkmark"></i>';
newDiv.appendChild(checkBtn);
// adding the trash btn
const trashBtn = document.createElement("button");
trashBtn.classList.add("trash");
trashBtn.innerHTML = '<i class="lni lni-trash"></i>';
newDiv.appendChild(trashBtn);
}
function deleteMe(e) {
const myTarget = e.target;
// delete list
if (myTarget.classList[0] === "trash") {
const list = myTarget.parentElement;
// create class to add the remove animation
list.classList.add("fal");
// we removed the remove() here because it removed the animation before it took effect
list.addEventListener("transitionend", function () {
list.remove();
});
}
if (myTarget.classList[0] === "check") {
const list = myTarget.parentElement;
list.classList.toggle("complete");
}
}
function filterOption(e) {
const todos = [...myList.children];
todos.forEach(function (todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("complete")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("complete")) {
todo.style.display = "flex";
}
else {
todo.style.display = "none";
}
break;
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #d05fda;
background: -webkit-linear-gradient(top left, #d05fda, #72b1f2);
}
.container {
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}
.container h1 {
font-family: "Roboto", sans-serif;
font-weight: 500;
margin-bottom: 30px;
color: #ffffff;
}
.box {
display: flex;
}
.mybtn {
height: auto;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.myinput,
.myclick {
border: none;
height: 30px;
background: cornsilk;
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #292626;
}
.myinput:focus {
outline: none;
}
.myclick {
cursor: pointer;
width: 30px;
color: #ffffff;
background: #a300ee;
transition: all 0.5s ease;
}
.myclick:focus {
outline: none;
}
.myclick:hover {
background: #ffffff;
color: #a300ee;
}
.mylist {
list-style: none;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 20px;
margin-top: 30px;
color: #292626;
}
.newdiv {
transition: all 0.7s ease;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(240, 214, 228);
margin: 5px;
background: rgb(245, 237, 245);
}
/* make the check mark to go to the ned of the div */
.newdiv li {
flex: 1;
}
.check {
margin: 5px;
height: 25px;
width: 25px;
border: none;
color: #128812;
cursor: pointer;
}
.check,
.trash:focus {
outline: none;
}
.check:hover {
background: rgb(228, 188, 196);
}
.trash:hover {
background: rgb(237, 238, 175);
}
.check i {
pointer-events: none;
}
.trash {
margin: 5px;
height: 25px;
width: 25px;
border: none;
color: #ee5700;
cursor: pointer;
}
.trash i {
pointer-events: none;
}
.complete {
text-decoration: line-through;
opacity: 0.4;
}
.fal {
transform: translateY(100px) rotateZ(25deg);
opacity: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
}
.select {
margin: 5px;
position: relative;
overflow: hidden;
}
select {
font-family: "Roboto", sans-serif;
color: #7c05b3;
cursor: pointer;
height: 30px;
padding: 5px;
}
.select::after {
content: "\25BC";
position: absolute;
top: 0;
right: 0;
pointer-events: none;
padding: 5px;
background: #a300ee;
color: #ffffff;
transition: all 0.5s ease;
}
.select:hover::after {
background: #ffffff;
color: #a300ee;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<link href="your-project-dir/font-css/LineIcons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>My List</h1>
<div class="box">
<div class="mybtn">
<input class="myinput" type="text">
<button class="myclick"><i class="lni lni-plus"></i></button>
</div>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">ALL</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>
</div>
<ul class="mylist">
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>
you are adding a complete class when the user marks a list item as completed but in the filters code you are using completed class to filter the list.
This is the script, it work fine as you can see but this reset functionality have some issue, it turns the value to 0 but when again increase the value it starts from the last stored value, whats the issue?
This is the CSS of the counter application this we help you to run this file.
Ans this is the html file is pretty much good but just in issue with script
var counter = 0;
$("#box").text(counter);
function reset() {
counter = 0;
$("#box").text(counter);
}
function inc() {
counter = counter + 1;
$("#box").text(counter);
}
function dec() {
counter = counter - 1;
$("#box").text(counter);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="inc();">
Increase
</div>
<div class="dec" id="dec" onclick="dec();">
Decrease
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>
Added reset counter variable to 0 in reset() function.
var counter = 0;
$("#box").text(counter);
function reset() {
counter = 0;
$("#box").text(0);
}
function inc() {
counter = counter + 1;
$("#box").text(counter);
}
function dec() {
counter = counter - 1;
$("#box").text(counter);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
/* width: 50px; */
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="inc();">
Increase
</div>
<div class="dec" id="dec" onclick="dec();">
Decrease
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>
Now i have write a new script for it. Check it out all!
var a = 0;
var displayValue = document.getElementById('box');
var updateValue = function() {
displayValue.innerHTML = a;
};
var add = function(valueToAdd) {
a += valueToAdd;
updateValue();
};
var sub = function(valueToAdd) {
a -= valueToAdd;
updateValue();
};
var reset = function() {
a = 0;
updateValue();
};
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="add(1);">
Increment
</div>
<div class="dec" id="dec" onclick="sub(1);">
Decrement
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>