set focus in text field when doubleclicking - javascript

I create a directive to set focus in the text field when executing the event doubleclick but it does not work. Please see my CSS, HTML, and JavaScript below.
I have also tried to use the DOM to get the text field element and set the focus with element.focus() but it does not work.
var app=angular.module('todoApp',[])
app.controller('todoListController',function($scope){
$scope.todoList=[
{id:1,name:"apprendre angular",completed:false},
{id:2,name:"apprendre spring",completed:true}
];
$scope.destroy=function(index){
$scope.todoList.splice(index,1);
}
$scope.addTodo=function(){
$scope.todoList.push({name:$scope.newtodo,completed:false});
$scope.newtodo="";
}
$scope.editTodo=function(todo){
todo.edit=false;
}
});
app.directive('todoFocus', function todoFocus($timeout) {
'use strict';
return function (scope, elem, attrs) {
scope.$watch(attrs.todoFocus, function (newVal) {
if (newVal) {
$timeout(function () {
elem[0].focus();
}, 0, false);
}
});
};
});
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
button,
input[type="checkbox"] {
outline: none;
}
.hidden {
display: none;
}
#todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
outline: none;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#new-todo {
padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
#main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {
display: none;
}
#toggle-all {
position: absolute;
top: -55px;
left: -12px;
width: 60px;
height: 34px;
text-align: center;
border: none; /* Mobile Safari */
}
#toggle-all:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
#toggle-all:checked:before {
color: #737373;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
#todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.editing {
border-bottom: none;
padding: 0;
}
#todo-list li.editing .edit {
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
margin: 0 0 0 43px;
}
#todo-list li.editing .view {
display: none;
}
#todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
#todo-list li .toggle:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
#todo-list li .toggle:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
#todo-list li label {
white-space: pre-line;
word-break: break-all;
padding: 15px 60px 15px 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
#todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
#todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
#todo-list li .destroy:hover {
color: #af5b5e;
}
#todo-list li .destroy:after {
content: '×';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list li .edit {
display: none;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
}
#footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
#todo-count {
float: left;
text-align: left;
}
#todo-count strong {
font-weight: 300;
}
#filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
#filters li {
display: inline;
}
#filters li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
#filters li a.selected,
#filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
#filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
#clear-completed,
html #clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
position: relative;
}
#clear-completed:hover {
text-decoration: underline;
}
#info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
#info p {
line-height: 1;
}
#info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
#info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all,
#todo-list li .toggle {
background: none;
}
#todo-list li .toggle {
height: 40px;
}
#toggle-all {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-appearance: none;
appearance: none;
}
}
#media (max-width: 430px) {
#footer {
height: 50px;
}
#filters {
bottom: 10px;
}
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="todo.js"></script>
<link href="style.css" rel="stylesheet"/>
<meta charset="utf-8"/>
</head>
<body ng-app="todoApp">
<section id="todoapp" ng-controller="todoListController">
<header id="header">
<h1>TodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="Ajouter une tâche" ng-model="newtodo" autocomplete="off" >
</form>
</header>
<section id="main">
<ul id="todo-list">
<li ng-repeat="todo in todoList" ng-class="{completed:todo.completed,editing:todo.edit}" ng-dblclick="todo.edit=true">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed" />
<label> {{todo.name}}</label>
<button class="destroy" ng-click="destroy($index)"> </button>
</div>
<form action="#" >
<input class="edit" ng-model="todo.name" ng-blur="editTodo(todo)" todo-focus="todo == true" >
</form>
</li>
</ul>
</section>
</section>
</body>
</html>

Ok, running your code, see this:
<input class="edit" ng-model="todo.name" ng-blur="editTodo(todo)" todo-focus="todo == true" >
This is your element, and you have this watcher in todo-focus directive:
scope.$watch(attrs.todoFocus, function (newVal) {
You are watching an angular expression: "todo == true", it solves one time as "false", and will never changes this value, so your watcher will not be executed as you want (only 1 time, when the directive is loaded to initialize the watcher)
So, you need to watch a scope variable, if todo is your scope variable try to watch scope.todo.xxx instead of the attribute

Related

I'm trying to do a Todo List App and when i pressed the add task its not adding below

I created a createElement for the todo List and the appendchild but it's not adding to my website this is the code below
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>
I've tried using the appendchild for a simple button and then a word will appear but when I applied the code to the todo list the task I input its not adding the list and I'm achieving this type of todo list in the youtube: https://www.youtube.com/watch?v=MkESyVB4oUw&t=6s
just change your form event listener two lines as i marked
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
<!-- begin snippet: js hide: false console: true babel: null -->
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>

Why won't these boxes appear in alignment?

I want all the boxes to be made with perfect alignemnt, but for some reason, from the second row onwards, they start to lean to the left.
$(document).ready(function() {
number = 0;
document.getElementById("create").onclick = function () {
var ok = true;
boxHTML = document.getElementsByClassName("box")[number].innerHTML;
if (ok === true) {
var obj = document.createElement('div');
obj.className = 'box';
obj.innerHTML = boxHTML;
$(this).before(obj);
}
number++;
};});
//Colours
$Background:#EAEAEA;
//Body
body{
}
//Menu
#menu {
margin-left: 5%;
margin-top: 5.25rem;
position:absolute;
ul{
list-style-type: none;
}
li{
a{
padding: 10px 15px;
text-decoration: none;
display: block;
color: black;
font-family: "roboto", sans-serif;
&:hover {
text-transform: uppercase;
}
}
}
}
//Dashboard
#dashboard{
display: inline-block;
border-radius:5px;
border: 0.5px solid black;
width: 73%;
height: 35rem;
margin-left: 17%;
margin-right: 20%;
margin-top: 6.8rem;
position: absolute;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
box-shadow:0 0 10px rgba(0,0,0,0.8);
}
//Boxes
#import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html, * {
box-sizing: border-box;
}
body {
background: #e4e9f0;
padding: 40px;
}
.box {
float: left;
position: relative;
display: inline-block;
width: 45%;
background: white;
padding: 30px;
margin-right: 2%;
margin-left: 4%;
margin-top: 3%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 2px;
overflow: hidden;
+ .box {
margin: 0px;
margin-top: 3%;
}
&:after {
padding-top: 30%;
display: block;
content: '';
}
> div {
float: left;
width: 100%;
height: 150px;
color: #fff;
}
header {
background: #533687;
display: block;
margin: -30px -30px 30px -30px;
padding: 10px 10px;
h2 {
line-height: 1;
padding: 0;
margin: 0;
font-family: "roboto", sans-serif;
font-weight: 600;
font-size: 20px;
color: white;
-webkit-font-smoothing: antialiased;
}
}
}
#create {
user-select:none;
padding:20px;
border-radius:20px;
text-align:center;
border:15px solid rgba(0,0,0,0.1);
cursor:pointer;
color:rgba(0,0,0,0.1);
font:220px "Helvetica", sans-serif;
line-height:185px;
float:left;
padding:25px 25px 40px;
margin:0 20px 20px 0;
width:250px;
height:250px;
margin-top: 3%;
}
#create:hover { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.2); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard">
<a href="#" class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</a>
<div id="create">+</div>
</div>
JSFiddle
It didn't work for you because the newly added boxes have different margin properties. I've just statically set margin properties for the first box.
https://jsfiddle.net/oh0hjavL/2/

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('$','')

i cant redirect and go to a specific section

i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

How to hide the information, just only show when button is clicked html, css. javascript?

I want to know how to hide the information for terms(button) and enumeration(Button). The information should only appear when a button is clicked or chosen. Hope for good answers. Thank you!! If you have suggestion to my html and css that will make that show and hide easily made.
#charset "utf-8";
body {
width: 960px;
overflow-x: hidden;
}
}html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #363636;
}
a{text-decoration:none}
.wrapper{
text-align: center;
width: 100%;
position: absolute;
}
.header{
background-color: #ffffff;
}
.header img {
width: 360px;
}
#nav {
background-color: black;
width: 100%;
font-size: 1em;
border-top-width: medium;
border-top-style: groove;
border-bottom-style: groove;
border-bottom-width: medium;
}
#nav a{ letter-spacing: 1px;}
#nav ul {
list-style: none;
display: block;
font-size: larger;
}
#nav ul li {
display: inline-block;
}
#nav ul {
text-align: center;
}
#nav ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
text-transform: uppercase;
position: relative;
}
#nav ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#nav ul li a.active {
text-decoration:underline;
color: #EDF0BA;
}
div.navigation li { list-style: none; }
div.navigation li:hover { background: #555; }
div.navigation li:hover ul { display: block; }
.how, .about{
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin-left: 10%;
margin-right: 10%;
background-color: white;
text-align: left;
color: black;
}
.sectiontitle{
text-align: center;
color: black;
text-shadow: 1px 1px 2px #767676;
}
.footer{
background-color: black;
width: 100%;
border-style: groove hidden hidden;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 1em;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.addnotes {
float: left;
padding-left: 2%;
font-color: black;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-trash:before {
content: "\e020";
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-sm,
{
padding: 5px 10px;
font-size: 12px;
line-height: 1px;
border-radius: 3px;
}
.btn-default{color:#333;background-color:#fff;border-color:#ccc}
.listnotes {
margin: 0;
padding: 0;
list-style-type: none;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 220px;
height: 135px;
margin-left: 45%;
padding-top: 5%;
margin-bottom: 10px;
}
.noteTitle {
float: left;
left: 0%;
left: 0%;
color: black;
}
.buttons{
margin-top: 100px;
color: black;
}
.createcontent {
float: right;
padding-right: 25%;
width: 50%;
margin: 0 auto;
}
.definition {
padding-top: 10%;
}
.enumeration {
padding-top: 15%;
}
#titletextbox {
background: transparent;
border: none;
width: 100%;
}
#media screen and (max-width:320px){
.wrapper{
width: 320px;
}
#nav {
background-color: black;
width: 100%;
font-size: 10px;
border-top-width: thin;
border-top-style: thin;
border-bottom-style: thin;
border-bottom-width: thin;
}
#logo{
margin-top: 5px;
width: 50%;
}
.footer{
background-color: black;
width: 100%;
border-style: groove hidden hidden;
padding-bottom: 1%;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 100;
height: 100;
margin-left: 35%;
padding-top: 5%;
margin-bottom: 10px;
}
.createcontent{
font-size: 14px;
}
.listnotes{
font-size: 14px;
}
a{text-decoration:none}
}
#font-face {
font-family:'Glyphicons Halflings';
src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype),url(../fonts/glyphicons-halflings-regular.woff2) format(woff2),url(../fonts/glyphicons-halflings-regular.woff) format(woff),url(../fonts/glyphicons-halflings-regular.ttf) format(truetype),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg);
}
.glyphicon {
position:relative;
top:1px;
display:inline-block;
font-family:'Glyphicons Halflings';
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.glyphicon-plus:before {
content:"\2b";
}
.glyphicon-remove:before {
content:"\e014";
}
.glyphicon-trash:before {
content:"\e020";
}
.glyphicon-floppy-save:before {
content:"\e175";
}
.btn {
display:inline-block;
margin-bottom:0;
font-size:14px;
font-weight:400;
line-height:1.42857143;
text-align:center;
white-space:nowrap;
vertical-align:middle;
-ms-touch-action:manipulation;
touch-action:manipulation;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-image:none;
border:1px solid transparent;
border-radius:3px;
padding:6px 12px;
}
.btn.focus,.btn:focus,.btn:hover {
color:#333;
text-decoration:none;
}
.btn.active,.btn:active {
background-image:none;
outline:0;
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
}
.btn-default {
margin-top: 10px;
color:#333;
background-color:#fff;
border-color:#ccc;
}
.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default {
color:#333;
background-color:#e6e6e6;
border-color:#adadad;
}
.btn-primary {
color:#fff;
margin-left: -50px;
background-color:#337ab7;
border-color:#2e6da4;
margin-top: 10px;
}
.btn-primary1 {
color:#fff;
margin-left: -10px;
background-color:#337ab7;
border-color:#2e6da4;
margin-top: 10px;
margin-left:20px;
}
.form-control {
width:100%;
height:20px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
padding:6px 12px;
}
.col-sm-2 {
width:20%;
float: left;
font-size: 20px;
margin-top: 20px;
}
.col-sm-10 {
width:80%;
float: left;
margin-top: 20px;
}
.DemoBS2{
margin-top: 110px;
margin-left: 40px;
display:block;
margin-bottom:0;
font-size:14px;
text-align:left;
vertical-align:middle;
-ms-touch-action:manipulation;
touch-action:manipulation;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-image:none;
border:1px solid transparent;
border-radius:3px;
padding:6px 12px;
}
p{
background:#444;
color:#4ee255;
padding:10px;
margin:10px 0px;
border:2px solid #fa4b2a;
border-radius:10px;
box-shadow:4px 4px 4px #ccc;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="logo.png">
<title>Create notes</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<link href="css/style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<div class="logo"> <img src = "logo.png" alt = "logo" name = "logo" id = "logo"> </div>
</div>
<div class="navigation" id="nav">
<ul>
<li><span>Home</span></li>
<li><a href="notes.html" class='active'><span>Notes</span></a></li>
<li><span>Exams</span></li>
</ul>
</div>
<div class="noteTitle">
<label class="control-label col-sm-2" for="email">Title:</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title.">
</div>
<span class="glyphicon glyphicon-floppy-save"></span> Save and close
</div>
<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning"
data-toggle="collapse" data-target="#toggle-example">Terms</button>
<button type="button" class="btn btn-warning"
data-toggle="collapse" data-target="#toggle-example">Enumerations</button>
<div id="toggle-example" class="collapse in">
<p>I don't know how to hide this. This should only show</b>
when the button is clicked in terms(button)</b>Please help thanks.</p></div>
</div>
</div>
</body>
<script type="text/javascript" src="Scripts/createscript.js"></script>
</html>
Firstly you need to hide in css as:
#toggle-example p{display:none;}
and in jquery on click on Terms button, you need to toggle as:
$('#toggle-example p').toggle();
$(".btn1").click(function() {
$("#toggle-example").fadeToggle();
})
#charset "utf-8";
body {
width: 960px;
overflow-x: hidden;
}
}
html,
body {
height: 100%;
}
#toggle-example {
display: none
}
body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #363636;
}
a {
text-decoration: none
}
.wrapper {
text-align: center;
width: 100%;
position: absolute;
}
.header {
background-color: #ffffff;
}
.header img {
width: 360px;
}
#nav {
background-color: black;
width: 100%;
font-size: 1em;
border-top-width: medium;
border-top-style: groove;
border-bottom-style: groove;
border-bottom-width: medium;
}
#nav a {
letter-spacing: 1px;
}
#nav ul {
list-style: none;
display: block;
font-size: larger;
}
#nav ul li {
display: inline-block;
}
#nav ul {
text-align: center;
}
#nav ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
text-transform: uppercase;
position: relative;
}
#nav ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#nav ul li a.active {
text-decoration: underline;
color: #EDF0BA;
}
div.navigation li {
list-style: none;
}
div.navigation li:hover {
background: #555;
}
div.navigation li:hover ul {
display: block;
}
.how,
.about {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin-left: 10%;
margin-right: 10%;
background-color: white;
text-align: left;
color: black;
}
.sectiontitle {
text-align: center;
color: black;
text-shadow: 1px 1px 2px #767676;
}
.footer {
background-color: black;
width: 100%;
border-style: groove hidden hidden;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 1em;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.addnotes {
float: left;
padding-left: 2%;
font-color: black;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-trash:before {
content: "\e020";
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-sm,
{
padding: 5px 10px;
font-size: 12px;
line-height: 1px;
border-radius: 3px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc
}
.listnotes {
margin: 0;
padding: 0;
list-style-type: none;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 220px;
height: 135px;
margin-left: 45%;
padding-top: 5%;
margin-bottom: 10px;
}
.noteTitle {
float: left;
left: 0%;
left: 0%;
color: black;
}
.buttons {
margin-top: 100px;
color: black;
}
.createcontent {
float: right;
padding-right: 25%;
width: 50%;
margin: 0 auto;
}
.definition {
padding-top: 10%;
}
.enumeration {
padding-top: 15%;
}
#titletextbox {
background: transparent;
border: none;
width: 100%;
}
#media screen and (max-width: 320px) {
.wrapper {
width: 320px;
}
#nav {
background-color: black;
width: 100%;
font-size: 10px;
border-top-width: thin;
border-top-style: thin;
border-bottom-style: thin;
border-bottom-width: thin;
}
#logo {
margin-top: 5px;
width: 50%;
}
.footer {
background-color: black;
width: 100%;
border-style: groove hidden hidden;
padding-bottom: 1%;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 100;
height: 100;
margin-left: 35%;
padding-top: 5%;
margin-bottom: 10px;
}
.createcontent {
font-size: 14px;
}
.listnotes {
font-size: 14px;
}
a {
text-decoration: none
}
}
#font-face {
font-family:'Glyphicons Halflings';
src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype),
url(../fonts/glyphicons-halflings-regular.woff2) format(woff2),
url(../fonts/glyphicons-halflings-regular.woff) format(woff),
url(../fonts/glyphicons-halflings-regular.ttf) format(truetype),
url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg);
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-plus:before {
content: "\2b";
}
.glyphicon-remove:before {
content: "\e014";
}
.glyphicon-trash:before {
content: "\e020";
}
.glyphicon-floppy-save:before {
content: "\e175";
}
.btn {
display: inline-block;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
padding: 6px 12px;
}
.btn.focus,
.btn:focus,
.btn:hover {
color: #333;
text-decoration: none;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-default {
margin-top: 10px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-primary {
color: #fff;
margin-left: -50px;
background-color: #337ab7;
border-color: #2e6da4;
margin-top: 10px;
}
.btn-primary1 {
color: #fff;
margin-left: -10px;
background-color: #337ab7;
border-color: #2e6da4;
margin-top: 10px;
margin-left: 20px;
}
.form-control {
width: 100%;
height: 20px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
padding: 6px 12px;
}
.col-sm-2 {
width: 20%;
float: left;
font-size: 20px;
margin-top: 20px;
}
.col-sm-10 {
width: 80%;
float: left;
margin-top: 20px;
}
.DemoBS2 {
margin-top: 110px;
margin-left: 40px;
display: block;
margin-bottom: 0;
font-size: 14px;
text-align: left;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
padding: 6px 12px;
}
p {
background: #444;
color: #4ee255;
padding: 10px;
margin: 10px 0px;
border: 2px solid #fa4b2a;
border-radius: 10px;
box-shadow: 4px 4px 4px #ccc;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="logo.png">
<title>Create notes</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<link href="css/style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<div class="logo">
<img src="logo.png" alt="logo" name="logo" id="logo">
</div>
</div>
<div class="navigation" id="nav">
<ul>
<li><span>Home</span>
</li>
<li><a href="notes.html" class='active'><span>Notes</span></a>
</li>
<li><span>Exams</span>
</li>
</ul>
</div>
<div class="noteTitle">
<label class="control-label col-sm-2" for="email">Title:</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title.">
</div>
<span class="glyphicon glyphicon-floppy-save"></span> Save and close
</div>
<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning btn1" data-toggle="collapse" data-target="#toggle-example">Terms</button>
<button type="button" class="btn btn-warning btn2" data-toggle="collapse" data-target="#toggle-example">Enumerations</button>
<div id="toggle-example" class="collapse in">
<p>I don't know how to hide this. This should only show</b>
when the button is clicked in terms(button)</b>Please help thanks.</p>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="Scripts/createscript.js"></script>
</html>

Categories