Develop Reference

Autocomplete Search bar won't read my values

im trying to make a search bar for my website to redirect pepole on other pages of my website by selecting values from autocomplete suggestions, but when i select a suggestion (example:"Home") and hit search nothing happends, instead when i write the value (example:"chat") it works just fine and it redirects me to another page, my question is: what im doing wrong and why my autocompleted values are not seen by the searchbar?
Here is the code example for values "chat, Home, youtube"
function ouvrirPage() {
var a = document.getElementById("search").value;
if (a === "chat") {
window.open("/index.html");
}
if (a === "Home") {
window.open("/customizedalert.html");
}
if (a === "youtube") {
window.open("https://www.youtube.com/");
}
}
And here is the entire thing:
https://codepen.io/galusk0149007/pen/LYeXvww

Try this in your IDE : Clicking the search icon will navigate to your urls.
// getting all required elements
const searchWrapper = document.querySelector(".search-input");
const inputBox = searchWrapper.querySelector("input");
const suggBox = searchWrapper.querySelector(".autocom-box");
const icon = searchWrapper.querySelector(".icon");
let linkTag = searchWrapper.querySelector("a");
let webLink;
let suggestions = ['chat','home', 'youtube']
// if user press any key and release
inputBox.onkeyup = (e)=>{
let userData = e.target.value; //user enetered data
let emptyArray = [];
if(userData){
icon.onclick = ()=>{
webLink = `https://www.google.com/search?q=${userData}`;
linkTag.setAttribute("href", webLink);
linkTag.click();
}
emptyArray = suggestions.filter((data)=>{
//filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
});
emptyArray = emptyArray.map((data)=>{
// passing return data inside li tag
return data = `<li>${data}</li>`;
});
searchWrapper.classList.add("active"); //show autocomplete box
showSuggestions(emptyArray);
let allList = suggBox.querySelectorAll("li");
for (let i = 0; i < allList.length; i++) {
//adding onclick attribute in all li tag
allList[i].setAttribute("onclick", "select(this)");
}
}else{
searchWrapper.classList.remove("active"); //hide autocomplete box
}
}
function select(element){
let selectData = element.textContent;
inputBox.value = selectData;
icon.onclick = ()=>{
webLink = `https://www.google.com/search?q=${selectData}`;
linkTag.setAttribute("href", webLink);
linkTag.click();
}
searchWrapper.classList.remove("active");
}
function showSuggestions(list){
let listData;
if(!list.length){
userValue = inputBox.value;
listData = `<li>${userValue}</li>`;
}else{
listData = list.join('');
}
suggBox.innerHTML = listData;
}
function ouvrirPage() {
var a = document.getElementById("search").value;
if (a === "chat") {
window.open("/index.html");
}
if (a === "Home") {
window.open("/customizedalert.html");
}
if (a === "youtube") {
window.open("https://www.youtube.com/");
}
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #544b8b;
padding: 0 20px;
}
::selection{
color: #fff;
background: #7c71bd;
}
.wrapper{
max-width: 450px;
margin: 150px auto;
}
.wrapper .search-input{
background: #fff;
width: 100%;
border-radius: 5px;
position: relative;
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}
.search-input input{
height: 55px;
width: 100%;
outline: none;
border: none;
border-radius: 5px;
padding: 0 60px 0 20px;
font-size: 18px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}
.search-input.active input{
border-radius: 5px 5px 0 0;
}
.search-input .autocom-box{
padding: 0;
opacity: 0;
pointer-events: none;
max-height: 280px;
overflow-y: auto;
}
.search-input.active .autocom-box{
padding: 10px 8px;
opacity: 1;
pointer-events: auto;
}
.autocom-box li{
list-style: none;
padding: 8px 12px;
display: none;
width: 100%;
cursor: default;
border-radius: 3px;
}
.search-input.active .autocom-box li{
display: block;
}
.autocom-box li:hover{
background: #efefef;
}
.search-input .icon{
position: absolute;
right: 0px;
top: 0px;
height: 55px;
width: 55px;
text-align: center;
line-height: 55px;
font-size: 20px;
color: #644bff;
cursor: pointer;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<div class="search-input">
<a href="" target="_blank" hidden></a>
<input type="text" placeholder="Type to search..">
<div class="autocom-box">
</div>
<div class="icon" onclick="ouvrirPage()"><i class="fas fa-search"></i></div>
</div>
</div>
</body>

Function removes items from localStorage only if run manually

I'm looking for advice/tips on how to fix a function that is supposed to remove items from localStorage. I'm following a tutorial by John Smilga that I found on Youtube. Although I've modeled my code on his, apparently, I have missed something.
This function works perfectly well if I run it manually from the console and pass in the id of the item that I want to remove from localStorage.
function removeFromLocalStorage(id) {
console.log(id);
let storageItems = getLocalStorage();
console.log(storageItems);
storageItems = storageItems.filter(function(singleItem) {
if (singleItem.id !== id) {
return singleItem;
}
})
console.log(storageItems);
localStorage.setItem("list", JSON.stringify(storageItems));
}
However, when this function is triggered by the deleteItem() function, it refuses to remove the item from localStorage. It still works, there are a bunch of console.logs in it that track its execution, and I can check that it receives the correct item id as the argument, but for some reason it doesn't filter out the item that needs to be removed. I am completely lost and have no idea how to identify the problem. I can't debug it with console.logs as I usually do. I will be very grateful if you help me find the problem. Any advice will be appreciated.
In case the entire code is needed, please find it below.
const form = document.querySelector(".app__form");
const alert = document.querySelector(".app__alert");
const input = document.querySelector(".app__input");
const submitBtn = document.querySelector(".app__submit-btn");
const itemsContainer = document.querySelector(".app__items-container");
const itemsList = document.querySelector(".app__items-list");
const clearBtn = document.querySelector(".app__clear-btn");
let editElement;
let editFlag = false;
let editId = "";
form.addEventListener("submit", addItem);
clearBtn.addEventListener("click", clearItems);
function addItem(e) {
e.preventDefault();
const id = Math.floor(Math.random() * 9999999999);
if (input.value && !editFlag) {
const item = document.createElement("div");
item.classList.add("app__item");
const attr = document.createAttribute("data-id");
attr.value = id;
item.setAttributeNode(attr);
item.innerHTML = `<p class='app__item-text'>${input.value}</p>
<div class='app__item-btn-cont'>
<button class='app__item-btn app__item-btn--edit'>edit</button>
<button class='app__item-btn app__item-btn--delete'>delete</button>
</div>`
const editBtn = item.querySelector(".app__item-btn--edit");
const deleteBtn = item.querySelector(".app__item-btn--delete");
editBtn.addEventListener("click", editItem);
deleteBtn.addEventListener("click", deleteItem);
itemsList.appendChild(item);
displayAlert("item added", "success");
addToLocalStorage(id, input.value);
setBackToDefault();
itemsContainer.classList.add("app__items-container--visible");
} else if (input.value && editFlag) {
editElement.textContent = input.value;
// edit local storage
editLocalStorage(editId, input.value);
setBackToDefault();
displayAlert("item edited", "success");
} else {
displayAlert("empty field", "warning");
}
}
function setBackToDefault() {
input.value = "";
editFlag = false;
editId = "";
submitBtn.textContent = "Submit";
submitBtn.className = "app__submit-btn";
}
function displayAlert(text, action) {
alert.textContent = text;
alert.classList.add(`app__alert--${action}`);
setTimeout(function() {
alert.textContent = "";
alert.classList.remove(`app__alert--${action}`);
}, 700)
}
function clearItems() {
const items = document.querySelectorAll(".app__item");
if (items.length > 0) {
items.forEach(function(singleItem) {
itemsList.removeChild(singleItem);
})
itemsContainer.classList.remove("app__items-container--visible");
displayAlert("items cleared", "cleared");
setBackToDefault();
}
}
function editItem(e) {
const item = e.currentTarget.parentElement.parentElement;
editElement = e.currentTarget.parentElement.previousElementSibling;
editId = item.dataset.id;
editFlag = true;
input.value = editElement.textContent;
submitBtn.textContent = "Edit";
submitBtn.classList.add("app__submit-btn--edit");
input.focus();
}
function deleteItem(e) {
const item = e.currentTarget.parentElement.parentElement;
const itemId = item.dataset.id;
removeFromLocalStorage(itemId);
displayAlert("item removed", "cleared");
setBackToDefault();
itemsList.removeChild(item);
if (itemsList.children.length === 0) {
itemsContainer.classList.remove("app__items-container--visible");
}
}
function addToLocalStorage(id, value) {
const itemsObj = {id: id, value: input.value};
let storageItems = getLocalStorage();
storageItems.push(itemsObj);
localStorage.setItem("list", JSON.stringify(storageItems));
}
function removeFromLocalStorage(id) {
console.log(id);
let storageItems = getLocalStorage();
console.log(storageItems);
storageItems = storageItems.filter(function(singleItem) {
if (singleItem.id !== id) {
return singleItem;
}
})
console.log(storageItems);
localStorage.setItem("list", JSON.stringify(storageItems));
}
function editLocalStorage(id, value) {
}
function getLocalStorage() {
return localStorage.getItem("list") ? JSON.parse(localStorage.getItem("list")) : [];
}
* {
margin: 0;
padding: 0;
}
.app {
width: 70%;
max-width: 600px;
margin: 75px auto 0;
}
.app__title {
text-align: center;
/* color: #1B5D81; */
margin-top: 20px;
color: #377FB4;
}
.app__alert {
width: 60%;
margin: 0 auto;
text-align: center;
font-size: 20px;
color: #215884;
border-radius: 7px;
height: 23px;
transition: 0.4s;
text-transform: capitalize;
}
.app__alert--warning {
background-color: rgba(243, 117, 66, 0.2);
color: #006699;
}
.app__alert--success {
background-color: rgba(165, 237, 92, 0.4);
color: #3333ff;
}
.app__alert--cleared {
background-color: #a978da;
color: white;
}
.app__input-btn-cont {
display: flex;
margin-top: 30px;
}
.app__input {
width: 80%;
box-sizing: border-box;
font-size: 20px;
padding: 3px 0 3px 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right: none;
border: 1px solid #67B5E2;
background-color: #EDF9FF;
}
.app__input:focus {
outline: transparent;
}
.app__submit-btn {
display: block;
width: 20%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left: none;
background-color: #67B5E2;
border: 1px solid #67B5E2;
cursor: pointer;
font-size: 20px;
color: white;
transition: background-color 0.7s;
padding: 3px 0;
}
.app__submit-btn--edit {
background-color: #95CB5D;
}
.app__submit-btn:active {
width: 19.9%;
padding: 0 0;
}
.app__submit-btn:hover {
background-color: #377FB4;
}
.app__submit-btn--edit:hover {
background-color: #81AF51;
}
.app__items-container {
visibility: hidden;
/* transition: 0.7s; */
}
.app__items-container--visible {
visibility: visible;
}
.app__item {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.app__item:hover {
background-color: #b9e2fa;
border-radius: 10px;
}
.app__item-text {
padding-left: 10px;
font-size: 20px;
color: #1B5D81;
}
.app__item-btn-cont {
display: flex;
}
.app__item-btn-img {
width: 20px;
height: 20px;
}
.app__item-btn {
border: none;
background-color: transparent;
cursor: pointer;
display: block;
font-size: 18px;
}
.app__item-btn--edit {
margin-right: 45px;
color: #2c800f;
}
.app__item-btn--delete {
margin-right: 15px;
color: rgb(243, 117, 66);
}
.app__clear-btn {
display: block;
width: 150px;
margin: 20px auto;
border: none;
background-color: transparent;
font-size: 20px;
color: rgb(243, 117, 66);
letter-spacing: 2px;
cursor: pointer;
transition: border 0.3s;
border: 1px solid transparent;
}
.app__clear-btn:hover {
border: 1px solid rgb(243, 117, 66);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="list.css">
<title>To Do List App</title>
</head>
<body>
<section class="app">
<form class="app__form">
<p class="app__alert"></p>
<h2 class="app__title">To Do List</h2>
<div class="app__input-btn-cont">
<input class="app__input" type="text" id="todo" placeholder="do stuff">
<button class="app__submit-btn">Submit</button>
</div>
</form>
<div class="app__items-container">
<div class="app__items-list">
</div>
<button class="app__clear-btn">Clear Items</button>
</div>
</section>
<script src="list.js"></script>
</body>
</html>

Your code is fine you just used the wrong comparison operator.
In your case you are comparing 2 IDs (operands) to see if they match up, so you should use normal operators such as (==, !=), but instead in your case, you have used strict operators which are used to compare the operand type and the operand itself.
You can learn more about Comparison Operators here.
Ultimatly,
In your function removeFromLocalStorage(id), you have an extra equal sign in your if function.
Instead of:
if (singleItem.id !== id) {
return singleItem;}
It should be:
if (singleItem.id != id) {
return singleItem;}
Hope this helps.

Javascript - I have two event listeners which run the same global scope function, but one of them isn't working...why?

For a bit of context, I'm currently new to Javascript and programming in general. I'm currently making a to-do list using vanilla javascript.
I want the user to be able to add an entry by either clicking on the "+" button, or by pressing the enter key in the input field.
Definitions:
let count = 0;
let getAdd = document.getElementById('add')
let getBackground = document.getElementById('background')
let getInputs = document.getElementsByClassName('input')
let getItems = document.getElementsByClassName('item')
let getName = document.getElementById('name')
The "keypress" event listener is working, but the "click" event listener is not. Here's the part in question:
function addevent() {
if (document.getElementById('name').value === '') {
alert("You need to type something in the input field first!")
return
}
if (getItems.length == 0) {
count += 1;
getBackground.innerHTML = ''
getBackground.style = null;
getBackground.innerHTML += '<div class="item"><div class="column input"></div><div id="spacer" class="column"></div><div id="bin" class="bin column row">X</div></div>'
getInputs[count - 1].innerHTML = document.getElementById('name').value
let heightplus = getBackground.offsetHeight;
getBackground.style.height = parseInt(heightplus + 35) + "px"
document.getElementById('name').value = ''
}
else {
count += 1
getBackground.innerHTML += '<div class="item"><div class="column input"></div><div id="spacer" class="column"></div><div id="bin" class="bin column row">X</div></div>'
getInputs[count - 1].innerHTML = document.getElementById('name').value
let heightplus = getBackground.offsetHeight;
getBackground.style.height = parseInt(heightplus + 35) + "px"
document.getElementById('name').value = ''
}
}
getAdd.addEventListener("click", addevent(), false);
getName.addEventListener("keypress", function enter(e) {
if (e.keyCode === 13) {
addevent();
}
}, false);
What am I missing here?
If you need any further info, let me know.
let count = 0;
let getAdd = document.getElementById('add')
let getBackground = document.getElementById('background')
let getInputs = document.getElementsByClassName('input')
let getItems = document.getElementsByClassName('item')
let getName = document.getElementById('name')
function noitems() {
if (count == 0) {
getBackground.innerHTML = '<div class="start">Click on the <strong>+</strong> button to get started</div>'
}
else if (count == -1) {
getBackground.innerHTML = '<div class="end">No more tasks? Happy days!</div>'
count += 1
}
getBackground.style.paddingTop = "0px"
getBackground.style.boxShadow = "0px 0px 0px 0px"
getBackground.style.backgroundColor = "white"
}
window.onload = noitems();
function addevent() {
if (document.getElementById('name').value === '') {
alert("You need to type something in the input field first!")
return
}
if (getItems.length == 0) {
count += 1;
getBackground.innerHTML = ''
getBackground.style = null;
getBackground.innerHTML += '<div class="item"><div class="column input"></div><div id="spacer" class="column"></div><div id="bin" class="bin column row">X</div></div>'
getInputs[count - 1].innerHTML = document.getElementById('name').value
let heightplus = getBackground.offsetHeight;
getBackground.style.height = parseInt(heightplus + 35) + "px"
document.getElementById('name').value = ''
}
else {
count += 1
getBackground.innerHTML += '<div class="item"><div class="column input"></div><div id="spacer" class="column"></div><div id="bin" class="bin column row">X</div></div>'
getInputs[count - 1].innerHTML = document.getElementById('name').value
let heightplus = getBackground.offsetHeight;
getBackground.style.height = parseInt(heightplus + 35) + "px"
document.getElementById('name').value = ''
}
}
getAdd.addEventListener("click", addevent(), false);
getName.addEventListener("keypress", function enter(e) {
if (e.keyCode === 13) {
addevent();
}
}, false);
function doSomething(e) {
if (e.target.id === "bin") {
if (getItems.length == 1) {
let clickeditem = e.target
getBackground.removeChild(clickeditem.parentNode)
count -= 2
noitems();
}
else {
let clickeditem = e.target
getBackground.removeChild(clickeditem.parentNode)
let heightminus = getBackground.offsetHeight;
getBackground.style.height = parseInt(heightminus - 75) + "px"
count -= 1
}
}
e.stopPropagation();
}
getBackground.addEventListener("click", doSomething, false)
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body {
font-family: 'Roboto', sans-serif;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
#title {
font-size: 32px;
margin-top: 1em;
border: 5px;
border-style: solid;
border-color: #001F5F;
width: 9em;
margin-left: calc(50% - 4.6em);
margin-right: calc(50% - 4.5em);
text-align: center;
}
#inputfield {
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 50px;
margin-bottom: 10px;
}
::placeholder {
color: #E7E6E6;
opacity: 0.8;
}
#name {
height: 35px;
width: 813px;
outline: none;
background-color: #001F5F;
color: #E7E6E6;
text-align: left;
vertical-align: middle;
font-size: 22px;
box-shadow: 1px 2px 4px 2px darkgray;
margin-right: 10px;
border: 5px;
border-color: #E7E6E6;
float: left;
border-radius: 5px 5px 5px 5px;
}
#add {
height: 35px;
width: 35px;
background-color: #E7E6E6;
color: #001F5F;
font-size: 32px;
font-style: bold;
text-align: center;
vertical-align: middle;
line-height: 35px;
cursor: pointer;
box-shadow: 1px 2px 4px 2px darkgray;
float: left;
border-radius: 5px 5px 5px 5px;
}
#add:hover {
background-color:#001F5F;
color: #E7E6E6;
}
#background {
box-shadow: 0px 2px 4px 2px darkgray;
width: 900px;
height: 0px;
background-color: #E7E6E6;
padding-top: 20px;
border-radius: 5px 5px 5px 5px;
}
.start, .end {
text-align: center;
margin-top: 250px;
font-size: 32px;
padding: 0px;
vertical-align: middle;
}
#spacer {
width: 10px;
height: 35px;
background-color:#E7E6E6;
}
.input {
height: 35px;
width: 808px;
background-color:#001F5F;
padding-left: 5px;
border: 0px;
font-size: 22px;
color: #E7E6E6;
text-align: left;
vertical-align: middle;
outline: none;
box-shadow: 0px 2px 4px 2px darkgray;
border-radius: 5px 5px 5px 5px;
}
.bin {
width: 35px;
height: 35px;
font-size: 24px;
font-style: normal;
background-color: #E7E6E6;
color:#001F5F;
text-align: center;
vertical-align: middle;
line-height: 35px;
cursor: pointer;
border-radius: 5px 5px 5px 5px;
}
.bin:hover {
background-color:#001F5F;
color: #E7E6E6;
box-shadow: 0px 2px 4px 2px darkgray;
}
.item {
margin-left: 32px;
display: table;
table-layout: fixed;
width: 858px;
margin-bottom: 20px;
}
.column {
display: table-cell;
}
.thelist {
margin-left: calc(50% - 450px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Oliver's To-Do List</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1 id="title">Oliver's To-Do List</h1>
<body>
<div class="thelist">
<div id="inputfield">
<input type="text" placeholder="Start typing here..."id="name">
<div id="add">+</div>
</div>
<div id="background">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Thanks!

getAdd.addEventListener("click", addevent(), false);
should be
getAdd.addEventListener("click", addevent, false);
As per this example from https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener :
// Function to change the content of t2
function modifyText() {
const t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// Add event listener to table
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

Ok so I found out that within the getAdd event listener, the problem was the pair of brackets after the function name; once these are removed, it works just fine!
If anyone reading wants to add to this with their wisdom, knowledge and experience, or perhaps suggest any other improvements, please do!
Thanks!

Oh, you solved it. I just tried it out and modified something in the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Oliver's To-Do List</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1 id="title">Oliver's To-Do List</h1>
<body>
<div class="thelist">
<div id="inputfield">
<input type="text" placeholder="Start typing here..."id="name">
<div id="add" onclick="addevent()">+</div>
</div>
<div id="background">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I added onclick="addevent()" , and It works

Responsive HTML form

I am using the following css code:
html {
background: #2B2B2B url(images/bg.gif) repeat;
}
body {
max-width: 1000px;
margin: 0px auto;
font-family: sans-serif;
margin: 0 auto;
}
header,
footer,
aside {
display: block;
}
h1 {
text-align: center;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
text-decoration: underline;
}
label {
display: block;
}
fieldset {
border: 0px dotted red;
width: 400px;
margin: 0 auto;
}
input,
select {
width: 400px;
height: 30px;
border-radius: 5px;
padding-left: 10px;
font-size: 14px;
}
select {
line-height: 30px;
background: #f4f4f4;
}
button {
font-size: 14px;
padding: 5px;
background: #333333;
color: #FFFCEC;
float: right;
width: 100px;
}
button:hover {
font-size: 16px;
}
#edit {
background: #DC5B21;
}
#delete {} #course,
#name,
#profesor,
#subject {
background: #ABDCD6;
}
label {
font-size: 15px;
font-weight: bold;
color: #282827;
}
table {
border-spacing: 0.5rem;
border-collapse: collapse;
margin: 0 auto;
background: #ABDCD6;
}
th {
background: #E9633B;
}
th,
td {
border: 2px solid black;
padding: 10px;
}
td {
font-weight: bold;
font-style: oblique;
}
tr:nth-child(even) {
background: #ABDCD6
}
tr:nth-child(odd) {
background: #DCD8CF
}
.container {
width: 1000px;
margin: 0 auto;
}
.headerbar {
width: 988px;
float: left;
}
.headerbar.top {
background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
min-height: 100px;
border-radius: 19px 30px 0px 0px;
box-shadow: #938D94 7px 7px 5px;
}
.headerbar.bottom {
background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
min-height: 60px;
border-radius: 25px;
border-radius: 0px 0px 37px 34px;
box-shadow: #938D94 7px 1px 5px;
}
.leftbar {
width: 50%;
background: #EB593C;
min-height: 605px;
float: left;
border-radius: 4px;
border: 3px dashed #282827;
}
.rightbar {
width: 47%;
background: #221E1D;
min-height: 595px;
float: left;
padding: 5px;
border: 2px solid #EB593C;
box-shadow: #938D94 5px 5px 5px;
}
#submit,
#clear {
border-radius: 25px;
}
input:focus {
border: 1px solid #FF9933;
}
#media screen and (max-width: 700px) {
.leftbar,
.rightbar {
float: none;
}
.headerbar.top h1 {
margin-left: 50px;
text-align: center;
float: left;
}
and here is my HTML page very simple
<!DOCTYPE html>
<html>
<head>
<title>My web app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="mystyle2.css" rel="stylesheet"/>
<script>
var studentsArray = [];
var selectedIndex = -1;
function init() {
document.getElementById("tablerows").innerHTML = "";
if (localStorage.studentsRecord) {
studentsArray = JSON.parse(localStorage.studentsRecord);
for (var i = 0; i < studentsArray.length; i++) {
prepareTableCell(i, studentsArray[i].course, studentsArray[i].name, studentsArray[i].profesor, studentsArray[i].subject);
}
}
}
function onRegisterPressed() {
if(validate()){
var course = document.getElementById("course").value;
var name = document.getElementById("name").value;
var profesor = document.getElementById("profesor").value;
var subject = document.getElementById("subject").value;
var stuObj = {course: course, name: name, profesor: profesor, subject: subject};
if (selectedIndex === -1) {
studentsArray.push(stuObj);
} else {
studentsArray.splice(selectedIndex, 1, stuObj);
}
localStorage.studentsRecord = JSON.stringify(studentsArray);
init();
onClarPressed();
}else{
}
}
function prepareTableCell(index, course, name, profesor, subject) {
var table = document.getElementById("tablerows");
var row = table.insertRow();
var courseCell = row.insertCell(0);
var nameCell = row.insertCell(1);
var profesorCell = row.insertCell(2);
var subjectCell = row.insertCell(3);
var actionCell = row.insertCell(4);
courseCell.innerHTML = course;
nameCell.innerHTML = name;
profesorCell.innerHTML = profesor;
subjectCell.innerHTML = subject;
actionCell.innerHTML = '<button id="edit" onclick="onEditPressed(' + index + ')">Edit</button><br/><button id="delete" onclick="deleteTableRow(' + index + ')">Delete</button>';
}
function deleteTableRow(index) {
studentsArray.splice(index, 1);
localStorage.studentsRecord = JSON.stringify(studentsArray);
init();
}
function onClarPressed() {
selectedIndex = -1;
document.getElementById("course").value = "";
document.getElementById("name").value = "";
document.getElementById("profesor").value = "";
document.getElementById("subject").value = "Math";
document.getElementById("submit").innerHTML = "Register";
}
function onEditPressed(index) {
selectedIndex = index;
var stuObj = studentsArray[index];
document.getElementById("course").value = stuObj.course;
document.getElementById("name").value = stuObj.name;
document.getElementById("profesor").value = stuObj.profesor;
document.getElementById("subject").value = stuObj.subject;
document.getElementById("submit").innerHTML = "Update";
}
function validate(){
var errors = [];
var re = /^[\w]+$/;
var id = document.getElementById("course");
if(id.value==="" ){
errors.push("Course name is empty");
}else if(id.value.length<3){
errors.push("Course name is to shoort");
}else if(!re.test(id.value)){
errors.push("Input contains invalid characters");
}
var name = document.getElementById("name");
var regEx = /^[a-zA-Z ]+$/;
if(name.value===""){
errors.push("Name cannot be empty");
}else if(!regEx.test(name.value)){
errors.push("Name contains invalid characters");
}
var profesor = document.getElementById("profesor");
if(profesor.value===""){
errors.push("Professor field cannot be empty");
}else if(!regEx.test(profesor.value)){
errors.push("Professor field contains invalid characters");
}
if(errors.length>0){
var message = "ERRORS:\n\n";
for(var i = 0;i<errors.length;i++){
message+=errors[i]+"\n";
}
alert(message);
return false;
}
return true;
}
</script>
</head>
<body onload="init()">
<header class="headerbar top"><h1>ITEC3506: Assignment#2</h1></header>
<aside class="leftbar">
<div>
<fieldset>
<label for="course"><span>Course Name</span></label>
<input type="text" placeholder="enter name of course" id="course">
</fieldset>
<fieldset>
<label for="name">Your Name</label>
<input type="text" placeholder="enter your name" id="name">
</fieldset>
<fieldset>
<label for="profesor">Course Professor</label>
<input type="text" placeholder="enter course Professor" id="profesor">
</fieldset>
<fieldset>
<label for="subject">Subject</label>
<select id="subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
<option value="CS">CS</option>
</select>
</fieldset>
<fieldset>
<label for="submit"> </label>
<button id="submit" onclick="onRegisterPressed()">Submit</button>
<button id="clear" onclick="onClarPressed()">Clear</button>
</fieldset>
</div>
</aside>
<aside class="rightbar">
<table id="regtable">
<thead>
<tr>
<th>Course</th>
<th>Student</th>
<th>Professor</th>
<th>Subject</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tablerows">
</tbody>
</table>
</aside>
<footer class="headerbar bottom"></footer>
</div>
</body>
</html>
My question is how can I transform this code into a responsive site.
Everything is resizing normally, except I cannot seem to resize my table and form. Could somebody help me?

A few things going on here.
First, you don't have a set width on a few of your fields, so change:
fieldset{
border: 0px dotted red;
width: 400px;
margin: 0 auto;
}
to:
fieldset{
border: 0px dotted red;
width: 400px;
margin: 0 auto;
max-width: 100%;
}
Also change .headerbar from width: 988px; to width: 100%;.
For responsive frameworks, you need to ensure that you never have a set a fixed width without ensuring there is a max-width attached to it, otherwise your content size will never drop below the size of your fixed width.
Second, I noticed the following:
.leftbar{
width: 50%;
background: #EB593C;
min-height: 605px;
float: left;
border-radius: 4px;
border: 3px dashed #282827;
}
You didn't specifically call this out, but when I check your code in a smaller view, I notice that your width: 50%; is causing the backgrounds to look off, which does not seem to be your intention. I would recommend adding .leftbar { width: 100%; } as well as .rightbar { width: 100%; } inside of #media screen and (max-width:700px){
That just leaves the table. Tables do not automatically break down, so are generally not something we want to use when developing a responsive site, but of course sometimes there is no getting around this.
There are a few ways to tackle the issue with the table. One is to set the table to display:block; and apply overflow-x: scroll; to it inside of your #media screen and (max-width:700px){, which will allow the user to scroll left/right when viewing it from smaller screens. Another is to use one of the various Javascript plugins that can achieve this.
Hope this helps get you on the right track. Best of luck!

Do not set width for these
input,select{/*width: 400px;*/}
fieldset{/*width: 400px;*/}
If you are setting width obviously you cannot obtain a responsive layout

javascript pop-up box show , background translucence,what should i do

I'm a beginner with javascript and css
Now I want to create a pop-up box show message,meanwhile the html body is translucence.but now what I did is not work so good,what should i do?
I need your help
my code is below
html code
<div id="confirm_box" class="info_box">
<div class="info_box confirm_info">
<div class="info_box confirm_title">{$confirmTitle}</div>
<div class="info_box confirm_close">
<span id="confirm_close" class="info_box confirm_close">×</span>
</div>
</div>
<div id="info_box_content" class="info_box confirm_content">
<div class="info_box info_img_box">
<img src="{$url_app_dir}img/confirm_dog.png" class="info_box confirm_img"/>
</div>
<div id="content_box" class="info_box content_box">
{$confirmContent}<label id="info_box_text" class="info_box info_text"></label>
</div>
</div>
<div class="info_box confirm_button">
<button class="info_box confirm_submit" >确认</button>
</div>
js code
window.onload = function ()
{
var confrimWin = document.getElementById("confirm_box");
var comfirmBtn = document.getElementById("show_confirm_box");
var closeBtn = document.getElementById("confirm_close");
var bodyElement = document.getElementsByTagName("body")[0];
//show pop-up box
comfirmBtn.onclick = function()
{
confrimWin.style.display = "block";
bodyElement.setAttribute('class',"body_mask");
var text = document.getElementById("name").value;
document.getElementById("info_box_text").innerHTML= text ;
};
//close box
closeBtn.onclick = function()
{
confrimWin.style.display = "none";
bodyElement.setAttribute('class',"");
}
//get mouse Object
document.onclick = function(){
var e = arguments[0] || window.event;
var eventSource = e.srcElement||e.target;
var isShow = eventSource.className.toLowerCase().indexOf('info_box');
if(eventSource.className == 'btn'){
comfirmBtn.onclick();
}
else if( isShow < 0)
{
confrimWin.style.display = "none";
bodyElement.setAttribute('class',"");
}
}
};
html code
#confirm_box{
position:fixed;
top:50%;
left:50%;
width:500px;
height:300px;
border-radius: 5px 5px 5px 5px;
background:#fff;
z-index:100;
border:4px solid rgb( 220,220,220);
margin:-102px 0 0 -202px;
display:none;
}
.body_mask{
position: fixed;
background-color: none repeat scroll 0% 0% rgb(128,128,128);
opacity: 0.75;
/* z-index: 100; */
display:block;
}
.confirm_info{
font-size:16px;
text-align:right;
background:#fff;
border-bottom:1px solid rgb(135,180,250);
padding:5px;
height:20px;
}
.confirm_title {
font-family:"微软雅黑","黑体";
float:left;
font-weight: bold;
color:rgba(30, 144, 255, 0.75);
}
.confirm_close {
float:right;
}
.confirm_close span{
font-size:16px;
color:#fff;
cursor:pointer;
background:rgb(135,180,250);
border:1px solid rgba(30, 144, 255, 0.75);
padding:0 2px;
}
.confirm_content{
font-family:"微软雅黑","黑体";
font-size: 14px;
line-height: 24px;
padding:5px;
height:70%;
width:100%;
}
.info_text{
font-family:"微软雅黑","黑体";
color: rgb(0, 108, 202);
line-height: 24px;
height:70%;
width:100%;
}
.info_img_box{
float:left;
width: 200px;
height: 200px;
}
.content_box{
float:left;
width: 230px;
height: 200px;
}
.confirm_button{
background:#C4C4C4;
border:1px solid rgba(30, 144, 255, 0.75);
}
.confirm_submit {
float:right;
font-size: 15px;
width: 80px;
height:30px;
cursor:pointer;
color: rgb(255,245,238);
padding: 0px 10px;
margin:8px 10px;
border-radius: 5px 5px 5px 5px;
/* text-shadow: 1px 1px 3px rgb(255, 255, 255); */
border: 1px solid rgb(135,170,230);
background: -moz-linear-gradient(center top , rgb(135,180,250),rgb(135,180,250) ) repeat scroll 0% 0% transparent;
}
.confirm_submit:hover {
background: none repeat scroll 0% 0% rgb(135,160,230);
}

As a beginner with javascript&css ,I try to solve the problem again and again.and at last sovled it in a not so prefert way
below is what I changed code,it's better than before
#confirm_box{
position:fixed;
top:50%;
left:50%;
width:500px;
height:300px;
border-radius: 5px 5px 5px 5px;
background:#fff;
border:4px solid rgb( 220,220,220);
margin:-102px 0 0 -202px;
z-index: 1002;/*this add css code will show confirm_box upon body_mask*/
display:none;
}
html code
<div id="confirm_box" class="info_box">
</div>
<div id="hide_info_box" class="body_mask"></div>
javascript code
window.onload = function ()
{
var confrimWin = document.getElementById("confirm_box");
var comfirmBtn = document.getElementById("show_confirm_box");
var closeBtn = document.getElementById("confirm_close");
var hideElement = document.getElementById("hide_info_box");
//show info box
comfirmBtn.onclick = function()
{
confrimWin.style.display = "block";
hideElement.style.display = "block";
var text = document.getElementById("name").value;
document.getElementById("info_box_text").innerHTML= text ;
};
//close info box
closeBtn.onclick=hideElement.onclick=function()
{
confrimWin.style.display = "none";
hideElement.style.display = "none";
}
};