580 lines
18 KiB
JavaScript
580 lines
18 KiB
JavaScript
|
var availableFeatures = document.querySelectorAll("#available-features li");
|
||
|
|
var displayFormat = document.querySelector("#display-format");
|
||
|
|
var featureToDisplay = document.querySelector("#feature-to-display");
|
||
|
|
var displayToFeature = document.querySelector("#display-to-feature");
|
||
|
|
var displayToFormat = document.querySelectorAll("#display-format li");
|
||
|
|
var availableToDisplay = document.querySelector("#available-features");
|
||
|
|
var displayincreaseBtn = document.getElementById("display-increase-btn");
|
||
|
|
var displayDecreaseBtn = document.getElementById("display-decrease-btn");
|
||
|
|
|
||
|
|
// features lists
|
||
|
|
var stocksFeatures = document.querySelectorAll("#stocks-features li");
|
||
|
|
var cryptoFeatures = document.querySelectorAll("#crypto-features li");
|
||
|
|
var forexFeatures = document.querySelectorAll("#forex-features li");
|
||
|
|
var currentWeatherFeatures = document.querySelectorAll(
|
||
|
|
"#current-weather-features li"
|
||
|
|
);
|
||
|
|
var dailyForecastFeatures = document.querySelectorAll(
|
||
|
|
"#daily-forecast-features li"
|
||
|
|
);
|
||
|
|
var newsFeatures = document.querySelectorAll("#news-features li");
|
||
|
|
var upcomingGamesFeatures = document.querySelectorAll(
|
||
|
|
"#upcoming-games-features li"
|
||
|
|
);
|
||
|
|
var pastGamesFeatures = document.querySelectorAll("#past-games-features li");
|
||
|
|
var liveGamesFeatures = document.querySelectorAll("#live-games-features li");
|
||
|
|
var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
|
||
|
|
var imagesFeatures = document.querySelectorAll("#images-features li");
|
||
|
|
var gifsFeatures = document.querySelectorAll("#gifs-features li");
|
||
|
|
var messagesFeatures = document.querySelectorAll("#messages-features li");
|
||
|
|
|
||
|
|
var allFeaturesList = [
|
||
|
|
stocksFeatures,
|
||
|
|
cryptoFeatures,
|
||
|
|
forexFeatures,
|
||
|
|
currentWeatherFeatures,
|
||
|
|
dailyForecastFeatures,
|
||
|
|
newsFeatures,
|
||
|
|
upcomingGamesFeatures,
|
||
|
|
pastGamesFeatures,
|
||
|
|
liveGamesFeatures,
|
||
|
|
teamStatsFeatures,
|
||
|
|
imagesFeatures,
|
||
|
|
gifsFeatures,
|
||
|
|
messagesFeatures,
|
||
|
|
];
|
||
|
|
|
||
|
|
// features remove buttons
|
||
|
|
var stocksRemoveBtn = document.getElementById("stocks-remove-btn");
|
||
|
|
var cryptoRemoveBtn = document.getElementById("crypto-remove-btn");
|
||
|
|
var forexRemoveBtn = document.getElementById("forex-remove-btn");
|
||
|
|
var currentWeatherRemoveBtn = document.getElementById(
|
||
|
|
"current-weather-remove-btn"
|
||
|
|
);
|
||
|
|
var dailyForecastRemoveBtn = document.getElementById(
|
||
|
|
"daily-forecast-remove-btn"
|
||
|
|
);
|
||
|
|
var newsRemoveBtn = document.getElementById("news-remove-btn");
|
||
|
|
var upcomingGamesRemoveBtn = document.getElementById(
|
||
|
|
"upcoming-games-remove-btn"
|
||
|
|
);
|
||
|
|
var pastGamesRemoveBtn = document.getElementById("past-games-remove-btn");
|
||
|
|
var liveGamesRemoveBtn = document.getElementById("live-games-remove-btn");
|
||
|
|
var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
|
||
|
|
var imagesRemoveBtn = document.getElementById("images-remove-btn");
|
||
|
|
var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
|
||
|
|
var messagesRemoveBtn = document.getElementById("messages-remove-btn");
|
||
|
|
|
||
|
|
var allFeaturesRemoveBtns = [
|
||
|
|
stocksRemoveBtn,
|
||
|
|
cryptoRemoveBtn,
|
||
|
|
forexRemoveBtn,
|
||
|
|
currentWeatherRemoveBtn,
|
||
|
|
dailyForecastRemoveBtn,
|
||
|
|
newsRemoveBtn,
|
||
|
|
upcomingGamesRemoveBtn,
|
||
|
|
pastGamesRemoveBtn,
|
||
|
|
liveGamesRemoveBtn,
|
||
|
|
teamStatsRemoveBtn,
|
||
|
|
imagesRemoveBtn,
|
||
|
|
gifsRemoveBtn,
|
||
|
|
messagesRemoveBtn,
|
||
|
|
];
|
||
|
|
// features increase buttons
|
||
|
|
var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
|
||
|
|
var cryptoincreaseBtn = document.getElementById("crypto-increase-btn");
|
||
|
|
var forexincreaseBtn = document.getElementById("forex-increase-btn");
|
||
|
|
var currentWeatherincreaseBtn = document.getElementById(
|
||
|
|
"current-weather-increase-btn"
|
||
|
|
);
|
||
|
|
var dailyForecastincreaseBtn = document.getElementById(
|
||
|
|
"daily-forecast-increase-btn"
|
||
|
|
);
|
||
|
|
var newsincreaseBtn = document.getElementById("news-increase-btn");
|
||
|
|
var upcomingGamesincreaseBtn = document.getElementById(
|
||
|
|
"upcoming-games-increase-btn"
|
||
|
|
);
|
||
|
|
var pastGamesincreaseBtn = document.getElementById("past-games-increase-btn");
|
||
|
|
var liveGamesincreaseBtn = document.getElementById("live-games-increase-btn");
|
||
|
|
var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
|
||
|
|
var imagesincreaseBtn = document.getElementById("images-increase-btn");
|
||
|
|
var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
|
||
|
|
var messagesincreaseBtn = document.getElementById("messages-increase-btn");
|
||
|
|
|
||
|
|
var allFeaturesIncreaseBtns = [
|
||
|
|
stocksincreaseBtn,
|
||
|
|
cryptoincreaseBtn,
|
||
|
|
forexincreaseBtn,
|
||
|
|
currentWeatherincreaseBtn,
|
||
|
|
dailyForecastincreaseBtn,
|
||
|
|
newsincreaseBtn,
|
||
|
|
upcomingGamesincreaseBtn,
|
||
|
|
pastGamesincreaseBtn,
|
||
|
|
liveGamesincreaseBtn,
|
||
|
|
teamStatsincreaseBtn,
|
||
|
|
imagesincreaseBtn,
|
||
|
|
gifsincreaseBtn,
|
||
|
|
messagesincreaseBtn,
|
||
|
|
];
|
||
|
|
|
||
|
|
// features decrease buttons
|
||
|
|
var stocksDecreaseBtn = document.getElementById("stocks-decrease-btn");
|
||
|
|
var cryptoDecreaseBtn = document.getElementById("crypto-decrease-btn");
|
||
|
|
var forexDecreaseBtn = document.getElementById("forex-decrease-btn");
|
||
|
|
var currentWeatherDecreaseBtn = document.getElementById(
|
||
|
|
"current-weather-decrease-btn"
|
||
|
|
);
|
||
|
|
var dailyForecastDecreaseBtn = document.getElementById(
|
||
|
|
"daily-forecast-decrease-btn"
|
||
|
|
);
|
||
|
|
var newsDecreaseBtn = document.getElementById("news-decrease-btn");
|
||
|
|
var upcomingGamesDecreaseBtn = document.getElementById(
|
||
|
|
"upcoming-games-decrease-btn"
|
||
|
|
);
|
||
|
|
var pastGamesDecreaseBtn = document.getElementById("past-games-decrease-btn");
|
||
|
|
var liveGamesDecreaseBtn = document.getElementById("live-games-decrease-btn");
|
||
|
|
var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
|
||
|
|
var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
|
||
|
|
var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
|
||
|
|
var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
|
||
|
|
|
||
|
|
var allFeaturesDecreaseBtns = [
|
||
|
|
stocksDecreaseBtn,
|
||
|
|
cryptoDecreaseBtn,
|
||
|
|
forexDecreaseBtn,
|
||
|
|
currentWeatherDecreaseBtn,
|
||
|
|
dailyForecastDecreaseBtn,
|
||
|
|
newsDecreaseBtn,
|
||
|
|
upcomingGamesDecreaseBtn,
|
||
|
|
pastGamesDecreaseBtn,
|
||
|
|
liveGamesDecreaseBtn,
|
||
|
|
teamStatsDecreaseBtn,
|
||
|
|
imagesDecreaseBtn,
|
||
|
|
gifsDecreaseBtn,
|
||
|
|
messagesDecreaseBtn,
|
||
|
|
];
|
||
|
|
|
||
|
|
const changeVarValue = () => {
|
||
|
|
stocksFeatures = document.querySelectorAll("#stocks-features li");
|
||
|
|
cryptoFeatures = document.querySelectorAll("#crypto-features li");
|
||
|
|
forexFeatures = document.querySelectorAll("#forex-features li");
|
||
|
|
currentWeatherFeatures = document.querySelectorAll(
|
||
|
|
"#current-weather-features li"
|
||
|
|
);
|
||
|
|
dailyForecastFeatures = document.querySelectorAll(
|
||
|
|
"#daily-forecast-features li"
|
||
|
|
);
|
||
|
|
newsFeatures = document.querySelectorAll("#news-features li");
|
||
|
|
upcomingGamesFeatures = document.querySelectorAll(
|
||
|
|
"#upcoming-games-features li"
|
||
|
|
);
|
||
|
|
pastGamesFeatures = document.querySelectorAll("#past-games-features li");
|
||
|
|
liveGamesFeatures = document.querySelectorAll("#live-games-features li");
|
||
|
|
teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
|
||
|
|
imagesFeatures = document.querySelectorAll("#images-features li");
|
||
|
|
gifsFeatures = document.querySelectorAll("#gifs-features li");
|
||
|
|
messagesFeatures = document.querySelectorAll("#messages-features li");
|
||
|
|
|
||
|
|
allFeaturesList = [
|
||
|
|
stocksFeatures,
|
||
|
|
cryptoFeatures,
|
||
|
|
forexFeatures,
|
||
|
|
currentWeatherFeatures,
|
||
|
|
dailyForecastFeatures,
|
||
|
|
newsFeatures,
|
||
|
|
upcomingGamesFeatures,
|
||
|
|
pastGamesFeatures,
|
||
|
|
liveGamesFeatures,
|
||
|
|
teamStatsFeatures,
|
||
|
|
imagesFeatures,
|
||
|
|
gifsFeatures,
|
||
|
|
messagesFeatures,
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
const addEventOnList = () => {
|
||
|
|
// for available feature
|
||
|
|
for (let i = 0; i < availableFeatures.length; i++) {
|
||
|
|
const availableFeature = availableFeatures[i];
|
||
|
|
availableFeature.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < availableFeatures.length; i++) {
|
||
|
|
availableFeatures[i].setAttribute("class", "");
|
||
|
|
}
|
||
|
|
if (availableFeature.getAttribute("class") == "active") {
|
||
|
|
availableFeature.setAttribute("class", "");
|
||
|
|
} else {
|
||
|
|
availableFeature.setAttribute("class", "active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// for display format
|
||
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
||
|
|
const display_format = displayToFormat[i];
|
||
|
|
display_format.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
||
|
|
displayToFormat[i].setAttribute("class", "");
|
||
|
|
}
|
||
|
|
if (display_format.getAttribute("class") == "active") {
|
||
|
|
display_format.setAttribute("class", "");
|
||
|
|
} else {
|
||
|
|
display_format.setAttribute("class", "active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const addEventonBtns = () => {
|
||
|
|
featureToDisplay.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < availableFeatures.length; i++) {
|
||
|
|
const availableFeature = availableFeatures[i];
|
||
|
|
if (availableFeature.getAttribute("class") == "active") {
|
||
|
|
availableFeature.remove();
|
||
|
|
availableFeature.setAttribute("class", "");
|
||
|
|
displayFormat.appendChild(availableFeature);
|
||
|
|
availableFeatures = document.querySelectorAll("#available-features li");
|
||
|
|
displayToFormat = document.querySelectorAll("#display-format li");
|
||
|
|
addEventOnList();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
displayToFeature.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
||
|
|
const availableFormat = displayToFormat[i];
|
||
|
|
if (availableFormat.getAttribute("class") == "active") {
|
||
|
|
availableFormat.remove();
|
||
|
|
availableFormat.setAttribute("class", "");
|
||
|
|
availableToDisplay.appendChild(availableFormat);
|
||
|
|
availableFeatures = document.querySelectorAll("#available-features li");
|
||
|
|
displayToFormat = document.querySelectorAll("#display-format li");
|
||
|
|
addEventOnList();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
addEventOnList();
|
||
|
|
addEventonBtns();
|
||
|
|
|
||
|
|
const addEventOnFeaturesList = () => {
|
||
|
|
allFeaturesList.map((value) => {
|
||
|
|
for (let i = 0; i < value.length; i++) {
|
||
|
|
const availableFeature = value[i];
|
||
|
|
availableFeature.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < value.length; i++) {
|
||
|
|
value[i].setAttribute("class", "");
|
||
|
|
}
|
||
|
|
if (availableFeature.getAttribute("class") == "active") {
|
||
|
|
availableFeature.setAttribute("class", "");
|
||
|
|
} else {
|
||
|
|
availableFeature.setAttribute("class", "active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
addEventOnFeaturesList();
|
||
|
|
|
||
|
|
// display increase function
|
||
|
|
displayincreaseBtn.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
||
|
|
var displayItem = displayToFormat[i];
|
||
|
|
|
||
|
|
if (displayItem.getAttribute("class") == "active") {
|
||
|
|
var prevElement = displayItem.previousElementSibling;
|
||
|
|
var currentText = displayItem.innerText;
|
||
|
|
|
||
|
|
displayItem.innerText = prevElement.innerText;
|
||
|
|
prevElement.innerText = currentText;
|
||
|
|
prevElement.setAttribute("class", "active");
|
||
|
|
displayItem.setAttribute("class", "");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// display decrease function
|
||
|
|
displayDecreaseBtn.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < displayToFormat.length; i++) {
|
||
|
|
var displayItem = displayToFormat[i];
|
||
|
|
|
||
|
|
if (displayItem.getAttribute("class") == "active") {
|
||
|
|
var nextElement = displayItem.nextElementSibling;
|
||
|
|
var currentText = displayItem.innerText;
|
||
|
|
|
||
|
|
displayItem.innerText = nextElement.innerText;
|
||
|
|
nextElement.innerText = currentText;
|
||
|
|
nextElement.setAttribute("class", "active");
|
||
|
|
displayItem.setAttribute("class", "");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// feature remove function
|
||
|
|
allFeaturesRemoveBtns.map((value, index) => {
|
||
|
|
value.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < allFeaturesList[index].length; i++) {
|
||
|
|
var item = allFeaturesList[index][i];
|
||
|
|
if (item.getAttribute("class") == "active") {
|
||
|
|
item.remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// feature increase function
|
||
|
|
allFeaturesIncreaseBtns.map((value, index) => {
|
||
|
|
value.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < allFeaturesList[index].length; i++) {
|
||
|
|
var item = allFeaturesList[index][i];
|
||
|
|
|
||
|
|
if (item.getAttribute("class") == "active") {
|
||
|
|
var prevElement = item.previousElementSibling;
|
||
|
|
var currentText = item.innerText;
|
||
|
|
item.innerText = prevElement.innerText;
|
||
|
|
prevElement.innerText = currentText;
|
||
|
|
prevElement.setAttribute("class", "active");
|
||
|
|
item.setAttribute("class", "");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// feature decrease function
|
||
|
|
allFeaturesDecreaseBtns.map((value, index) => {
|
||
|
|
value.addEventListener("click", () => {
|
||
|
|
for (let i = 0; i < allFeaturesList[index].length; i++) {
|
||
|
|
var item = allFeaturesList[index][i];
|
||
|
|
|
||
|
|
if (item.getAttribute("class") == "active") {
|
||
|
|
var nextElement = item.nextElementSibling;
|
||
|
|
var currentText = item.innerText;
|
||
|
|
|
||
|
|
item.innerText = nextElement.innerText;
|
||
|
|
nextElement.innerText = currentText;
|
||
|
|
nextElement.setAttribute("class", "active");
|
||
|
|
item.setAttribute("class", "");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// all features
|
||
|
|
var stocks = document.getElementById("stocks-features");
|
||
|
|
var crypto1 = document.getElementById("crypto-features");
|
||
|
|
var forex = document.getElementById("forex-features");
|
||
|
|
var currentWeather = document.getElementById("current-weather-features");
|
||
|
|
var dailyForecast = document.getElementById("daily-forecast-features");
|
||
|
|
var news = document.getElementById("news-features");
|
||
|
|
var upcomingGames = document.getElementById("upcoming-games-features");
|
||
|
|
var pastGames = document.getElementById("past-games-features");
|
||
|
|
var liveGames = document.getElementById("live-games-features");
|
||
|
|
var teamStats = document.getElementById("team-stats-features");
|
||
|
|
var images = document.getElementById("images-features");
|
||
|
|
var gifs = document.getElementById("gifs-features");
|
||
|
|
var messages = document.getElementById("messages-features");
|
||
|
|
|
||
|
|
var allFeatures = [
|
||
|
|
stocks,
|
||
|
|
crypto1,
|
||
|
|
forex,
|
||
|
|
currentWeather,
|
||
|
|
dailyForecast,
|
||
|
|
news,
|
||
|
|
upcomingGames,
|
||
|
|
pastGames,
|
||
|
|
liveGames,
|
||
|
|
teamStats,
|
||
|
|
images,
|
||
|
|
gifs,
|
||
|
|
messages,
|
||
|
|
];
|
||
|
|
|
||
|
|
// features select box
|
||
|
|
var newsSelect = document.getElementById("inputTransition63");
|
||
|
|
var upcomingGamesSelect = document.getElementById("inputTransition73");
|
||
|
|
var pastGamesSelect = document.getElementById("inputTransition83");
|
||
|
|
var liveGamesSelect = document.getElementById("inputTransition93");
|
||
|
|
var teamStatsSelect = document.getElementById("inputTransition103");
|
||
|
|
var allFeaturesSelectBox = [
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
newsSelect,
|
||
|
|
upcomingGamesSelect,
|
||
|
|
pastGamesSelect,
|
||
|
|
liveGamesSelect,
|
||
|
|
teamStatsSelect,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
];
|
||
|
|
|
||
|
|
// features select add buttons
|
||
|
|
var newsAddBtn = document.getElementById("inputTransitionBtn63");
|
||
|
|
var upcomingGamesAddBtn = document.getElementById("inputTransitionBtn73");
|
||
|
|
var pastGamesAddBtn = document.getElementById("inputTransitionBtn83");
|
||
|
|
var liveGamesAddBtn = document.getElementById("inputTransitionBtn93");
|
||
|
|
var teamStatsAddBtn = document.getElementById("inputTransitionBtn103");
|
||
|
|
var allFeaturesSelectAddBtn = [
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
newsAddBtn,
|
||
|
|
upcomingGamesAddBtn,
|
||
|
|
pastGamesAddBtn,
|
||
|
|
liveGamesAddBtn,
|
||
|
|
teamStatsAddBtn,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
];
|
||
|
|
|
||
|
|
allFeaturesSelectAddBtn.map((value, index) => {
|
||
|
|
if (value != null) {
|
||
|
|
value.addEventListener("click", () => {
|
||
|
|
var tag = document.createElement("li");
|
||
|
|
tag.innerHTML = allFeaturesSelectBox[index].value;
|
||
|
|
allFeatures[index].appendChild(tag);
|
||
|
|
changeVarValue();
|
||
|
|
addEventOnFeaturesList();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// features input file
|
||
|
|
var imagesFile = document.getElementById("inputText11");
|
||
|
|
var gifsFile = document.getElementById("inputText1112");
|
||
|
|
|
||
|
|
var allFeaturesFile = [
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
imagesFile,
|
||
|
|
gifsFile,
|
||
|
|
null,
|
||
|
|
];
|
||
|
|
// features file add button
|
||
|
|
var imagesFileAddBtn = document.getElementById("inputTextBtn11");
|
||
|
|
var gifsFileAddBtn = document.getElementById("inputTextBtn1112");
|
||
|
|
|
||
|
|
var allFeaturesFileAddBtn = [
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
imagesFileAddBtn,
|
||
|
|
gifsFileAddBtn,
|
||
|
|
null,
|
||
|
|
];
|
||
|
|
|
||
|
|
allFeaturesFileAddBtn.map((value, index) => {
|
||
|
|
if (value !== null) {
|
||
|
|
value.addEventListener("click", () => {
|
||
|
|
var tag = document.createElement("li");
|
||
|
|
tag.innerHTML = allFeaturesFile[index].files[0].name;
|
||
|
|
allFeatures[index].appendChild(tag);
|
||
|
|
changeVarValue();
|
||
|
|
addEventOnFeaturesList();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// features input text
|
||
|
|
var stocksText = document.getElementById("inputText3");
|
||
|
|
var cryptoText = document.getElementById("inputText4");
|
||
|
|
var forexText = document.getElementById("inputText5");
|
||
|
|
var currentWeatherText = document.getElementById("inputText6");
|
||
|
|
var dailyForecastText = document.getElementById("inputText7");
|
||
|
|
var messagesText = document.getElementById("inputText13");
|
||
|
|
|
||
|
|
var allFeaturesText = [
|
||
|
|
stocksText,
|
||
|
|
cryptoText,
|
||
|
|
forexText,
|
||
|
|
currentWeatherText,
|
||
|
|
dailyForecastText,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
messagesText,
|
||
|
|
];
|
||
|
|
|
||
|
|
// features text add button
|
||
|
|
var stocksTextAddBtn = document.getElementById("inputTextBtn3");
|
||
|
|
var cryptoTextAddBtn = document.getElementById("inputTextBtn4");
|
||
|
|
var forexTextAddBtn = document.getElementById("inputTextBtn5");
|
||
|
|
var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
|
||
|
|
var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
|
||
|
|
var messagesTextAddBtn = document.getElementById("inputTextBtn13");
|
||
|
|
|
||
|
|
var allFeaturesTextAddBtn = [
|
||
|
|
stocksTextAddBtn,
|
||
|
|
cryptoTextAddBtn,
|
||
|
|
forexTextAddBtn,
|
||
|
|
currentWeatherTextAddBtn,
|
||
|
|
dailyForecastTextAddBtn,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
messagesTextAddBtn,
|
||
|
|
];
|
||
|
|
|
||
|
|
allFeaturesTextAddBtn.map((value, index) => {
|
||
|
|
if (value !== null) {
|
||
|
|
value.addEventListener("click", () => {
|
||
|
|
var tag = document.createElement("li");
|
||
|
|
tag.innerHTML = allFeaturesText[index].value;
|
||
|
|
allFeatures[index].appendChild(tag);
|
||
|
|
changeVarValue();
|
||
|
|
addEventOnFeaturesList();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var startButton = document.getElementById("start-btn");
|
||
|
|
|
||
|
|
// start the display
|
||
|
|
|
||
|
|
startButton.addEventListener("click", () => {
|
||
|
|
var HTML = document.getElementById('display-format').innerHTML;
|
||
|
|
console.log('pressed');
|
||
|
|
console.log(HTML);
|
||
|
|
|
||
|
|
|
||
|
|
fetch("/start", {
|
||
|
|
method:"PUT",
|
||
|
|
|
||
|
|
|
||
|
|
body:JSON.stringify(HTML)
|
||
|
|
});
|
||
|
|
});
|