ERROR firebase - Uncaught ReferenceError: firebase is not defined

0

Good evening, gentlemen, I am creating a simmple form in javascript and html persisting in firebase, but this firebase error appears - Uncaught ReferenceError: firebase is not defined. I searched in several places and all the codes that appear are according to mine and therefore I have no solution.

Can someone give me a light?

<!-- begin snippet: js hide: false console: true babel: false -->
    <!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>Empresa Web Design</title>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
            crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
        <link rel="stylesheet" href="css/styles.css">



    </head>

    <body>
        <div class="container">
            <h1 class="brand"><span>Empresa</span> Web Design</h1>
            <div class="wrapper">
                <div class="company-info">
                    <h3>Empresa  Web Design</h3>
                    <ul>
                        <li><i class="fa fa-road"></i> 44 Something st</li>
                        <li><i class="fa fa-phone"></i> (555) 555-5555</li>
                        <li><i class="fa fa-envelope"></i> [email protected]</li>
                    </ul>
                </div>
                <div class="contact">
                    <h3>Email Us</h3>
                    <div class="alert">Your message has been sent</div>
                    <form id="contactForm">
                        <p>
                            <label>Name</label>
                            <input type="text" name="name" id="name" required>
                        </p>
                        <p>
                            <label>Company</label>
                            <input type="text" name="company" id="company">
                        </p>
                        <p>
                            <label>Email Address</label>
                            <input type="email" name="email" id="email" required>
                        </p>
                        <p>
                            <label>Phone Number</label>
                            <input type="text" name="phone" id="phone">
                        </p>
                        <p class="full">
                            <label>Message</label>
                            <textarea name="message" rows="5" id="message"></textarea>
                        </p>
                        <p class="full">
                            <button type="submit">Submit</button>
                        </p>
                    </form>
                </div>
            </div>
        </div>
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/popper.js/dist/umd/popper.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
        <script src="main2.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.0/firebase.js"></script><scriptsrc='https://www.gstatic.com/firebasejs/5.0.0/firebase-database.js'></script></body></html>

    // Initialize Firebase
    // Initialize Firebase
    var config = {
        apiKey: "key do firebase ",
        authDomain: "dominio",
        databaseURL: " url do firebase", 
        projectId: " projeto ",
        storageBucket: "storage ",
        messagingSenderId: " id find"
    };


    firebase.initializeApp(config);



    // Reference messages collection
    var messagesRef = firebase.database().initializeApp;

    // Listen for form submit
    document.getElementById('contactForm').addEventListener('submit', submitForm);

    // Submit form
    function submitForm(e) {
        e.preventDefault();

        // Get values
        var name = getInputVal('name');
        var company = getInputVal('company');
        var email = getInputVal('email');
        var phone = getInputVal('phone');
        var message = getInputVal('message');

        // Save message
        saveMessage(name, company, email, phone, message);

        // Show alert
        document.querySelector('.alert').style.display = 'block';

        // Hide alert after 3 seconds
        setTimeout(function () {
            document.querySelector('.alert').style.display = 'none';
        }, 3000);

        // Clear form
        document.getElementById('contactForm').reset();
    }

    // Function to get get form values
    function getInputVal(id) {
        return document.getElementById(id).value;
    }

    // Save message to firebase
    function saveMessage(name, company, email, phone, message) {
        var newMessageRef = messagesRef.push();
        newMessageRef.set({
            name: name,
            company: company,
            email: email,
            phone: phone,
            message: message
        });
    }
*{
    box-sizing: border-box;
  }

  body{
    background:#afd5fc;
    color:#3673bd;
    line-height:1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding:1em;
  }

  .container{
    max-width:1170px;
    margin-left:auto;
    margin-right:auto;
    padding:1em;
  }

  ul{
    list-style: none;
    padding:0;
  }

  .brand{
    text-align: center;
  }

  .brand span{
    color:#fff;
  }

  .wrapper{
    box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
  }

  .wrapper > *{
    padding: 1em;
  }

  .company-info{
    background:#132636;
    color: white;
  }

  .company-info h3, .company-info ul{
    text-align: center;
    margin:0 0 1rem 0;
  }

  .contact{
    background:#f9feff;
  }

  /* FORM STYLES */
  .contact form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:20px;
  }

  .contact form label{
    display:block;
  }

  .contact form p{
    margin:0;
  }

  .contact form .full{
    grid-column: 1 / 3;
  }

  .contact form button, .contact form input, .contact form textarea{
    width:100%;
    padding:1em;
    border:1px solid #c9e6ff;
  }

  .contact form button{
    background:#c9e6ff;
    border:0;
    text-transform: uppercase;
  }

  .contact form button:hover,.contact form button:focus{
    background:#92bde7;
    color:#fff;
    outline:0;
    transition: background-color 2s ease-out;
  }

  .alert{
    text-align: center;
    padding:10px;
    background:#79c879;
    color:#fff;
    margin-bottom:10px;
    display:none;
  }

  /* LARGE SCREENS */
  @media(min-width:700px){
    .wrapper{
      display: grid;
      grid-template-columns: 1fr 2fr;
    }

    .wrapper > *{
      padding:2em;
    }

    .company-info h3, .company-info ul, .brand{
      text-align: left;
    }
  }
<!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>Empresa Web Design</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
    <link rel="stylesheet" href="css/styles.css">



</head>

<body>
    <div class="container">
        <h1 class="brand"><span>Empresa</span> Web Design</h1>
        <div class="wrapper">
            <div class="company-info">
                <h3>Empresa  Web Design</h3>
                <ul>
                    <li><i class="fa fa-road"></i> 44 Something st</li>
                    <li><i class="fa fa-phone"></i> (555) 555-5555</li>
                    <li><i class="fa fa-envelope"></i> [email protected]</li>
                </ul>
            </div>
            <div class="contact">
                <h3>Email Us</h3>
                <div class="alert">Your message has been sent</div>
                <form id="contactForm">
                    <p>
                        <label>Name</label>
                        <input type="text" name="name" id="name" required>
                    </p>
                    <p>
                        <label>Company</label>
                        <input type="text" name="company" id="company">
                    </p>
                    <p>
                        <label>Email Address</label>
                        <input type="email" name="email" id="email" required>
                    </p>
                    <p>
                        <label>Phone Number</label>
                        <input type="text" name="phone" id="phone">
                    </p>
                    <p class="full">
                        <label>Message</label>
                        <textarea name="message" rows="5" id="message"></textarea>
                    </p>
                    <p class="full">
                        <button type="submit">Submit</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="main2.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.5.0/firebase.js"></script>
    <script src='https://www.gstatic.com/firebasejs/5.0.0/firebase-database.js'></script>








</body>

</html>
    
asked by anonymous 15.09.2018 / 05:33

0 answers