magic works and I think I can understand

README.md

@@ -9,9 +9,11 @@
 ##  0stars
 - [ ] zabarvit secret nav
 - [ ] efekt meneni cisel stejny jako prejeti kurzorem
-- [ ] system upgradu
+- [ ] system upgradu (aktivni i pasivni)
-- [ ] system pasivniho generovani
+    - [ ] Raketka ktera leta za hvezdou a tezi ji
 - [ ] ukladani do cookies
 - [ ] odemykani upgradu
-- [ ] star aby se ukazoval jinde
+- [ ] star aby se ukazoval jinde a na urcity cas
-
+- [ ] hover efekt on long nav-flag changes width of others 
+        - addid with commit "0-stars basic setup"
+        - on same version some problem with main.css

css/star.css

@@ -5,7 +5,6 @@
   left: auto;
   right: 0px;
   height: 100%;
-  width: 10%;
   z-index: 7;
   display: flex;
   flex-direction: column;
@@ -33,7 +32,7 @@
 
   color: black;
   text-decoration: none;
-  width: 70%;
+  min-width: 70%; 
   font-family: "Source Code Pro", monospace;
   font-size: fill;
 

js/magic.js

@@ -1,18 +1,19 @@
+document.querySelector(".magic").onmouseenter = event => {magic()}  
 
+function magic(){
   const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
-
   let interval = null;
+  let iteration = 0;
+
 
   const screen = document.querySelector(".magic"),
         name = document.querySelector(".magic"); 
 
-screen.onmouseenter = event => {  
-  let iteration = 0;
   
   clearInterval(interval);
   
   interval = setInterval(() => {
-    name.innerText = name.innerText
+    name.innerText = name.dataset.value
       .split("")
       .map((letter, index) => {
         if(index < iteration) {
@@ -29,4 +30,5 @@ screen.onmouseenter = event => {
     
     iteration += 1 / 3;
   }, 30);
+
 }

js/star.js

@@ -1,3 +1,5 @@
+// Adding stars on click theStar
+
 let star = 0;
 let starGained = 0;
 
@@ -8,11 +10,20 @@ function starClicked() {
   changeName();
 };
 
-function changeName() {
-  let vidis = document.getElementById('name').innerText;
-  let num = vidis.split('-');
-  let show = star + '-Stars';
 
-  document.getElementById('name').innerText = show;
+function changeName() {
-  document.getElementById('name').dataset.value = show;
+  let see = document.getElementById('name').dataset.value;
+  let num = see.split('-');
+  let show
+
+  if (star <= 1 && star >= -1) {
+    show = star + '-Star';
+  } else {
+    show = star + '-Stars';
   };
+
+  document.querySelector(".magic").dataset.value = show;
+  magic();
+};
+
+

star.html

@@ -19,7 +19,7 @@
 
 <div class="nav-star">
   <a class="nav-gap"></a>
-  <a href="" class="nav-price" id="nav-0">nav-0</a>
+  <a href="" class="nav-price" id="nav-0">+1 Raket (4)</a>
   <a class="nav-gap"></a>
   <a href="" class="nav-price" id="nav-1">nav-1</a>
   <a class="nav-gap"></a>
@@ -72,14 +72,10 @@
     <a class="link" href="https://youtu.be/dQw4w9WgXcQ">REBORN</a>
   </div>
 
-
-
-
-
     <!-- SCRIPTS -->
 
-  <script src="js/magic.js"></script>
   <script src="js/star.js"></script>
+  <script src="js/magic.js"></script>
 
 </div></body>
 </html>