Help with Heart

JS

let head = document.querySelector('.head')
let adds = document.querySelector('.adds')
let generalSect = document.querySelector('.generalSect')

adds.style.display = "none"
generalSect.style.display = "none"

let link = document.querySelector('.link')
let color = document.querySelector('.color')
let age = document.querySelector('.age')
let price = document.querySelector('.price')
let addBtn = document.querySelector('.addBtn')

let admin = document.querySelector('.admin')
let fov = document.querySelector('.fov')
let main = document.querySelector('.main')
admin.style.color = "red"
admin.addEventListener("click", () => {
main.style.color = "#FFF"
fov.style.color = "#FFF"
admin.style.color = "red"
head.style.display = 'block'
adds.style.display = "none"
generalSect.style.display = "none"
})
fov.addEventListener("click", () => {
main.style.color = "#FFF"
admin.style.color = "#FFF"
fov.style.color = "red"
head.style.display = 'none'
adds.style.display = "block"
generalSect.style.display = "none"
})
addBtn.addEventListener('click', () => {
saveData()
console.log('ff')
})
function saveData() {
let data = JSON.parse(localStorage.getItem('cat')) || []

let objData = {
link: link.value,
color: color.value,
age: age.value,
price: price.value,
like: "none"
}
data.unshift(objData)
localStorage.setItem('cat', JSON.stringify(data))
}
let list = document.querySelector('.list')
main.addEventListener("click", () => {
func()

})

let fovData = JSON.parse(localStorage.getItem('fovarite')) || []
let count = document.querySelector('.count')
function func() {
list.innerHTML = ""
main.style.color = 'red'
admin.style.color = "#FFF"
fov.style.color = "#FFF"
generalSect.style.display = "block"
adds.style.display = "none"
head.style.display = "none"
let data = JSON.parse(localStorage.getItem('cat')) || []
data.forEach((el, id) => {
let forHead = document.createElement('div')
forHead.classList = "forHead"
list.append(forHead)

let heart = document.createElement('img')
heart.src = fovData.includes(id.link) ? './style/image/like 1.png' : "./style/image/Vector.png"
forHead.append(heart)

let face = document.createElement('img')
face.src = el.link
face.classList = "face"
forHead.append(face)

let textDiv = document.createElement('div')
textDiv.classList = "textDiv"
forHead.append(textDiv)

let typeCat = document.createElement('h1')
typeCat.innerText = el.color
textDiv.append(typeCat)

heart.addEventListener('click', () => {
hearts()
})
function hearts(id) {
heart.src = './style/image/like 1.png'
let resData = data.find(el => el.id === id)
if (resData) {
fovData.unshift(resData)
localStorage.setItem("fovarite", JSON.stringify(fovData))
}

}


});

}
counts()
function counts() {
let data = JSON.parse(localStorage.getItem('cat')) || []
if (data.length !== 0) {
count.innerHTML = `Найдено ${data.length} котов`
}
else {
count.innerText = 'Котов еще нету в прадаже'
}
}

JS

let head = document.querySelector('.head')

let adds = document.querySelector('.adds')

let generalSect = document.querySelector('.generalSect')



adds.style.display = "none"

generalSect.style.display = "none"



let link = document.querySelector('.link')

let color = document.querySelector('.color')

let age = document.querySelector('.age')

let price = document.querySelector('.price')

let addBtn = document.querySelector('.addBtn')



let admin = document.querySelector('.admin')

let fov = document.querySelector('.fov')

let main = document.querySelector('.main')

admin.style.color = "red"

admin.addEventListener("click", () => {

    main.style.color = "#FFF"

    fov.style.color = "#FFF"

    admin.style.color = "red"

    head.style.display = 'block'

    adds.style.display = "none"

    generalSect.style.display = "none"

})

fov.addEventListener("click", () => {

    main.style.color = "#FFF"

    admin.style.color = "#FFF"

    fov.style.color = "red"

    head.style.display = 'none'

    adds.style.display = "block"

    generalSect.style.display = "none"

})

addBtn.addEventListener('click', () => {

    saveData()

    console.log('ff')

})

function saveData() {

    let data = JSON.parse(localStorage.getItem('cat')) || []



    let objData = {

        link: link.value,

        color: color.value,

        age: age.value,

        price: price.value,

        like: "none"

    }

    data.unshift(objData)

    localStorage.setItem('cat', JSON.stringify(data))

}

let list = document.querySelector('.list')

main.addEventListener("click", () => {

    func()



})



let fovData = JSON.parse(localStorage.getItem('fovarite')) || []

let count = document.querySelector('.count')

function func() {

    list.innerHTML = ""

    main.style.color = 'red'

    admin.style.color = "#FFF"

    fov.style.color = "#FFF"

    generalSect.style.display = "block"

    adds.style.display = "none"

    head.style.display = "none"

    let data = JSON.parse(localStorage.getItem('cat')) || []

    data.forEach((el, id) => {

        let forHead = document.createElement('div')

        forHead.classList = "forHead"

        list.append(forHead)



        let heart = document.createElement('img')

        heart.src = fovData.includes(id.link) ? './style/image/like 1.png' : "./style/image/Vector.png"

        forHead.append(heart)



        let face = document.createElement('img')

        face.src = el.link

        face.classList = "face"

        forHead.append(face)



        let textDiv = document.createElement('div')

        textDiv.classList = "textDiv"

        forHead.append(textDiv)



        let typeCat = document.createElement('h1')

        typeCat.innerText = el.color

        textDiv.append(typeCat)



        heart.addEventListener('click', () => {

            hearts()

        })

        function hearts(id) {

            heart.src = './style/image/like 1.png'

            let resData = data.find(el => el.id === id)

            if (resData) {

                fovData.unshift(resData)

                localStorage.setItem("fovarite", JSON.stringify(fovData))

            }



        }





    });



}

counts()

function counts() {

    let data = JSON.parse(localStorage.getItem('cat')) || []

    if (data.length !== 0) {

        count.innerHTML = `Найдено ${data.length} котов`

    }

    else {

        count.innerText = 'Котов еще нету в прадаже'

    }

}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com ">
<link rel="preconnect" href="https://fonts.gstatic.com " crossorigin>
<link
href="https://fonts.googleapis.com/css2?f...0&family=Montserrat:wght@400;500&display=swap "
rel="stylesheet">
<link rel="stylesheet" href="./style/style.css">
</head>

<body>
<section class="header">
<div class="cont-haed">
<div class="logo">
<img src="./style/image/barcelona-metro-logo 1.png" alt="dd">
<h1 class="count"></h1>
</div>
<div class="aTegs">
<button class="main" href="">Main</button>
<button class="fov" href="">Fovarite</button>
<button class="admin" href="">Admin</button>
</div>
<div class="contact">
<h1>+544 3490 00000</h1>
<p>Звони скорее!</p>
</div>
</div>
</section>
<header class="head">
<div class="cont-int">
<input class="link" type="text" placeholder="Link a photo">
<input class="color" type="text" placeholder="Cat color">
<input class="age" type="text" placeholder="Age of the cat">
<input class="price" type="text" placeholder="Cat price">
<button class="addBtn">Add product</button>
</div>
</header>
<section class="adds"></section>
<section class="generalSect">
<div class="list"></div>
</section>

<script src="/script.js"></script>
</body>

</html>