Uncaught ReferenceError: li is not defined - javascript

This is to do list project, but I don't know why this isn't working.
Can anyone help me? I have checked this several times, and all files are good. Also, CSS code is not mine, it's copied.
Of course, this project is not finished, but I'm testing this now (I'm beginner).
I got this error when I click on span:
script.js:4 Uncaught ReferenceError: li is not defined
at newTask (script.js:4:2)
at HTMLSpanElement.onclick (index.html:14:46)
function newTask() {
let task = document.createElement('li');
let inputText = document.querySelector('#inputText').value;
li.appendChild(inputText)
}
body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
.header {
background-color: blue;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> To Do List </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="task-manager" class="header">
<h2 style="margin:5px"> Lista zadataka </h2>
<input type="text" id="inputText" placeholder=" Naziv zadatka ">
<span onclick="newTask()" class="addBtn">Dodaj</span>
</div>
<ul id="list">
</ul>
<script src="script.js"></script>
</body>
</html>


First, you need to get the ul element which has list id, also you need to set the value of the li element after create it with input value.
Also, If wanted to reset the input value after adding the task
const input = document.querySelector('#inputText')
function newTask() {
let task = document.createElement('li');
let inputText = input.value;
task.textContent = inputText;
input.value = ''
const list = document.getElementById('list');
list.appendChild(task)
}
body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
.header {
background-color: blue;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> To Do List </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="task-manager" class="header">
<h2 style="margin:5px"> Lista zadataka </h2>
<input type="text" id="inputText" placeholder=" Naziv zadatka ">
<span onclick="newTask()" class="addBtn">Dodaj</span>
</div>
<ul id="list">
</ul>
<script src="script.js"></script>
</body>
</html>

Related

JS Function Not Defined Chrome Extension Popup.js

I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});

Embeded Twitter Link Showing Up Above Hamburger Dropdown

I am building a website for a college class and I've run into a problem. I can't seem to find the answer when I google it, so I made an account to post it here. I hope that someone is able to identify what is going on.
As you can see, the embedded twitter post is showing up on top of the hamburger menu and I'm not sure how to get it underneath.
Here is the HTML (It's still a work in progress and I'm pretty new so please forgive me for any ugly code):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="images/run.png">
</head>
<body>
<header>
<div id="weatherBar" class="weatherBar">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<nav class="menu">
<ul>
<li>
About the Events
<ul class="submenu">
<li>Starting Times</li>
<li>Course Details</li>
<li>What to Bring</li>
</ul>
</li>
<li>Upcoming Events</li>
<li>Registration</li>
<li>Packet Pick Up</li>
<li>About Us</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</nav>
<div class="socialLinks">
<img src="images/fb-ico.png" alt="" class="iconHeight">
<img src="images/twit-ico.png" alt="" class="iconHeight">
<img src="images/inst-ico.png" alt="" class="iconHeight">
</div>
</div>
</header>
<main class="wrapper">
<div id="details" class="details lightSub contentFill contentPad">
<h2 class="subHeader">What People are Saying</h2>
<div class="sub_head_line_white"></div>
<div class="socialWrapper centering">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcas222cascade%2Fposts%2F366912850439109&width=350&show_text=true&height=214&appId" width="350" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="socialWrapper centering">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Fantastic weather for training! Can't wait to get in the water for open water swims!</p>— CAS 222 (#pcccas222) May 10, 2018</blockquote>
</div>
</div>
</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/ham.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
Here is the javascript:
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").show();
$(".hamburger").on("click", function () {
$(".menu").slideToggle("slow");
$(".hamburger").hide();
$(".cross").show();
});
$(".cross").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
$(".menu a").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
});
Here is the CSS:
Menu.css
.hamburger {
background: none;
position: relative;
top: 0;
right: 0;
line-height: 35px;
color: red;
border: 0;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.cross {
background: none;
position: relative;
top: 0;
right: 0;
color: red;
border: 0;
font-size: 3em;
line-height: 55px;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.socialLinks {
background: none;
position: fixed;
top: 8px;
right: 10px;
color: red;
border: 0;
cursor: pointer;
outline: none;
z-index: 10;
}
.iconHeight {
height: 20px;
}
.menu {
/* z-index: 10;*/
font-weight: 700;
width: 100%;
height: 100vh;
background: rgb(0, 0, 0, .85);
position: absolute;
top: 25px;
padding-top: 20px;
right: 0;
text-align: left;
font-size: 2em;
text-decoration: none;
color: white;
font-family: 'Roboto Condensed', sans-serif;
z-index: 10;
}
.menu ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
.menu li {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
}
.menu li:hover {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
color: red;
}
.menu ul a {
text-decoration: none;
color: white;
margin: 0;
}
.menu ul a:hover {
text-decoration: none;
color: red;
}
.menu ul a:active {
text-decoration: none;
color: white;
}
.menu ul a:visted {
text-decoration: none;
color: gray;
}
.submenu li {
padding-left: 25px;
}
style.css
body {
.grayGradient;
}
main {}
.hero {
background-image: url(../images/run3.jpg);
background-size: auto;
background-position: center;
height: 500px;
width: 100%;
}
.heroBot {
width: 100%;
height: 20px;
background-color: #000;
}
.weatherBar {
position: fixed;
height: 40px;
width: 100%;
background: black;
border-bottom: 3px red solid;
margin-left: auto;
margin-right: auto;
}
footer {
height: 30px;
width: 100%;
background: black;
border-top: 3px red solid;
}
h1 {
.fontOswald;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
}
.headerSize {
font-size: 50px;
.fontNarrow;
font-weight: normal;
letter-spacing: 1px;
}
.titleDiv {
padding-left: 15px;
width: 95%;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
border-bottom: 3px red solid;
}
.titleText {
padding-top: 20px;
padding-bottom: 20px;
}
.disc {
margin-top: 40px;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
.fontBaseText;
font-size: 1.5em;
color: #000;
text-align: center;
font-weight: lighter;
line-height: 30px;
}
.facebookFeed {
margin-left: auto;
margin-right: auto;
display: block;
}
.contentPad {
padding: 20px 20px 45px 20px;
}
.contentFill p {
font-size: 1.2em;
.fontBaseText;
line-height: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.subHeader {
.fontNarrow;
font-size: 1.8em;
}
.subHeaderAlt {
.fontNarrow;
font-size: 1.8em;
color: #fff;
}
.sub_head_line {
height: 5px;
width: 95%;
.grayGradientBtR;
}
.sub_head_line_white {
height: 5px;
width: 95%;
.grayGradientWtR;
}
.darkSub {
background-color: #000;
color: #fff;
}
.lightSub {
background-color: #fff;
color: #000;
}
.tableDay {
text-align: center;
font-size: 1.2em;
.fontNarrow;
}
.timesTable {
margin: 10px;
margin-top: 20px;
align-content: center;
.fontBaseText;
}
.timesTable tr:first-child {
border: none;
}
.timesTable tr {
border-left: 2px #mainRed solid;
border-right: 2px #mainRed solid;
}
.timesTable table,
tr,
td,
th {
border-collapse: collapse;
padding: 3px;
}
.timesTable th {
font-weight: bold;
padding: 10px;
}
.timesTable td {
padding: 10px;
}
.timesTable tr:nth-child(even) {
background-color: #darkGray;
}
.raceName {
width: 180px;
}
.raceTime {
width: 100px;
}
.startingTimeTableWrapper {
width: 100%;
}
.centering {
.marginCenter;
}
.socialWrapper {
width: 350px;
margin-top: 10px;
z-index: -1;
}
.subHeader:before {
height: 25px;
display: block;
content: '';
}
.subHeaderAlt:before {
height: 25px;
display: block;
content: '';
}

Place a icon over text border - HTML CSS

I am currently studying front - end web development and I am at the stage where I am building projects for my portfolio.
I am currently working on a TO DO list website, I have coded most of the functionality however I am struggling with the CSS aspect.
If you can give a newbie developer some feedback on the code below I would really appreciate it.
So what I am asking for today;
I want to position an icon over the border of the text just like this:
I want to achieve this
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<h1>Your todo list</h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
<script src="js/script.js"></script>
</body>
</html>
My JS:
var toDoItems = [];
var userInput;
var checkBox;
document.getElementById("addItem").onclick = function (){
userInput = prompt("Enter your Todo: ")
toDoItems.push(userInput);
stylePara();
document.getElementById("item-list").insertAdjacentHTML('beforeend', stylePara());
}
function stylePara(){
var html = '';
html += '<label class="container">';
html += '<input type="checkBox">';
html += '<span class="checkMark"></span>';
html += '<span class="checkLabel">' + userInput + '</span>';
html += '</label>';
return html;
}
My CSS:
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: center;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
color: black;
margin-bottom: 35px;
text-decoration: underline;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

You can use absolute positioning:
.your-class {
position: absolute;
top: 10px; /* space from top */
right: 10px; /* space from right */
}
For your puropses the top and right are:
Remember to give parent element:
.position:relative;
Then your absolute positioning will be to the container that has position:relative not to the whole page. Example code: https://jsfiddle.net/2vaphyq3/12/
Edit:
But maybe cleaner way will be to use pseudo element like :after

Something in this manner should work. Added to your existing code.
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: left;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
padding: 10px;
color: black;
margin-bottom: 35px;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Added This*/
.wholeItem {
width: 400px;
height: auto;
}
h1.todoL{
position: relative;
background: #c7c9d6;
border-bottom: 1px solid #999;
}
.todoI {
position: absolute;
right: 25%;
bottom: -25px;
width: 50px;
height: 50px;
background: #da5048;
border-radius: 50%;
color: #fff;
line-height: 50px;
text-align: center;
font-weight: light;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<div class="wholeItem">
<h1 class='todoL'>Your todo list<div class="todoI">+</div></h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

Responsive Navigation w/ hamburger menu

I am very new to trying to understand javascript and I cannot seem to figure out how to code my hamburger menu to open up and show my navigation in mobile view. I am able to have my main navigation in desktop and the look of what I want for mobile and tablet in those views but the button does not work. I have some javascript in there that I tried out but it didn't work. I'll put everything in a snippet so that maybe someone can help me understand this. Thank you!
$('.toggle').click(function () {
"use strict";
$('nav ul').slideToggle();
});
$(window).resize(function () {
"use strict";
if ($(window).width() > 780) {
$('nav ul').removeAttr('style');
}
});
/* Start global */
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: arial, tahoma;
list-style: none;
/* outline: 1px solid brown;*/
}
/* End global */
header {
background-color: #333;
height: 500px;
}
/* Start navigation bar */
nav {
height: 80px;
background-color: #222;
border-bottom: 1px solid #555
}
.logo {
padding: 10px;
width: auto;
float: left;
}
.logo img {
height: 55px;
}
.list-item {
float: right;
margin-right: 25px;
margin-top: 17px;
}
.list-item li {
float: left;
padding: 13px 13px;
font-size: 18px;
border-radius: 3px;
transition: all .7s ease-in-out;
}
.list-item li a {
color: #EEE;
}
.list-item li:hover {
background-color: brown;
}
/* End navigation bar */
/* Start nav bar for small screens */
.icon {
display: none;
}
.toggle {
float: right;
margin: 20px;
color: #EEE;
font-size: 30px;
border: 1px solid #EEE;
padding: 0px 5px;
border-radius: 4px;
cursor: pointer;
}
/* End nav bar for small screens */
/* Start media query */
#media (max-width: 775px) {
.icon {
display: block;
width: 100%;
height: 80px;
background-color: #111;
border-bottom: 1px solid #444;
}
.list-item {
width: 100%;
margin: 0;
padding: 0;
position: relative;
top: -4px;
background-color: #222;
display: none;
}
.list-item li {
text-align: center;
display: block;
border-bottom: 1px solid #333;
float: none;
}
.result-iframe {
border: 0;
background: white;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* End media query */
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="about.css" rel="stylesheet">
<link href="about.js" rel="alternate">
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ec/13/a7/ec13a753972c254761be4d9d5666d341.jpg" />
</div>
<div class="icon">
<span class="toggle">☰</span>
</div>
<ul class="list-item">
<li>Home</li>
<li>Facebook</li>
<li>Twitter</li>
<li>Categorys</li>
<li>Contact us</li>
<li>About us</li>
</ul>
</nav>
</header>
</body>
</html>

I've added jQuery and it seems to be working fine.
$('.toggle').click(function () {
"use strict";
$('nav ul').slideToggle();
});
$(window).resize(function () {
"use strict";
if ($(window).width() > 780) {
$('nav ul').removeAttr('style');
}
});
/* Start global */
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: arial, tahoma;
list-style: none;
/* outline: 1px solid brown;*/
}
/* End global */
header {
background-color: #333;
height: 500px;
}
/* Start navigation bar */
nav {
height: 80px;
background-color: #222;
border-bottom: 1px solid #555
}
.logo {
padding: 10px;
width: auto;
float: left;
}
.logo img {
height: 55px;
}
.list-item {
float: right;
margin-right: 25px;
margin-top: 17px;
}
.list-item li {
float: left;
padding: 13px 13px;
font-size: 18px;
border-radius: 3px;
transition: all .7s ease-in-out;
}
.list-item li a {
color: #EEE;
}
.list-item li:hover {
background-color: brown;
}
/* End navigation bar */
/* Start nav bar for small screens */
.icon {
display: none;
}
.toggle {
float: right;
margin: 20px;
color: #EEE;
font-size: 30px;
border: 1px solid #EEE;
padding: 0px 5px;
border-radius: 4px;
cursor: pointer;
}
/* End nav bar for small screens */
/* Start media query */
#media (max-width: 775px) {
.icon {
display: block;
width: 100%;
height: 80px;
background-color: #111;
border-bottom: 1px solid #444;
}
.list-item {
width: 100%;
margin: 0;
padding: 0;
position: relative;
top: -4px;
background-color: #222;
display: none;
}
.list-item li {
text-align: center;
display: block;
border-bottom: 1px solid #333;
float: none;
}
.result-iframe {
border: 0;
background: white;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* End media query */
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="about.css" rel="stylesheet">
<link href="about.js" rel="alternate">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ec/13/a7/ec13a753972c254761be4d9d5666d341.jpg" />
</div>
<div class="icon">
<span class="toggle">☰</span>
</div>
<ul class="list-item">
<li>Home</li>
<li>Facebook</li>
<li>Twitter</li>
<li>Categorys</li>
<li>Contact us</li>
<li>About us</li>
</ul>
</nav>
</header>
</body>
</html>

Why is a jQuery subtraction outputting NaN?

I'm having an issue with this piece of jquery code white trying to conduct a subtraction. What is it that I am missing/over-looking? When I add an item to the list then want to remove it, the Estimated Total on the top right does not reflect the deletion of the item. It then spits out an NaN error.
In the js section look for the code inside the comment with the *****.
I tried the variables 'currTotal' and 'deleted' with and without parseFloat and also with parseInt... still get the NaN error.
Thanks,
Sergio
P.S. Here is a jsfiddle demonstrating the code below
$(document).ready(function(){
$('.alert').hide();
// Check to see if input field is empty THEN if not empty add items, qty and price to list
$('#add').on('click', function() {
if ( !$('#list').val() ) {
$('.alert').show();
}
else {
// Adds typed items, qty and price to the list
// Adds Item and QTY to List
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
// Adds Product to List
var price = $('#price').val();
var itemTotal = qty * price;
$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
$('.alert').hide();
}
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function(event){
if(event.keyCode === 13){
$('#add').click();
}
});
// Calculates and automatically updates Estimated Total
$('#add').click( function() {
var sumAdd = 0;
$('input.listPriceInput').each(function() {
sumAdd = sumAdd + parseFloat($(this).val());
});
$('#total-items').val('$' + sumAdd);
});
// Marks as done by adding class strike by clicking the check mark
$('#list-a').on('click', '.done', function () {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.toggleClass('strike');
});
//******//
// Deletes/fades out 'li' when X is clicked + Updates Estimated Total
//******//
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li'),
index = listItem.index(),
currTotal = parseFloat($('#total-items').val()),
deleted = parseFloat(listItem.parent().next('ul').find('li:eq(' + index + ')').val()),
newTotal = currTotal - deleted;
$('#total-items').val('$' + newTotal);
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function () {
$(this).remove();
});
});
//******//
//******//
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function() {
var li = $('li');
li.slideUp(500, function() {
$(li).remove('li');
});
$('#total-items').val('');
$('#list').val('').focus();
$('.alert').hide();
});
});
#charset "UTF-8";
#content .est-total {
*zoom: 1;
}
#content .est-total:before, #content .est-total:after {
content: " ";
display: table;
}
#content .est-total:after {
clear: both;
}
* {
padding: 0;
margin: 0;
font-family: "Open Sans";
box-sizing: border-box;
}
html, body {
display: table;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: white;
}
#header {
text-align: center;
width: 100%;
height: 330px;
padding: 0;
background: #222;
border-bottom: 10px solid #1480ff;
margin: -15px auto 0;
}
#header .logo {
margin-top: 15px;
}
#header .logo h1 {
font-size: 70px;
font-family: "Pacifico", cursive;
letter-spacing: 1px;
font-weight: 400;
color: #20e010;
display: inline-block;
}
#header .logo i {
font-size: 50px;
color: #20e010;
padding: 15px;
border: 5px solid #fff;
border-radius: 45px;
}
#content {
width: 100%;
max-width: 650px;
background-color: #fff;
margin: -120px auto 50px;
border: 10px solid #e2e2e2;
padding: 20px;
border-radius: 20px;
position: relative;
}
#content .ribbon {
width: 75px;
height: 75px;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 25px;
text-transform: uppercase;
text-align: center;
background: #db0b0b;
padding: 10px 0 0 5px;
margin: -35px 0 0;
display: inline-block;
float: left;
border-radius: 10px;
}
#content .est-total {
text-align: right;
padding: 0;
margin-top: 0;
}
#content .est-total h2 {
font-size: 15px;
line-height: 30px;
font-style: italic;
font-weight: 400;
}
#content h1 {
margin: -10px 0 20px;
}
#content h5 {
font-size: 22px;
letter-spacing: -0.5px;
text-transform: uppercase;
color: #1480ff;
padding: 5px 3px 0;
}
#content #list-a {
width: 78%;
list-style: none;
margin: 0 10px 30px 0;
padding: 10px;
float: left;
}
#content #list-a li {
height: 43px;
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content #list-b {
width: 19%;
list-style: none;
margin: 0 0 30px 0;
padding: 10px;
float: left;
}
#content #list-b li {
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content input {
font-size: 15px;
width: 68%;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
#content input:focus {
outline: none;
}
#content input#qty {
width: 10%;
}
#content input#price {
width: 20%;
}
#content input#total-items {
font-size: 18px;
color: red;
font-weight: 700;
width: 17%;
display: inline-block;
float: right;
padding: 7px 9px;
margin: -6px 0 0 10px;
}
#content button {
width: 16%;
font-size: 13px;
border: none;
padding: 10px 8px;
margin: 10px 5px 0 0;
border-radius: 5px;
box-shadow: none;
cursor: pointer;
display: inline-block;
}
#content #add {
color: #444;
background: #20e010;
}
#content #add:focus {
outline: none;
}
#content #print {
color: #fff;
text-transform: uppercase;
background: #1480ff;
}
#content #print:focus {
outline: none;
}
#content #clear {
color: #fff;
text-transform: uppercase;
background: red;
float: right;
}
#content #clear:focus {
outline: none;
}
.delete:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: red;
margin: -2px 15px 0 0;
border-radius: 5px;
padding: 3px 4px 5px 5px;
cursor: pointer;
float: left;
}
.done:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #20e010;
margin: -2px 5px 0 0;
border-radius: 5px;
padding: 3px 3px 5px 4px;
cursor: pointer;
float: left;
}
.strike {
text-decoration: line-through;
color: #1ccb0d;
background-color: #e8f9e6;
}
.strike input {
text-decoration: line-through;
color: #1ccb0d;
}
.alert {
font-size: 13px;
color: #aaa;
position: absolute;
bottom: 115px;
padding: 5px 8px;
}
.alert strong {
color: red;
}
.alert:before {
font-family: "FontAwesome";
content: "";
color: red;
font-size: 12px;
}
.footer {
width: 100%;
height: 100px;
background: #e2e2e2;
border-top: 10px solid #1480ff;
display: table-row;
}
.footer .disc {
height: 100px;
font-size: 14px;
padding: 35px 0;
text-align: center;
border-top: 10px solid #1480ff;
position: relative;
}
.footer a {
color: red;
font-weight: 700;
}
.footer a:hover {
color: #e30000;
text-decoration: underline;
}
.footer a:hover:before {
height: 42px;
padding: 5px 10px;
opacity: 1;
}
.footer a:before {
content: attr(data-sim);
width: 105px;
height: 0;
color: #fff;
font-weight: 300;
font-size: 13px;
background-color: #444;
padding: 0 10px;
border-radius: 5px;
position: absolute;
overflow: hidden;
bottom: 55px;
margin-left: -33px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
input.listItemInput, input.listPriceInput {
border: 0 transparent none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<title>My List brought to by: mylist.shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1>SomeList</h1>
</div>
</div>
<div id="content">
<div class="ribbon">New List</div>
<div class="est-total">
<h2>Estimated Total:
<input id="total-items" type="text" name="total price" placeholder="$0" readonly>
</h2>
</div>
<ul id="list-a"></ul>
<ul id="list-b"></ul>
<div class="alert"> <strong>ALERT - </strong> Please enter a new List Item Below.</div>
<input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
<input id="qty" type="number" name="quantity" placeholder="Qty.">
<input id="price" type="number" name="price" placeholder="Est. Price">
<button id="add" type="button" value="Print List">ADD</button>
<button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
<button id="clear">Clear</button>
</div>
<div class="footer">
<div class="disc">© Copyright 2016 SomeList.</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/min/main-min.js"></script>
</body>
</html>

This is happening because your Estimated Total has a dollar sign before the value. When you call parseFloat() on that, you get NaN.
Rather than subtracting from the total when something is removed, why not just recalculate the total? You already have the functionality for that:
$(document).ready(function() {
$('.alert').hide();
// Check to see if input field is empty THEN if not empty add items, qty and price to list
$('#add').on('click', function() {
if (!$('#list').val()) {
$('.alert').show();
} else {
// Adds typed items, qty and price to the list
// Adds Item and QTY to List
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
// Adds Product to List
var price = $('#price').val();
var itemTotal = qty * price;
$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
$('.alert').hide();
calcTotal();
}
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function(event) {
if (event.keyCode === 13) {
$('#add').click();
}
});
// Calculates and automatically updates Estimated Total
function calcTotal() {
var sumAdd = 0;
$('input.listPriceInput').each(function() {
sumAdd = sumAdd + parseFloat($(this).val());
});
$('#total-items').val('$' + sumAdd);
}
// Marks as done by adding class strike by clicking the check mark
$('#list-a').on('click', '.done', function() {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.toggleClass('strike');
});
//******//
// Deletes/fades out 'li' when X is clicked + Updates Estimated Total
//******//
$('#list-a').on('click', '.delete', function() {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function() {
$(this).remove();
calcTotal();
});
});
//******//
//******//
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function() {
var li = $('li');
li.slideUp(500, function() {
$(li).remove('li');
});
$('#total-items').val('');
$('#list').val('').focus();
$('.alert').hide();
});
});
#charset "UTF-8";
#content .est-total {
*zoom: 1;
}
#content .est-total:before, #content .est-total:after {
content: " ";
display: table;
}
#content .est-total:after {
clear: both;
}
* {
padding: 0;
margin: 0;
font-family: "Open Sans";
box-sizing: border-box;
}
html, body {
display: table;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: white;
}
#header {
text-align: center;
width: 100%;
height: 330px;
padding: 0;
background: #222;
border-bottom: 10px solid #1480ff;
margin: -15px auto 0;
}
#header .logo {
margin-top: 15px;
}
#header .logo h1 {
font-size: 70px;
font-family: "Pacifico", cursive;
letter-spacing: 1px;
font-weight: 400;
color: #20e010;
display: inline-block;
}
#header .logo i {
font-size: 50px;
color: #20e010;
padding: 15px;
border: 5px solid #fff;
border-radius: 45px;
}
#content {
width: 100%;
max-width: 650px;
background-color: #fff;
margin: -120px auto 50px;
border: 10px solid #e2e2e2;
padding: 20px;
border-radius: 20px;
position: relative;
}
#content .ribbon {
width: 75px;
height: 75px;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 25px;
text-transform: uppercase;
text-align: center;
background: #db0b0b;
padding: 10px 0 0 5px;
margin: -35px 0 0;
display: inline-block;
float: left;
border-radius: 10px;
}
#content .est-total {
text-align: right;
padding: 0;
margin-top: 0;
}
#content .est-total h2 {
font-size: 15px;
line-height: 30px;
font-style: italic;
font-weight: 400;
}
#content h1 {
margin: -10px 0 20px;
}
#content h5 {
font-size: 22px;
letter-spacing: -0.5px;
text-transform: uppercase;
color: #1480ff;
padding: 5px 3px 0;
}
#content #list-a {
width: 78%;
list-style: none;
margin: 0 10px 30px 0;
padding: 10px;
float: left;
}
#content #list-a li {
height: 43px;
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content #list-b {
width: 19%;
list-style: none;
margin: 0 0 30px 0;
padding: 10px;
float: left;
}
#content #list-b li {
padding: 10px 10px;
border-bottom: 1px solid #e2e2e2;
text-transform: capitalize;
}
#content input {
font-size: 15px;
width: 68%;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
#content input:focus {
outline: none;
}
#content input#qty {
width: 10%;
}
#content input#price {
width: 20%;
}
#content input#total-items {
font-size: 18px;
color: red;
font-weight: 700;
width: 17%;
display: inline-block;
float: right;
padding: 7px 9px;
margin: -6px 0 0 10px;
}
#content button {
width: 16%;
font-size: 13px;
border: none;
padding: 10px 8px;
margin: 10px 5px 0 0;
border-radius: 5px;
box-shadow: none;
cursor: pointer;
display: inline-block;
}
#content #add {
color: #444;
background: #20e010;
}
#content #add:focus {
outline: none;
}
#content #print {
color: #fff;
text-transform: uppercase;
background: #1480ff;
}
#content #print:focus {
outline: none;
}
#content #clear {
color: #fff;
text-transform: uppercase;
background: red;
float: right;
}
#content #clear:focus {
outline: none;
}
.delete:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: red;
margin: -2px 15px 0 0;
border-radius: 5px;
padding: 3px 4px 5px 5px;
cursor: pointer;
float: left;
}
.done:before {
font-family: "FontAwesome";
content: "";
font-size: 15px;
display: inline-block;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #20e010;
margin: -2px 5px 0 0;
border-radius: 5px;
padding: 3px 3px 5px 4px;
cursor: pointer;
float: left;
}
.strike {
text-decoration: line-through;
color: #1ccb0d;
background-color: #e8f9e6;
}
.strike input {
text-decoration: line-through;
color: #1ccb0d;
}
.alert {
font-size: 13px;
color: #aaa;
position: absolute;
bottom: 115px;
padding: 5px 8px;
}
.alert strong {
color: red;
}
.alert:before {
font-family: "FontAwesome";
content: "";
color: red;
font-size: 12px;
}
.footer {
width: 100%;
height: 100px;
background: #e2e2e2;
border-top: 10px solid #1480ff;
display: table-row;
}
.footer .disc {
height: 100px;
font-size: 14px;
padding: 35px 0;
text-align: center;
border-top: 10px solid #1480ff;
position: relative;
}
.footer a {
color: red;
font-weight: 700;
}
.footer a:hover {
color: #e30000;
text-decoration: underline;
}
.footer a:hover:before {
height: 42px;
padding: 5px 10px;
opacity: 1;
}
.footer a:before {
content: attr(data-sim);
width: 105px;
height: 0;
color: #fff;
font-weight: 300;
font-size: 13px;
background-color: #444;
padding: 0 10px;
border-radius: 5px;
position: absolute;
overflow: hidden;
bottom: 55px;
margin-left: -33px;
opacity: 0;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
input.listItemInput, input.listPriceInput {
border: 0 transparent none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<title>My List brought to by: mylist.shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1>SomeList</h1>
</div>
</div>
<div id="content">
<div class="ribbon">New List</div>
<div class="est-total">
<h2>Estimated Total:
<input id="total-items" type="text" name="total price" placeholder="$0" readonly>
</h2>
</div>
<ul id="list-a"></ul>
<ul id="list-b"></ul>
<div class="alert"> <strong>ALERT - </strong> Please enter a new List Item Below.</div>
<input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
<input id="qty" type="number" name="quantity" placeholder="Qty.">
<input id="price" type="number" name="price" placeholder="Est. Price">
<button id="add" type="button" value="Print List">ADD</button>
<button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
<button id="clear">Clear</button>
</div>
<div class="footer">
<div class="disc">© Copyright 2016 SomeList.</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/min/main-min.js"></script>
</body>
</html>

i want to add that.
Note: Only the first number in the string is returned!
Note: Leading and trailing spaces are allowed.
Note: If the first character cannot be converted to a number, parseFloat() returns NaN.
you can use such like this.
$('#total-items').val().replace('$','')

Categories