I'm a bit new to technology.
i"m trying to build a dashboard. But when I pass the attribute id to the cards. it's not displaying the values.
Sometimes I'm only getting value for the 1st card only. do I have to add additional div? or any other ways?
how to resolve these?.
window.onload = function() {
getCovidStats();
}
function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/225')
.then(function(resp) { return resp.json() })
.then(function(data) {
let population = data.location.country_population;
let update = data.location.last_updated;
let confirmedCases = data.location.latest.confirmed;
let deaths = data.location.latest.deaths;
document.getElementById('population').innerHTML = population.toLocaleString('en');
document.getElementById('update').innerHTML = update.substr(0, 10);
document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";
})
.catch(function() {
console.log("error");
})
setTimeout(getCovidStats, 43200000) // update every 12 hours
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>* {box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-size: smaller;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
</style>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<h4>Cases</h4>
<h1 id="population"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<h4>Cases</h4>
<h1 id="cases"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<h4>Cases</h4>
<h1 id="deaths"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<h4>Cases</h4>
<h1 id="percent"></h1>
</div>
</div>
</div>
</body>
</html>
above is how I'm getting. I need to display the values in the red boxed areas.
This happend because this line
document.getElementById('update').innerHTML = update.substr(0, 10);
you don't have an element with the id update. And JS crash in that line. You need to comment that line or add a validator to check if that element exist.
window.onload = function() {
getCovidStats();
}
function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/225')
.then(function(resp) { return resp.json() })
.then(function(data) {
let population = data.location.country_population;
let update = data.location.last_updated;
let confirmedCases = data.location.latest.confirmed;
let deaths = data.location.latest.deaths;
document.getElementById('population').innerHTML = population.toLocaleString('en');
document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";
})
.catch(function() {
console.log("error");
})
setTimeout(getCovidStats, 43200000) // update every 12 hours
}
* {box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-size: smaller;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<h4>Cases</h4>
<h1 id="population"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<h4>Cases</h4>
<h1 id="cases"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<h4>Cases</h4>
<h1 id="deaths"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<h4>Cases</h4>
<h1 id="percent"></h1>
</div>
</div>
</div>
</body>
</html>
You are missing an HTML block. Add this to your HTML below the population data:
<div class="column">
<div class="card">
<h3>Card</h3>
<h4>Cases</h4>
<h1 id="update"></h1>
</div>
</div>
Just a quick tips, you can put your CSS styles in an external file and the access it so that your HTML file won't get messy. Create a new file (style.css) and copy all your CSS and paste into the style.css. Then add <link rel="stylesheet" type="text/css" href="style.css"> to the head of HTML.
Related
I have some divs generated dynamically. Once all the divs are selected submit button has to be enabled, can someone please help me?
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
.card.selected{
background: #0173fb;
}
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
In this code I am adding 'selected' class for the div onclick. I want this in pure javascript.. no jquery or any other library.
Thanks in advance.
try like this. Pure javascript.
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName('btn')[0].setAttribute("disabled","true");
});
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
})
}
.card{
padding: 8px;
border: 1px solid #eee;
cursor: pointer;
}
ul, li{
list-style: none;
}
.card.selected{
background-color: rgb(155,155,155);
}
.btn{
padding: 10px;
margin: 10px;
}
<body>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items 1
</div>
<div class="card">
card items 2
</div>
<div class="card">
card items 3
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
</body>
Or you can add eventListener without for. Like below:
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
document.body.addEventListener('click', function(e) {
if(e.target.classList.contains('card')){
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
}
});
Compare the available divs with the selected divs and enable the button if it matches.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
height: 10px;
background-color: red;
margin-bottom: 10px;
}
.selected{
background-color: blue;
}
</style>
</head>
<body>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<button class="btn" disabled>Click</button>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
// add seclected class to clicke div
e.target.classList.add('selected');
// get all selected/clicked divs
let allSelected = document.querySelectorAll('.selected');
// compare available divs with selected divs
if(card.length === allSelected.length){
console.log("Enable button", btn[0])
btn[0].onclick = () => {
alert("Button clicked");
};
// enable button
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>
EDIT: Troubleshooting (https://github.com/Bhanumathi-a/cards)
Your problem with your code is that you add the "selected" class on sub elements too! `` When you add a console log on the event handler you see that there are other elements than the divs get selected which gives you the filled array that matches the length of the available divs:
You can clearly see that the array contains more elements than only divs.
To fix this, find the nearest div.card element from the clicked children:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member FDIC</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
min-width: 360px;
}
header {
display: block;
}
a.logo {
display: inline-block;
font-size: 50px;
color: #0173fb;
text-decoration: none;
padding: 15px;
}
nav {
display: inline-block;
}
.loanDetails {
background: #f8f8f8;
display: flex;
}
.cardBlk {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cardItm {
display: flex;
padding: 10px;
}
#media(min-width:1240px) {
.container {
max-width: 1140px;
}
.cardItm {
width: 24%;
}
}
#media(min-width:1920px) {
.container {
max-width: 1820px;
}
.cardItm {
width: 33%;
}
}
.card {
background: #f8f8f8;
color: #2a2b2d;
border-radius: 10px;
padding: 15px 15px 30px 15px;
box-sizing: border-box;
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center;
cursor: pointer;
justify-content: center;
}
.card .info, .card .checked {
height: 39px;
width: 39px;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
}
.card .info {
background: url(assets/exclamation.png) no-repeat 0 0;
}
.card .checked {
background: url(assets/checked\ active.png) no-repeat 0 0;
}
.card img {
width: auto;
height: auto;
max-width: 50px;
margin: 25px auto;
}
.card.selected, .card:hover {
background: #0173fb;
color: #fff;
}
.card:hover .info, .card.selected .info {
background-image: url(assets/exclamation\ white.png);
}
.card:hover .checked, .card.selected .checked {
background-image: url(assets/checked\ inactive.png);
}
.btnBlk {
text-align: center;
display: block
}
.btn {
background: #0173fb;
border-radius: 25px;
padding: 10px 25px;
color: #fff;
text-align: center;
border: 1px solid #0173fb;
margin: 10px auto;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
}
.btn:disabled {
background: #9ac5fb;
border-color: #9ac5fb;
cursor: default;
}
</style>
</head>
<body>
<header>
<div class="container">
Logo
<!-- <nav class="nav">
<ul>
<li>Dashboard</li>
<li>Welcome, John Doe</li>
</ul>
</nav> -->
</div>
</header>
<main>
<header class="loanDetails">
<div class="container">
loan
<progress value="30" max="100" id=progress>30%</progress>
</div>
</header>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card 1">
<span class="checked"></span>
<img src="assets/location.png" alt="">
<div>
<h2>Get started</h2>
<span>(100% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card 2">
<span class="info"></span>
<img src="assets/property.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/income.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/assets.png" alt="">
<div>
<h2>Get started</h2>
<span>(50% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/real estate.png" alt="">
<div>
<h2>Get started</h2>
<span>(70% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/declarations.png" alt="">
<div>
<h2>Get started</h2>
<span>(90% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/e-concent.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
</ul>
<div class="btnBlk">
<button class="btn" id="submitBtn" disabled>Submit Application</button>
</div>
</section>
</main>
<footer>
</footer>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
let progress = document.getElementById('progress');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function (e) {
let closest = e.target.closest("div.card");
closest.classList.add('selected');
progress.value = progress.value + 10;
let allSelected = document.querySelectorAll('div.selected');
if (card.length === allSelected.length) {
btn[0].onclick = () => {
console.log('clicked');
};
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>
I have a page with four headers with id of heading-1, heading-2, heading-3 and heading-4. These headers have contents in div containers with the ids of content-1, content-2, content-3 and content-4 respectively.
The four headings are shown by default but only the contents of "content-1" div is shown while the remaining three containers "content-2", "content-3", and "content-4" are hidden and not displayed.
To NOT display these contents by default, I set their "display" property to "none". To display "content-1", I added class name of "active" which set the "display" property to block.
To give the "heading-1" a green color, I added class name of "active" which set the color to green
The contents of any container "content-1, content-2, content-3 and content-4 should ONLY SHOW when their corresponding headings "heading-1", "heading-2", "heading-3" and "heading-4" is clicked. On clicking it, only the clicked header and its corresponding content container should be given the class names "active" for the color and display styles to be applied respectively.
Only one content and header can be active at a time. If a new header is clicked, the class name "active" should be removed on any header and content that has it and added to the clicked one.
I already wrote out the code for this but it is not scalable and can really get overwhelming when you have lots of headers and contents.
What is the best way/method/code to achieve this solution?
Note: The code should be in VANILLA JavaScript and NOT Jquery.
Thanks.
const headingOne = document.getElementById("heading-1");
const headingTwo = document.getElementById("heading-2");
const headingThree = document.getElementById("heading-3");
const headingFour = document.getElementById("heading-4");
const contentOne = document.getElementById("content-1");
const contentTwo = document.getElementById("content-2");
const contentThree = document.getElementById("content-3");
const contentFour = document.getElementById("content-4");
document.addEventListener("click", function(event) {
if (event.target === headingOne) {
headingOne.classList.add("active");
headingTwo.classList.remove("active");
headingThree.classList.remove("active");
headingFour.classList.remove("active");
contentOne.classList.add("active");
contentTwo.classList.remove("active");
contentThree.classList.remove("active");
contentFour.classList.remove("active");
} else if (event.target === headingTwo) {
headingTwo.classList.add("active");
headingOne.classList.remove("active");
headingThree.classList.remove("active");
headingFour.classList.remove("active");
contentTwo.classList.add("active");
contentOne.classList.remove("active");
contentThree.classList.remove("active");
contentFour.classList.remove("active");
} else if (event.target === headingThree) {
headingThree.classList.add("active");
headingOne.classList.remove("active");
headingTwo.classList.remove("active");
headingFour.classList.remove("active");
contentThree.classList.add("active");
contentOne.classList.remove("active");
contentTwo.classList.remove("active");
contentFour.classList.remove("active");
} else if (event.target === headingFour) {
headingFour.classList.add("active");
headingOne.classList.remove("active");
headingThree.classList.remove("active");
headingTwo.classList.remove("active");
contentFour.classList.add("active");
contentOne.classList.remove("active");
contentThree.classList.remove("active");
contentTwo.classList.remove("active");
}
})
.container {
display: flex;
max-width: 1000px;
margin: 0 auto;
background: whitesmoke;
border: 1px solid #ccc;
border-radius: 10px;
padding: 50px;
}
.heading {
font-size: 28px;
line-height: 140%;
cursor: pointer;
}
.heading.active {
color: green;
}
.box {
width: 50%;
}
.content {
font-size: 18px;
line-height: 25px;
display: none;
}
.content.active {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Headers/Contents</title>
</head>
<body>
<div class="container">
<div class="box box-1">
<h2 class="heading active" id="heading-1">Heading One</h2>
<h2 class="heading" id="heading-2"> Heading Two</h2>
<h2 class="heading" id="heading-3">Heading Three</h2>
<h2 class="heading" id="heading-4">Heading Four</h2>
</div>
<div class="box box-2">
<div class="content active" id="content-1">
<p>Content One</p>
</div>
<div class="content" id="content-2">
<p>Content Two</p>
</div>
<div class="content" id="content-3">
<p>Content Three</p>
</div>
<div class="content" id="content-4">
<p>Content Four</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Here is another approach to shorten the code , using a common class for heading and content without requiring to set an id.
let H2 = document.querySelectorAll(".box-1 h2.heading");
let AllSet = document.querySelectorAll( ".box-2 > div.content,.box-1 h2.heading ");
for (let e of H2) {
e.addEventListener("click", function() {
let linkedClass = this.classList.item(1);
toggleActive(linkedClass);
});
}
function toggleActive(linkedClass) {
for (let i = 0; i < AllSet.length; i++) {
AllSet[i].classList.remove("active");
if (AllSet[i].classList.item(1) == linkedClass) {
AllSet[i].classList.add("active");
}
}
}
.container {
display: flex;
max-width: 1000px;
margin: 0 auto;
background: whitesmoke;
border: 1px solid #ccc;
border-radius: 10px;
padding: 50px;
}
.heading {
font-size: 28px;
line-height: 140%;
cursor: pointer;
margin:0;
}
.heading.active {
color: green;
}
.box {
flex:1;
display:flex;
flex-direction:column;
}
.content:nth-child(even){background:#bee}
.content {
font-size: 18px;
line-height: 25px;
display: none;
flex:1;
background:#eeb
}
.content.active {
display: block;
}
<div class="container">
<div class="box box-1">
<h2 class="heading heading-1 active">Heading One</h2>
<h2 class="heading heading-2"> Heading Two</h2>
<h2 class="heading heading-3">Heading Three</h2>
<h2 class="heading heading-4">Heading Four</h2>
<h2 class="heading heading-5">Heading Five</h2>
</div>
<div class="box box-2">
<div class="content heading-1 active">
<p>Content One</p>
</div>
<div class="content heading-2">
<p>Content Two</p>
</div>
<div class="content heading-3">
<p>Content Three</p>
</div>
<div class="content heading-4">
<p>Content Four</p>
</div>
<div class="content heading-5">
<p>Content Five</p>
</div>
</div>
</div>
You could do something along these lines:
const headings = document.querySelectorAll(".heading");
const contents = document.querySelectorAll(".content");
document.addEventListener("click", function(event) {
// If we just clicked on a heading
if (event.target.classList.contains('heading')) {
// Extract the number from the id
const id = parseInt(event.target.id.match(/\d+/)[0], 10);
// Only add the active class on the current heading
for (let i = 0; i < headings.length; i++) {
const heading = headings[i];
heading.classList[heading === event.target ? 'add' : 'remove']('active');
}
// Only add the active class on the current content
for (let i = 0; i < contents.length; i++) {
const content = contents[i];
content.classList[content.id === `content-${id}` ? 'add' : 'remove']('active');
}
}
})
.container{display:flex;max-width:1000px;margin:0 auto;background:#f5f5f5;border:1px solid #ccc;border-radius:10px;padding:50px}.heading{font-size:28px;line-height:140%;cursor:pointer}.heading.active{color:green}.box{width:50%}.content{font-size:18px;line-height:25px;display:none}.content.active{display:block}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Headers/Contents</title></head><body> <div class="container"> <div class="box box-1"> <h2 class="heading active" id="heading-1">Heading One</h2> <h2 class="heading" id="heading-2"> Heading Two</h2> <h2 class="heading" id="heading-3">Heading Three</h2> <h2 class="heading" id="heading-4">Heading Four</h2> </div><div class="box box-2"> <div class="content active" id="content-1"> <p>Content One</p></div><div class="content" id="content-2"> <p>Content Two</p></div><div class="content" id="content-3"> <p>Content Three</p></div><div class="content" id="content-4"> <p>Content Four</p></div></div></div><script src="app.js"></script></body></html>
I am trying to set-up this daily scheduler. I am working on the 9am slot. What I want to happen is for the person to click on the box to the right of the time, make a text input, and click the save button to save the text and display it in that time slot.
Am I able to achieve this with just HTML or will I need to implement JS to make this work?
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea{
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description{
white-space: pre-wrap;
}
.time-block{
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06AED5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all .3s ease-in-out;
}
.gray {
background-color: gray;
}
.red {
background-color: red;
}
.green{
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="libs/moment.min.js"></script>
<title>Work Day Scheduler</title>
</head>
<body>
<header class="jumbotron">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for scheduling your work day</p>
<p id="currentDay" class="lead"></p>
</header>
<div class="container">
<!-- Timeblocks go here -->
<!-- 9am -->
<div class="row">
<div class='col-2 hour'> 9am
</div>
<div class="col-8 description red border-bottom">
<input class="border-0 form-control textarea bg-transparent" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" class="btn btn-primary mb-2">Save</button>
</div>
</div>
<!-- 10am -->
<div class="row">
<div class='col-2 hour'> 10am
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 11am -->
<div class="row">
<div class='col-2 hour'> 11am
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 12am -->
<div class="row">
<div class='col-2 hour'> 12pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 1pm -->
<div class="row">
<div class='col-2 hour'> 1pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 2pm -->
<div class="row">
<div class='col-2 hour'> 2pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 3pm -->
<div class="row">
<div class='col-2 hour'> 3pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 4pm -->
<div class="row">
<div class='col-2 hour'> 4pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 5pm -->
<div class="row">
<div class='col-2 hour'> 5pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
</body>
</html>
Demo: jsFiddle DEMO
HTML
All the HTML you need
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>
JavaScript
We'll use Window.localStorage to save the data so that the user can exit or refresh the page.
Create a 24h to AM/PM converter:
const ampm = h => (h%12||12)+(h<12?'AM':'PM');
Use Window.localStorage to read (and store) your LS Object in the Browser memory.
const LS = JSON.parse(localStorage.scheduler||'{}'); // String is now an Object
Create and store the HTML template as JS String
const template_schedule = h => `<div class="Schedule">
<div class="Schedule-time">${ampm(h)}</div>
<textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
<div class="Schedule-save">SAVE</div>
</div>`;
and append that string into the DOM using Element.insertAdjacentHTML given a start from and end to hour:
for (let h=from; h<=to; h++) {
EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}
Now the fun part.
Save on textarea blur!
The textarea can be blurred by clicking outside of the textarea - on the "SAVE" element or anywhere else. So it'll work in every case. (Show the transparent "SAVE" text by using CSS :focus and the adjacend sibling combinator +)
const save = ev => {
const h = ev.target.getAttribute('data-h'); // Get the hour
LS[h] = ev.target.value; // Update Object
localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};
EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
el.addEventListener('blur', save);
});
Live example:
Since StackOverflow sandboxes the live-snippet iframe and the localStorage will not work - head to this jsFiddle DEMO
And here's the SO-Snippet for completeness sake:
const from = 9; // use 24h format here
const to = 17; // use 24h format here
// Use window.localStorage to retrieve and store your data object as string
const LS = JSON.parse(localStorage.scheduler||'{}'); // now an Object
const EL_scheduler = document.querySelector('.Scheduler');
const ampm = h => (h%12||12)+(h<12?'AM':'PM');
const template_schedule = h => `<div class="Schedule">
<div class="Schedule-time">${ampm(h)}</div>
<textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
<div class="Schedule-save">SAVE</div>
</div>`;
// Populate Scheduler
for (let h=from; h<=to; h++) {
EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}
// Logic to save the data:
// On textarea blur Event - save the data by reading the data-h value
const save = ev => {
const h = ev.target.getAttribute('data-h'); // Get the hour
LS[h] = ev.target.value; // Update Object
localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};
EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
el.addEventListener('blur', save);
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;}
body {font: 16px/1.4 sans-serif; color:#555;}
h1, h3 {text-align:center; font-weight:300;}
.Scheduler {
width: calc(100% - 40px);
max-width: 500px;
margin: 1em auto;
}
.Schedule {
border-top: 1px dashed #aaa;
display: flex;
padding: 2px 0;
}
.Schedule > *{
padding: 0.5em 0.8em;
}
.Schedule-time {
width: 70px;
text-align: right;
}
.Schedule-desc {
flex: 1;
font: inherit;
min-height: 70px;
resize: vertical;
background: #eee;
border: none;
border-right: 1px solid #555;
}
.Schedule-desc:focus {
outline: none;
background: #cbe8ef;
}
.Schedule-desc:focus+.Schedule-save{
color: #fff; /* Show the SAVE text on textarea :focus */
}
.Schedule-save {
color: transparent;
background: #06AED5;
border-radius: 0 1em 1em 0;
display: flex;
align-items: center;
user-select: none;
}
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>
I am mocking a slide show animation by W3 Schools by integrating it into one of my websites. The slides do change in right times but the fade top/bot commands do not seem to do anything. I have checked my divs and javascript but it gets tricking trying to mock something and translating it into my website
is there an issue on my animation callout or what may be the problem?
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2550);
}
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
}
header a:hover {
color: #fffffff;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="w3-content w3-section" style="max-width:500px">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">
</div>
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
</body>
</html>
In javascript the class name you have used is mySlides
var x = document.getElementsByClassName("mySlides");
but in HTML you have used class name as slides
Change on either side and it will start working.
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2550);
}
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
}
header a:hover {
color: #fffffff;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="w3-content w3-section" style="max-width:500px">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">
</div>
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
</body>
</html>
LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>