We Keep Coding

HTML input fields as paragraph

I'm making a web calculator with 2 fields to take inputs, and I want to change its type to paragraph. How to do so? And how add listeners to support tapping on the paragraphs to make them “active” and indicate this somehow with CSS?
Once the web page gets opened somehow I want to take values from the 2 fields.
<div class="calculator">
<div class="screen"></div>
<div class="inputs">
<p id="carbs">Carbs/100g</p>
<p id="portion">Portion (g)</p>
</div>
<div class="calcul">
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button><br>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button><br>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button><br>
<button id="zero">0</button>
<button id="decimal">.</button>
<button id="clear">C</button><br>
<button id="save">Save</button>
<button id="equals">=</button>
</div>
</div>

To change the input fields to paragraphs and add listeners to them, you can do the following:
const carbsField = document.querySelector("#carbs");
const portionField = document.querySelector("#portion");
carbsField.addEventListener("click", () => {
carbsField.classList.add("active");
portionField.classList.remove("active");
});
portionField.addEventListener("click", () => {
portionField.classList.add("active");
carbsField.classList.remove("active");
});
.input-field {
background-color: lightgray;
padding: 10px;
border-radius: 10px;
cursor: pointer;
display: inline-block;
}
.input-field.active {
background-color: gray;
color: white;
}
<div class="calculator">
<div class="screen">
</div>
<div class="inputs">
<p id="carbs" class="input-field">Carbs/100g: <span id="carbs-value">0</span></p>
<p id="portion" class="input-field">Portion (g): <span id="portion-value">0</span></p>
</div>
<!-- rest of the HTML code -->
</div>

Trying to change background color based off if the hour is in the past, current, or future

I am trying to change the background color based on if the current hour is past, present, or in the future.
Use case: I am building a day planner using moment.js. Every hour has its own field, ie: 8am, 9am, 10am. If the current time is 10:15am, I want 9am to be gray, 10am to be red, and 11am - 6pm to be green.
I am able to grab the current hour by using console.log(currentTime)
I am just trying to figure out how to build the function that changes the class background color. Any help would be greatly appreciated.
//current date and time
$("#currentDay").text(moment().format('ddd, MMM Do'));
//currentTime to determine if the hour matchs for color
var currentTime = moment().format('H');
console.log()
//todo project
// Use window.localStoirage to retrieve and store your data object as string
const LS = JSON.parse(localStorage.scheduler || '{}'); // now an Object
// double click makes calendar content editable
$(".textData").dblclick(function () {
$(this).addClass('d-none')
$(this).siblings("input").removeClass("d-none");
});
$(".btn").dblclick(function () {
console.log(this);
console.log($(this).attr("id"))
var id = $(this).attr("id")
var time = id.slice(0,3)
console.log(time)
var timeInputId = time + "Input";
});
// save makes edit end
// set active time
// make background color of / past hours gray / current hour red / future hours green
var hourPast = hourPast < currentTime;
var hourNow = currentTime;
var hourFuture = hourFuture < currentTime;
// if currentTime > hourNow make background color gray//
var hourNow = currentTime;
console.log(hourNow)
console.log(currentTime)
function backgroundColorEdit(){
if (hourNow == currentTime){
document.getElementsByClassName("backgroundTool").style.backgroundColor = "#ff0000";
}else if (hourNow < currentTime){
document.getElementsByClassName("backgroundTool").style.backgroundColor = "#d3d3d3";
}else
{
document.getElementsByClassName("backgroundTool").style.backgroundColor = "#90ee90";
}
}
// if currentTime = hourNow make background color Red //
// if currentTime < hourNow make background color green //
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea{
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description{
white-space: pre-wrap;
}
.time-block{
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06AED5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all .3s ease-in-out;
}
.red {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>Work Day Scheduler</title>
</head>
<body>
<header class="jumbotron">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for scheduling your work day</p>
<p id="currentDay" class="lead"></p>
</header>
<div class="container">
<!-- Timeblocks go here -->
<div class="row">
<div class='col-2 hour'> 9am
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 9amSpan">text here </span>
<input id="9amInput " class="d-none border-0 form-control textarea bg-transparent am9Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="9amButton" class="btn btn-primary mb-2 am9Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 10am
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 10amSpan">text here </span>
<input id="10amInput" class="d-none border-0 form-control textarea bg-transparent am10Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="10amButton" class="btn btn-primary mb-2 am10Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 11am
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 11amSpan">text here </span>
<input id="11amInput" class="d-none border-0 form-control textarea bg-transparent am11Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="11amButton" class="btn btn-primary mb-2 am11Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 12pm
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 12pmSpan">text here </span>
<input id="12pmInput" class="d-none border-0 form-control textarea bg-transparent pm12Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="12amButton" class="btn btn-primary mb-2 pm12Button">Save</button>
</div>
</div>
<div class="row">
<div class='col-2 hour'> 1pm
</div>
<div class="col-8 description backgroundTool border-bottom scheduler">
<span class="textData 1pmSpan">text here </span>
<input id="1pmInput" class="d-none border-0 form-control textarea bg-transparent pm1Input" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" id="1pmButton" class="btn btn-primary mb-2 pm1Button">Save</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Here's an idea (using a much-simplified version of your markup) that uses 24-hour time to do the comparisons like you were thinking.
Each row gets an id indicating which hour it represents, making it easy to compare the corresponding hour to the current hour.
const rows = document.getElementsByClassName("row");
let currentHour = parseInt(moment().format('H'));
Array.from(rows).forEach(row => {
let
rowIdString = row.id,
rowHour;
if (rowIdString) {
rowHour = parseInt(rowIdString);
}
if (rowHour) {
// Compares row id to current hour and sets color accordingly
if (currentHour === rowHour) {
setColor(row, "red");
} else if ((currentHour < rowHour) && (currentHour > rowHour - 6)) {
setColor(row, "green");
} else if ((currentHour > rowHour) && (currentHour < rowHour + 6)) {
setColor(row, "lightgrey");
} else {
setColor(row, "white");
}
}
});
function setColor(element, color) {
element.style.backgroundColor = color;
}
.row {
padding: 0.5em;
margin-bottom: 0.4em;
border: 1px solid gray;
border-radius: 0.5em;
}
<html lang="en">
<body>
<div class="row" id="9">
<span> 9am </span>
<span> -- text here -- </span>
<button id="9amButton">Save</button>
</div>
<div class="row" id="10">
<span>10am </span>
<span> -- text here -- </span>
<button id="10amButton">Save</button>
</div>
<div class="row" id="11">
<span>11am </span>
<span> -- text here -- </span>
<button id="11amButton">Save</button>
</div>
<div class="row" id="12">
<span>12pm </span>
<span> -- text here -- </span>
<button id="12pmButton">Save</button>
</div>
<div class="row" id="13">
<span> 1pm </span>
<span> -- text here -- </span>
<button id=" 1pmButton">Save</button>
</div>
<div class="row" id="14">
<span> 2pm </span>
<span> -- text here -- </span>
<button id=" 2pmButton">Save</button>
</div>
<div class="row" id="15">
<span> 3pm </span>
<span> -- text here -- </span>
<button id=" 3pmButton">Save</button>
</div>
<div class="row" id="16">
<span> 4pm </span>
<span> -- text here -- </span>
<button id=" 4pmButton">Save</button>
</div>
<div class="row" id="17">
<span> 5pm </span>
<span> -- text here -- </span>
<button id=" 5pmButton">Save</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</body>
</html>

FadeOut one element and fadeIn another element on hover

I'm trying to achieve an effect where on the hover of an element A, an element B is fadeOut and an element C is fadeIn, both inside the element A.
That's what I tried:
$('.button').hover(function() {
info = $(this).find('.info');
download = $(this).find('.download');
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
Hovering one element at a time seems working fine but when you try to hover more elements concurrently the animation it starts to break.
Any solution? Other approaches are accepted. Thanks.

The main problem is to stop the animation before assigning another. This way there are no glitches:
$('.button').each(function(i) {
var thisButton = $(this);
var thisInfo = thisButton.find('.info');
var thisDownload = thisButton.find('.download');
thisButton.on('mouseenter', function(e) {
thisDownload.stop();
thisInfo.stop().fadeOut(150, function() {
thisDownload.stop().fadeIn(150);
});
}).on('mouseleave', function(e) {
thisInfo.stop();
thisDownload.stop().fadeOut(150, function() {
thisInfo.stop().fadeIn(150);
});
});
});
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
Also on JSFiddle
Posting this because this may happen to skyline's answer:

You are inadvertently creating global variables for info and download by omitting the var, let, or const keywords. That means every function call is using and overwriting those variables. You need to create local variables in each function.
$('.button').hover(function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
download.stop();
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
info.stop();
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>

Add / remove div for each button on click

I'm trying use append to give each button it's own div (.modal-item) that can be created and removed inside of the .modal container when the button is clicked. Each .item has it's own button and different content nested inside.
What I need as an example: If I click the button labelled Btn 1, I want a .modal-item div created inside of .modal that has the content from the Btn 1 .item. If I click Btn 1 again, it is removed. The same goes for each of the buttons.
The buttons should act as a checkbox for creating and removing the .modal-items. So in other words, the adding/removing of each .modal-item is handled by it's button.
$(function() {
$('#btn').click(function() {
var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
$('.modal').append(newDiv);
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button id="btn">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button id="btn">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button id="btn">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

1st: id must be unique so you need to change id="btn" to class="btn"
2nd: by using data attribute for each btn and pass it to the modal-item div it can be done
$(function() {
$('.btn').click(function() {
var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
$('.modal').append(newDiv);
}else{
$('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
}
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button class="btn" data-btn="btn1">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn2">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn3">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

How to implement a search and filter into HTML divs?

I'm working on a website as part of a project. The idea is to be able to filter the div tags by their title. For example, if you wanted to search for 'Television' or 'Music', etc.
My idea was to use the ID for each div to search and filter. Any advice on how to do that or any method is greatly appreciated!
Search bar:
<input id="search-bar" class="options-button" type="text" placeholder="Search Categories...">
Div tags to be search:
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
CSS for the divs:
.discover-subscribe, .discover-unsubscribe {
width: calc(100% + 14px);
text-align: center;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: white;
background: #63c401;
border: none;
font-size: 14px;
margin: 14px 0 -14px -14px;
padding: 10px 10px;
text-shadow: rgba(0,0,0,0.4) 0 0 6px;
box-shadow: rgba(0,0,0,0.3) 0 0 4px;
transition: background 0.2s ease-in-out;
}
.discover-unsubscribe {
background: #DE1B1B;
}
.discover-subscribe:hover {
background: #52A301;
}
.discover-unsubscribe:hover {
background: #B81616;
}

Try the following way with Array's forEach():
var divEl = document.querySelectorAll('div.discover-tile');
divEl.forEach(function(d){
if(d.getAttribute('id') == 'television'){
console.log(d);
}
});
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
Or you can use filter() like:
var divEl = document.querySelectorAll('div.discover-tile');
var television = Array.prototype.filter.call(divEl, function(d){
return d.getAttribute('id') == 'television';
});
console.log(television);
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>

The answers presented don't cover all the gotchas that you will run into. I would suggest you try using list.js to filter - it is very powerful and has a very small footprint.
http://listjs.com/
I've used it on several projects and it is rock solid and easy to setup.

You can do it in the following way:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="container">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<h2>
example to filter div content</h2>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<div class="list-group" id="myList">
<div>Label 1</div>
<div>Label 2</div>
<div>asdf 1</div>
<div>asdf 2</div>
</div>
</div>