0

I'm new to JavaScript I have a small project I'm working on, so basically I'm trying to fetch info from GitHub and display it on my screen basically just display my name in a styled manner using CSS but for that I need to use JavaScript.

I'm trying to use CSS content and I'm cutting it using clip path in a :before and :after but when I try to use my_name.after.style.content = data.name nothing appears and it baffles me.

I need to use vanilla JavaScript without bootstrap or jQuery and my objective here is to add content to my CSS using JavaScript fetch

Here's my JS

const my_name = document.getElementById('myname');
const gitinfo = 'link';

fetch(gitinfo)
  .then(response => response.json())
    .then(data => {
      my_name.style.content = data.name;
    })

Here's my CSS

#myname {
  position: relative;
}
#myname:after {
  -webkit-clip-path: polygon(0 25%, 100% 65%, 100% 100%, 0% 100%);
  clip-path: polygon(0 39%, 100% 75%, 60% 120%, 0% 85%);
}
#myname:before {
  -webkit-clip-path: polygon(0 0, 110% 0, 100% 65%, 0 25%);
  clip-path: polygon(0 0, 110% 0, 100% 66%, 0 33%);
}

Here's my HTML

<body>
    <div id="myname">Tal Michel</div>
    <script src="java.js"></script>
</body>
</html>

Thank you ahead for any help

tal michel
  • 49
  • 4

0 Answers0