We Keep Coding

How to get the clear 'X' button inside the input field?

I created a search field where the user can type some text. Next to the search field, is an 'X' button which is there to clear of search inputs. The problem I notice is that, on my phone, the 'X' button is just outside of the input search box: Here is the example. How can I get the 'X' to be inside the search box?
HTML:
<input id="myInput" type="text" placeholder="Search Text...">
<button class="clear">X</button>
CSS:
#myInput{
width: 40%;
height: 33px;
border: 1px solid #000;
font-family: 'arial';
font-size: 19px;
}
.clear {
position: relative;
z-index: 1;
margin-left: -29px;
background: transparent;
border: 0px none;
font-size: 19px;
font-weight: bold;
vertical-align: middle;
}

The easiest way to solve this is to wrap the input and button in an element with position: relative + width: min-content. Then you only need to apply position: absolute + right: value to the button
.wrapper {
position: relative;
width: min-content;
}
.clear {
position: absolute;
right: 0px;
}
<div class="wrapper">
<input id="myInput" type="text" placeholder="Search Text...">
<button class="clear">X</button>
</div>

<input type="search" />
Works in Chromium-based browsers at least. It does have some undocumented side effects though, like ESC will clear the input.
If you're intent on using your own custom clear button, adapt this idea by putting both elements into a shared parent element. Have the input take up the entire size of the parent element, and then use position: absolute; on the Clear button.

JavaScript .active doesn't seem to be working for me

So, on my website's home page I have a list of services. The idea is that when you click on one of them, a description appears alongside it relating to that service. However, clicking on said buttons doesn't do anything and I'm not entirely sure why. This JS function is the same as what I'm using for my menu button, which performs perfectly.
I'm no professional with code and would still describe myself as a beginner so any help on the matter is very much appreciated!
$(document).ready(function() {
$('.video-btn').click(function() {
$('description-video').toggleClass('active');
})
$('.animation-btn').click(function() {
$('description-animation').toggleClass('active');
})
})
.description {
width: 600px;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
color: #f4f4f4;
padding-left: 1em;
border-left: 4px solid #e0bd8c;
}
#description-video,
#description-animation {
display: none;
}
#description-video.active,
#description-animation.active {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="service-list">
<li id="video-btn">Video</li>
<li id="animation-btn">Animation</li>
</ul>
<p class="description" id="description-video">
Text goes here...
</p>
<p class="description" id="description-animation">
Text goes here...
</p>

2 things :
In clicks identifiers they are classes, but you defined it as ids in your html
$('#video-btn').click(function() {
$('#animation-btn').click(function() {
Your forgot the prefix on toggleClass identifiers
$('#description-video').toggleClass('active');
$('#description-animation').toggleClass('active');

.video-btn is a class. You have IDs
You have links but your event handler is on the LI
missing # on the selector
You need to delegate and use data-attributes
$(function() {
$('.service-list').on("click",'.btn a', function() {
$("#"+this.dataset.desc).toggleClass('active');
});
});
.description {
width: 600px;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
color: #f4f4f4;
padding-left: 1em;
border-left: 4px solid #e0bd8c;
}
#description-video,
#description-animation {
display: none;
}
#description-video.active,
#description-animation.active {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="service-list">
<li class="btn">Video</li>
<li class="btn">Animation</li>
</ul>
<p class="description" id="description-video">
Text goes here...
</p>
<p class="description" id="description-animation">
Text goes here...
</p>

Place content of a Div at the top

I want to create an input that holds an integer value. The input value will be increased by 1 if the caret-up button is clicked and decrease by 1 if the cater-down button is clicked.
My problem is the style of the down-caret is wrong. I would like to place the down-caret at the top of the blue rectangle.
Currently, the down-caret is at the bottom of the div. Below is an image of the currently output.
I tried several things like flex, absolute position, etc. But these are overlapping areas of the Red div and Blue div.
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
/* style the qty div to display both input and buttons div in the same line*/
.qty {
width: 250px;
height: 50px;
}
/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
width: 230px;
float: left;
height: 100%;
}
/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
width: 220px;
height: 100%;
}
/* style the buttons div to display input and caret in the same line*/
#buttons {
width: 20px;
height: 100%;
float: right;
display: block;
}
/* style the action button to fit the height of the div*/
.action_btn {
height: 25px;
}
#plus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid red;
cursor: pointer;
}
#minus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid blue;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<!-- change the fas to fa for the right class of font-awesome -->
<i class="fa fa-caret-up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="fa fa-caret-down"></i>
</div>
</div>
</div>

Your description is somewhat unclear, if I understood you correctly, check out the example below to see whether it is what you want or not.
* {
box-sizing: border-box;
}
.qty {
position: relative;
}
.new {
position: absolute;
right: 0;
top: 0;
}
#plus_remind, #minus_remind {
margin: 0;
height: 24px;
width: 22px;
font: 33px/1 Arial,sans-serif;
cursor: pointer;
}
#plus_remind {
border: 1px solid blue;
}
#minus_remind {
border: 1px solid red;
}
input {
height: 48px;
font-size: 1.5rem;
margin: 0px;
padding: 0px;
line-height: 1.5rem;
width: 100%;
}
<div class="qty">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
<div class="new">
<div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
<i class="fas fa-caret-up"></i>
</div>
<div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
<i class="fas fa-caret-down"></i>
</div>
</div>

For number, there is another solution that uses the input with type number
<input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">
Another way, I remove usage of font-awesome and create triangle by pure CSS
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
.qty {
width: 200px;
}
#remind_number_wrapper {
float: left;
}
i {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
cursor: pointer;
}
.up {
border-bottom: 5px solid black;
margin-bottom: 0px;
}
.down {
border-top: 5px solid black;
margin-top: 0px;
}
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<i class="up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="down"></i>
</div>
</div>
</div>

Linking to more than one Page via User Input

So, with my code, Im trying to make this bar go to multiple urls based on what I put in. Like, "Take me to cats" will send me to "cats.com". Im trying to go to multiple html pages based on various words from the user. How do I do this? If you could do this it would help alot.
Here is the code:
/**
* Step 2: In your JavaScript, attach an event listener to the input element.
*/
document.getElementById('url-bar')
.addEventListener('keypress', function(event) {
// The keyCode for the "Enter" key is 13.
if (event.keyCode === 13) {
let urlValue = event.target.value
window.location ='Store.html';
}
});
body {
font-family: Arial
}
* {
box-sizing: border-box;
}
/* The browser window */
.container {
border: 3px solid #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Container for columns and the top "toolbar" */
.row {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle {
width: 75%;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Three dots */
.dot {
margin-top: 4px;
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
/* Style the input field */
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: #666;
padding: 5px;
}
/* Three bars (hamburger menu) */
.bar {
width: 17px;
height: 3px;
background-color: #aaa;
margin: 3px 0;
display: block;
}
/* Page content */
.content {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="column left">
<span class="dot" style="background:#ED594A;"></span>
<span class="dot" style="background:#FDD800;"></span>
<span class="dot" style="background:#5AC05A;"></span>
</div>
<div class="column middle">
<input id="url-bar" type="text" value="/Home">
</div>
<div class="column right">
<div style="float:right">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="content">
<h3>The Poke Browser</h3>
<p>Surf for Things in the Poke World</p>
</div>
</div>
</body>
</html>
Thats the code. I was able to only get it to take me to 1 page based on ANY input instead of a specific input.

youhave to seperate the search value which is entered by user using some kind of seperator such as space or , in your search text field. Then you can make use of split function of javascript to create a array of search url and iterate through it to open it seperately using forEach loop. Sharing with you the codepen link -
https://codepen.io/hims89/pen/WPVjLX
you can make use of IFFY for registering events
(function(){
var seperator=" ";
var searchref=document.getElementById("search");
searchref.addEventListener("keypress",function(ev){
if(ev.keyCode===13)
{
var urlarr=searchref.value.split(seperator);
urlarr.forEach(function(rec){
window.open(rec,"_blank");
});
}
});
})();

I need to change the color of the icon on text input focus

I would like to incorporate a form focus feature where it changes the
color of each icon when you focus on that specific field
<div id="rightside">
<div th:replace="fragments/loginform">
<form method="post" id="login" th:object="${credential}">
<p id="errors" class="warning" role="alert">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</p>
<p id="block">
<label for="username" class="has-feedback"><i class="fa fa-user" aria-hidden="true"></i></label>
<span th:if="${openIdLocalId}">
<strong>
<span th:utext="${openIdLocalId}"/>
</strong>
<input type="hidden"
id="username"
name="username"
th:value="${openIdLocalId}"/>
</span>
<span th:unless="${openIdLocalId}">
<input class="required textinput has-feedback"
placeholder="UH Username"
id="username"
size="14"
tabindex="1"
type="text"
th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}"
autocomplete="off"
autocapitalize="off"
autocorrect="off"
required="required"
autofocus="autofocus"
/>
</span>
</p>
<p id="block">
<label for="password" class="fontawesome-lock"><i class="fa fa-lock" aria-hidden="true"></i></label>
<input class="required textinput"
placeholder="Password"
type="password"
id="password"
name="password"
size="14"
tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"
required="required"
/>
</p>
Here is the CSS
#rightside {
margin-top: 15px;
float: left;
width: 70%;
}
#rightside h3 {
font-size: 110%;
}
#rightside a {
display: block;
}
#rightside input.textinput {
width: 60%;
float: left;
padding-left: 5px;
height: 35px;
border-radius: 7px;
}
#rightside input.textinput:focus {
outline-width: 0;
}
#rightside form label {
background-color: #e1e1e1;
border-radius: 8px 0px 0px 8px;
border: solid 1px #CCC;
border-right: 1px solid #CCC;
color: #000;
display: block;
float: left;
line-height: 50px;
text-align: center;
font-size: 20px;
width: 15%;
height: 50px;
}
#rightside form input[type="text"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="password"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="submit"] {
float: left;
background: #e1e1e1;
width: 99%;
height: 50px;
border-radius: 5px;
border: solid 1px #978257;
margin-bottom: 1.5em;
color: black;
cursor: pointer;
transition: background 0.3s ease-in-out;
font-weight: 600;
}
#rightside form input[type="submit"]:hover {
background: #b6985a;
color: #fff;
}
When the user focuses on either text field, the font-awesome icon pertaining to that input field should change color. Any help would be great! Thanks! CSS only would be preferable, but a js would work too

I went ahead and made a codepen for you to show you the value of the following blog post:
https://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/
Here's what it offers:
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
The above utilizes jQuery and it works well as a conceptual example.
http://codepen.io/MassDebates/pen/ZBaVJL
If you wanted to do something that leverages CSS's :focus then I would suggest you change your markup to allow something like a sibling (~), adjacent/following sibling (+) or even a descendant selector if you wrap your input in the label.
The key here is to associate your label's icon (<i>) with your input element.

You can play with :focus and :blur pseudo-classes
$(document).ready(function(){
$(".username").focus(function(){
$(".fa-user").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-user").css("color","yellow");
console.log('out');
});
$(".password").focus(function(){
$(".fa-lock").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-lock").css("color","yellow");
console.log('out');
});
});
https://jsfiddle.net/czs3sy0a/2/

I have created a pen that sets a highlighted class on the parent p, and colors the icon using this CSS:
p.highlighted .fa {color: red;}
And this JS:
$(function() {
$('input').focusin(function() {
$(this).parent().parent().addClass('highlighted');
});
$('input').focusout(function() {
$(this).parent().parent().removeClass('highlighted');
});
});
http://codepen.io/anon/pen/pNdqYP

Here is a pure css solution you can use. As we know we dont have any way to select parent element along with css but we can get the next sibling element with the '+' selector. So what i have done is placed the label containing the icon right after the input that will change it's color when focused using the css :focus pseudo element along with the '+' selector of css to get the icon in the label next to the input focused.
In order to set the positions correctly after moving the labels in front of the inputs. I changed the input and label css class from float:left to float:right. This aligned them where label came before input and the width percentage i changed from 77% to 75% just to keep the responsiveness correct on smaller screens. Below is the sample code.
Sample Code: http://codepen.io/Nasir_T/pen/VmrgWw
Hope this helps you and any future coders who do not want work with a JS code solution.