Please help, my javascript is not running

Please help, my javascript is not running
0
#1

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:[email protected]" 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>&copy 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);
}

0 Likes

#2

Your script tag is outside of the body. Put it inside and it should work.

2 Likes

#3

thank you so much, its work out. I was a bit frustrated.

0 Likes