I have no idea what's wrong here

Hello I was creating my own version of a nike’s website and i have created an animation for third navbar counting from the top, I wrote it at the start of creating the website and forget about for the rest of it but it was working at the beginning and when I finished creating the javascript for the shopping card i realized that for some reason the animation is not working anymore and I don t know why it is the animation that remains in function called moveText. I was trying but I can t find the issue if anybody have some ideas pls help.

<!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="styles.css">
    <link rel="icon" href="nikeLOgo.jpg">
    <title>nike copy</title>
</head>
<body>
    <img onclick="showOptions()" class="optionIcon" src="options-icon-30.png" alt="options-icon-30">
    <div class="top-top-nav">
        <div class="iconsContainerfttn">
            <a href="index.html"><div class="iconContainerA">
                <img class="bsPlayer" src="bsPlayer.png">
            </div></a>
            <div class="iconContainerB">

            </div>
        </div>
        <div class="suggestionsContainer">
            <ul>
                <a class="colourAttA" href="fin_a_store.html"><li class="line">Find a Store</li></a>
                <a class="colourAttA"  href="help.html"><li class="line">Help</li></a>
                <a class="colourAttA"  href="join_us.html"><li class="line">Join Us</li></a>
                <a class="colourAttA"  href="sign_in.html"><li>Sign In</li></a>
            </ul>
        </div>
    </div>
    <nav class="topNav">
        <a class="nikeIconContainer" href="index.html"></a>
        <div class="optionsContainer">
            <h1 class="op"><a class="colourAttB" href="New_featured.html">New & Featured</a></h1>
            <h1 class="op"><a class="colourAttB" href="Men.html">Men</a></h1>
            <h1 class="op"><a class="colourAttB" href="Woman.html">Women</a></h1>
            <h1 class="op"><a class="colourAttB" href="Kids.html">Kids</a></h1>
            <h1 class="op"><a class="colourAttB" href="Sale.html">Sale</a></h1>
        </div>
        <div class="fullRightContainer">
            <div class="searchContainer">
                <img class="magnifier" src="img_467459.png">
                <input class="tt" type="text" placeholder="Search">
            </div>
           
            <div class="IIconsContainer">
                <div class="heartIconContainer">
                    <img class="heart" src="hearts-icons-vectors-illustrations.jpg"> 
                </div>
                <a href="theCard.html"><div class="suitcaseIconContainer">
                    <img class="heart" src="vector-briefcase-icon.jpg">
                    <div id="red_Circle" class="red_Circle">0</div>
                </div></a>
            </div>
        </div>
    </nav>
    <nav class="thirdNav">
        <div class="inner">
        <p class="thTextA" id="thTextA">Student Discount</p>
        <p class="thTextB" id="thTextB">10% off for students. <span class="Discover">Discover</span></p>
    </div>
    </nav>
    <div class="headerConteiner">
        <h1 class="mainHeader">LEADERS LIKE NEVER BEFORE</h1>
        <h1 class="secoundaryHeader">England National Team Collection</h1>
        <button class="Shop-Button">Shop</button>
    </div>
    <div class="peopleImage_Container">
        
    </div>
    <footer>
        <h1 class="footerText">I do not possess any of the content placed on this website it has been created only in learning purposes and in order to show my skills in web development</h1>
    </footer>
    <script src="app.js"></script>
    <script src="appfrmt.js"></script>
</body>
</html>

body {
    margin: 0;
    padding: 0;
}
.top-top-nav {
    height: 40px;
    background-color: rgb(214, 214, 214);
    margin-top: 0;
    padding-top: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.optionIcon {
    width: 100px;
    height: 100px;
    position: absolute;
    right: 80px;
    top: 30px;
    cursor: pointer;
    opacity: 0;
    z-index: 0;
}
ul li{
    font-family: Arial, Helvetica, sans-serif;
    list-style-type: none;
    margin-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    transition: all 100ms ease-in;
}
li:hover {
    color: rgb(107, 106, 106);
}
ul {
    display: flex;
    margin-right: 20px;
}
.line {
    border-right: 2px rgb(95, 94, 94) solid;
}
.iconContainerA {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
.iconsContainerfttn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 7%;
    height: 100%;
    margin-left: 2%;
}
.bsPlayer {
    width: 100%;
    height: 100%;
    position: absolute;
}
.topNav {
    height: 60px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-left: 0;
    position: relative;
}
.optionsContainer {
    display: flex;
    flex-direction: row;
    gap: 30px;
    position: absolute;
}
.op {
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    font-weight: 500;
    margin-left: 6px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 100ms ease-in;
}
.op:hover {
    border-bottom: 4px solid black;
    
}
.nikeIconContainer {
    width: 6%;
    height: 100%;
    margin-left: 0;
   position: absolute;
   left: 30px;
   background-image: url(nikeLOgo.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   cursor: pointer;
}
.fullRightContainer {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.heartIconContainer {
    width: 80px;
    height: 100%;
    background-color: yellow;
}
.suitcaseIconContainer {
    width: 80px;
    height: 100%;
    background-color: black;
    position: relative;
}
.IIconsContainer {
    height: 60px; 
    display: flex;
    flex-direction: row;
    margin-right: 20px;
    
}
.tt {
    margin-right: 25px;
    border-radius: 12px;
    border: none;
    outline: none;
    background-color: rgb(230, 226, 226);
    height: 40px;
    width: 150px;
    padding-left: 50px;
}
.heart {
    width: 100%;
    height: 100%;
}
.searchContainer {
    position: relative;
}
.magnifier {
    position: absolute;
    width: 20px;
    height: 20px;
    transform: translateY(180deg);
    left: 17px;
    top: 10px;
}
.thirdNav {
    height: 60px;
    background-color: rgb(214, 214, 214);
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}
.thTextB {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-top: 2px;
    
    
}
@keyframes moveFromLeft {
    0% {
        transform: translateX(-500%);
    }
}
@keyframes moveFromRight {
    0% {
        transform: translateX(500%);
    } 
}
.mfl {
    animation: moveFromLeft 500ms;
}
.mfr {
    animation: moveFromRight 500ms;
}
.thTextA {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    display: flex;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-bottom: 2px;
    animation: moveFromLeft 250ms;
}
.Discover {
    text-decoration: underline;
    cursor: pointer;
}
.headerConteiner {
    width: 100%;
    height: 100%;
    text-align: center;
}
.mainHeader {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4rem;
}
.secoundaryHeader {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 500;
}
.Shop-Button {
    background-color: black;
    border-radius: 20px;
    width: 80px;
    height: 40px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    outline: none;
    border: 1px black solid;
    cursor: pointer;
    transition: all 250ms;
}
.Shop-Button:hover {
    background-color: rgb(53, 53, 53);
    transform: scale(105%);
}
.peopleImage_Container {
    width: 100%;
    height: 600px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    background-image: url(people.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.inner {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
footer {
    width: 100%;
    background-color: aqua;
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
    font-family: Arial;
}
a {
    text-decoration: none;
}
.colourAttA {
    color: black;
}
.colourAttB {
    color: black;
}
@media screen and (max-width: 1200px) {
    .thirdNav {
        height: 200px;
    }
    .topNav {
        height: 400px;
        position: relative;
    
    } .optionsContainer {
        flex-direction: column;
        gap: 10px;
    } .fullRightContainer {
        flex-direction: column;
        position: absolute;
        top: 100px;
        opacity: 0;
    } .optionIcon {
        opacity: 1;
        z-index: 10;
    }
  }
  .red_Circle {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    top: 30px;
  }



const tt = document.querySelector(".tt");
const fullRightContainer = document.querySelector(".fullRightContainer");
const imagAndTextContainer = document.querySelector(".image_And_Text_Container");
const imageContainer = document.querySelector(".image_Container");
let redCircle = document.getElementById('red_Circle');
let productName = document.getElementById("name");
let productPrice = document.getElementById("thePrice");
let forCheck = "red";
let s = 0;
let productNameValue = document.getElementById("name").innerHTML;
let priceValue = document.getElementById("thePrice").innerHTML;
function showOptions() {
    if (s == 0) {
        tt.style.opacity = "1";
        fullRightContainer.style.opacity = "1";
        s++;
    }else if (s == 1) {
        tt.style.opacity = "0";
        fullRightContainer.style.opacity = "0";
        s--;
    }
}
function moveRight(red, green, blue, tfrn, tfgn, tfbn, tfrp, tfgp, tfbp) {
    if (forCheck == "red") {
        productName.innerText = tfgn;
        productPrice.innerText = tfgp;
        imageContainer.classList.remove(red)
        imageContainer.classList.add(green);
        productNameValue = tfgn;
        priceValue = tfgp;
        forCheck = "green";

    } else if (forCheck == "green") {
        productName.innerText = tfbn;
        productPrice.innerText = tfbp;
        imageContainer.classList.remove(green)
        imageContainer.classList.add(blue);
        productNameValue = tfbn;
        priceValue = tfbp;
        forCheck = "blue";
    } else if(forCheck == "blue") {
        productName.innerText = tfrn;
        productPrice.innerText = tfrp;
        imageContainer.classList.remove(blue)
        imageContainer.classList.add(red);
        productNameValue = tfrn;
        priceValue = tfrp;
        forCheck = "red";
    }
}
function moveLeft(red, green, blue, tfrn, tfgn, tfbn, tfrp, tfgp, tfbp) {
    if (forCheck == "red") {
        productName.innerText = tfbn;
        productPrice.innerText = tfbp;
        imageContainer.classList.remove(red)
        imageContainer.classList.add(blue);
        productNameValue = tfbn;
        priceValue = tfbp;
        forCheck = "blue";
    } else if (forCheck == "blue") {
        productName.innerText = tfgn;
        productPrice.innerText = tfgp;
        imageContainer.classList.remove(blue)
        imageContainer.classList.add(green);
        productNameValue = tfgn;
        priceValue = tfgp;
        forCheck = "green";
    }   else if(forCheck == "green") {
        productName.innerText = tfrn;
        productPrice.innerText = tfrp;
        imageContainer.classList.remove(green)
        imageContainer.classList.add(red);
        productNameValue = tfrn;
        priceValue = tfrp;
        forCheck = "red";
    }
}


function saveData(name, price) {
    // Get data from input box
    let new_Data_Name = name;
    let new_Data_Price = price;


    // If there is nothing saved at the start then save an empty array 
    if(localStorage.getItem('dataName') == null){
        localStorage.setItem('dataName', '[]');
        localStorage.setItem('dataPrice', '[]');
        setRedCirlceValue();
    }

    // get old data and slap it on the new data

    let old_Data_Name = JSON.parse(localStorage.getItem('dataName'));
    let old_Data_Price = JSON.parse(localStorage.getItem('dataPrice'));
    old_Data_Name.push(new_Data_Name);
    old_Data_Price.push(new_Data_Price);

    // save the old + new data to local storage
    localStorage.setItem('dataName', JSON.stringify(old_Data_Name));
    localStorage.setItem('dataPrice', JSON.stringify(old_Data_Price));
    setRedCirlceValue();
}

function setRedCirlceValue() {
    let NamesAr = JSON.parse(localStorage.getItem('dataName'));
    redCircle.innerText = NamesAr.length;
}
setRedCirlceValue();
setInterval(moveText, 2000);

const thTextA = document.getElementById('thTextA');
const thTextB = document.getElementById('thTextB');
const inner = document.querySelector(".inner");
let i = 0;

function moveText() {
    if(i == 0) {
        thTextA.innerText = "Free Delivery & returns";
        thTextB.innerText = "Nike members get free Delivery and free 30 day returns";
        inner.classList.add("mfl");
        inner.classList.remove("mfr");
        i++;
    }else if (i == 1) {
        thTextA.innerText = "Student Discount";
        thTextB.innerText = "10% off for students.";
        inner.classList.remove("mfl");
        inner.classList.add("mfr");
        i--;
    }
    
}

let containerLeft = document.getElementById('containerLeft');
let containerRight = document.getElementById('containerRight');
let dataNamesArray = JSON.parse(localStorage.getItem('dataName'));
let dataPriceArray = JSON.parse(localStorage.getItem('dataPrice'));
let total = document.getElementById('Total');


function view() {
    for (let w = dataNamesArray.length - 1; w >= 0; w--) {
        const para = document.createElement("p");
        const brum = document.createElement("p");
        containerLeft.appendChild(para);
        containerRight.appendChild(brum);
        para.innerText = dataNamesArray[w];
        brum.innerText = dataPriceArray[w];
    }
    
}
function clearTheCard() {
    containerRight.innerHTML = "";
    containerLeft.innerHTML = "";
    localStorage.clear();
    total.innerHTML = "";
    redCircle.innerHTML = "0";
    
}
let fullPrice = 0;
function getTheTotal () {
    
    for (let m = dataPriceArray.length - 1; m >= 0; m--) {
        const regex = /(?<=£)\d+(?:\.\d+)?|\d+(?:\.\d+)?(?=£)/g;
        let newString = dataPriceArray[m].match(regex, "");
        console.log(newString);
        fullPrice += parseInt(newString);
    }
    total.innerHTML = "£" + fullPrice;
    
}
getTheTotal();

view();

link to the whole code:

link to the website:
https://lolek55507.github.io/NikeCopy/

When I load your page I see the text “Discover Discount” slide in from the left. If this isn’t what you want then you’ll need to be more specific about what you are trying to do.

change the text change the opacity, move the new text come from the right and the same thing after 2 s but from the left and so on

You should really organize your files into folders.


  1. Open the console and read the error message. You have errors in the app.js file.

  2. You are using setInterval(moveText, 2000); in the wrong file, it should be inside appfrmt.js.

When I comment out the errors and move the setInterval the animation works.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.