CodePen javascript code does not work in local

Question

First of all I'm new to javascript I would like to reuse the code in this codepen

    $('a[href*=#]').click(function(){
  return false;
});


var animationEndEvent = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

var Person = {
  wrap: $('#people'),
  people: [
    {
      name: 'Linda',
      age: 25,
      img: "https://i.imgur.com/QZuGC10.jpg"
    },
    {
      name: 'Lisa',
      age: 20,
      img: "https://i.imgur.com/1EWwp59.jpg"
    },
    {
      name: 'Sandra',
      age: 18,
      img: "https://i.imgur.com/Lu3laIj.jpg"
    },
    {
      name: 'Chloe',
      age: 18,
      img: "https://i.imgur.com/WgYIxhw.png"
    },
    {
      name: 'Alexa',
      age: 23,
      img: "https://i.imgur.com/D0PQegY.png"
    },
    {
      name: 'Maria',
      age: 21,
      img: "https://i.imgur.com/eqd5IhH.jpg"
    },
    {
      name: 'Emma',
      age: 24,
      img: "https://i.imgur.com/4F9NXPo.png"
    },
    {
      name: 'Sara',
      age: 18,
      img: "http://i40.tinypic.com/ofxe21.jpg"
    },
    {
      name: 'Lara',
      age: 22,
      img: "https://i.imgur.com/HMkdN6A.jpg"
    }
  ],   
  add: function(){
    var random =     this.people[Math.floor(Math.random() * this.people.length)];
    this.wrap.append("<div class='person'><img alt='" + random.name + "' src='" + random.img + "' /><span><strong>" + random.name + "</strong>, " + random.age + "</span></div>");
  }
}

var App = {
  yesButton: $('.button.yes .trigger'),
  noButton: $('.button.no .trigger'),
  blocked: false,
  like: function(liked){
    var animate = liked ? 'animateYes' : 'animateNo';
    var self = this;
    Person.add();
    if (!this.blocked) {
      this.blocked = true;           
      $('.person').eq(0).addClass(animate).one(animationEndEvent, function() {
        $(this).remove();
        self.blocked = false;
      });
    }
  }
};

var Phone = {
  wrap: $('#phone'),
  clock: $('.clock'),
  updateClock: function() {
    var date = new Date();
    var hours = date.getHours();
    var min = date.getMinutes();
    hours = (hours < 10 ? "0" : "") + hours;
    min = (min < 10 ? "0" : "") + min;
    var str = hours + ":" + min;
    this.clock.text(str);
  }
}

App.yesButton.on('mousedown', function() {
  App.like(true);
});

App.noButton.on('mousedown', function() {
  App.like(false);
});

$(document).ready(function() {
  Person.people.forEach(function(person){
    new Image().src = person.img; 
  });
  Phone.updateClock();
  setInterval('Phone.updateClock()', 1000);

  Person.add();
  Person.add();
  Person.add();
  Person.add();
});

(https://codepen.io/renatorib/pen/extCA). But I can't make it work in local. I have inserted jquery ( the same version he uses //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js) And I have converted sass to css.

It look the same, but its javascript part doesn't work ( no photos no buttons nothing..) No console errors... I don't know what else to do..

PD: Sorry for my English, I hope I explained myself

You are missing the https: in the jquery link. You are also missing links such as bootstrap and fontawesome. Check the original pen, click css settings, and grab those links, do the same for html and javascript if there are any. — Souleste
– Souleste, Commented Aug 5, 2019 at 18:47

Yasin · Accepted Answer · 2019-08-05 18:53:45Z

1

Replace this and use this jQuery version on bottom.

 $('a[href*="#!..."]').click(function(){
  return false;
});

Full Repo

answered Aug 5, 2019 at 18:53

Yasin

1

Sign up to request clarification or add additional context in comments.

1 Comment

JohnSpa Over a year ago

Thank you, can you give me a brief explanation if there is one?

Hamid Pouladi · Accepted Answer · 2019-08-05 18:59:56Z

If you follow these steps it should work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>your title</title>
    <!-- step 1 add css file-->
    <link href="your-style.css" rel="stylesheet" type="text/css">
    <!-- step 2 add jquery library-->
    <script src="jquery.js"></script>
    <!--step 3 add script that run after dom ready-->
    <script>
    $(function() {
    // dom is ready 
    // your script goes here    
    });
    </script>


</head>
<body>
    <!-- step 4 html structur goes hear. Note that the selectors that you select in script  must be the same in html-->
</body>
</html>

Collectives™ on Stack Overflow

CodePen javascript code does not work in local

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related