I'm a beginner with javascript and I have a problem displaying 'renderMovieCard(theMovie)' into the specific tab. Although I can display the card in the first tab,by calling the function createmovie(). But I'm not sure how to fetch the Object from the array and display it into specific Tab. I will appreciate any help or hint.
My attempt to fetch the object and display it at:
// Generate All Movies VIEW
// Movies Stored in array
movies = [];
// Constructor Object
function Movie(id, name, type, description, image, isWatched, favorite){
this.id = id;
this.name = name;
this.type = type;
this.description = description;
this.image = image;
this.isWatched = isWatched;
this.favorite = favorite;
}
// Generate Random id for the movie
function generateId(){
let max = 0;
for (let i = 0; i < movies.length; i ++){
if(movies[i].id > max){
max = movies[i].id;
}
}
return max + 1;
}
// Add Movie Object
function createmovie(){
let movieName = document.getElementById('movieName').value;
let movieType = document.getElementById('movieType').value;
let movieDescription = document.getElementById('movieDescription').value;
let movieCoverImg = document.getElementById('movieCoverImg').value;
let movieisWatched = document.getElementById('isWatched').checked;
let movieFavorite = document.getElementById('favourite').checked;
let theMovie = new Movie(generateId(),movieName, movieType, movieDescription, movieCoverImg, movieisWatched, movieFavorite);
movies.push(theMovie);
clearFormInputs();
notify();
}
// GENERATE VIEW //
function renderMovieCard(theMovie){
let masterParent = document.getElementById('containerAll');
let movieParentBox = document.createElement('movieBox');
movieParentBox.id = 'movieBox';
let movieImage = document.createElement('img');
movieImage.id = 'movieBoxImage';
movieImage.src = theMovie.image;
let movieDetails = document.createElement('div');
movieDetails.className = 'movieDetails';
let movieBoxName = document.createElement('h4');
movieBoxName.id = 'movieBoxName';
movieBoxName.innerText = theMovie.name;
let movieBoxType = document.createElement('p');
movieBoxType.id = 'movieBoxType';
movieBoxType.className = 'py';
movieBoxType.innerText = theMovie.type;
let movieBoxDescription = document.createElement('p');
movieBoxDescription.id = 'movieBoxDescription';
movieBoxDescription.className = 'py';
movieBoxDescription.innerText = theMovie.description;
let chkFavSpace = document.createElement('div');
chkFavSpace.className = 'flx', 'py', 'chkFavSpace';
let checkI = document.createElement('i');;
checkI.className = 'fas fa-check-circle chk fa-2x';
let checkH = document.createElement('i');
checkH.className = 'fas fa-heart fav fa-2x'
movieParentBox.appendChild(movieImage);
movieDetails.appendChild(movieBoxName);
movieDetails.appendChild(movieBoxType);
movieDetails.appendChild(movieBoxDescription);
movieDetails.appendChild(chkFavSpace);
chkFavSpace.appendChild(checkI);
chkFavSpace.appendChild(checkH);
movieParentBox.appendChild(movieDetails);
masterParent.appendChild(movieParentBox);
}
// Generate All Movies VIEW
function AllMovies(movies){
let AllMovies = document.getElementById('containerAll');
for(let i = 0; i < movies.length; i ++){
view = renderMovieCard(movies[i]);
AllMovies.appendChild(view);
}
}
// Generate Movies - Watched
// Generate Movies - Watchlist
// Generate Movies - Favorites
// Clear Form
function clearFormInputs(){
movieName = document.getElementById('movieName').value = '';
movieType = document.getElementById('movieType').value = 'Other';
movieDescription = document.getElementById('movieDescription').value = '';
movieCoverImg = document.getElementById('movieCoverImg').value = '';
movieisWatched = document.getElementById('isWatched').checked = false;
movieFavorite = document.getElementById('favourite').checked = false;
}
// Add Movie Btn - ADD MOVIE INTO LIST
let btnAddMovie = document.getElementById('btnaddMovie');
btnAddMovie.addEventListener('click', function(){
createmovie();
let form = document.getElementById('myModal');
form.style.display = 'none';
})
// Close Btn - ADD MOVIE FORM
let btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function(){
modal.style.display = "none";
});
// Close Btn - Notification Form
let btnClose= document.getElementById('spanClose');
btnClose.addEventListener('click', function(){
document.getElementById('notificationAddMovie').style.display = 'none';
});
// Notification - Added movie
function notify(){
setTimeout(function(){
document.getElementById('notificationAddMovie').style.display = 'block'
}, 500);
setTimeout(function(){
document.getElementById('notificationAddMovie').style.display = 'none'
}, 4000);
}
// tabs
function openMovie(evt, movieName) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");
}
document.getElementById(movieName).style.display = "block";
evt.currentTarget.className += "active";
}
// modalbox
// Get the modal
let modal = document.getElementById("myModal");
// Get the button that opens the modal
let btn = document.getElementById("showModal");
// Get the <span> element that closes the modal
let span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
:root{
--color-color:#0b032d;
--color2-color:#621940;
--color3-color:#843b62;
--color4-color:#50082e;
}
*{
padding:0px;
margin:0px;
}
/* Header */
#headerContainer{
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
height:120px;
background-color:var(--color2-color);
color:#fff;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
#logo{
display:flex;
flex-direction:row;
align-items: center;
}
#logo h1{
margin-left:10px;
color:#fff;
font-family: 'Raleway', sans-serif;
}
.btnAdd{
padding:0.5rem 1rem 0.5rem 1rem;
border:0;
background-color:var(--color3-color);
border-radius:3px;
cursor: pointer;
font-family: 'Roboto', sans-serif;
color:#FFF;
}
.btnAdd:hover{
background-color:var(--color4-color);
}
/* Content */
#container{
margin:0 auto;
width:60%;
padding-top:30px;
font-family: 'Roboto', sans-serif;
}
/* Tab containers */
#containerAll{
display:flex;
flex-direction:row;
}
#Watched{
display:flex;
flex-direction:row;
}
#Watchlist{
display:flex;
flex-direction:row;
}
#Favourites{
display:flex;
flex-direction:row;
}
/* Modal Box Extra Info*/
#formAddMovie{
display:flex;
flex-direction: column;
}
.flx{
display:flex;
flex-direction: row;
justify-content:space-between;
}
.justFlx{
display:flex;
flex-direction: row;
}
.clmn{
display:flex;
flex-direction:column;
}
#btnaddMovie{
width:120px;
padding:0.5rem 1rem 0.5rem 1rem;
margin-right:20px;
border:none;
border-radius:3px;
background-color:var(--color4-color);
color:#FFF;
cursor:pointer;
transition:0.5s;
}
#btnCancel{
width:120px;
padding:0.5rem 1rem 0.5rem 1rem;
margin-right:20px;
border:none;
border-radius:3px;
border:1px solid #666;
color:#333;
cursor:pointer;
transition:0.5s;
}
#btnaddMovie:hover{
background-color:var(--color2-color);
}
input, select, textarea{
border:0px;
border-radius:3px;
padding:0.5rem 0.3rem 0.5rem 0.3rem;
color:#666;
font-family: 'Roboto', sans-serif;
}
.py{
padding-top:1rem;
padding-bottom:1rem;
}
textarea{
resize:none;
font-family: 'Roboto', sans-serif;
}
/* Input fields shadow red -removed*/
input:required {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 2px 0px;
}
select:required {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 2px 0px;
}
textarea:required {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 2px 0px;
}
/* Notification */
#notificationAddMovie{
display: none;
position:fixed;
height:30px;
padding:0.7rem 1.2rem 0.7rem 1.2rem;
bottom:10px;
left:10px;
background-color:#f1f1f1;
color:#666;
font-family: helvetica;
border-radius: 50px;
}
#notificationAddMovie p{
position: relative;
top: 7px;
}
#notificationAddMovie span{
background-color: #999;
color:#fff;
padding:0px 4px 1px 4px;
border-radius: 10px;
cursor: pointer;
}
#spanClose:hover{
background-color:#333;
}
.green{
color:rgb(24, 78, 24);
background-color:#fff;
}
/* movieBox */
#movieBox{
margin:0.3rem;
width:200px;
border:1px solid #e0e0e0;
border-radius:5px;
}
#movieBox img{
border-radius:5px 5px 0px 0px;
border-bottom:4px solid var(--color3-color);
width:200px;
}
.movieDetails{
padding:0.5rem;
}
.chkFavSpace{
justify-content: space-between;
}
.chk, .fav{
cursor:pointer;
}
.chk{
color:rgb(24, 78, 24);
}
.fav{
color:rgb(150, 41, 41);
}
.py{
padding:0.3rem 0rem 0.3rem 0rem;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #621940;
color:#fff;
font-family: 'Roboto', sans-serif;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
color:#fff;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #843b62;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #50082e;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 0.3px solid #e0e0e0;
border-top: none;
}
#All, #Watched, #Watchlist, #Favourites h3{
color:#666;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
font-family: 'Roboto', sans-serif;
color:#666;
border-radius:3px;
}
/* Modal Content */
.modal-content {
background-color: #f1f1f1;
margin: auto;
padding: 2rem;
border: 1px solid #888;
width: 30%;
font-family: 'Roboto', sans-serif;
border-radius:3px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
transition:0.3s;
transform: rotate(360deg);
}
label{
padding:1rem 0rem 0.2rem 0rem;
}
#watched, #favourite{
margin-top:12px;
margin-left:5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = './css/style.css' rel='stylesheet'>
<link href = './css/tabs.css' rel='stylesheet'>
<link href = './css/modalBox.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://kit.fontawesome.com/f1db609589.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header id = 'headerContainer'>
<div id = 'logo'>
<i class="fas fa-video fa-2x"></i>
<h1>Muvico</h1>
</div>
<div id="showModal">
<button id = 'showModal' class = 'btnAdd'><i class="fa fa-film"></i> Add Movie</button>
</div>
</header>
<div id="container">
<div id="content">
<!-- Tabs -->
<div class = 'tab'>
<button class = 'tablinks' onclick = "openMovie(event, 'All')"><i class="fas fa-photo-video"></i> All</button>
<button class = 'tablinks' onclick = "openMovie(event, 'Watched')"><i class="fas fa-video-slash"></i> Watched</button>
<button class = 'tablinks' onclick = "openMovie(event, 'Watchlist')"><i class="fas fa-list-ul"></i> Watchlist</button>
<button class = 'tablinks' onclick = "openMovie(event, 'Favourites')"><i class="fas fa-heart"></i> Favourites</button>
</div>
<!-- Content for Tabs-->
<div id="All" class = 'tabcontent'>
<h3>All Movies</h3>
<div id="containerAll">
</div>
</div>
<div id="Watched" class = 'tabcontent'>
<h3>Watched Movies</h3>
<div id="containerWatched">
</div>
</div>
<div id="Watchlist" class = 'tabcontent'>
<h3>Watchlist</h3>
<div id="containerWatchlist">
</div>
</div>
<div id="Favourites" class = 'tabcontent'>
<h3>Favourite</h3>
<div id="containerFavorite">
</div>
</div>
</div>
<!-- Modal Box -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="formAddMovie">
<label for = 'movieName'>Name</label>
<input type = 'text' id = 'movieName' placeholder = 'movie name...' name = 'movieName' required>
<label for = 'movieType'>Type</label>
<select name = 'movieType' id = 'movieType' required>
<option value = 'other'>Other</option>
<option value = 'horror'>Horror</option>
<option value = 'comedy'>Comedy</option>
<option value = 'romance'>Romance</option>
<option value = 'scifi'>Sci-FI</option>
<option value = 'action'>Action</option>
<option value = 'adventure'>Adventure</option>
<option value = 'drama'>Drama</option>
<option value = 'documentary'>Documentary</option>
</select>
<label for = 'movieDescription'>Description</label>
<textarea id = 'movieDescription' name = 'movieDescription' rows = 5 cols = 5 placeholder = 'movie description..' required></textarea>
<label for = 'movieCoverImg'>Cover image URL</label>
<input id = 'movieCoverImg' name = 'movieCoverImg' placeholder = 'movie cover image' required>
<div class="justFlx">
<input type = 'checkbox' id = 'isWatched' name = 'isWatched' value = 0 >
<label for = 'isWatched'> Watched</label>
<input type = 'checkbox' id = 'favourite' name = 'favourite' value = 0>
<label for = 'favourite'> Favorite</label>
</div>
<br>
<div class="flx py">
<button id = 'btnaddMovie'>Add Movie</button>
<button id = 'btnCancel'>Cancel</button>
</div>
</div>
</div>
</div>
</div>
<!-- Movie Add Box-->
<div id = 'notificationAddMovie'>
<p><i class="fas fa-check-circle green"></i> Successfully added <span id = 'spanClose'>x</span></p>
</div>
<script src = './js/app.js'></script>
<script src = './js/tabs.js'></script>
<script src = './js/modalBox.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Each tab have its own DOM tree and don't share or access DOM directly with one another. Here you can do one thing, store this movie object into localstorage as localstorage is shared across tabs of samd domain. When you get movie object into second tab from localstorage then create a new DOM inside second tab using that movie object.
Related
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>
My goal is to understand why the div with the id of product is not shown when the page is loaded.
I would expect the product div to be displayed as a grid by default because that is what it is set as in the stylesheet. In reality, the product div doesn't show until the submit event attached to the search field is fired.
I am unable to understand why product is referenced in the javascript at the bottom of the productUpdate() function, even though it is never actually defined as a const or var.
if(!flag_error){
product.style.display = "grid";
hint.style.display = "none";
forwardBtn.style.display = "inline";
backBtn.style.display = "inline";
I have tried extensively to understand exactly which bit of code turns product div on and off. The code is below and I've also uploaded it to http://va.ogs17.brighton.domains/.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>V&A online item search</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div class="main-container">
<div class="welcome-container">
<h1>Search the V&A Online</h1>
<h2>Start searching now by entering in a keyword in the searchbar below</h2>
</div>
<div id="search-container">
<form>
<fieldset>
<legend><strong>Search for an item here:</strong></legend>
<p>The V&A Museum is the world's leading museum of of art, design and performance, housing a permanent collection of over 2.27 million objects. You can search for them here.</p>
<img class="info-icon" src="info-icon2.png">
<p class="search-hint"> Stuck for ideas? Try searching for an object like a throne or vase. You could try a person or a place. Is there certain techniques or materials you are loooking for? Any keyword will work, even dragons!</p>
<label for="search-bar"></label>
<input id="search-bar" type="search">
<input type="submit" value="Search" href="#product-top">
<div class="nav-btn-container">
Previous Item
Next Item
<span id="hint">This is the last item in the list.</span>
</div>
</fieldset>
</form>
</div>
<div id="loading">
<img class="loading-img" src="Bean Eater-1s-200px.gif">
</div>
<div id="product">
<a id="product-top"></a>
<div class="title">
<h2 class="">No title found</h2>
</div>
<div class="photo-container"><img class="photo" src="image-not-found.png"></div>
<div class="information">
<p class="artist">Artist: Unknown</p>
<p class="object">Object: Unkown</p>
<p class="date_text">Date: Unkown</p>
<p class="place">Place: Unkown</p>
<p class="location">Location: Unknown</p>
<p class="object_number">Object Number: Unkown</p>
<p class="museum_number">Museum Number Token: Unkown</p>
</div>
</div>
<div id="success">
<p>Success!</p>
<!-- Link back to empty form -->
</div>
<div id="error">
<p>error...</p>
<!-- Link back to empty form -->
</div>
</div>
</body>
</html>
CSS
body {
font-family:'Roboto',sans-serif;
padding: 32px;
margin: 0;
background-image: url("vanda-front.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
img {
width: 100%;
}
.welcome-container {
color:honeydew;
text-shadow: black;
margin-top: 2rem;
margin-left: 3rem;
margin-bottom: 18rem;
}
.welcome-container h1 {
font-size: 3.5rem;
}
fieldset {
padding: 20px;
width: 60%;
margin: auto;
background-color: black;
opacity: 0.9;
border-style: none;
}
fieldset label, p, legend {
color: blanchedalmond;
}
fieldset img{
max-width: 1rem;
}
/* Button style partly by Frederico Dossena fdossena.com/?p=html5cool/buttons/i.frag */
.nav-btn-container a, input[type=submit] {
padding:0.35em 1.2em;
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
background-color: black;
text-decoration:none;
font-weight:300;
color:#FFFFFF;
text-align:center;
transition: all 0.2s;
cursor: pointer;
}
input[type=submit] {
font-size: 1.5rem;
}
input[type=search] {
/* padding:0.35em 1.2em; */
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
/* min-height: 2.5rem; */
font-size: 3rem;
}
.nav-btn-container a:hover, input[type=submit]:hover {
color:#000000;
background-color:#FFFFFF;
}
.nav-btn-container {
margin-top: 1.2rem;
}
.search-hint{
display: none;
}
#product {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: 10rem 1fr;
gap: 0.2rem;
padding: 10px;
box-sizing: border-box;
/* in the internal divs use grid-column-start and grid-row-end: ;
basic vid here - https://www.youtube.com/watch?v=Y9rHsdCxU8Q */
}
.photo-container {
opacity: 1;
}
/* text-overflow code by Jokesterfr stackoverflow.com/questions/7711490/prevent-text-from-overflowing-a-padded-container-in-html */
.title {
background-color: black;
opacity: 0.9;
border-style: none;
color: blanchedalmond;
font-size: 3rem;
overflow: hidden;
border-left:1em solid transparent;
border-right:1em solid transparent;
text-overflow: ellipsis;
}
.information {
background-color: black;
opacity: 0.9;
border-style: none;
color: blanchedalmond;
}
.back-button, .forward-button {
display: none;
}
.forward-button{
float: right;
}
.title {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
}
.photo-container {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
}
.information{
grid-column-start:6;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;
}
input {
display: block;
Margin: 5px;
width: 100%;
}
#hint {
color:red;
display: none;
}
#success, #error, #product {
text-align: center;
display: none;
}
.loading-img{
display: none;
}
/* Android A70 */
/* #media(min-width: 751px) and (max-width: 1080px) {
body{background-color: red;}
} */
/* iPhone 6 */
#media(max-width: 750px) {
/* body{
background-color: orangered;
background-image: none;
} */
.welcome-container {
margin-bottom: 12rem;
}
.title {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 1;
}
.photo-container {
grid-column-start: 1;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;
}
.information{
grid-column-start:1;
grid-column-end: 10;
grid-row-start: 3;
grid-row-end: 4;
}
}
JavaScript
window.addEventListener('load', function() {
//global varaibles
var searchHint = document.querySelector('.search-hint');
//by defualt, the first item is always shown. Position is incremented using next and previous buttons to show new items.
var position = 0;
var maxCap = 45;
//code by Ry stackoverflow.com/questions/21147832/convert-camel-case-to-human-readable-string
function toCapitalizedWords(name) {
var words = name.match(/[A-Za-z][a-z]*/g) || [];
return words.map(capitalize).join(" ");
}
function capitalize(word) {
return word.charAt(0).toUpperCase() + word.substring(1);
}
function productUpdate(step) {
if(position + step >= maxCap - 1){
//show hint
var hint = document.querySelector("#hint");
hint.style.display = "inline";
}
else {
// var loading = document.querySelector('#loading');
position += step;
var flag_error = false;
// get all form fields
var search = document.querySelector("#search-bar").value.trim();
var hint = document.querySelector("#hint");
var backBtn = document.querySelector(".back-button");
var forwardBtn = document.querySelector(".forward-button");
var productTitle = document.querySelector(".title");
var productPhoto = document.querySelector(".photo");
var productInformation = document.querySelectorAll(".information");
var xhrSearch = new XMLHttpRequest();
xhrSearch.onreadystatechange = function() {
//readystate 4 means oporation is complete developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
//status 200 means OK
if(this.readyState == 4 && this.status == 200) {
console.log(search);
//TODO
//if there is response text, do this, if not, display hint saying product not found
const result = JSON.parse(xhrSearch.responseText);
productTitle.textContent = result.records[position].fields.title;
//js loops god post stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript
for (let item of productInformation[0].children) {
console.log(item);
itemClass = item.className;
item.textContent = toCapitalizedWords(itemClass) + ": " + result.records[position].fields[itemClass];
}
var xhrFullRecord = new XMLHttpRequest();
xhrFullRecord.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
const fullRecordResult = JSON.parse(xhrFullRecord.responseText);
productPhoto.src = "https://framemark.vam.ac.uk/collections/" + fullRecordResult[0].fields.image_set[0].fields.image_id + "/full/735,/0/default.jpg";
}
}
fullRecordUrl = "https://www.vam.ac.uk/api/json/museumobject/" + result.records[position].fields.object_number;
xhrFullRecord.open("GET", fullRecordUrl);
xhrFullRecord.send();
}
};
//what happens to URL if £$&^%$£ is put in search?
url = "https://www.vam.ac.uk/api/json/museumobject/search?q=" + search + "&limit=" + maxCap;
//do I want any other params here?
xhrSearch.open("GET", url);
xhrSearch.send();
if(!flag_error){
//setTimeout(loading.style.display = "none", 5000);
product.style.display = "grid";
hint.style.display = "none";
forwardBtn.style.display = "inline";
backBtn.style.display = "inline";
}
}
}
document.querySelector('#search-container').addEventListener("submit", function(evt){
// stop page reload default action
evt.preventDefault();
position = 0;
productUpdate(0);
})
document.querySelector('.info-icon').addEventListener("click", function(evt){
// stop page reload default action
// evt.preventDefault();
if(searchHint.style.display == "inline"){
searchHint.style.display = "none";
} else {
searchHint.style.display = "inline";
}
})
document.querySelector('.back-button').addEventListener("click", function(evt){
// stop page reload default action
evt.preventDefault();
productUpdate(-1);
})
document.querySelector('.forward-button').addEventListener("click", function(evt){
// stop page reload default action
evt.preventDefault();
productUpdate(1);
})
function displayLoading(){
var loadIcon = document.querySelector(".loadingImg");
product.style.display = "none";
loadIcon.style.display = "inline";
}
});
you have onload event but onload there is no call to productUpdate()
window.addEventListener('load', function() {
........
........
// append this line before closing
productUpdate(0);
})
I have a dropdown from which I want to find the selected value.
The dropdown is basically a big blue button which, when pressed, shows different customers:
When an option is clicked, the value changes to the selected customer.
What I want to do is access this value somewhere else in my HTML script.
var Klanten = [
'niet-declareerbaar',
'ING',
'NNPC',
'Meewind',
];
var Projects = [
'alm',
'risicobeheer',
'RQ',
'overige',
];
var Tarieven = [
'standaard tarief',
'korting (50%)',
'Cadeau',
]
var project = 'overig';
var Tarief = 'standaard tarief';
var startYear = 2000;
var endYear = 2020;
var klant = 0;
var year = 0;
var selectedDays = new Array();
var mousedown = false;
var mousemove = false;
function loadKlanten() {
for (var i = 0; i < Klanten.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Klanten[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedKlant = i;
return function () {
klant = selectedKlant;
document.getElementById('curKlant').innerHTML = Klanten[klant];
loadCalendarDays();
return klant;
};
})();
document.getElementById('Klanten').appendChild(doc);
}
}
function loadProjects() {
document.getElementById('Projects').innerHTML = '';
for (var i = 0; i < Projects.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Projects[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedProject = i;
return function () {
project = selectedProject;
document.getElementById('curProject').innerHTML = Projects[project];
loadProjects();
return project;
};
})();
document.getElementById('Projects').appendChild(doc);
}
}
function loadTarief() {
document.getElementById('Tarieven').innerHTML = '';
for (var i = 0; i < Tarieven.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Tarieven[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedTarief = i;
return function () {
Tarief = selectedTarief;
document.getElementById('curTarief').innerHTML = Tarieven[Tarief];
loadTarief();
return Tarief;
};
})();
document.getElementById('Tarieven').appendChild(doc);
}
}
var start_hour=0;
var end_hour = 10;
var hour = 0;
function loadHours() {
document.getElementById('hours').innerHTML = '';
for (var i = start_hour; i <= end_hour; i++) {
var doc = document.createElement('div');
doc.innerHTML = i;
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedHour = i;
return function () {
hour = selectedHour;
document.getElementById('curHour').innerHTML = hour;
loadHours();
return hour;
};
})();
document.getElementById('hours').appendChild(doc);
}
}
function loadCalendarYears() {
document.getElementById('years').innerHTML = '';
for (var i = startYear; i <= endYear; i++) {
var doc = document.createElement('div');
doc.innerHTML = i;
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedYear = i;
return function () {
year = selectedYear;
document.getElementById('curYear').innerHTML = year;
loadCalendarDays();
return year;
};
})();
document.getElementById('years').appendChild(doc);
}
}
function loadCalendarDays() {
document.getElementById('calendarDays').innerHTML = '';
var tmpDate = new Date(year, month, 0);
var num = daysInMonth(month, year);
var dayofweek = tmpDate.getDay()-1; // find where to start calendar day of week
for (var i = 0; i <= dayofweek; i++) {
var d = document.createElement('div');
d.classList.add('day');
d.classList.add('blank');
document.getElementById('calendarDays').appendChild(d);
}
for (var i = 0; i < num; i++) {
var tmp = i + 1;
var d = document.createElement('div');
d.id = 'calendarday_' + tmp;
d.className = 'day';
d.innerHTML = tmp;
d.dataset.day = tmp;
d.addEventListener('click', function () {
this.classList.toggle('selected');
if (!selectedDays.includes(this.dataset.day))
selectedDays.push(this.dataset.day);
else selectedDays.splice(selectedDays.indexOf(this.dataset.day), 1);
});
d.addEventListener('mousemove', function (e) {
e.preventDefault();
if (mousedown) {
this.classList.add('selected');
if (!selectedDays.includes(this.dataset.day))
selectedDays.push(this.dataset.day);
}
});
d.addEventListener('mousedown', function (e) {
e.preventDefault();
mousedown = true;
});
d.addEventListener('mouseup', function (e) {
e.preventDefault();
mousedown = false;
});
document.getElementById('calendarDays').appendChild(d);
}
var clear = document.createElement('div');
clear.className = 'clear';
document.getElementById('calendarDays').appendChild(clear);
}
function daysInMonth(month, year) {
var d = new Date(year, month + 1, 0);
return d.getDate();
}
window.addEventListener('load', function () {
var date = new Date();
month = date.getMonth();
year = date.getFullYear();
document.getElementById('curKlant').innerHTML = Klanten[klant];
document.getElementById('curTarief').innerHTML = Tarief;
document.getElementById('curHour').innerHTML = hour;
document.getElementById('curProject').innerHTML = project;
loadProjects();
loadKlanten();
loadTarief();
loadCalendarDays();
loadHours();
});
body,
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.calendar {
background-color: white;
padding: 20px;
}
.calendar .dropdown {
display: none;
position: absolute;
background-color: #fff;
color: #0047bA;
text-align: center;
font-size: 14pt;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
width: 160px;
left: 0px;
z-index: 2000;
}
.calendar .dropdown .dropdown-item {
cursor: pointer;
opacity: 0.7;
transition: 0.5s opacity;
}
.calendar .dropdown .dropdown-item:hover {
opacity: 1;
}
.calendar .hours{
display: none;
}
.calendar .tarief {
display: none;
}
.calendar .title {
text-align: center;
font-size: 20pt;
}
.calendar .calendar-btn {
float: left;
background-color: #0047bA;
color: white;
text-align: center;
font-size: 14pt;
padding-top: 5px;
padding-bottom: 5px;
position: relative;
width: 20%;
cursor: pointer;
transition: 0.5s background-color;
}
.calendar .month-btn {
width: 40%;
height: 55px;
}
.calendar .project-btn {
height: 55px;
}
.calendar .calendar-btn:hover {
background-color: #1f71a1;
}
.calendar .hours-btn{
float: middle;
height: 55px;
}
.calendar .tarief-btn {
float: left;
height: 55px;
}
.calendar .calendar-dates .days .day {
float: left;
width: 12%;
margin: 1%;
padding: 1%;
font-size: 13pt;
text-align: center;
border-radius: 10px;
border: solid 1px #ddd;
}
.calendar .calendar-dates .days .day.blank {
background-color: white;
border: none;
}
.calendar .calendar-dates .days .day.selected {
background-color: #0047bA;
color: white;
cursor: pointer;
opacity: 0.9;
transition: 0.1s opacity;
}
.calendar .calendar-dates .days .day.selected:hover {
opacity: 1;
}
.calendar .calendar-dates .days .day.label {
height: 40px;
background-color: white;
color: black;
border: none;
font-weight: bold;
}
.clear {
clear: both;
}
#media only screen and (max-width: 960px) {
.calendar {
width: 100%;
margin: 0px;
margin: 0px;
box-sizing: border-box;
position: relative;
left: 0px;
}
}
<!DOCTYPE html>
<div>
<html>
<div>
<head>
<!-- CSS property to place div
side by side -->
<style>
#middlebox {
float: left;
width: 65%;
height: 400px;
}
#rightbox {
float: right;
background-color: white;
width: 35%;
height: 450px;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<div>
<div id="middlebox">
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<link href="/static/calendar3.css" rel="stylesheet">
</head>
<body>
<div class="calendar" id="calendar">
<div class="calendar-btn month-btn" onclick="$('#Klanten').toggle('fast')">
<span id="curKlant"></span>
<div id="Klanten" class="months dropdown"></div>
</div>
<div class="calendar-btn project-btn" onclick="$('#Projects').toggle('fast')">
<span id="curProject"></span>
<div id="Projects" class="projects dropdown"></div>
</div>
<div class="calendar-btn hours-btn" onclick="$('#hours').toggle('fast')">
<span id="curHour"></span>
<div id="hours" class="hours dropdown"></div>
</div>
<div class="calendar-btn tarief-btn" onclick="$('#Tarieven').toggle('fast')">
<span id="curTarief"></span>
<div id="Tarieven" class="Tarieven dropdown"></div>
</div>
<div class="clear"></div>
<div class="calendar-dates">
<div class="days">
<div class="day label">MON</div>
<div class="day label">TUE</div>
<div class="day label">WED</div>
<div class="day label">THUR</div>
<div class="day label">FRI</div>
<div class="day label">SAT</div>
<div class="day label">SUN</div>
<div class="clear"></div>
</div>
<div id="calendarDays" class="days">
</div>
</div>
<html>
<head>
<style>
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<style>
.myBtn {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
transition-duration: 0.2s;
cursor: pointer;
}
.myBtn1 {
background-color: white;
color: black;
border: 2px solid #0047bA;
}
.myBtn1:hover {
background-color: #0047bA;
color: white;
}
</style>
<button id="myBtn" class="myBtn myBtn1">Uren indienen</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Je staat op het punt om je uren in te dienen, weet je zeker dat alles klopt?</p>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
transition-duration: 0.2s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #0047bA;
}
.button1:hover {
background-color: #0047bA;
color: white;
}
</style>
</head>
<body>
<a href="{{ url_for('schrijven') }}">
<button class="button button1">Ja, dien mijn uren in</button></a>
</body>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
</div>
<script type="text/javascript" src="/static/jscodes/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/static/jscodes/calendar3.js" async></script>
</body>
</div>
<div class="card">
<div class="rightbox_buttons" id="rightbox">
<div>
<h2>Welke uren heb ik geschreven?</h2>
</div>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'week')">Per week</button>
<button class="tablinks" onclick="openCity(event, 'maand')">Per maand</button>
<button class="tablinks" onclick="openCity(event, 'klant')">Per klant</button>
</div>
<div id="week" class="tabcontent">
<p>Je hebt deze week geschreven: </p>
</div>
<div id="maand" class="tabcontent">
<p>Je hebt deze maand geschreven:</p>
</div>
<div id="klant" class="tabcontent">
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("select.klant").change(function(){
var selectedCountry = $(this).children("option:selected").val();
alert("You have selected the country - " + selectedCountry);
});
});
</script>
</head>
<body>
<form>
<label>kies klant:</label>
<select class="klant">
{% for klant in klant %}
<option value="{{ klant }}" SELECTED>{{ klant }}</option>
{% endfor %}
</select>
<input type="text" size="30" name="display" id="display" />
</form>
</body>
</html>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{%endblock%}
Preferably, I want to save the selected customer in a new variable (so I can return it in my HTML) and use it later on. How would I be able to do this?
You to put the below code to save the selected value inside a variable inside the onclick event.
var selected_Value= $('.dropdownid :selected').val();
I made a todo list with some predefined todo list items and I also made it possible to set your own todos inside the list through the prompt command. My problem with this code is, when I try to delete the items that I created, I can't do it. Though I can delete the predefined items. Here's the code:
let addTodo = document.getElementById('add');
let delTodo = document.getElementById('delete');
let ul = document.querySelector('ul');
let li = document.querySelectorAll('li');
addTodo.addEventListener('click', () => {
let add = prompt('Add a new todo');
if (add.length >= 1) {
let newLi = document.createElement('li');
let newLiText = document.createTextNode = add;
newLi.append(newLiText);
ul.appendChild(newLi);
} else {
alert('An error has occurred. Please try again.');
}
});
delTodo.addEventListener('click', () => {
let deleteTodo = prompt('Which todo do you want to delete?');
let firstTodo = document.querySelector('#first');
let secondTodo = document.querySelector('#second');
let thirdTodo = document.querySelector('#third');
if (deleteTodo === 'Study') {
ul.removeChild(firstTodo);
} else if (deleteTodo === 'Eat') {
ul.removeChild(secondTodo);
} else if (deleteTodo === 'Watch') {
thirdTodo.style.display = 'none';
} else {
alert('error occurrred');
}
});
body {
margin: 0;
padding: 0;
background-color: coral;
font-family: 'Playfair Display', cursive;
letter-spacing: 0.1em;
color: firebrick;
}
.wrapper {
margin: 10px auto;
border: 3px solid firebrick;
max-width: 300px;
text-align: center;
}
.table {
margin: 20px auto;
padding: 10px;
}
.table ul {
list-style-type: none;
}
.table li {
text-align: left;
margin: 20px 0px 20px -40px;
border: 1px solid red;
padding: 10px;
}
.table h3 {
text-align: left;
}
button {
margin: 10px 10px;
padding: 5px;
font-family: 'Playfair Display';
background-color: coral;
color: firebrick;
border: 2px solid firebrick;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<h1>Todo List</h1>
<div class="table">
<h3>List the todos here</h3>
<ul>
<li id="first">Study Math</li>
<li id="second">Eat Breakfast</li>
<li id="third">Watch a Movie</li>
</ul>
</div>
<button id="add">Add new todo</button>
<button id="delete">Delete todo</button>
</div>
<script src="sandbox.js"></script>
</body>
</html>
You haven't done anything wrong, you just haven't written the code to delete any TODOs.
I'm going to describe it for you, but you will need to research it and write the code.
When you add a new TODO, you need to set the id attribute on it.
You probably want to use the user-supplied name of the TODO with the spaces stripped out.
Then in your delete code, you strip the spaces out of the user input and look for an element with that as its id.
Don't do a massive if block. Just look for the element by the id, and if there is one that matches, remove it. If there is not one, do an alert to tell the user it is not found.
For the next level, put "__todo-" in front of the id when you create the TODOs, and show a drop-down box on the page to delete them, or otherwise (better UX), put a button on the TODO to allow the user to delete it.
To delete the todo you have to first identify it. For that add id attribute to the li element.
The below solution can fail if two todos have the same name because your IDs must be unique.
For that, you have to find a way to uniquely identify an element(li) while creating it dynamically.
let addTodo = document.getElementById('add');
let delTodo = document.getElementById('delete');
let ul = document.querySelector('ul');
let li = document.querySelectorAll('li');
addTodo.addEventListener('click', () => {
let add = prompt('Add a new todo');
if (add && add.length >= 1) {
let newLi = document.createElement('li');
newLi.id = add.trim();
let newLiText = document.createTextNode(add);
newLi.append(newLiText);
ul.appendChild(newLi);
} else {
alert('TODO name cannot be empty');
}
});
delTodo.addEventListener('click', () => {
let deleteTodo = prompt('Which todo do you want to delete?');
let toDeleteId = deleteTodo.toLowerCase().trim();
let toDeleteNode = document.querySelector(`#${toDeleteId}`);
if (toDeleteNode) {
ul.removeChild(toDeleteNode)
} else {
alert("TODO not found")
}
});
body {
margin: 0;
padding: 0;
background-color: coral;
font-family: 'Playfair Display', cursive;
letter-spacing: 0.1em;
color: firebrick;
}
.wrapper {
margin: 10px auto;
border: 3px solid firebrick;
max-width: 300px;
text-align: center;
}
.table {
margin: 20px auto;
padding: 10px;
}
.table ul {
list-style-type: none;
}
.table li {
text-align: left;
margin: 20px 0px 20px -40px;
border: 1px solid red;
padding: 10px;
}
.table h3 {
text-align: left;
}
button {
margin: 10px 10px;
padding: 5px;
font-family: 'Playfair Display';
background-color: coral;
color: firebrick;
border: 2px solid firebrick;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<h1>Todo List</h1>
<div class="table">
<h3>List the todos here</h3>
<ul>
<li id="first">Study Math</li>
<li id="second">Eat Breakfast</li>
<li id="third">Watch a Movie</li>
</ul>
</div>
<button id="add">Add new todo</button>
<button id="delete">Delete todo</button>
</div>
</body>
</html>
You are not doing it dynamically, what I would do is get all li and find a text containing the text user inputted in the prompt, and remove the element afterwards.
let addTodo = document.getElementById('add');
let delTodo = document.getElementById('delete');
let ul = document.querySelector('ul');
let li = document.querySelectorAll('li');
addTodo.addEventListener('click', () => {
let add = prompt('Add a new todo');
if (add.length >= 1) {
let newLi = document.createElement('li');
let newLiText = document.createTextNode = add;
newLi.append(newLiText);
ul.appendChild(newLi);
} else {
alert('An error has occurred. Please try again.');
}
});
delTodo.addEventListener('click', () => {
let deleteTodo = prompt('Which todo do you want to delete?');
const listItems = document.querySelectorAll('li');
let listItemToRemove = null;
for (let li of listItems) {
if (li.innerText === deleteTodo) {
listItemToRemove = li;
}
}
if (listItemToRemove) {
listItemToRemove.remove();
}
});
body {
margin: 0;
padding: 0;
background-color: coral;
font-family: 'Playfair Display', cursive;
letter-spacing: 0.1em;
color: firebrick;
}
.wrapper {
margin: 10px auto;
border: 3px solid firebrick;
max-width: 300px;
text-align: center;
}
.table {
margin: 20px auto;
padding: 10px;
}
.table ul {
list-style-type: none;
}
.table li {
text-align: left;
margin: 20px 0px 20px -40px;
border: 1px solid red;
padding: 10px;
}
.table h3 {
text-align: left;
}
button {
margin: 10px 10px;
padding: 5px;
font-family: 'Playfair Display';
background-color: coral;
color: firebrick;
border: 2px solid firebrick;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<h1>Todo List</h1>
<div class="table">
<h3>List the todos here</h3>
<ul>
<li id="first">Study Math</li>
<li id="second">Eat Breakfast</li>
<li id="third">Watch a Movie</li>
</ul>
</div>
<button id="add">Add new todo</button>
<button id="delete">Delete todo</button>
</div>
<script src="sandbox.js"></script>
</body>
</html>
I've been struggling with this problem 3 entire days. Any help would be appreciated!
I have a button 'ADD MY PHOTO' and when clicked, it comes a popup with the option to upload a picture or more. So, when I click 'Select Files' button or I drag & drop a picture or more, it will preview the pictures on the right side.
What I need help with is: when I upload a picture or 2, I want on the right side of every picture to display a textarea where the user can write something (like a caption). Also, after the pictures and captures are displayed I need the option to remove one or all of them. Here is a picture:
Here is the CodePen code: https://codepen.io/anon/pen/VEQMwm
Thanks in advance for help.
Also, here is the code:
// ---------- THIS IS FOR THE POPUP ---------- //
function CustomAlert() {
this.performCustomAlert = function (dialog) {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = windowHeight + "px";
dialogbox.style.display = "block";
}
this.ok = function () {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var newAlert = new CustomAlert();
// ------------- TABS ----------------- //
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
// ---------------- UPLOAD --------------------------//
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for(let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
console.debug('update', fileNumber, percent, total)
progressBar.value = total
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100) // <- Add this
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
}
})
formData.append('upload_preset', 'ujpu6gyk')
formData.append('file', file)
xhr.send(formData)
}
.add-photo{
width: 18%;
background-color: #00a100;
color: #fff;
padding: 11px 13px;
border: 3px solid #00a100;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
cursor: pointer;
text-align: center;
font-size: 13px;
font-weight: 550;
border-radius: 1px;
margin-left: 41%;
}
* {
box-sizing: border-box;
}
#dialogoverlay {
display: none;
opacity: 0.5;
/*so that user can see through it*/
position: fixed;
top: 0px;
left: 0px;
background: black;
z-index: 10;
height: 100%;
width: 100%;
}
#dialogbox {
display: none;
position: fixed;
background: #ffffff;
border-radius: 1px;
border: 0.5px solid #ccc;
z-index: 10;
left: 25%;
top: 20%;
width: 50%;
height: 400px;
-webkit-animation: fadeEffect 0.3s;
animation: fadeEffect 0.3s;
}
#close-popup {
float: right;
background-color: red;
color: #474747;
font-size: 15px;
}
.header{
position: absolute;
width: 100.2%;
background-color: white;
height: 11%;
top: 5.4%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-centre{
width: 99%;
height: 77%;
margin-left: 3px;
margin-top: 46px;
}
#content-leftside{
width: 65%;
height: 100%;
float: left;
}
.tab {
overflow: hidden;
}
.tab button {
width: 33.3%;
height: 14%;
background-color: #acacac;
float: left;
color: white;
outline: none;
cursor: pointer;
padding: 6px;
transition: 0.3s;
border-right: 1px solid #fff;
}
.tab button:hover {
background-color: #474747;
}
.tab button.active {
background-color: #474747;
}
.tabcontent {
display: none;
padding: 6px 12px;
}
#content-rightside{
width: 35%;
height: 100%;
float: right;
background-color: #ffffff;
border-left: 1px solid #dddddd;
}
#right-topbar{
width: 100%;
height: 9%;
background-color: #474747;
color: #fff;
padding: 5px;
text-align: center;
transition: 0.3s;
}
.footer{
position: absolute;
width: 100.2%;
background-color: #474747;
height: 11%;
bottom: -5.6%;
left: 50%;
/* top: calc(50% - 50px); */
transform: translate(-50%, -50%);
}
/*------------------- UPLOAD AREA -----------------------*/
#drop-area {
border: 2px dashed #ccc;
border-radius: 8px;
width: 98%;
margin: 24px auto;
padding: 15px;
}
#progress-bar{
display: none;
}
#gallery {
margin-top: 5%;
}
#gallery img {
width: 55px;
height: 50px;
margin-bottom: 10px;
margin-left: 10px
}
.button {
display: inline-block;
padding: 10px;
background: #00a100;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
#fileElem {
display: none;
}
#upload-button{
font-size: 40px;
color: #00a100;
<button class="add-photo" onclick="newAlert.performCustomAlert()">ADD MY PHOTO</button>
<div class="popup-upload">
<div id="dialogoverlay"></div>
<!--------------- SELECT MEDIA BOX ---------------->
<div id="dialogbox">
<!--------------- HEADER OF THE BOX ---------------->
<div class="header">
<!--------------- CLOSE POPUP ---------------->
<button id="close-popup" onclick="newAlert.ok()"><i class="fa fa-times" style="margin-top: 8px; margin-right: 7px;"></i></button>
<div class="select-media">
<i class="fa fa-camera" id="select-camera"></i>
<h2 id="select-media">SELECT YOUR MEDIA</h2>
</div>
</div>
<!--------------- CONTENT OF THE BOX ---------------->
<div class="content-centre">
<!--------------- LEFT CONTENT ---------------->
<div id="content-leftside">
<div class="tab">
<button class="tablinks" id="defaultOpen" onclick="openTab(event, 'Desktop')"><span class="fa fa-desktop"></span> Desktop</button>
<button class="tablinks" onclick="openTab(event, 'Facebook')"><span class="fa fa-facebook"></span> Facebook</button>
<button class="tablinks" onclick="openTab(event, 'Instagram')"><span class="fa fa-instagram"></span> Instagram</button>
</div>
<div id="Desktop" class="tabcontent">
<div id="drop-area">
<form class="my-form">
<span class="fa fa-cloud-upload" id="upload-button"></span>
<p id="drag-text">Drag & Drop Your <br> Photos or Videos <br> To Upload</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">or Select Files</label>
</form>
</div>
</div>
<div id="Facebook" class="tabcontent">
<h3>Facebook</h3>
</div>
<div id="Instagram" class="tabcontent">
<h3>Instagram</h3>
</div>
</div>
<!--------------- RIGHT CONTENT ---------------->
<div id="content-rightside">
<!--------------- RIGHT TOPBAR ---------------->
<div id="right-topbar">
<h1>Selected Media</h1>
</div>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery"/></div>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</div>
Look into below code, I made some changes on previewFile() function.
I hope, by looking below code you can get idea.
// ---------- THIS IS FOR THE POPUP ---------- //
function CustomAlert() {
this.performCustomAlert = function(dialog) {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = windowHeight + "px";
dialogbox.style.display = "block";
}
this.ok = function() {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var newAlert = new CustomAlert();
// ------------- TABS ----------------- //
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
// ---------------- UPLOAD --------------------------//
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults(e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for (let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
console.debug('update', fileNumber, percent, total)
progressBar.value = total
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
var mainDiv = document.createElement("div")
mainDiv.className = "box"
mainDiv.appendChild(img)
var textbx = document.createElement("textarea")
textbx.placeholder ="Caption..."
mainDiv.appendChild(textbx)
var btn = document.createElement("button")
var tx = document.createTextNode("X");
btn.onclick = function() {
$(this).closest(".box").remove()
}
btn.appendChild(tx);
mainDiv.appendChild(btn)
document.getElementById('gallery').appendChild(mainDiv)
}
}
function uploadFile(file, i) {
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100) // <- Add this
} else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
}
})
formData.append('upload_preset', 'ujpu6gyk')
formData.append('file', file)
xhr.send(formData)
}
.add-photo {
width: 18%;
background-color: #00a100;
color: #fff;
padding: 11px 13px;
border: 3px solid #00a100;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
cursor: pointer;
text-align: center;
font-size: 13px;
font-weight: 550;
border-radius: 1px;
margin-left: 41%;
}
* {
box-sizing: border-box;
}
#dialogoverlay {
display: none;
opacity: 0.5;
/*so that user can see through it*/
position: fixed;
top: 0px;
left: 0px;
background: black;
z-index: 10;
height: 100%;
width: 100%;
}
#dialogbox {
display: none;
position: fixed;
background: #ffffff;
border-radius: 1px;
border: 0.5px solid #ccc;
z-index: 10;
left: 25%;
top: 20%;
width: 50%;
height: 400px;
-webkit-animation: fadeEffect 0.3s;
animation: fadeEffect 0.3s;
}
#close-popup {
float: right;
background-color: red;
color: #474747;
font-size: 15px;
}
.header {
position: absolute;
width: 100.2%;
background-color: white;
height: 11%;
top: 5.4%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-centre {
width: 99%;
height: 77%;
margin-left: 3px;
margin-top: 46px;
}
#content-leftside {
width: 65%;
height: 100%;
float: left;
}
.tab {
overflow: hidden;
}
.tab button {
width: 33.3%;
height: 14%;
background-color: #acacac;
float: left;
color: white;
outline: none;
cursor: pointer;
padding: 6px;
transition: 0.3s;
border-right: 1px solid #fff;
}
.tab button:hover {
background-color: #474747;
}
.tab button.active {
background-color: #474747;
}
.tabcontent {
display: none;
padding: 6px 12px;
}
#content-rightside {
width: 35%;
height: 100%;
float: right;
background-color: #ffffff;
border-left: 1px solid #dddddd;
}
#right-topbar {
width: 100%;
height: 9%;
background-color: #474747;
color: #fff;
padding: 5px;
text-align: center;
transition: 0.3s;
}
.footer {
position: absolute;
width: 100.2%;
background-color: #474747;
height: 11%;
bottom: -5.6%;
left: 50%;
/* top: calc(50% - 50px); */
transform: translate(-50%, -50%);
}
/*------------------- UPLOAD AREA -----------------------*/
#drop-area {
border: 2px dashed #ccc;
border-radius: 8px;
width: 98%;
margin: 24px auto;
padding: 15px;
}
#progress-bar {
display: none;
}
#gallery {
margin-top: 5%;
}
#gallery img {
width: 55px;
height: 50px;
margin-bottom: 10px;
margin-left: 10px
}
.button {
display: inline-block;
padding: 10px;
background: #00a100;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
#fileElem {
display: none;
}
#upload-button {
font-size: 40px;
color: #00a100;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-photo" onclick="newAlert.performCustomAlert()">ADD MY PHOTO</button>
<div class="popup-upload">
<div id="dialogoverlay"></div>
<!--------------- SELECT MEDIA BOX ---------------->
<div id="dialogbox">
<!--------------- HEADER OF THE BOX ---------------->
<div class="header">
<!--------------- CLOSE POPUP ---------------->
<button id="close-popup" onclick="newAlert.ok()"><i class="fa fa-times" style="margin-top: 8px; margin-right: 7px;"></i></button>
<div class="select-media">
<i class="fa fa-camera" id="select-camera"></i>
<h2 id="select-media">SELECT YOUR MEDIA</h2>
</div>
</div>
<!--------------- CONTENT OF THE BOX ---------------->
<div class="content-centre">
<!--------------- LEFT CONTENT ---------------->
<div id="content-leftside">
<div class="tab">
<button class="tablinks" id="defaultOpen" onclick="openTab(event, 'Desktop')"><span class="fa fa-desktop"></span> Desktop</button>
<button class="tablinks" onclick="openTab(event, 'Facebook')"><span class="fa fa-facebook"></span> Facebook</button>
<button class="tablinks" onclick="openTab(event, 'Instagram')"><span class="fa fa-instagram"></span> Instagram</button>
</div>
<div id="Desktop" class="tabcontent">
<div id="drop-area">
<form class="my-form">
<span class="fa fa-cloud-upload" id="upload-button"></span>
<p id="drag-text">Drag & Drop Your <br> Photos or Videos <br> To Upload</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">or Select Files</label>
</form>
</div>
</div>
<div id="Facebook" class="tabcontent">
<h3>Facebook</h3>
</div>
<div id="Instagram" class="tabcontent">
<h3>Instagram</h3>
</div>
</div>
<!--------------- RIGHT CONTENT ---------------->
<div id="content-rightside">
<!--------------- RIGHT TOPBAR ---------------->
<div id="right-topbar">
<h1>Selected Media</h1>
</div>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
</div>
just replace previewFile function with this.
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onloadend = function() {
var gallleryDiv=document.getElementById('gallery');
var wrapperDiv = document.createElement("div");
let img = document.createElement('img');
img.src = reader.result;
wrapperDiv.className = "wrapperDiv";
wrapperDiv.appendChild(img)
var textbx = document.createElement("textarea");
wrapperDiv.appendChild(textbx);
var btn = document.createElement("button");
var tx = document.createTextNode("X");
btn.onclick = function() {$(this).closest(".wrapperDiv").remove()}
btn.appendChild(tx);
wrapperDiv.appendChild(btn);
gallleryDiv.appendChild(wrapperDiv);
}
}