Tell us what’s happening:
Hey friends, I had been on this issues for some day now, I don’t why my javaScript code isn’t run. the html and css that work perfectly fine but my JavaScript isn’t reading. the html, css and JavaScript are in one folder. below is
Your code so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<title>Personal Portolio</title>
</head>
<body>
<aside>
<nav class="nav-bar">
<img src="img/cassy2.jpg" alt="">
<a href="#home"><i class="material-icons md-36">home</i>
<p>Home</p>
</a>
<a href="#about"><i class="material-icons md-36">person</i>
<p>About</p>
</a>
<a href="#portfolio"><i class="material-icons md-36">image</i>
<p>Portfolio</p>
</a>
<a href="#contact"><i class="material-icons md-36">mail</i>
<p>Contact</p>
</a>
</nav>
</aside>
<nav class="mobile-nav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
<div class="introduction" id="welcome-section">
<header class="home" id="home">
<h1>Hey, I'm Obok Casmir, A</h1>
<span class="txt-type" data-wait="3000" data-words='["Web Developer", "WordPress Designer", "Email Designer", "chatbots Designer"]'></span>
<h4>Web Developer, WordPress Designer, Email designer and Watson Chatbot Designer</h4>
<img src="img/cassy1.jpg" alt="">
</header>
</div>
<!--This is the main content of portfolio page-->
<main class="main-content">
<section>
<div class="about" id="about">
<h2>About Me</h2>
<p><span>Hello, I'm Obok Casmir(Cassyblaise) </span> I'm web developer, wordpress designer and Watson
chatbots designer. I am very passionate about technology and the solution it provides to everyday problems, so I want to be part of
building even more advanced solutions to problems in fields not yet explored. I'm life long learner, and always ready for new opportunities. My hobbies are:
Reading, love good music, watching football and I like going out for a long walk. </p>
<p>I am very outgoing happy person and show this in my work. I can relate to the person in both my
talking
and writing style. I have a style that is very direct and honest. Most people consider it easy to
understand what I'm saying even those who aren't native English speakers.
</p>
<p>I believe in users centered design and delivering the best possible experiences to clients. I have
experience with HTML, CSS3, Flexbox, CSS Grid, JavaScript, jQuery WordPress Design and also Watson
Chatbot Designer. I can use these technologies to build you a dynamic and personalized website from
scratch.
I also have some experience in the following online programs: WordPress, Webpack, Zoho, Git,
Github,
Slack, and many others including proprietary versions. One of my best traits is that I can learn
new
systems relatively easy, so even if I've never used your particular system. I am a quick learner.
</p>
<h3>My Skills</h3>
<p>Html5</p>
<div class="container">
<div class="skills html">95%</div>
</div>
<p>CSS3</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>Bootstrap</p>
<div class="container">
<div class="skills bootstrap">75%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills JS">68%</div>
</div>
<p>Watson Chatbot</p>
<div class="container">
<div class="skills watson_chatson">65%</div>
</div>
<p>WordPress Developer</p>
<div class="container">
<div class="skills wordpress_developer">85%</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<h2>portfolio</h2>
<div class="row-halves">
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/aBjoZN" target="_blank" class="project-title">
<img src="img/productpage.png" alt="projects">
<h3>Business</h3>
<p>
Building Responsive and thoughtful websites for small and large businesses.
</p>
</a>
</div>
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/xaRJvq" target="_blank" class="project-title">
<img src="img/surveyform.png" alt="">
<h3>Mobile</h3>
<p>
Fully Responsive, mobile ready design and implementation for all clients.
</p>
</a>
</div>
</div>
<div class="row-halves">
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/JmZOOb" target="_blank" class="project-title">
<img src="img/docpage.png" alt="projects">
<h3>UX/UI Designs</h3>
<p>
Thoughtful and intuitive users experinces. all of my designs will be guaranteed to my
clients.
</p>
</a>
</div>
<div class="col" id="project-title">
<a href="https://codepen.io/cassyblaise/pen/YjOorx" target="_blank" class="project-title">
<img src="img/tribute.png" alt="projects">
<h3>Personal</h3>
<p>
I also build and design for personal projects. no idea is too small. everyone deserve a
voice on
the web.
</p>
</a>
</div>
</div>
</section>
<section class="contact" id="contact">
<h2>Contact</h2>
<div class="header">
<h1>Let's work together...</h1>
<p>Chanaging the world, with one line of code at time.</p>
</div>
<div class="social-media">
<span class="fa-stack fa-lg">
<a href="https://twitter.com/cassyjnr" target="_blank" class="contact-details">
<i class=" fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://facebook.com/cassy.blaise.9" target="_blank" class="contact-details">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://linkedin.com/in/obokcasmir/" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-linkedin fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://github.com/cassyblaise" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://codepen.io/cassyblaise" target="_blank" class="contact-details">
<i class="
fas fa-circle fa-stack-2x"></i>
<i class="fab fa-codepen fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="https://medium.com/@cassyblaise" target="_blank" class="contact-details">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-medium fa-stack-1x fa-inverse"></i></a>
</span>
<span class="fa-stack fa-lg">
<a href="mailto:codecassy@gmail.com" target="_blank" class="contact-details">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
</a>
</span>
</div>
</section>
<footer>
<section class="bottom-bar">
<p>© 2018 | All rights reserved</p>
</section>
</footer>
</main>
</body>
<script src="main.js"></script>
</html>
const TypeWriter = function(txtElement, words, wait = 3000){
this.txtElement = txtElement;
this.words = words;
this.txt = “”;
this.wordIndex = 0;
this.wait = parseInt(wait, 10);
this.type();
this.isDeleting = false;
};
// Type method
TypeWriter.prototype.type = function(){
console.log(‘hello’);
setTimeout(() => this.type(), 500);
};
document.addEventListener(‘DOMContentLoaded’, init);
function init(){
const txtElement = document.querySelector(’.txt-type’);
const words = JSON.parse(txtElement.getAttribute(‘data-words’));
const wait = txtElement.getAttribute(‘data-wait’);
//init typewrite
new TypeWriter(txtElement, words, wait);
}