Codepen
let rock = document.querySelector(".rock-btn");
let paper = document.querySelector(".paper-btn");
let scissors = document.querySelector(".scissors-btn");
let select = document.querySelector(".select");
let computerChoice = document.querySelector(".comp-choice");
let result = document.querySelector(".result");
rock.addEventListener("click", function press() {
select.innerHTML = `Select: Rock`;
let randomNum = Math.floor(Math.random() * 3);
let compChoice = "";
if (randomNum == 0) {
compChoice = "Rock";
} else if (randomNum == 1) {
compChoice = "Paper";
} else if (randomNum == 2) {
compChoice = "Scissors";
}
result.style.removeProperty("color");
computerChoice.innerHTML = `Computer choose: ${compChoice}`;
if (compChoice == "Rock") {
result.innerHTML = "Result: It's a draw!";
result.style.color = "#5c3000";
} else if (compChoice == "Paper") {
result.innerHTML = "Result: Oh no, You lost!";
result.style.color = "#8d1d1d";
} else if (compChoice == "Scissors") {
result.innerHTML = "Result: Congratulations, You won!";
result.style.color = "#1e612b";
}
});
I want to click a rock,paper,scissors and then wait 1 seconds.Basically i want it delay. When i put it normal way it wont work after first time. I tried to solve on my on but sadly couldn't. I included codepen so that its easier for you to solve hopefully. Thanks for your help, I appreciate it.
❌ don't add a setTimeout of 1s,
✅ but instead, add some nice effect with CSS animations of 1s.
and for solving the bug
bug: first-time animation work, other times not start animation
you can use a setTimeout of also 1ms
1ms is enough for javascript to delete the class, so after we successfully deleted that class, now we can re-add it so we have an animation
Javascript that I added:
/* THIS IS THE TRICK */
setTimeout(() => {
result.classList.add("animation")
}, 1); // 1ms of Timeout
CSS that I added:
/* animation, this is added by javascript */
.animation {
animation: move 1s ease-in-out;
}
#keyframes move {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
don't make the user wait for no reason,
instead make them see some beautiful animation that makes the user think that the site is faster.
with setTimeout the user thinks that the site is a lot slower.
I also refactored it for you, so you don't need to write multiple time the same code.
using forEach() and JSON object and arrays and switch statement.
/* the buttons */
let rock = document.querySelector(".rock-btn");
let paper = document.querySelector(".paper-btn");
let scissors = document.querySelector(".scissors-btn");
/* elements where we will put a output the outputs */
let select = document.querySelector(".select");
let computerChoice = document.querySelector(".comp-choice");
let result = document.querySelector(".result");
/* all the buttons are one array,
so we can use them in a forEach loop,
without repeating a lot the code */
let allButtons = [rock, paper, scissors];
/* this is a array of choices (strings)
it must need to not be modified the order
1. Rock 2. Paper 3. Scrissors */
let allChoices = ["Rock", "Paper", "Scissors"];
/* the firt {} is for victory,
the second is for draw,
the third is for losing */
/* and this array contain all the information you need
for outputing the victory string with the color in #result */
let allResults = [{
message: "Result: Congratulations, You won!",
color: "#1e612b"
}, {
message: "Result: It's a draw!",
color: "#5c3000"
}, {
message: "Result: Oh no, You lost!",
color: "#8d1d1d"
}];
/* from this array we can see if user win or lose,
it must need to not be modified the order
1. Rock 2. Paper 3. Scrissors */
let winLoseArray = [{
toWin: allChoices[2],
toLose: allChoices[1]
}, {
toWin: allChoices[0],
toLose: allChoices[2]
}, {
toWin: allChoices[1],
toLose: allChoices[0]
}]
/* forEach loop help us not writing the same code multiple times */
allButtons.forEach((choice, index) => {
choice.addEventListener("click", () => {
/* resetting the styles and animations */
result.classList.remove("animation");
result.style.removeProperty("color");
/* random number */
let randomNum = Math.floor(Math.random() * 3);
/* get the choices of user, and computer */
let compChoice = allChoices[randomNum];
let userChoice = allChoices[index];
/* display the choices in the UI */
select.innerHTML = `select: ${userChoice}`;
computerChoice.innerHTML = `Computer choose: ${compChoice}`;
/* instead of If Else, We Will be using "switch" */
switch (compChoice) {
case winLoseArray[index].toWin:
result.innerHTML = allResults[0].message;
result.style.color = allResults[0].color;
break;
case winLoseArray[index].toLose:
result.innerHTML = allResults[2].message;
result.style.color = allResults[2].color;
break;
default:
result.innerHTML = allResults[1].message;
result.style.color = allResults[1].color;
break;
}
/* THIS IS THE TRICK */
setTimeout(() => {
result.classList.add("animation")
}, 1);
});
});
.container {
margin-top: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 25px;
}
h1 {
font-size: 45px;
}
p {
font-size: 35px;
margin: 0;
}
.btn {
padding: 8px 16px;
font-size: 20px;
background-color: #c2255c;
color: #fff;
border-radius: 20px;
margin-right: 5px;
}
.rock-btn:hover {
background-color: #70bdc9;
}
.paper-btn:hover {
background-color: #f8e9d1;
}
.scissors-btn:hover {
background-color: #89d0b4;
}
.rock-btn {
background-color: #4cacbc;
}
.paper-btn {
background-color: #f6e3c5;
}
.scissors-btn {
background-color: #6cc4a1;
}
img {
width: 100px;
border-radius: 10px;
}
.icons {
display: flex;
justify-content: space-between;
gap: 15px;
}
body {
background-color: rgb(136, 152, 167);
}
/* animation, this is added by javascript */
.animation {
animation: move 1s ease-in-out;
}
#keyframes move {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
<div class="container">
<h1>Rock Paper Scissors!</h1>
<p class="select">Select:</p>
<div class="icons">
<img alt="" src="https://www.shareicon.net/data/256x256/2015/11/15/672596_open_512x512.png" class="scissors-btn">
<img src="https://i.pinimg.com/originals/f5/2a/23/f52a2361f819785f37256d8eacd64a0d.png" class="paper-btn">
<img src="https://img.icons8.com/emoji/256/rock-emoji.png" class="rock-btn">
</div>
<p class="comp-choice">Computer choice:</p>
<p class="result">Result:</p>
</div>
<script src="script.js"></script>
Related
I am making a game, where once you click a button, lines of text appear, basically telling a story. I already have an image but I want after a specific line of text to display a second one. I literally have tried everything but it doesn't work...
Code:
var objects = [
"The rain goes clickety clack tack. It was a cold night and a ruthful glimmer of azure pervaded the skies, which were dormantly laid above the cosmopolitan city. The children quietly wept under tattered rags and the grown ups began celebrating on the filth-stained juice joints, while the Plenilune was shining brightly upon them, giving an everlasting impression of cruel romanticism.",
"Me and Mary went on a ride with the new red car through the woods. We had an argument about Helena. And then an accident happened. The car crashed. I-I hope she's dead.",
"I wandered the woods and the memories slowly faded away. The insects were buzzing and the birds were chirping. As I was walking towards the forest's insides, I came across a group of people mourning over a mutilated body."
];
function toggleFullScreen(elem) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
const paragraph = document.getElementById("doThis");
const writeSpeed = 30;
let letterIndex = 0;
let objectsIndex = 0;
function write() {
const sentence = objects[objectsIndex];
if (letterIndex > sentence.length) {
letterIndex = 0;
objectsIndex++;
return;
}
paragraph.innerHTML += sentence.charAt(letterIndex);
letterIndex++;
setTimeout(write, writeSpeed);
}
function help() {
paragraph.innerHTML = "";
write();
};
html {
background-color: black;
}
button {
position:center;
background-color:lightblue;
width: 3.5%;
}
#doThis {
text-indent: 50px;
color:white;
font:Bahnschrift SemiLIght;
font-size: 4;
text-align: center;
letter-spacing: 2px;
}
#doThis::after {
content: "";
width: 5px;
height: 20px;
background: white;
display: inline-block;
}
#doThis::after {
animation: blink 1.5s steps(2) infinite;
}
#keyframes blink {
0% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<center><img src = "Caniglia-Image-07_Karl-Liebknecht_Kollwitz-1-1024x663.jpg"><id= "img"></center>
<input type="button" value="Fullscreen" onclick="toggleFullScreen(document.body)">
<div class = "form">
<button onclick="help();">click</button>
<p id="doThis" data-index="-1"></p>
</div>
<script src = "lines.js"></script>
</body>
</html>
function write() {
const sentence = options[optionsIndex];
if (letterIndex > sentence.length) {
letterIndex = 0;
optionsIndex++;
return;
}
if (optionsIndex === 2 && letterIndex === 0) { // For the paragraph where you want it entered
// Your code here, for example:
paragraph.innerHTML += '<div><img src="image.png" /></div>';
}
paragraph.innerHTML += sentence.charAt(letterIndex);
letterIndex++;
setTimeout(write, writeSpeed);
}
Im trying to build a weather app to learn JS. I want to make the weather stats change with a fade out and then fade in. I cant seem to get it to work, based on what i googled its complicated because i used a "display:none" to hide these elements at first. In case that's the issue what should i've written instead of "display:none"? and how can i do the fadeout/in effect? in case the "display:none" isnt a real issue here, just answer the latter question. Which is the one making me suffer right now.
Its my first post here if i forgot something tell me and i'll edit it into the post! i'll leave a JSFiddle of my code so you can run the code and make the running window bigger. In case you want to read the code here without testing for some reason here's some parts of it (since posting the whole code would take A LOT of lines).
HTML
<div class="containerStats" class="hidden">
<p id="bigPadding">Look up a city for it's weather stats.</p>
<div id="divTemperature" class="hidden">
<p id="temperature">19°</p>
<p id="metricCelcius">C</p>
</div>
<div class="hidden">
<p id="city">Rosario</p>
<div id="iconText">
<p id="weatherText">Sunny</p>
<img id="weatherIcon" src="http://openweathermap.org/img/wn/01d#2x.png" alt="">
</div>
</div>
<div id="spaceBetween" class="hidden">
<div>
<p id="windSpeed"> Wind</p>
<p id="humidity">Humidity</p>
</div>
<div>
<p id="windSpeedKM"> 32km/h</p>
<p id="humidityPorcentage">62%</p>
</div>
</div>
</div>
CSS
.containerStats {
display: flex;
position: absolute;
bottom: 22px;
margin: 20px;
margin-left: 28px;
padding: 10px;
text-align: left;
align-items: center;
justify-content: space-around;
background-color: rgba(34, 32, 32, 0.253);
backdrop-filter: blur(12px);
border-radius: 10px;
}
#divTemperature {
display: flex;
vertical-align: baseline;
}
#temperature {
font-size: 82px;
vertical-align: bottom;
}
#metricCelcius {
font-size: 62px;
font-weight: 300;
margin-right: 22px;
vertical-align: center;
}
#spaceBetween {
display: flex;
justify-content: space-between;
margin-left: 2vw;
}
#windSpeedKM {
margin-left: 4vw;
}
#humidityPorcentage {
margin-left: 4vw;
}
.hidden {
display: none !important;
opacity: 0;
transition: 1s;
}
.show {
transition: 1s;
opacity: 1;
}
#bigPadding {
padding: 25px;
}
JS (ALL)
//Var declarations for search bar.
let inputCity = document.getElementById("searchBar");
let cityName = inputCity.value;
let searchIcon = document.getElementById("searchIcon");
let recentCitySearches = document.querySelectorAll("p.recentCity");
//Var declarations for stats output.
let temperatureOutput = document.getElementById("temperature");
let cityOutput = document.getElementById("city");
let iconOutput = document.getElementById("weatherIcon");
let adjectiveOutput = document.getElementById("weatherText");
let windOutput = document.getElementById("windSpeedKM");
let humidityOutput = document.getElementById("humidityPorcentage");
//API link-creation vars
let api_url = "https://api.openweathermap.org/data/2.5/weather?q=";
let api_key = "&appid=8d6d613f6cb4621a5c237a580219c44c";
let unit = "&units=metric";
let i = 0;
let start = true;
let finishedStatsChange = true;
//Send input to by pressing enter.
inputCity.addEventListener("keydown", enter => {
if (enter.key == "Enter") {
//Change city name variable, and call function for upper case.
cityName = inputCity.value;
let latestSearch = firstUpperCase(cityName);
//Update history to show the city name.
recentCitySearches[i].style.opacity = 0;
recentCitySearches[i].innerHTML = latestSearch;
recentCitySearches[i].style.opacity = 1;
//Clean input text.
inputCity.value = "";
cityName = latestSearch;
i++;
//Finish api url by adding the city name from input, call getData() function-
let full_url = api_url + cityName + unit + api_key;
getData(full_url);
if (i > 2) {
i = 0;
}
}
})
//Send input to by clicking search icon instead of pressing enter.
searchIcon.addEventListener("click", search => {
//Change city name variable, and call function for upper case.
cityName = inputCity.value;
let latestSearch = firstUpperCase(cityName);
//Update history to show the city name.
recentCitySearches[i].style.opacity = 0;
recentCitySearches[i].innerHTML = latestSearch;
recentCitySearches[i].style.opacity = 1;
//Clean input text.
inputCity.value = "";
i++;
cityName = latestSearch;
//Finish api url by adding the city name from input, call getData() function-
let full_url = api_url + cityName + unit + api_key;
getData(full_url);
//Execute hideShow()
hideShow();
if (i > 2) {
i = 0;
}
})
//Function always make first letter upper case.
function firstUpperCase(cityName) {
//Assign touppercase() to first letter of string, then add the rest of the sentence by using the actual sentence with the first letter sliced.
latestSearch = cityName[0].toUpperCase() + cityName.slice(1);
return latestSearch;
}
//Click a city from history and see its weather again. (City 1)
recentCitySearches[0].addEventListener("click", clickHistory => {
cityName = recentCitySearches[0].innerText;
let full_url = api_url + cityName + unit + api_key;
getData(full_url);
})
//Click a city from history and see its weather again. (City 2)
recentCitySearches[1].addEventListener("click", clickHistory => {
cityName = recentCitySearches[1].innerText;
let full_url = api_url + cityName + unit + api_key;
getData(full_url);
})
//Click a city from history and see its weather again. (City 3)
recentCitySearches[2].addEventListener("click", clickHistory => {
cityName = recentCitySearches[2].innerText;
let full_url = api_url + cityName + unit + api_key;
getData(full_url);
})
//Hide initial message and show weather stats.
function hideShow() {
if (start == true) {
let statsHidden = document.querySelectorAll(".hidden");
for (let i = 0; i < statsHidden.length; i++) {
statsHidden[i].classList.replace('hidden', 'show');
}
let initialMessage = document.getElementById("bigPadding");
initialMessage.classList.add("hidden");
}
start = false;
}
//Change background img depending on city.
//Get info with API.
async function getData(full_url) {
const api_respone = await fetch(full_url);
const data = await api_respone.json();
//Save stats in vars.
const cityTemperature = data.main.temp;
const cityHumidity = data.main.humidity;
const cityWindSpeed = data.wind.speed;
const weatherAdjective = data.weather[0].description;
const weatherIcon = data.weather[0].icon;
changeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon);
//Once all stats are replaced, execute hideShow()
hideShow();
}
//Change weather stats info depending on city
function changeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon) {
temperatureOutput.innerText = Math.round(cityTemperature) + "°";
cityOutput.innerText = cityName;
iconOutput.src = "http://openweathermap.org/img/wn/" + weatherIcon + "#2x.png";
adjectiveOutput.innerText = firstUpperCase(weatherAdjective);
humidityOutput.innerText = Math.round(cityHumidity) + "%";
windOutput.innerText = Math.round(cityWindSpeed * 3.6) + "km/h";
finishedStatsChange = true;
}
So while getting this to work i found a number of bad practices which may have been confusing you in your html:
declared some divs with multiple class types:
<div class="class1" class="class2"> this should instead be written as a div within a div:
<div class="class1"><div class="class2"></div></div>
or in one div separated by a space
<div class="class1 class2 class3"></div>
declared nested divs as the same classes, in some scenarios this is okay but for your purpose this was incorrect
so i fixed these in your html and then added some extra css to continue the previous styling:
.containerStats {left: 22px;}
.hidden {
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.show {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
then in order to make the html div contaning the weather stats fade in and out with the css we put in, we need to fade out the block of html, wait for the animation and then fade it back in. this was best achieved through a new function call and a change to a previous function to chain them together.
async function getData(full_url) {
// get data
animateChangeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon);
}
function animateChangeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon) {
weatherStats = document.getElementById('weatherStats');
weatherStats.setAttribute('class', 'hidden');
if (i == 1){
changeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon)
}else {
setTimeout(() => { changeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon); }, 1000);
}
setTimeout(() => { weatherStats.setAttribute('class', 'show'); }, 1000);
}
I feel like this whole page could have been restructured to make these jobs a lot simpler and easier, but this was the best that i could do without making major changes to anything you did
A full JSFiddle can be found here https://jsfiddle.net/q59n37rx/
I'm trying to create a quiz that tests users awareness of real and fake emails. What I want to do is have the question displayed at the top saying "Real or Fake", then have an image displayed underneath which the user needs to look at to decided if it's real or fake. There are two buttons, real and fake, and regardless of whether they choose the right answer I want to swap the original image with annotated version - showing how users could spot that it was fake or real.
But I'm not sure how to show the annotated version once the answer has been submitted. Could someone help?
function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function(answer) {
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}
function populate() {
if (quiz.isEnded()) {
showScores();
} else {
// show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
// show options
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
// create questions here
var questions = [
new Question("<img src= 'netflix_fake.jpg' />", ["Real", "Fake"], "Fake"),
new Question("<img src= 'dropbox_real.jpg' />", ["Real", "Fake"], "Real"),
new Question("<img src= 'gov_real.jpg' />", ["Real", "Fake"], "Real"),
new Question("<img src= 'paypal_fake.jpg' />", ["Real", "Fake"], "Fake"),
new Question("<img src= 'gmail.jpg' />", ["Real", "Fake"], "Fake")
];
//create quiz
var quiz = new Quiz(questions);
// display
populate();
body {
background-color: #538a70;
}
.grid {
width: 600px;
height: 500px;
margin: 0 auto;
background-color: #fff;
padding: 10px 50px 50px 50px;
border: 2px solid #cbcbcb;
}
.grid h1 {
font-family: "sans-serif";
font-size: 60px;
text-align: center;
color: #000000;
padding: 2px 0px;
}
#score {
color: #000000;
text-align: center;
font-size: 30px;
}
.grid #question {
font-family: "monospace";
font-size: 30px;
color: #000000;
}
.buttons {
margin-top: 30px;
}
#btn0,
#btn1,
#btn2,
#btn3 {
background-color: #a0a0a0;
width: 250px;
font-size: 20px;
color: #fff;
border: 1px solid #1D3C6A;
margin: 10px 40px 10px 0px;
padding: 10px 10px;
}
#btn0:hover,
#btn1:hover,
#btn2:hover,
#btn3:hover {
cursor: pointer;
background-color: #00994d;
}
#btn0:focus,
#btn1:focus,
#btn2:focus,
#btn3:focus {
outline: 0;
}
#progress {
color: #2b2b2b;
font-size: 18px;
}
<div class="grid">
<div id="quiz">
<h1>Can you spot the fake email?</h1>
<hr style="margin-bottom: 20px">
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress">Question x of y</p>
</footer>
</div>
</div>
When user clicks button I trigger class and I add it second name, on second I have written to get swapped, I wrote you basically full project, and please read the whole comments, to understand logic
//Calling Elements from DOM
const button = document.querySelectorAll(".check");
const images = document.querySelectorAll(".image");
const answer = document.querySelector("h1");
//Declaring variable to randomly insert any object there to insert source in DOM Image sources
let PreparedPhotos;
//Our Images Sources and With them are its fake or not
//fake: true - yes its fake
//fake: false - no its real
const image = [
[
{
src:
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/1200px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
fake: true
},
{
src:
"http://graphics8.nytimes.com/images/2012/04/13/world/europe/mona-lisa-like-new-images/mona-lisa-like-new-images-custom4-v3.jpg",
fake: false
}
],
[
{
src:
"https://cdn.shopify.com/s/files/1/0849/4704/files/Creacion_de_Adan__Miguel_Angel_f5adb235-bfa8-4caa-8ffb-c5328cbad953_grande.jpg?12799626327330268216",
fake: false
},
{
src:
"https://cdn.shopify.com/s/files/1/0849/4704/files/First-image_Fb-size_grande.jpg?10773543754915177139",
fake: true
}
]
];
//Genrating Random Photo on HTML
function setRandomPhoto() {
//Random Number which will be length of our array of Object
//if you array includes 20 object it will generate random number
// 0 - 19
const randomNumber = Math.floor(Math.random() * image.length);
//Decalaring our already set variable as Array Object
PreparedPhoto = image[randomNumber];
//Our first DOM Image is Variables first object source
images[0].src = PreparedPhoto[0].src;
//and next image is next object source
images[1].src = PreparedPhoto[1].src;
}
//when windows successfully loads, up function runs
window.addEventListener("load", () => {
setRandomPhoto();
});
//buttons click
//forEach is High Order method, basically this is for Loop but when you want to
//trigger click use forEach - (e) is single button whic will be clicked
button.forEach((e) => {
e.addEventListener("click", () => {
//decalring variable before using it
let filtered;
//finding from our DOM image source if in our long array exists
//same string or not as Image.src
//if it exists filtered variable get declared with that found obect
for (let i = 0; i < image.length; i++) {
for (let k = 0; k < 2; k++) {
if (image[i][k].src === images[0].src) {
filtered = image[i][k];
}
}
}
//basic if else statement, if clicked button is Fake and image is true
//it outputs You are correct
//if clicked button is Real and Image is false it outputs Correct
//Else its false
//Our image checking comes from filtered variable
if (e.innerText === "Fake" && filtered.fake === true) {
answer.innerText = "You Are Correct";
images.forEach((image) => {
image.classList.toggle("hidden");
});
} else if (e.innerText === "Real" && filtered.fake === false) {
answer.innerText = "You Are Correct";
images.forEach((image) => {
image.classList.toggle("hidden");
});
} else {
answer.innerHTML = "You are Wrong";
images.forEach((image) => {
image.classList.toggle("hidden");
});
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.image-fluid {
display: flex;
}
.image-fluid .image {
width: 200px;
margin: 0 10px;
transition: 0.5s;
}
.image-fluid .image:nth-child(1).hidden {
transform: translateX(110px);
}
.image-fluid .image:nth-child(2).hidden {
transform: translateX(-110px);
}
<div class="container">
<div class="image-fluid">
<img src="" class="image hidden">
<img src="" class="image hidden">
</div>
<div class="button-fluid">
<button class="check">Fake</button>
<button class="check">Real</button>
</div>
</div>
<h1></h1>
I’d like to replicate this website’s typing & deleting effect: http://www.cantercompanies.com.
I’ve been trying to figure this out using code blocks, HTML, CSS, and JS. However, I can’t seem to get this to work after hours and days of trying.
It’s obviously on my end, as I am fairly new to coding.
I really want this exact typing & deleting effect with blinking cursor. I of course will be using my own logo and fixed text, but need some guidance and help to replicate Canter's example above in the link provided… :-)
You don't need any library,
HTML
<div class="flex">
<p class="header-sub-title" id="word"></p><p class="header-sub-title blink">|</p>
</div>
CSS
#import 'https://fonts.googleapis.com/css?family=Roboto';
html, body {
background-color: #000;
}
h2, a, p {
color: #fff;
font-family: Roboto;
text-decoration: none;
}
p>a {
color: #fd084a;
}
.blink {
animation: blink 0.5s infinite;
}
#keyframes blink{
to { opacity: .0; }
}
.flex {
display: flex;
}
.header-sub-title {
color: #fff;
font-family: "Courier";
font-size: 20px;
padding: 0.1em;
}
JS
const words = ["CSS3.", "HTML5.", "javascript."];
let i = 0;
let timer;
function typingEffect() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('word').innerHTML += word.shift();
} else {
deletingEffect();
return false;
};
timer = setTimeout(loopTyping, 500);
};
loopTyping();
};
function deletingEffect() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('word').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
} else {
i = 0;
};
typingEffect();
return false;
};
timer = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
typingEffect();
Reference:https://codepen.io/haaswill/pen/VKzXvZ
Been trying to add a typewriter effect, it works great on codepen but not in WP. I've tried to add the code directly to and also to load it as a .js file from the theme's folder, I can see in page-source it's loaded, but the effect isn't executing.
I've checked in console and there's no errors, initially I got an "Uncaught TypeError: Cannot read property 'innerHTML'", so I moved it to my footer.
This is my code:
HTML
<div>
<span id="container">Testing </span> <span id="text"></span><div id="cursor"></div>
</div>
CSS
#container {
display: inline;
vertical-align: middle;
font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
font-weight: 500!important;
font-size: 45px!important;
color: #000000!important;
text-align: left!important;
line-height: 1.5em;
}
#text {
display: inline;
vertical-align: middle;
font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
font-weight: 500!important;
font-size: 45px!important;
color: #000000!important;
text-align: left!important;
height: 70px;
line-height: 1.5em;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: #000000;
animation: blink .75s step-end infinite;
}
#keyframes blink {
from, to {
background-color: transparent
}
50% {
background-color: #000000;
}
}
JS
// List of sentences
var _CONTENT = [
"This",
"That",
"These",
"Those"
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 characater added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 100);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);