JQuery to do list project - javascript

This is a To Do List Project using html css and jquery
Every time i add something the list moves down , i don't know if it is because of css or jquery, you can see the code down below to check it, please help!!
It's always trying to be at the same level as the new list that is being added via JQuery.
Also when i did some validation so that when the user enters nothing it doesn't add it to the list, this worked for monday but all other days it didn't work even though i used the tag in script.js
http://mohammadhalawi.6te.net/To%20Do%20List/Index.html
I uploaded it online if you want to check it out
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery MealPlaner</title>
<link rel="stylesheet" type="text/css" href="Normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="todoListWrapper">
<h1>The JQuery To Do List</h1>
<div id="todoList" class="clearfix">
<ul>
<li class="listTitle">Monday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Tuesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Wednesday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle">Thursday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Friday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul>
<li class="listTitle">Saturday</li>
<li class="addItem">
<input type="text" class="inputItem" placeholder="add new item...">
</li>
</ul>
<ul >
<li class="listTitle" >Sunday</li>
<li class="addItem">
<input type="text" placeholder="add new item...">
</li>
</ul>
</div>
</div>
<div id="trash">
Drop Here!
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script>
window.jQuery || document.write('<script src="JQuery.js"><\/script>');
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
CSS
body
{
background-color: darkgray;
}
#todoListWrapper
{
width: 960px;
text-align: center;
margin: 0 auto;
padding: 20px 10px 30px;
background: white;
}
.clearfix:after
{
content: "";
display: table;
clear: both;
}
#todoList ul
{
width: 133px;
margin: 0;
padding:0;
position: relative;
display: inline-block;
list-style: none;
}
#todoList li
{
background: none;
padding: 5px;
border: none;
margin: 0;
text-align: left;
font-size: 12px;
}
#todoList li:hover
{
background: #eee;
}
#todoList li.listTitle
{
background: #444;
color: white;
padding: 10px;
text-align: center;
font-size: 14px;
}
#todoList li.listTitle:hover,
#todoList li.listTitle:active
{
cursor: default;
transform: none;
}
#todoList .emptySpace
{
background: #fc3;
border: dashed 1px #777;
height: 10px;
width: 120px;
}
#todoList li.addItem
{
display: none;
position: absolute;
top: 0;
background: none;
padding: 0;
width: 111px;
margin: 5px 4px;
}
#todoList ul:hover li.addItem
{
display: block;
}
#todoList li.addItem input
{
width: 100%;
padding: 4px;
}
#todoList li.addItem :active
{
transform: none;
}
#trash
{
background: rgba(178,73,38,0.7);
height: 300px;
width: 400px;
position: relative;
top: 90px;
left: 35%;
line-height: 300px;
color: white;
font-weight: bold;
font-size: 18px;
text-align: center;
padding: 0;
}
SCRIPT
$(function()
{
$('#todoList ul').sortable({
items: "li:not('.listTitle, .addItem')",
connectWith:"ul",
dropOnEmpty:true,
placeholder: "emptySpace"
});
$('input').keydown(function(e){
if(e.keyCode == 13 && $('input').val()!="")
{
var item = $(this).val();
$(this).parent().parent().append('<li style="font-size:13px;cursor:pointer;display:block;">'+ item + '</li>');
$(this).val("");
}
});
$('#trash').droppable({
drop: function(event, ui)
{
ui.draggable.remove();
}
});
});

Do the following: remove display inline-block , alter the margin and add float:left;
#todoList ul {
//display: inline-block;
float:left;
margin: 0 2px;
}
for the second question do the following:
if(e.keyCode == 13 && $(this).val().trim()!="")

I just stepped through your example. The reason that only your first input box works is because of this line:
if(e.keyCode == 13 && $('input').val()!="")
$('input') returns an array of all the elements matching the selector, meaning all the input boxes. When you ask for the val(), you'll get the value of the first input box in the array, which is "" unless you're typing in the first input box. So nothing happens unless you're on Monday.
You need to get the input box that you're typing into. To do that, change your line to this:
if(e.keyCode == 13 && e.target.value != "")
e.target is the target of the event, which is the input box that you're typing in.

Related

Search results won't filter properly [jquery]

Hi small disclaimer: I have learning disability, sorry in advance.
I have to do a jquery assignment where we make products and then the option to filter them through checkboxes. Now I followed everything we learned in the lesson and tried to apply it but it refuses to filter...
$('.fruit').hide();
$('#fruitCheck').click(function() {
if ($(this).is(':checked')) {
$('.fruit').show();
} else {
$('.fruit').hide()
}
};
ul
{
list-style-type: none;
}
div ul li
{
margin: 5px;
float: left;
}
img
{
}
.fruit p
{
float: left;
position: absolute;
margin-top: -15px;
margin-left: 20px;
background-color: green;
font-size:10px;
padding-left:20px;
padding-right:20px;
opacity: 0.8;
}
.frisdrank p
{
float: left;
position: absolute;
margin-top: -15px;
margin-left: 20px;
background-color: red;
font-size:10px;
padding-left:20px;
padding-right:20px;
opacity: 0.8;
}
.dier p
{
float: left;
position: absolute;
margin-top: -15px;
margin-left: 20px;
background-color: yellow;
font-size:10px;
padding-left:20px;
padding-right:20px;
opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> </title>
</head>
<body>
<label for="fruitCheck">
<input type="checkbox" id="fruitcheck" />
Fruit
</label>
<div class="row">
<ul>
<li class="frisdrank"><img src="https://i.imgur.com/FW5hGnb.png" /><p>Cola</p></li>
<li class="frisdrank"><img src="https://i.imgur.com/N3U2j5t.png" /><p>Fanta</p></li>
<li class="fruit"><img src="https://i.imgur.com/7yazXfi.png"/><p> Appel</p></li>
<li class="fruit"><img src="https://i.imgur.com/R4bx4kT.png" /><p>Peer</p></li>
<li class="dier"><img src="https://i.imgur.com/JshZluf.png" /><p>Hond</p></li>
<li class="dier"><img src="https://i.imgur.com/00auPwp.png" /><p>Kat</p></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="hello_world.js"></script>
</body>
</html>
Right now it looks like this: https://i.imgur.com/p1PctA3.png
fiddle: https://jsfiddle.net/97nd3t81/
PS. I know there's only 1 checkbox now, I was planning on just copy pasting them after I had the first one working.
Updated your JSfiddle, check it here.
$('.fruit').hide();
$('#fruitcheck').click(function() {
if ($(this).is(':checked')) {
$('.fruit').show();
} else {
$('.fruit').hide()
}
});
Only missing thing was a parenthesis at the end of the .click function. You can find the .click function documentation here.
Change
<label for="fruitCheck">
<input type="checkbox" id="fruitcheck" />
Fruit
</label>
to
<input id='fruitcheck' type='checkbox' /><lable for='fruitcheck'>Fruit</label>
Then you can do:
var fruits = $('.fruit'), fruitcheck = $('#fruitcheck');
fruitcheck.prop('checked', false); fruit.hide();
fruitcheck.click(function(){​
if(fruitcheck.is(':checked')) {​
fruits.show();
}
else{​
fruits.hide();
}
});

How to re-enable on-screen keyboard if the maximum length is not met

I have a ul li keyboard that gets 4 numbers first, 3 letters next and then disables itself. However, if the user clicks the delete button, it won't re-enable itself.
I thought "If I just add .removeClass('disabled') if the length is less than 8, it might work. But I'm pretty sure that's not how this works. Please help me out.
$(function() {
var $write = $('#write'),
symbols = $('.symbol'),
letters = $('.letter'),
shift = false,
capslock = false;
$('#keyboard li').click(function() {
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
$write.html($write.html() + character);
text1 = document.getElementById('write').value;
console.log(text1);
if (text1.length >= 4) {
symbols.addClass('disabled');
letters.removeClass('disabled');
if (text1.length == 7) {
letters.addClass('disabled');
}
}
if (text1.length > 7) {
letters.removeClass('disabled');
}
// Add the character
});
});
html {
width: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.maincontainer {
background-image: url(b.png);
background-repeat: repeat-y;
background-position: right;
}
/*head*/
.nav-text {
vertical-align: middle;
color: white;
}
.row {
padding: 15px;
display: flex;
justify-content: center;
}
.back-button {
height: 100%;
}
#backer {
float: left;
width: auto;
}
.red {
background-color: darkred;
}
.header {
text-align: center;
color: white;
font-size: 25px;
float: left;
width: 90%;
}
.uk-icon {
color: white;
}
/*main*/
/* Style the tab */
.tab {
width: 100%;
overflow: hidden;
}
/* Style the buttons inside the tab */
.tab button {
width: 50%;
background-color: inherit;
float: left;
border: none;
background-color: darkred;
color: white;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
#tabone {
border-top-left-radius: 5px;
border-right: 1px solid white;
}
#tabtwo {
border-top-right-radius: 5px;
border-left: 1px solid white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(80, 3, 3);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(180, 15, 15);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
#London {
text-align: center;
}
#searchbutton {
background-color: darkred;
color: white;
border: 0;
border-radius: 5px;
margin-bottom: 15px;
padding-right: 20px;
}
#write {
width: 90%;
height: 300px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Soyombo_red.svg/300px-Soyombo_red.svg.png) no-repeat scroll 50px 40px;
background-size: 80PX;
padding-left: 50px;
border-radius: 5%;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
font-size: 10vh;
}
#London>.container-fluid>h3 {
margin-top: 5%;
font-size: 4vh;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#keyboard li {
font-size: 30px;
display: inline-block;
margin: 0 5px 5px 0;
width: 5%;
padding: 0;
height: 70px;
line-height: 70px;
text-align: center;
background: #fff;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 7PX;
;
}
#keyboard .delete {
width: 120px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#container.ul {
margin: auto;
float: center;
}
#container-x {
width: 50%;
margin: auto;
}
input[type=submit] {
background: url(http://www.clker.com/cliparts/Y/3/d/w/R/r/search-icon-white-hi.png) no-repeat;
background-size: 25%;
background-position-y: 50%;
background-position-x: 10%;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Payment
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard#latest/build/css/index.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- My CSS & JS-->
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="maincontainer">
<div class="container-fluid red">
<div class="row">
<div class="col-">
<div class="back-button">
<a id="backer" class="uk-button uk-button-default" href="#"><span uk-icon="icon:arrow-left;"></span><span class="nav-text">Эхлэх</span></a>
</div>
</div>
<div class="col-xl">
<div class="header">
Тээврийн хэрэгслийн торгууль төлөх
</div>
</div>
<div class="col-">
<div class="header">
</div>
</div>
</div>
</div>
<div class="uk-container">
<img style="width: auto;">
<div class="box">
<div class="tab">
<button uk-icon="bus" class="tablinks" id="tabone" onclick="openTab(event, 'London')">ТЭЭВРИЙН ХЭРЭГСЭЛ</button>
<button class="tablinks" id="tabtwo" onclick="openTab(event, 'Paris')">ЖОЛООНЫ ҮНЭМЛЭХ</button>
</div>
<div id="London" class="tabcontent">
<div class="container-fluid">
<h3>АВТОМАШИНЫ УЛСЫН ДУГААР</h3>
<div id="input_container">
<textarea type="text" required id="write" maxLength="4" placeholder="UBA0000"></textarea>
</div>
</div>
<div>
<input type="submit" value="Хайх" id="searchbutton" class="uk-button uk-button-default" href="#"></input>
</div>
<div style="width:auto;margin: auto;" id="container">
<ul style="display:table; width:100%;" id="keyboard">
<li class="symbol"><span class="off">1</span></li>
<li class="symbol"><span class="off">2</span></li>
<li class="symbol"><span class="off">3</span></li>
<li class="symbol"><span class="off">4</span></li>
<li class="symbol"><span class="off">5</span></li>
<li class="symbol"><span class="off">6</span></li>
<li class="symbol"><span class="off">7</span></li>
<li class="symbol"><span class="off">8</span></li>
<li class="symbol"><span class="off">9</span></li>
<li class="symbol"><span class="off">0</span></li>
<li class="delete"><span class="delete"><img style="width:50%"
src="https://cdn3.iconfinder.com/data/icons/sympletts-part-1/128/backspace-256.png"></span></li>
<br>
<li class="letter disabled">Ф</li>
<li class="letter disabled">Ц</li>
<li class="letter disabled">У</li>
<li class="letter disabled">Ж</li>
<li class="letter disabled">Э</li>
<li class="letter disabled">Н</li>
<li class="letter disabled">Г</li>
<li class="letter disabled">Ш</li>
<li class="letter disabled">Ү</li>
<li class="letter disabled">З</li>
<li class="letter disabled">К</li>
<li class="letter disabled">Ъ</li><br>
<li class="letter disabled">Й</li>
<li class="letter disabled">Ы</li>
<li class="letter disabled">Б</li>
<li class="letter disabled">Ө</li>
<li class="letter disabled">А</li>
<li class="letter disabled">Х</li>
<li class="letter disabled">Р</li>
<li class="letter disabled">О</li>
<li class="letter disabled">Л</li>
<li class="letter disabled">Д</li>
<li class="letter disabled">П</li><br>
<li class="letter disabled">Я</li>
<li class="letter disabled">Ч</li>
<li class="letter disabled">Е</li>
<li class="letter disabled">Ё</li>
<li class="letter disabled">С</li>
<li class="letter disabled">М</li>
<li class="letter disabled">И</li>
<li class="letter disabled">Т</li>
<li class="letter disabled">Ь</li>
<li class="letter disabled">В</li>
<li class="letter disabled">Ю</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</div>
</div>
</div>
</body>
</html>
Kind of does what it needs to do except it's missing a vital function. Am not experienced enough to work around this.
(p.s This keyboard literally does not care about textarea character limits as it's not onkeypress, i don't know what it is. So I just put in some improvisations to work around. If you just write on it with your keyboard, it's going to type at most 4 letters as that is the limit on the text area. If you write it with the on-screen keyboard, you're going to get 7. Help?)
(P.S.S : ALSO WHY DOES THE "LEFT-TAB" KEEP GOING UPWARDS WHEN MINIMIZED?)
I thought "If I just add .removeClass('disabled') if the length is less than 8, it might work. But I'm pretty sure that's not how this works.
This does not work because when you handle delete button, you have used "return false;" which means it will return at there and not continue run your code to the .removeClass('disabled') part.
My solution is you need to handle the add and remove disabled in delete function like below:
// Delete
if ($this.hasClass('delete')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
//get text1 value from textarea
text1 = document.getElementById('write').value;
//When length < 4, just enable numbers, disable letters
if (text1.length < 4)
{
symbols.removeClass('disabled');
letters.addClass('disabled');
}
//When length >= 4, handle like your current code
if (text1.length >= 4)
{
symbols.addClass('disabled');
letters.removeClass('disabled');
if(text1.length == 7){
letters.addClass('disabled');
}
}
return false;
}
So in the delete part, you will handle the disable on your virtual keyboard.
And since that, you can remove this part in your code:
if (text1.length > 7) {
letters.removeClass('disabled');
}
For the physical keyboard input, if you don't want the user using it, you can set
maxLength="0" in the textarea part.
<textarea type="text" required id="write" maxLength="0" placeholder="UBA0000"></textarea>
Please check demo below to see how it works.
Happy coding time :D.
$(function(){
var $write = $('#write'),
symbols = $('.symbol'),
letters = $('.letter'),
shift = false,
capslock = false;
$('#keyboard li').click(function(){
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
//get text1 value from textarea
text1 = document.getElementById('write').value;
//When length < 4, just enable numbers, disable letters
if (text1.length < 4)
{
symbols.removeClass('disabled');
letters.addClass('disabled');
}
//When length >= 4, handle like your current code
if (text1.length >= 4)
{
symbols.addClass('disabled');
letters.removeClass('disabled');
if(text1.length == 7){
letters.addClass('disabled');
}
}
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
$write.html($write.html() + character);
text1 = document.getElementById('write').value;
console.log(text1);
if (text1.length >= 4)
{
symbols.addClass('disabled');
letters.removeClass('disabled');
if(text1.length == 7){
letters.addClass('disabled');
}
}
// Add the character
});
});
html{
width: 100%;
height: auto;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.maincontainer{
background-image: url(b.png);
background-repeat:repeat-y;
background-position: right;
}
/*head*/
.nav-text
{
vertical-align: middle;
color: white;
}
.row
{
padding: 15px;
display: flex;
justify-content: center;
}
.back-button
{
height: 100%;
}
#backer
{
float: left;
width: auto;
}
.red
{
background-color: darkred;
}
.header
{
text-align: center;
color: white;
font-size:25px;
float: left;
width:90%;
}
.uk-icon
{
color:white;
}
/*main*/
/* Style the tab */
.tab {
width: 100%;
overflow: hidden;
}
/* Style the buttons inside the tab */
.tab button {
width: 50%;
background-color: inherit;
float: left;
border: none;
background-color: darkred;
color: white;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
#tabone
{
border-top-left-radius: 5px;
border-right: 1px solid white;
}
#tabtwo
{
border-top-right-radius: 5px;
border-left: 1px solid white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(80, 3, 3);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(180, 15, 15);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
#London
{
text-align: center;
}
#searchbutton
{
background-color: darkred;
color: white;
border:0;
border-radius: 5px;
margin-bottom: 15px;
padding-right:20px;
}
#write
{
width: 90%;
height:300px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Soyombo_red.svg/300px-Soyombo_red.svg.png) no-repeat scroll 50px 40px;
background-size: 80PX;
padding-left:50px;
border-radius: 5%;
border: 1px solid black;
margin-bottom: 20px;
margin-top:20px;
text-align: center;
font-size:10vh;
}
#London > .container-fluid > h3{
margin-top:5%;
font-size: 4vh;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#keyboard li {
font-size: 30px;
display: inline-block;
margin: 0 5px 5px 0;
width: 5%;
padding: 0;
height: 70px;
line-height: 70px;
text-align: center;
background: #fff;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 7PX;;
}
#keyboard .delete {
width: 120px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#container.ul{
margin:auto;
float: center;
}
#container-x
{
width: 50%;
margin: auto;
}
input[type=submit]
{
background:url(http://www.clker.com/cliparts/Y/3/d/w/R/r/search-icon-white-hi.png) no-repeat;
background-size: 25%;
background-position-y: 50%;
background-position-x: 10%;
}
.disabled
{
opacity: 0.5;
pointer-events: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Payment
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard#latest/build/css/index.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- My CSS & JS-->
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="maincontainer">
<div class="container-fluid red">
<div class="row">
<div class="col-">
<div class="back-button">
<a id="backer" class="uk-button uk-button-default" href="#"><span uk-icon="icon:arrow-left;"></span><span class="nav-text">Эхлэх</span></a>
</div>
</div>
<div class="col-xl">
<div class="header">
Тээврийн хэрэгслийн торгууль төлөх
</div>
</div>
<div class="col-">
<div class="header">
</div>
</div>
</div>
</div>
<div class="uk-container">
<img style="width: auto;">
<div class="box">
<div class="tab">
<button uk-icon="bus" class="tablinks" id="tabone" onclick="openTab(event, 'London')">ТЭЭВРИЙН ХЭРЭГСЭЛ</button>
<button class="tablinks" id="tabtwo" onclick="openTab(event, 'Paris')">ЖОЛООНЫ ҮНЭМЛЭХ</button>
</div>
<div id="London" class="tabcontent">
<div class="container-fluid">
<h3>АВТОМАШИНЫ УЛСЫН ДУГААР</h3>
<div id="input_container">
<textarea type="text" required id="write" maxLength="0" placeholder="UBA0000"></textarea>
</div>
</div>
<div>
<input type="submit" value="Хайх" id="searchbutton" class="uk-button uk-button-default" href="#"></input>
</div>
<div style="width:auto;margin: auto;" id="container">
<ul style="display:table; width:100%;" id="keyboard">
<li class="symbol"><span class="off">1</span></li>
<li class="symbol"><span class="off">2</span></li>
<li class="symbol"><span class="off">3</span></li>
<li class="symbol"><span class="off">4</span></li>
<li class="symbol"><span class="off">5</span></li>
<li class="symbol"><span class="off">6</span></li>
<li class="symbol"><span class="off">7</span></li>
<li class="symbol"><span class="off">8</span></li>
<li class="symbol"><span class="off">9</span></li>
<li class="symbol"><span class="off">0</span></li>
<li class="delete"><span class="delete"><img style="width:50%"
src="https://cdn3.iconfinder.com/data/icons/sympletts-part-1/128/backspace-256.png"></span></li>
<br>
<li class="letter disabled">Ф</li>
<li class="letter disabled">Ц</li>
<li class="letter disabled">У</li>
<li class="letter disabled">Ж</li>
<li class="letter disabled">Э</li>
<li class="letter disabled">Н</li>
<li class="letter disabled">Г</li>
<li class="letter disabled">Ш</li>
<li class="letter disabled">Ү</li>
<li class="letter disabled">З</li>
<li class="letter disabled">К</li>
<li class="letter disabled">Ъ</li><br>
<li class="letter disabled">Й</li>
<li class="letter disabled">Ы</li>
<li class="letter disabled">Б</li>
<li class="letter disabled">Ө</li>
<li class="letter disabled">А</li>
<li class="letter disabled">Х</li>
<li class="letter disabled">Р</li>
<li class="letter disabled">О</li>
<li class="letter disabled">Л</li>
<li class="letter disabled">Д</li>
<li class="letter disabled">П</li><br>
<li class="letter disabled">Я</li>
<li class="letter disabled">Ч</li>
<li class="letter disabled">Е</li>
<li class="letter disabled">Ё</li>
<li class="letter disabled">С</li>
<li class="letter disabled">М</li>
<li class="letter disabled">И</li>
<li class="letter disabled">Т</li>
<li class="letter disabled">Ь</li>
<li class="letter disabled">В</li>
<li class="letter disabled">Ю</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</div>
</div>
</div>
</body>
</html>

How to create a new div each time a button is clicked?

This is my code:
function newMentee() {
document.getElementById('new-mentee-form').style.display="block";
document.getElementById('mentees').style.display="none";
}
function addMentee() {
document.getElementById('new-mentee-form').style.display="none";
document.getElementById('mentees').innerHTML=document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;
document.getElementById('mentees').setAttribute("style","display:block;background-color:black;width:10em;height:10em;margin-top:5em;margin-left:2em;padding:2em;border-radius:2em;word-wrap:break-word;");
}
* {
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background-color: #3b4149;
}
header {
background-color: #181b1e;
width: 100%;
height:15em;
}
header h1 {
color:white;
text-align: center;
line-height: 5em;
font-size: 3em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
display: block;
float:left;
width: 25%;
text-align: center;
line-height: 2.5em;
color:white;
background-color: #1376d8;
}
ul li ul li {
display: none;
}
ul li:hover {
background-color: #18e288;
opacity: 0.7;
}
ul li:hover ul li {
display: block;
width:100%;
}
#new-mentee-form {
padding-top: 3em;
color:white;
background-color: black;
width:20em;
height:30em;
margin-top: 3em;
border-radius: 2em;
display: none;
}
input,textarea {
padding: 0.5em;
color:white;
}
#submit {
border-radius: 2em;
}
#submit:hover {
background-color: #18e288;
}
textarea {
resize:none;
}
#mentees {
color:white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="delta.css">
<script type="text/javascript" src="delta.js">
</script>
</head>
<body>
<header>
<h1>Mentee List</h1>
</header>
<nav>
<ul>
<li>List of Mentees</li>
<li onclick="newMentee();">Add a mentee</li>
<li>Remove a mentee</li>
<li>Make an edit
<ul>
<li>Add Details</li>
<li>Remove Details</li>
</ul>
</li>
</ul>
</nav>
<div id="mentees">
</div>
<center>
<div>
<div id="new-mentee-form">
Name:<br><br><input type="text" name="name" id="name"><br><br>
Rating:<br><br><input type="text" id="rating" value=""><br><br>
Comments:<br><br><textarea name="name" rows="8" cols="28" id="comments" maxlength="30"></textarea><br><br>
<input type="submit" name="submit" value="Submit" id="submit" onclick="addMentee();">
</div>
</div>
</center>
</body>
</html>
My goal is to create a new div(this will be displayed like a card) with all the details entered by the user each time "Add Mentee" in the navigation bar is clicked. I do not want to store the data in an external file. Is there any way to retrieve the previous data from innerHTML and add a new div to the existing content of innerHTML? The problem I'm facing is that each time "Add Mentee" is clicked the previous data is wiped out. I want to do this in VanillaJS.
while assigning new value to innerHTML, you can append it with old value as
document.getElementById('mentees').innerHTML+='<br >' + document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;
div.innerHTML = div.innerHTML + newDiv
Or
div.appendChild(newDiv)
See ref:
https://www.w3schools.com/jsref/met_node_appendchild.asp

Get the li value if the mouse pointer passes over it with mousedown using jQuery?

I'm working on a virtual keyboard which would work same as the on-screen keyboard in windows.
Question: I'm looking to add the functionality of a swype keyboard, where the user enters words by dragging from the
first letter of a word to its last letter using mouse. Is it possible to achieve this with a mouse?
Problem: I have tried this with jQuery swipe event so far where I have multiple li as keys and while dragging from a key
to another the text of a single li element is what I'm getting.
How to get all the key values where ever the mouse pointer passes by while dragging, something like this from Android swype keyboard?
Check this Fiddle Demo
$("li").on("swipe", function() {
$('#input').append($(this).text());
});
$(document).ready(function() {
$("li").on("swipe", function() {
$('#input').append($(this).text());
});
});
* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#keyboard li {
float: left;
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #777;
color: #eaeaea;
border: 1px solid #f9f9f9;
border-radius: 10px;
}
.capslock,
.tab,
.left-shift {
clear: left;
}
#keyboard .tab,
#keyboard .delete {
width: 70px;
}
#keyboard .capslock {
width: 80px;
}
#keyboard .return {
width: 77px;
}
#keyboard .left-shift {
width: 95px;
}
#keyboard .right-shift {
width: 109px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
#keyboard .space {
clear: left;
width: 681px;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
li p {
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<div data-role="page" id="pageone">
<div id="container">
<textarea id="input" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><p>`</p></li>
<li class="symbol"><p>1</p></li>
<li class="symbol"><p>2</p></li>
<li class="symbol"><p>3</p></li>
<li class="symbol"><p>4</p></li>
<li class="symbol"><p>5</p></li>
<li class="symbol"><p>6</p></li>
<li class="symbol"><p>7</p></li>
<li class="symbol"><p>8</p></li>
<li class="symbol"><p>9</p></li>
<li class="symbol"><p>0</p></li>
<li class="symbol"><p>-</p></li>
<li class="symbol"><p>=</p></li>
<li class="delete lastitem"><p>delete</p></li>
<li class="tab"><p>tab</p></li>
<li class="letter"><p>q</p></li>
<li class="letter"><p>w</p></li>
<li class="letter"><p>e</p></li>
<li class="letter"><p>r</p></li>
<li class="letter"><p>t</p></li>
<li class="letter"><p>y</p></li>
<li class="letter"><p>u</p></li>
<li class="letter"><p>i</p></li>
<li class="letter"><p>o</p></li>
<li class="letter"><p>p</p></li>
<li class="symbol"><p><span class="off">[</span><span class="on">{</span></p></li>
<li class="symbol"><p><span class="off">]</span><span class="on">}</span></p></li>
<li class="symbol lastitem"><p><span class="off">\</span><span class="on">|</span></p></li>
<li class="capslock"><p>caps lock</p></li>
<li class="letter"><p>a</p></li>
<li class="letter"><p>s</p></li>
<li class="letter"><p>d</p></li>
<li class="letter"><p>f</p></li>
<li class="letter"><p>g</p></li>
<li class="letter"><p>h</p></li>
<li class="letter"><p>j</p></li>
<li class="letter"><p>k</p></li>
<li class="letter"><p>l</p></li>
<li class="symbol"><p><span class="off">;</span><span class="on">:</span></p></li>
<li class="symbol"><p><span class="off">'</span><span class="on">"</span></p></li>
<li class="return lastitem"><p>return</p></li>
<li class="left-shift"><p>shift</p></li>
<li class="letter"><p>z</p></li>
<li class="letter"><p>x</p></li>
<li class="letter"><p>c</p></li>
<li class="letter"><p>v</p></li>
<li class="letter"><p>b</p></li>
<li class="letter"><p>n</p></li>
<li class="letter"><p>m</p></li>
<li class="symbol"><p><span class="off">,</span><span class="on"><</span></p></li>
<li class="symbol"><p><span class="off">.</span><span class="on">></span></p></li>
<li class="symbol"><p><span class="off">/</span><span class="on">?</span></p></li>
<li class="right-shift lastitem"><p>shift</p></li>
</ul>
</div>
</div>
If you use the hover function of jQuery along with tracking the state of the mouse down button it works.
Javascript:
$(document).ready(function() {
var mouseDown = 0;
document.body.onmousedown = function() {
mouseDown = 1;
}
document.body.onmouseup = function() {
mouseDown = 0;
}
$("li").hover(function() {
if (mouseDown) {
$('#input').append($(this).text());
}
}, function() {
// do nothing
});
$("li").on("mousedown", function() {
$('#input').append($(this).text());
});
});
What I am doing here is checking when a "li" element gets hovered, and if the mouse button is down, add it to the input.
Also note the last bit, that is for when the mouse goes down on a "li" element for the first time. (Since you hover the first button you want to start swiping one before clicking with the mouse. This prevents us from missing the first letter of the swipe sequence.)
Working JSFiddle: https://jsfiddle.net/bLt0j5t9/1/

classList.toggle in Javascript

I'm trying to assign .hidden to certain elemement when class is not present and remove class .hidden if this class is already assigned to this element. In other words - I just want to toggle class.
I wrote code
var isHidden = document.getElementById("inputSelected").classList.toggle("hidden");
but it doesn't work. But when I console log classList.contains
var isHidden = document.getElementById("inputSelected").classList.contains("hidden");
it returns false - which means, that this class it not assigned. So why it doesn't toggle?
More code:
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator dat</title>
<meta name="description" content="Kalkulator dat. Ile dni minęło od wskazanej daty? Jaka będzie data za daną ilość dni?">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>
<body>
<h1>Kalkulator dat</h1>
<div id="daysPassed">
<h2>Ile pełnych dni minęło?</h2>
<form id=daysPassedForm">
<label for="firstDateDP">Data początkowa:</label>
<input type="date" id="firstDate">
<fieldset>
<input type="radio" id="toToday" name="todayOrSelected">
<label for="toToday">Do dziś</label>
<input type="radio" id="toSelected" name="todayOrSelected">
<label for="toSelected">Do wskazanej daty</label>
<p id="inputSelected">(<input type="date" id="selectedEndDate">)</p>
</fieldset>
<input type="submit" value="Oblicz">
</form>
</div>
<div id="daysPassedResult" class="result">
<p id="daysPassedInfo">Od wskazanej daty minęło x dni</p>
</div>
<div id="dateIndicate">
<h2>Jaka będzie data?</h2>
<form id="dateIndicateForm">
<ul>
<li>
<label for="firstDateDI"><span>Data początkowa:</span></label>
<input type="date" id="firstDateDI">
</li>
<li>
<label for="numberOfDays"><span>Liczba pełnych dni:</span></label>
<input type="number" id="numberOfDays" step="1">
</li>
<li>
<input type="submit" value="Oblicz">
</li>
</ul>
</form>
</div>
<div id="dateIndicateResult" class="result">
<p id="dateIndicateResult">Po x dniach od y będzie</p>
</div>
<script src="script.js"></script>
</body>
</html>
div {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin-bottom: 7px;
}
body {
margin: 0 auto;
width: 40%;
background-color: #FFCA51;
}
div {
padding: 5px;
border-radius: 15px;
}
p {
margin: 8px 0 8px 0;
}
ul {
list-style-type: none;
padding: 0;
}
h1 {
text-align: center;}
fieldset {
border: none;
}
input {
margin: 2px;
padding: 1px;
}
span {
width: 115px;
text-align: right;
display: inline-block;
}
#daysPassed {
background-color: #E8A849;
padding-left: 16px;
}
#inputSelected {
margin: 0 0 0 8px;
display: inline-block;
}
#daysPassedResult {
background-color: #FFA75D;
}
#dateIndicate {
background-color: #E87A49;
padding-left: 16px;
margin-top: 20px;
}
#dateIndicateResult {
background-color: #FF6D51;
}
.result {
margin: 8px 0 8px 16px;
padding-left: 12px;
max-width: 50%;
}
.hidden {
display: none;}
function preparePage() {
document.getElementById("inputSelected").classList.toggle("hidden");
document.getElementById("daysPassedResult").classList.toggle("hidden");
document.getElementById("dateIndicateResult").classList.toggle("hidden");
}
window.onload = function() {
preparePage();
};
Right now second and third line of preparePage works, but first (#inputselected) doesn't
DOMTokenList Reference from Mozilla:
toggle ( token ) - removes token from string and returns false. If token doesn't exist it's added and the function returns true
Your code actually works, but it seems that the issue is not caused by the DOMTokenList .toggle() function, but by a CSS id #inputSelected:
#inputSelected {
margin: 0 0 0 8px;
display: inline-block; /* will never let .hidden to actually set the "display: none". */
}
.hidden {
display: none;
}
A simple way to fix it is to define:
.hidden {
display: none !important;
}
or define display: inline-block; in a separate class.
If the problem really is the .toggle, DOMTokenList still has:
.contains
.add
.remove
Otherwise, you can use jQuery or manage the element.className by hand.

Categories