I am using "React-tag-input" react-tag-input.
But can't find how to do styling of react-tag-input
my code looks like this
import { WithContext as ReactTags } from 'react-tag-input';
const App = React.createClass({
getInitialState() {
return {
tags: [],
suggestions: []
}
},
handleDelete(i) {
let tags = this.state.tags;
tags.splice(i, 1);
this.setState({tags: tags});
},
handleAddition(tag) {
let tags = this.state.tags;
tags.push({
id: tags.length + 1,
text: tag
});
this.setState({tags: tags});
},
handleDrag(tag, currPos, newPos) {
let tags = this.state.tags;
tags.splice(currPos, 1);
tags.splice(newPos, 0, tag);
this.setState({ tags: tags });
},
render() {
let tags = this.state.tags;
let suggestions = this.state.suggestions;
return (
<div>
I am looking for styling in ReactTags
<ReactTags tags={tags}
suggestions={suggestions}
handleDelete={this.handleDelete}
handleAddition={this.handleAddition}
handleDrag={this.handleDrag} />
</div>
)
}
});
ReactDOM.render(<App />, document.getElementById('app'));
Can you guide me, how to do styling in this??
You can use CSS. From the documentation:
<ReactTags> does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. By default, the component provides the following classes with which you can style -
ReactTags__tags
ReactTags__tagInput
ReactTags__tagInputField
ReactTags__selected
ReactTags__selected ReactTags__tag
ReactTags__selected ReactTags__remove
ReactTags__suggestions
So, if you want to change the background of a tag, you could do something like this in your CSS:
.ReactTags__tag {
background-color: red;
}
/* Example Styles for React Tags*/
#app {
padding: 40px;
}
div.ReactTags__tags {
position: relative;
}
/* Styles for the input */
div.ReactTags__tagInput {
width: 200px;
border-radius: 2px;
display: inline-block;
}
div.ReactTags__tagInput input.ReactTags__tagInputField,
div.ReactTags__tagInput input.ReactTags__tagInputField:focus {
height: 31px;
margin: 0;
font-size: 12px;
width: 100%;
border: 1px solid #eee;
padding: 0 4px;
}
/* Styles for selected tags */
div.ReactTags__selected span.ReactTags__tag {
border: 1px solid #ddd;
background: #eee;
font-size: 13px;
display: inline-block;
padding: 6px;
margin: 0 5px 5px 5px;
cursor: default !important;
border-radius: 2px;
}
div.ReactTags__selected a.ReactTags__remove {
color: #9c9c9c;
margin-left: 5px;
cursor: pointer;
}
/* Styles for suggestions */
div.ReactTags__suggestions {
position: absolute;
color: #000 !important;
font-weight: normal !important;
font-size: 14px !important;
}
div.ReactTags__suggestions ul {
list-style-type: none;
box-shadow: .05em .01em .5em rgba(0,0,0,.2);
background: white;
width: 200px;
}
div.ReactTags__suggestions li {
border-bottom: 1px solid #ddd;
padding: 15px 10px;
margin: 0;
}
div.ReactTags__suggestions li mark {
text-decoration: underline;
background: none;
font-weight: 600;
}
div.ReactTags__suggestions ul li.ReactTags__activeSuggestion {
background: #b7cfe0;
cursor: pointer;
}
Related
What I want to do is when I click the task it will have a line through the text means that I'm done with the task. but the add event listener function for this is not working, I'm working with the javascript toggle and that's all I can think of right now to achieve this functionality.
Is there another way to do this? I searched on the internet and it seems complicated when I'm trying to figure it out.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
taskOutput.innerHTML += `<div class="task">
<span id="taskname">${newTasks} </span>
<button class="delete" id="deleteButton"><i class="fa-solid fa-trash"></i> </button>
</div>
`;
//delete
let deleteBtn = document.querySelector("#deleteButton");
deleteBtn.addEventListener("click", function() {
this.parentNode.remove();
});
//line through
let theTask = document.querySelectorAll(".task");
theTask.addEventListener("click", function() {
this.classList.toggle("completed");
});
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kumbh Sans', sans-serif;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 30px 40px;
}
#new-task {
position: relative;
background-color: white;
padding: 30px 20px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 30px 20px;
margin-top: 50px;
border-radius: 10px;
width: 100%;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<body>
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
<script src="/script.js"></script>
</body>
querySelectorAll will return the list of nodes matching the selector tasks. So you have to iterate through each of those nodes and add your listener. See the below code snippet
let theTasks = document.querySelectorAll(".task");
theTasks.forEach((task) => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
});
});
theTask is a list of nodes. Trying to attach event listener on this list is causing issues.
Also, you will be inserting lots of buttons with same id deleteButton and spans with same id taskname which is incorrect and can cause undefined behavior.
For theTask fix, you may want to do something like:
let theTasks = [...document.querySelectorAll(".task")];
theTasks.forEach(task => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
})
});
Using innerHTML to create manipulate the DOM for an application like a todo list is probably not a good idea. The answers to Advantages of createElement over innerHTML? give good explanations why.
It is worth noting that in the innerHTML code, the span and the button are created with an id and so all of these elements will have the same id. It is also probably not a good idea to have duplicate ids on one page. Why are duplicate ID values not allowed in HTML? explains why.
Also, adding event listeners to every new task is also probably not a good idea. What is DOM Event delegation? gives a good explanation why.
Finally, the Difference between HTMLCollection, NodeLists, and arrays of objects and Document.querySelectorAll() explain how to get lists of elements that can be manipulated.
So, I have rewritten the task creation code in the addBtn.addEventListener to show one way how this could be done with document.createElement().
And I have created a separate event listener on the Tasks container div, which handles both task deletion and task completion.
I also added the following CSS so that clicking on a trash can icon is handled by the parent button. Without this CSS, clicking on an icon would not delete the task.
div#tasks i {
pointer-events: none;
}
To make the todo list more visible in the code snippet below, I reduced the heights, margins, and paddings of some of the elements in the CSS.
I also added a link to the font awesome icon library.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
taskOutput.addEventListener("click", function(event) {
if (event.target && event.target.nodeName === "SPAN") {
event.target.classList.toggle("completed");
}
if (event.target && event.target.nodeName === "BUTTON") {
event.target.parentNode.remove();
}
});
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
// Create a task DIV
const newTaskElement = document.createElement("div");
newTaskElement.classList.add("task");
// Create a SPAN with the task name
const newTaskNameElement = document.createElement("span");
const taskTextnode = document.createTextNode(newTasks);
newTaskNameElement.appendChild(taskTextnode);
// Create a BUTTON with a TRASH CAN ICON
const newTaskDeleteButton = document.createElement("button");
const deleteImageElement = document.createElement("i");
deleteImageElement.classList.add("fa-solid", "fa-trash");
newTaskDeleteButton.appendChild(deleteImageElement);
// Append the SPAN and the BUTTON to the task DIV
newTaskElement.appendChild(newTaskNameElement);
newTaskElement.appendChild(newTaskDeleteButton);
// Append the task DIV to the TASK LIST DIV
taskOutput.appendChild(newTaskElement);
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
font-family: 'Kumbh Sans', sans-serif;
}
/* ADDED TO MAKE SURE THAT THE TRASH ICON DOES NOT PROCESS CLICKS */
div#tasks i {
pointer-events: none;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 3px 4px;
}
#new-task {
position: relative;
background-color: white;
padding: 6px 4px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 6px 4px;
margin-top: 5px;
border-radius: 10px;
width: 100%;
min-height: 50px;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
I'm trying to create a button that can change the background colour using Vuejs2. It should change 2 different colours after every click using If-else. Idk why it's not working.
Should i use Vue if-else statement and #click ?
HTML
<div id ="app"></div>
CSS
.bgbutton {
background-color: #D8DFE5;
border: none;
color: #CCCCCC;
cursor: pointer;
font-family: arial,sans-serif;
font-size: 20px;
height: 30px;
line-height: 15px;
padding: 3px 20px;
border-radius: 3px;
text-align: center;
touch-action: manipulation;
}
.bgbutton:hover {
border-color: #dadce0;
color: #A52A2A;
}
.button-16:focus {
border-color: #4285f4;
outline: none;
}
body {
font: Arial , sans-serif;
background: linear-gradient(#2d8dcb, #F0FFFF);
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
JS
var test2 = new Vue({
el: '#app',
data:{},
methods: {
changebg: function(){
const btn = document.getElementById('bgbtn');
const backgroundColor = btn.style.background;
if (backgroundColor == 'linear-gradient(#2d8dcb, #F0FFFF)') {
btn.style.backgroundColor = 'linear-gradient(#e66465, #9198e5)';
} else {
btn.style.backgroundColor = 'linear-gradient(#2d8dcb, #F0FFFF)';
}
}
},
template:' <button id= bgbtn class= bgbutton v-on:click = changebg > Change Background colour</button>',
})
Several issues ...
linear-gradient is a backgroundImage, not a backgroundColor
setting backgroundImage to linear-gradient(#2d8dcb, #F0FFFF) is fine, but when you read it next time, it may be linear-gradient(rgb(45, 141, 203), rgb(240, 255, 255)) ... so your comparison will fail
So, this code seems to do what you want
var test2 = new Vue({
el: '#app',
data: {},
methods: {
changebg: function(e) {
const btn = e.originalTarget;
const toggle = btn.dataset.bg || 0;
if (toggle === "1" ) {
btn.style.backgroundImage = 'linear-gradient(#e66465, #9198e5)';
} else {
btn.style.backgroundImage = 'linear-gradient(#2d8dcb, #F0FFFF)';
}
btn.dataset.bg = 1 - toggle
}
},
template: '<button id="bgbtn" class="bgbutton" #click="changebg" > Change Background colour</button>',
})
.bgbutton {
background-color: #D8DFE5;
border: none;
color: #CCCCCC;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 20px;
height: 30px;
line-height: 15px;
padding: 3px 20px;
border-radius: 3px;
text-align: center;
touch-action: manipulation;
}
.bgbutton:hover {
border-color: #dadce0;
color: #A52A2A;
}
.button-16:focus {
border-color: #4285f4;
outline: none;
}
body {
font: Arial, sans-serif;
background: linear-gradient(#2d8dcb, #F0FFFF);
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.js"></script>
<div id="app"></div>
Personally, I use classes if I can for such things
var test2 = new Vue({
el: '#app',
data: {},
methods: {
changebg: function(e) {
const btn = e.originalTarget;
btn.classList.toggle('alt');
}
},
template: '<button id="bgbtn" class="bgbutton" #click="changebg">Change Background colour</button>',
})
.bgbutton {
background-color: #D8DFE5;
border: none;
color: #CCCCCC;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 20px;
height: 30px;
line-height: 15px;
padding: 3px 20px;
border-radius: 3px;
text-align: center;
touch-action: manipulation;
background-image: linear-gradient(#2d8dcb, #F0FFFF)
}
.bgbutton.alt {
background-image: linear-gradient(#e66465, #9198e5);
}
.bgbutton:hover {
border-color: #dadce0;
color: #A52A2A;
}
.button-16:focus {
border-color: #4285f4;
outline: none;
}
body {
font: Arial, sans-serif;
background: linear-gradient(#2d8dcb, #F0FFFF);
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.js"></script>
<div id="app"></div>
I am trying to change a menu from a list to a dropdown.
I am using the Mapplic - Custom Interactive Map WordPress Plugin
I found the code for it, but I don't seem to get it to
this.addLevelSwitcher = function() {
if (self.data.levels.length > 1) {
var control = $('<div></div>').addClass('mapplic-level-switcher');
self.data.levels.forEach(function(level, i) {
var button = $('<button></button>').attr('data-level', level.id).text(level.title).prependTo(control).click(function(e) {
e.preventDefault();
self.switchLevel(level.id);
});
if (level.show) button.addClass('mapplic-selected');
});
this.el.append(control);
self.el.on('levelswitched', function(e, target) {
$('button', control).removeClass('mapplic-selected');
$('button[data-level="' + target + '"]', control).addClass('mapplic-selected');
});
}
}
Also here is the css
/* new switcher */
.mapplic-level-switcher {
position: absolute;
right: 0;
top: 0px;
margin: 12px;
}
.mapplic-level-switcher button {
background-color: #f8f8f8;
border-radius: 0;
color: #888;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: 600;
line-height: 20px;
padding: 4px 10px;
text-align: center;
user-select: none;
width: 100%;
border: none;
transition: transform 0.2s;
position: relative;
}
.mapplic-level-switcher button:hover { background-color: #f8f8f8; }
.mapplic-level-switcher button:focus { outline: none; }
.mapplic-level-switcher button.mapplic-selected {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
background-color: #fff;
color: #222;
transform: scale(1.15);
z-index: 100;
}
I am trying to make it more responsive on mobile...
Another thing I was thinking was to hide this menu on mobile and add indiviuals buttons in order to trigger the floor plan.
Any ideas on how could I do any of this?
Thanks
I have a button with onclick. There is an image inside of the button but its not trigger the script.
function myFunction1() {
document.getElementById("rightdrop02").classList.toggle("show");
}
window.addEventListener('click', function(event) {
if (!event.target.matches('.rightmenubtn02')) {
var dropdowns = document.getElementsByClassName("right_content02");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
body {
background-color: limegreen;
}
.rightmenubtn01,
.rightmenubtn02,
.rightmenubtn03,
.rightmenubtn04,
.rightmenubtn05 {
border: none;
cursor: pointer;
color: white;
font-family: "focim";
font-size: 17px;
width: 100%;
line-height: 38px;
text-align: left;
padding-left: 20px !important;
border-bottom: solid 1px white;
background-color: transparent;
}
.right_content02,
.right_content03 {
display: none;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
z-index: 1;
}
.right_content02 a,
.right_content03 a {
border-bottom: solid 1px #00765a;
}
.right_content02 a,
.right_content03 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.rightmenu01 a:hover,
.rightmenu02 a:hover,
.rightmenu03 a:hover,
.rightmenu04 a:hover,
.rightmenu05 a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.right_img button:focus {
outline: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.right_img button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.right_img img {
float: right;
padding: 6px 16px 6px 0;
}
.right_img button {
padding: 0;
padding-left: 10px;
border-radius: 0;
}
<div class="right_img">
<div class="rightmenu02">
<button onclick="myFunction1()" class="rightmenubtn02">Button<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAA81BMVEX////eAADwe4mNGCX9ASD/AADdAAUYGBj5w8zhFxoIAAArKyvaAADEABapFxn/ASU9S0qNGCH/HCEzMzMkJCSpFx75AAD+DxI7OzudGCj/AAmpGCn/ABm/GCt8FyTOARn0mqT6zNf+8Pbta3Ltd4TmMDoiFxfob3Lwnq7tiJDkSU7cBw/iMT/qeHfnVVqDg4NKSkpyb299fHyioqKPj4+0tLQaGhoODg5PT09hYWEcJCIVAAAUIRuzAAjCAAlednRKXFoJGBczQkHpQ1XsTWaLFxf0pKpxLDRyGiT72Nv3uL3kGyr83eL4r7rqWGHubHjoMETZSe+SAAABc0lEQVQokZWR6XKCMBSFE4EABQsoIi6tu5aGKqjFtVbRauvS9v2fpjEBdWz/9M5kTnK+ycmdXADAJsdxnGFwrI76bmwArZzGa0XLymo8zxO1snzy1mCI42WMlqsGlmWE3NVShljOxUhVWwA4ECNcJueKC4sFhoyiWyeSgAitqVFtWBF6S1FJQPhNbEciAVYmQlr5UKXoCwBJ/QRgm83EbyFZitFWbQNwOCMVS3FgBdYuAk+3EEqA6nYPpF22cIUwdKmxVovXCO4+yC2yar8CaYe49meHTtThPnX7D0QC90vyjdJlYIWiBjNA3bpGGNaqR0OS86fmMW4/tVwsY/XReSi3sMoX4ilrmiAI+eOwBYHutDuG7kvJc81ms2TypRRNuTm5ocVkQmQ6aTI0DvVQn+vjha6Hob6Y6vNXfcyQ2e/1e6PnfuD3On7Xszu+3/cYCjzPtoOhZ4/sdNc3lbSiDE2GlEEgimIgmqYYpBWyCYKBQvwf4QQtRo/eO0oAAAAASUVORK5CYII="></button>
<div id="rightdrop02" class="right_content02">
Dropdown01
Dropdown02
Dropdown03
Dropdown04
Dropdown05
Dropdown06
</div>
</div>
</div>
The img is not the original one because its from a private site. Stripped the html so its less complicated but the css is the same. I also know my code is awful, no need to remind me...
When you click the image, the event target is the image, not the button. You have to fix the condition in order to get that to work:
if (!event.target.matches('.rightmenubtn02') &&
!event.target.matches('.rightmenubtn02 img')) {
https://jsfiddle.net/swynmuat/
The condition now checks not only for the button but for the image inside the button as well.
I have the following code snippet that I am embedding into a Wix website.
// JavaScript
var countries = [
{ name: 'Thailand', link: 'www.google.com' },
{ name: 'Tanzania', link: '' },
{ name: 'Tunisia', link: '' },
{ name: 'Taiwan', link: '' },
];
var matchingCountries = [];
function updateCountry() {
var searchTerm = document.getElementById('countrySearchInput').value;
var resultsList = document.getElementById('countrySearchResults');
resultsList.innerHTML = '';
if(searchTerm.length === 0) return;
var matchingCountries = countries.filter(function(country) {
return country.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
});
if(matchingCountries.length > 0) {
var fewerCountries = matchingCountries.splice(0, Math.min(matchingCountries.length, 5));
fewerCountries.forEach(function(country) {
resultsList.innerHTML += "<li><a href='" + country.link + "'>" + country.name + "</a></li>";
});
} else {
resultsList.innerHTML += "<li>No search results</li>";
}
}
function startSearch() {
document.getElementById('countrySearchResultsContainer').style.display = 'block';
}
function endSearch() {
document.getElementById('countrySearchResultsContainer').style.display = 'none';
}
/* CSS */
#country-search {
font-family: Helvetica;
}
*, *:before, *:after {
box-sizing: border-box;
}
#country-search {
width: 400px;
display: block;
}
#country-search .entry input {
width: 400px;
font-size: 24px;
padding: 12px;
border-radius: 10px;
border: 3px solid white;
background-color: rgba( 150, 150, 150, 0.1);
margin: 0;
}
#country-search .entry input:focus {
/*
border: 3px solid white;
outline: none;
*/
}
#countrySearchResultsContainer {
width: 100%;
border: 3px solid #eee;
border-radius: 5px;
display: none;
background-color: rgba(220,220,220,0.7);
}
#countrySearchResults {
margin: 0;
width: 100%;
padding: 0;
}
#countrySearchResults li {
font-size: 24px;
list-style-type: none;
padding: 12px;
}
#countrySearchResults li:hover {
background-color: #eee;
}
#countrySearchResults li:not(:last-child) {
padding-bottom: 10px;
}
#countrySearchResults li a {
text-decoration: none;
color: black;
}
#countrySearchResults li a:visited {
color: black;
}
#countrySearchInput {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-webkit-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-moz-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-ms-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-ms-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<!-- HTML -->
<div id="country-search">
<div class="entry">
<input id="countrySearchInput" type="text" placeholder="Enter a country name" onkeyup="updateCountry()" onfocus="startSearch()" onblur="endSearch()" />
</div>
<div id="countrySearchResultsContainer">
<ul id="countrySearchResults">
</ul>
</div>
</div>
In this script, I am trying to type in Thailand, and when it appears as an option, I click it. However, when I do, the website: "www.google.com" does not pop up. What am I missing?
The URL that you have entered is incorrect. When referencing external websites you need to include the scheme. Change the link from www.google.com to http://www.google.com and you will be able to open the link when entering Thailand.
When you use www.google.com, the link will refer to a file or something in the folder the HTML files in in called www.google.com. If you want to use a weblink in your file, you should consider adding http:/ or https:/ before your link.
https:/www.google.com/