I am having trouble setting up local storage to save the textArea input for each of the time blocks. I have commented out 3 different sections where I was playing with different techniques to try and make it work. However, I was not able to set it to save the text in local storage and get it so that it stay on the page when you revisit it. Please let me know if you can help me with a solution to fix it. I have provided a link to my repository. please look at the feature/calendar branch because that is where my code resides. I also snippet the code into here for you to look at. I am new to coding so please be patient with me. I am still learning the terminology and different ways to reach the objective/goal.
saveBtn = document.getElementsByClassName('saveBtn');
// creates a new instance for time and date.
const currentDay = luxon.DateTime.now().toLocaleString(luxon.DateTime.DATETIME_MED);
// format's the date and time.
var newFormat = {
// The selected date format from luxon documentation.
...luxon.DateTime.DATETIME_MED,
// added the day of the week.
weekday: 'long'
};
// creates a new instance for time and date.
const newCurrentDay = luxon.DateTime.now().toLocaleString(newFormat);
// checks if time works.
// creates a new instance to parse the date and time into the header html.
var ol = document.querySelector('header');
// creates the ol element.
const list = document.createElement('ol');
// styles the <ol> element.
list.setAttribute('style', 'color: white; background-color: black; display: flex; flex-direction: column; justify-content: center; align-items: center;');
// displays newCurrentDay variable in the header as readable text.
list.innerText = newCurrentDay;
// appends the newCurrentDay variable to the ol element.
ol.appendChild(list);
// creates an array to change the blocks bases on their time in the text area element.
const timeBlocks = Array.from(document.getElementsByClassName('description'));
// assigning timeBlocks based on time.
for (var i = 0; i < timeBlocks.length; i++) {
// gets the current hour to connect the color changing feature in the text area element based on the 24hr format.
const now = luxon.DateTime.now().hour.toLocaleString();
// if statement's to change the color of the blocks based on time using the 24hr time format.
if (timeBlocks[i].id < now) {
timeBlocks[i].classList.add('past');
}
if (timeBlocks[i].id > now) {
timeBlocks[i].classList.add('future');
}
if (timeBlocks[i].id === now) {
timeBlocks[i].classList.add('present');
}
}
// // * testing
// saveBtn = document.getElementsByClassName('saveBtn');
// var save = addEventListener('click', function () {
// // creates a new instance to parse the date and time into the header html.
// var textarea = document.querySelector('textarea');
// this.window.localStorage.setItem('textarea', textarea.value);
// this.window.localStorage.getItem('textarea');
// });
// TODO: can use save button for event text to persist even when refreshed.
// $('.saveBtn').on("click", function () {
// window.localStorage.setItem('task', $(this).siblings('.description').val());
// })
// loadTask = function () {
// return window.localStorage.getItem('task');
// }
// let taskArray = [{
// 21: "",
// 22: "",
// 23: "",
// }];
// $('.saveBtn').on("click", function () {
// window.localStorage.setItem('tasks', JSON.stringify(taskArray));
// JSON.parse(window.localStorage.getItem('tasks'));
// var storedData = window.localStorage.getItem(taskArray);
// if (storedData) {
// taskArray = JSON.parse(storedData);
// alert(taskArray);
// }
// });
// TODO: event is saved into time block using local storage
// TODO: have my minutes actively change.
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;
}
<!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="./assets/css/style.css" />
<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">
<!-- Time blocks go here -->
<div class="row">
<div class="col-2 border-top border-dark">
9:00PM
</div>
<textarea class="description col-8" id="21">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
10:00PM
</div>
<textarea class="description col-8" id="22">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
11:00PM
</div>
<textarea class="description col-8" id="23">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
12:00AM
</div>
<textarea class="description col-8" id="0">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<!-- <div class="row">
<div class="col-2 border-top border-dark">
1:00PM
</div>
<textarea class="description col-8" id="13">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
2:00PM
</div>
<textarea class="description col-8" id="14">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
3:00PM
</div>
<textarea class="description col-8" id="15">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
4:00PM
</div>
<textarea class="description col-8" id="16">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
5:00PM
</div>
<textarea class="description col-8" id="17">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/luxon#2.3.1/build/global/luxon.min.js"></script>
<script src="/assets/javascript/script.js"></script>
</body>
</html>
I don't follow which of this code you are expecting to do what, so I will comment on the problems of each.
this.window.localStorage.getItem('textarea');
This line doesn't really do anything. You're getting the value, but not using it anywhere.
loadTask = function () {
return window.localStorage.getItem('task');
}
Nothing calls this function, so that doesn't do anything either.
JSON.parse(window.localStorage.getItem('tasks'));
Again, here, you're not doing anything with the return value, so it goes nowhere.
However, I was not able to set it to save the text in local storage and get it so that it stay on the page when you revisit it.
You need to load data out of localStorage when DOMContentLoaded is fired. Use your browser's developer tools to first ensure that the data you want is getting saved. Then, when the page is loaded, fetch the data and populate the form as you see fit.
Related
So I have been trying to highlight the words as the TTS speaks but I am unable to do so. This is my first project so I'm quite stuck at where I am now. I'm also not practically fond with programming so I'm using this opportunity to learn. Below are the codes I have done. If you could guide me through I would greatly appreciate it!
// Initialize new SpeechSynthesisUtterance object
let speech = new SpeechSynthesisUtterance();
// Set Speech Language
speech.lang = "en";
let voices = []; // global array of available voices
window.speechSynthesis.onvoiceschanged = () => {
// Get List of Voices
voices = window.speechSynthesis.getVoices();
// Initially set the First Voice in the Array.
speech.voice = voices[0];
// Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
let voiceSelect = document.querySelector("#voices");
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};
document.querySelector("#rate").addEventListener("input", () => {
// Get rate Value from the input
const rate = document.querySelector("#rate").value;
// Set rate property of the SpeechSynthesisUtterance instance
speech.rate = rate;
// Update the rate label
document.querySelector("#rate-label").innerHTML = rate;
});
document.querySelector("#volume").addEventListener("input", () => {
// Get volume Value from the input
const volume = document.querySelector("#volume").value;
// Set volume property of the SpeechSynthesisUtterance instance
speech.volume = volume;
// Update the volume label
document.querySelector("#volume-label").innerHTML = volume;
});
document.querySelector("#pitch").addEventListener("input", () => {
// Get pitch Value from the input
const pitch = document.querySelector("#pitch").value;
// Set pitch property of the SpeechSynthesisUtterance instance
speech.pitch = pitch;
// Update the pitch label
document.querySelector("#pitch-label").innerHTML = pitch;
});
document.querySelector("#voices").addEventListener("change", () => {
// On Voice change, use the value of the select menu (which is the index of the voice in the global voice array)
speech.voice = voices[document.querySelector("#voices").value];
});
document.querySelector("#start").addEventListener("click", () => {
// Set the text property with the value of the textarea
speech.text = document.querySelector("textarea").value;
// Start Speaking
window.speechSynthesis.speak(speech);
});
document.querySelector("#pause").addEventListener("click", () => {
// Pause the speechSynthesis instance
window.speechSynthesis.pause();
});
document.querySelector("#resume").addEventListener("click", () => {
// Resume the paused speechSynthesis instance
window.speechSynthesis.resume();
});
document.querySelector("#cancel").addEventListener("click", () => {
// Cancel the speechSynthesis instance
window.speechSynthesis.cancel();
});
.btn-success {
width: 22%;
}
.btn-warning {
width: 22%;
}
.btn-info {
width: 22%;
}
.btn-danger {
width: 22%;
}
.center {
margin: auto;
width: 75%;
padding: 5px;
}
.Settings {
justify-content: center;
}
input[type="range"] {
accent-color: #0d6efd;
}
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/index.css" />
<title>Text to Speech</title>
</head>
<div class = "mb-5">
<center><img src = img/TweenLogo.png></center>
</div>
<body class="container mt-5 bg-light">
<h2 style="text-align: center; font-family: Poppins;"><span style="color: rgb(31, 31, 31);">Experience</span> <span style="color: rgb(0, 194, 255);">AI Voices</span></h2>
<br>
<h4 style="text-align: center; font-size: 20px; font-family: Poppins;"><span style="color: rgb(31, 31, 31);">Try out our live demo without logging in, or login to enjoy the features!</span></h4>
<h4 style="text-align: center; font-size: 20px; font-family: Poppins;"><span style="color: rgb(31, 31, 31); font-weight: 300;">For a better sounding, use voices which are marked (Natural).</span></h4>
<br>
<p class="mt-4" style= "font-size: 20px; font-family: Poppins;">Select Voice</p>
<select id="voices" class="form-select bg-primary text-light" style= "font-size: 18px; font-family: Poppins;"></select>
<div class="d-flex mt-5 container Settings" style= "font-size: 20px; font-family: Poppins;">
<div>
<p class="">Volume</p>
<input type="range" min="0.01" max="1" value="1" step="0.01" id="volume" class = "bg-primary"/>
<span id="volume-label" class="ms-2">1</span>
</div>
<div class="mx-5">
<p class="">Speed</p>
<input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
<span id="rate-label" class="ms-2">1</span>
</div>
<div>
<p class="">Pitch</p>
<input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
<span id="pitch-label" class="ms-2">1</span>
</div>
</div>
<textarea class="form-control bg-light mt-5 shadow-sm" style= "font-size: 18px; font-family: Poppins;" cols="30" rows="10" placeholder="Type here..."></textarea>
<center><div class="mb-5">
<button id="start" class="btn btn-success mt-5 me-3 shadow-sm" onmousedown="speak();">Start</button>
<button id="pause" class="btn btn-warning mt-5 me-3 shadow-sm">Pause</button>
<button id="resume" class="btn btn-info mt-5 me-3 shadow-sm">Resume</button>
<button id="cancel" class="btn btn-danger mt-5 me-3 shadow-sm">Cancel</button>
</div>
<div id="marker"></div>
<br><br>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tabbis</title>
<link rel="stylesheet" href="../assets/css/dist/style-default.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
/* Reset */
#import url('https://fonts.googleapis.com/css?family=Quicksand:600&display=swap');
* {
margin: 0;
font-family: quicksand;
}
body {
padding: 4rem;
background: #eee;
#media screen and (max-width: 460px) {
padding: 0;
}
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: blue;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: transparent;
padding: 5px;
right: 0;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 50px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
</head>
<body>
<div data-tabs>
<button>INDEX</button>
<button>NORTH</button>
<button>SOUTH</button>
<button>EXTENSION</button>
</div>
<div data-panes>
<!-- Index Tab -->
<div>INDEX</div>
<!-- North Tab -->
<div>
<!-- NE Tabs -->
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TN</button>
</div>
<div data-panes>
<div>
<div data-tabs>
<button>DNE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
<div data-panes>
<button>DNE JPGs HERE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
</div>
<!-- NW Tabs -->
<div>
<div data-tabs>
<button>DNW</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
<div data-panes>
<button>DNW JPGs HERE</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
</div>
<!-- TN Tab -->
<div>Pane TN</div>
</div>
</div>
<!-- SOUTH -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TS</button>
</div>
<div data-panes>
<!-- SE Tabs -->
<div>
<div data-tabs>
<button>DSE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
<div data-panes>
<button>DSE JPGs HERE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
</div>
<!-- SW Tabs -->
<div>
<div data-tabs>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
<div data-panes>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
</div>
<!-- TS Tab -->
<div>Pane TS</div>
</div>
</div>
<!-- EXTENSION -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TSX</button>
</div>
<div data-panes>
<!-- SEX Tabs -->
<div>
<div data-tabs>
<button onclick="onClick()">DSEX</button>
<button onclick="onClick()">HSEX</button>
<button onclick="onClick()">KSEX</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
<div data-panes>
<button>
<div id="dsex">DSEX</div>
</button>
<button>
<div id="hsex>">HSEX</div>
</button>
<button>
<div id="ksex>"></div>
</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
</div>
<!-- SWX Tabs -->
<div>
<div data-tabs>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
<div data-panes>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
</div>
<!-- TSX Tab -->
<div>Pane TS</div>
</div>
</div>
<script src='script.js'></script>
</div>
<script src="../assets/js/dist/tabbis.es6.js"></script>
<script>
tabbis({
memory: true
});
</script>
</body>
</html>
var elementaries = '../assets/elementaries/';
var elemLoc = [];
var dsex = [
"this.jpg",
"that.jpg"
];
var hsex = [
"this.jpg",
"that.jpg"
];
// ON click of quadrant (DSEX...) do this
function onClick() {
let id = event.srcElement.id; // returns the id of the button (tab 8-0)
let quadrant = document.getElementById(`${id}`).innerHTML.toLowerCase(); // returns the value of the button ie DSEX
getElemLoc(quadrant); // calls function to make an array of elementaries based on quadrant
loadElementaries(quadrant); // loads elementaries under proper tab
}
// Function makes an array of elementaries based on quadrant
var getElemLoc = (q) => {
elemLoc = [];
let elem = window[q];
elem.forEach(function (img) {
let loc = `${elementaries}${q}/${img}`;
elemLoc.push(loc);
})
};
// Loads elementaries to proper div based on quadrant.
var loadElementaries = (quad) => {
for (var i = 0; i < elemLoc.length; i++) {
document.getElementById(`${quad}`).innerHTML = document.getElementById(`${quad}`).innerHTML + `<a class="thumbnail" href="${elemLoc[i]}"><img src="${elemLoc[i]}" width="350px" height="250px" border="0" /><span><img src="${elemLoc[i]}" width="900" height="700" /><br /></span></a> <br />`;
}
};
When going to the tab Extension/East/DSEX my innerhtml code works perfectly, but if I try the hsex tab the inner html in loadElementaries fails. Does anyone have any idea what's going on. Maybe the way the DOM is loading between tabs?
document.getElementById(`${quad}`).innerHTML works for dsex tab but not hsex...
I'm at work so I'm limited to using client side JS/HTML/CSS so nodejs isn't an option unfortunately.
I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized
My html code is:
<div class="image mt-3 mb-3" id="sliderImages">
<img src="../static/images/1.jpg" width="400" height="180">
<img src="../static/images/2.jpg" width="400" height="180">
<img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div id="sliderOutput">
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
</div>
<div class="row mb-3 mt-3">
<div class="col-4 mr-5">
« Home
</div>
<div class="col-4 ml-5">
Next » </div>
</div>
</div>
My CSS code is:
<style>
.rangeslider {
width: 50%;
margin: 0 auto;
position: absolute;
}
.myslider {
-webkit-appearance: none;
background: white;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 180px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #000080;
width: 33%;
height: 20px;
}
.col-4 {
text-align: center;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
#sliderOutput>div {
display: none;
}
#sliderOutput>div.visible,
#sliderOutput>div:first-child {
display: block;
}
#p1{
height: 10px;
}
</style>
My JS code is:
<script>
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
});
});
</script>
My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.
There is no enough details about what json you want to store in the localStorage so that's why i am giving you the basic idea of how you can store a json in localStorage.
Basically you can't store json in localStorage directly but you can store that json in form of a stringand then converting that string(json) into json. Here is the basic example :
// setting json to localStorage
var jsonToBeStoredInLocalStorae = {
sliderImages = [
{path : 'image-path-here'},
{path : 'image-path-here'}
],
phrase : 'your image phrase'
};
localStorage.setItem('slider_json',JSON.stringify(jsonToBeStoredInLocalStorae ));
When you want to get that json from localStorage so you will do like this
//Here you are getting that json in `string` form from `localStorage` and parsing it to `json`
var localStorageJson = JSON.parse(localStorage.getItem('slider_json'));
In localStorage you can only save text strings, so if you want to save it is only one value per record, you insert a name and value to localStorage, but if you want to save an object, you must transform it to a text string with the function JSON.stringify
Writing some js for an html file where i input a sentence (string). and when i click a button, it outputs the amount of each individual vowel, excluding y and not paying attention to punctuation. I cannot use var so i am trying to make this work using let. I believe i'm on the right path here,starting with the vowel a, yet if the sentence doesn't contain an a i get an error. I can't think of what to do next. Any thoughts?
'use strict';
let vButton = document.querySelectorAll('#vowels');
vButton.forEach(function(blip) {
blip.addEventListener('click', function(evt) {
evt.preventDefault();
console.log('click');
let vowelString = document.getElementById('roboInput'),
sentence = vowelString.value;
if (sentence !== '') {
let aMatches = sentence.match(/a/gi).length;
alert("a - " + aMatches);
}
vowelString.value = '';
});
});
a {
cursor: pointer;
}
.well-robot {
min-height: 340px;
}
.input-robot {
width: 100%;
min-height: 100px;
}
.output-robot {
border: 1px solid #000000;
min-height: 150px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div class="container">
<div class="alert alert-info">
Hello! I'm a smart robot. I can do many interesting things. Type something below and click a button to watch me work!
</div>
<div class="row">
<div class="col-sm-4">
<img src="./robot.gif">
</div>
<div class="col-sm-8 well well-robot">
<textarea id="roboInput" placeholder="Input something here!" class="input-robot"></textarea>
<div class="btn-group btn-group-justified">
<a class="btn btn-default" id="vowels">Count Vowels</a>
<a class="btn btn-default" id="anagrams">Count Anagrams</a>
<a class="btn btn-default" id="distance">Word Distance</a>
</div>
<div id="robotResult" class="output-robot">
</div>
</div>
</div>
</div>
When there's no match for the regular expression, .match() returns null, not an empty array, so you can't get the length. You need to check for that.
let matches = sentence.match(/a/gi);
let matchLength = matches ? matches.length : 0;
alert('a - ' + matchLength);
If I understand your question correctly, you may want something like this:
'use strict';
let vButton = document.querySelectorAll('#vowels');
vButton.forEach(function(blip) {
blip.addEventListener('click', function(evt) {
evt.preventDefault();
//console.log('click');
let vowelString = document.getElementById('roboInput'),
sentence = vowelString.value;
if (sentence) {
let result = {a: 0, e: 0, i: 0, o: 0, u: 0 };
for(var i = 0, l = sentence.length; i < l; i++) {
if(result.hasOwnProperty(sentence[i]))
result[sentence[i]]++;
}
console.log(result);
}
vowelString.value = '';
});
});
a {
cursor: pointer;
}
.well-robot {
min-height: 340px;
}
.input-robot {
width: 100%;
min-height: 100px;
}
.output-robot {
border: 1px solid #000000;
min-height: 150px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div class="container">
<div class="alert alert-info">
Hello! I'm a smart robot. I can do many interesting things. Type something below and click a button to watch me work!
</div>
<div class="row">
<div class="col-sm-4">
<img src="./robot.gif">
</div>
<div class="col-sm-8 well well-robot">
<textarea id="roboInput" placeholder="Input something here!" class="input-robot"></textarea>
<div class="btn-group btn-group-justified">
<a class="btn btn-default" id="vowels">Count Vowels</a>
<a class="btn btn-default" id="anagrams">Count Anagrams</a>
<a class="btn btn-default" id="distance">Word Distance</a>
</div>
<div id="robotResult" class="output-robot">
</div>
</div>
</div>
</div>
I am trying to embed a form on my wix website. The idea is that when someone submits the form, a "thank you" page will be displayed instead of the original parent page. Right now, the way the code is written, the "thank you" page is displayed upon submit, but is shown within the iframe, with scrolls up/down and to the sides. I want to force the "thank you" page to be displayed out of the iframe.
I'm a novice to coding, so I would really appreciate it if you could tell me what code I should enter and where in the code it should go. I've included the original code of the form.
Thanks in advance,
Anat
<!-- AT Popup Beta 2017 BEGIN -->
<link href="//cdn-media.web-view.net/popups/style/v1/main_combined.css" rel="stylesheet" type="text/css" />
<div id="_atPopupSU" class="shown"><div class="bl-template row-fluid bl-content-removable popup-dir-ltr" id="template-body" data-page-width="383" data-new-from-template="false"> <!-- BEGIN TEMPLATE OUTER --> <div class="bl-template-main-wrapper span12" id="bl_0" valign="top"> <!-- BEGIN TEMPLATE MARGIN (Outside Margin - Padding) --> <div class="bl-template-margin span12" id="bl_1" valign="top"> <!-- BEGIN TEMPLATE WRAPPER (Background) --> <div class="template-main-table bl-template-background span12" id="bl_2" valign="top"> <!-- BEGIN TEMPLATE CONTAINER (Border, Inner Padding) --> <div class="bl-template-border span12" id="bl_3" valign="top"> <!-- BEGIN ZONES CONTAINER --> <!--zone-marked--> <div class="bl-zone bl-zone-dropable bl-zone-body row-fluid" id="bl_4" style="margin-top: 0px !important; background-color: transparent;" name="BodyZone" valign="top" height=""> <div class="bl-block bl-block-signuptextpage" id="bl_5" blocktype="signuptextpage" name="signuptextpage" style="width: 383px;"><div class="bl-block-content" contenteditable="false"> <div> <div class="bl-block-content-table bl-block-dir-ltr span12"> <div class="bl-block-content-row bl-block-content-first-row bl-block-content-last-row span12" style="border-radius: 10px;"> <div class="bl-block-content-row-inner span12" style="padding: 50px 20px 18px;"><div class="bl-block-content-column bl-block-content-new-column span12"><div class="bl-padding-columns bl-content-wrapper span12"> <div class="bl-signup-container pull-left span12" at-form-width="12" style="border: 0px solid #191919; border-radius: 5px; padding: 8px 10px; background-color: transparent;"> <div class="bl-block-content-item bl-block-content-item-signupfieldpage bl-content-item-unremovable fields-left" style="text-align: center; margin-bottom: 14px;" data-is-auto-fill="true"><input type="text" maxlength="50" class="signup-field span12 input-ltr first-input" readonly="readonly" data-field-type="email" data-field-source="Email" data-mandatory="true" placeholder="Email " data-field-validation-msg="This is not a valid email" style="font-size: 12px; margin-bottom: 14px; height: 30px; line-height: 12px; font-family: arial, helvetica, sans-serif; text-align: left;" data-custom-values="" data-input-type="text"><input type="text" maxlength="50" class="signup-field span12 input-ltr" readonly="readonly" data-field-type="text" data-field-source="Ext1" data-mandatory="false" placeholder="Full Name" data-field-validation-msg="This is not a valid full name" style="font-size: 12px; margin-bottom: 14px; height: 30px; line-height: 12px; font-family: arial, helvetica, sans-serif; text-align: left;" data-custom-values="" data-input-type="text"><div class="confirm-emails" data-field-validation-msg="Please approve in order to receive our emails" style="font-family: arial, helvetica, sans-serif;"> <div class="checkbox ltr"> <label style="cursor: auto;"> <input type="checkbox" disabled="disabled" style="text-align: left;"><label class="confirm-label dir-label" style="font-family: arial, helvetica, sans-serif; text-align: left; cursor: auto; font-size: 11px; color: #000000;">I approve receiving emails</label></label></div> </div></div> <div class="bl-padding-columns bl-content-wrapper-columns" style="text-align: center;"> <div class="bl-block-button-content-wrapper" style="display: block; border-radius: 5px; background-color: #4ea3a3;"> <div class="bl-block-button-content-item-wrapper" style="font-size: 16px; padding: 9px;"> <div class="bl-block-content-item bl-block-content-item-button bl-content-item-unremovable" style="min-width: 1px; min-height: 16px; display: block; text-align: center; text-decoration: none;"><span style="font-size:14px;"><strong><span style="color:#FFFFFF;"><span style="font-family:arial,helvetica,sans-serif;">Sign Up Now</span></span></strong></span></div> </div> </div> </div> </div> </div></div></div> </div> </div> </div> </div></div> </div> <!-- END ZONES CONTAINER --> </div> <!-- END TEMPLATE CONTAINER --> </div> <!-- END TEMPLATE WRAPPER --> </div> <!-- END TEMPLATE MARGIN --> </div> <!-- END TEMPLATE OUTER --></div></div>
<script type='text/javascript'>
(function () {
var _atpopq = window._atpopq || (window._atpopq = []);
window._atpopobj = {};
if (!_atpopq.loaded) {
var atpopjs = document.createElement('script');
atpopjs.type = 'text/javascript';
atpopjs.async = true;
atpopjs.src = '//cdn-media.web-view.net/popups/lib/v1/loader.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(atpopjs, s);
_atpopq.loaded = true;
}
_atpopq.push(['UserId', 'zzae3adduwau']);
_atpopq.push(['PopupId', 'z3zdad']);
_atpopq.push(['IsraelCode', '104']);
_atpopq.push(['CountryCode', '226']);
_atpopq.push(['IsEmbed', true]);
_atpopq.push(['IgnoreMainCss', true]);
_atpopq.push(['OnEventCallback', 'handleATPopupEvent']);
})();
</script>
<script type="text/javascript">
//Sample event handler function
function handleATPopupEvent(ev,args){
switch(ev){
case 'display':
//Do this when the popup is displayed
break;
case 'close':
//Do this when the popup gets closed by the user
break;
case 'submit':
//Do this when popup gets submitted and the user doesn't get redirected to a URL
break;
}
}
</script>
<!-- AT Popup Beta END -->
As I understand this part of code, you should just place the code line:
window.top.location.href = "http://www.yourthankyoupage.com";
in case of 'submit'.