Environment_pollution/feedback.html at main · sandun440/Environment_pollution · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Page</title>
<link rel="stylesheet" href="feedback.css">
<script src="https://kit.fontawesome.com/b77e449a9c.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <h2 class="logo">EcoVista</h2>

        <nav class="navigation">
            <a href="index.html">Home</a>
            <a href="environment.html">What is Environmental pollution ?</a>
            <a href="solution.html">Solution and Tips</a>
            <a href="news.html">NEWS</a>
            <a href="feedback.html">Give Feedback</a>
        </nav>
    </header>
    </header>
    <div class="in_side">
        <img src="./pexels-fotios-photos-2304253.jpg" alt="">
    </div>

    <div id="app">
    <h1>Feedback</h1>
    <!-- Feedback form -->
    <div class="feedback">
        <label for="text">Name: </label>
        <input type="text" v-model="name" placeholder="Your Name">
        <label for="textarea">Comment: </label>
        <textarea v-model="comment" placeholder="Your Comment shortly....."></textarea>
        <button @click="submitFeedback">Submit Feedback</button>
    </div>
    <!-- Display feedback -->
    <ul class="feedback-list">
        <li v-for="(feedback, index) in feedbacks" :key="index" class="feedback-item">
        <strong>{{ feedback.name }}</strong>: <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ feedback.comment }}
        </li>
    </ul>
    </div>
    <footer>
        <div class="foot">
            <p class="topic">Contact us</p>
            <p>Call: (+94) 715764250</p>
            <p>Email: <a href="mailto:sandunsameera250@gmail.com">sandunsameera250@gmail.com</a></p>
            <p>Address:  Deniyaya Road,Kotapola, Srilanka.</p>
            <a href="https://www.facebook.com/" target="_blank" class="link"><i class="fa-brands fa-facebook"></i></a>
            <a href="https://www.whatsapp.com/" target="_blank" class="link"><i class="fa-brands fa-whatsapp"></i></a>
            <a href="https://www.youtube.com/" target="_blank"  class="link"><i class="fa-brands fa-youtube"></i></a>
            <a href="https://www.instagram.com/" target="_blank"class="link"><i class="fa-brands fa-linkedin"></i></i></a>
        </div>
    </footer>


<!-- Vue.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        name: '',
        comment: '',
        feedbacks: []
        },
        methods: {
        submitFeedback() {
            if (this.name.trim() !== '' && this.comment.trim() !== '') {
                this.feedbacks.push({ name: this.name, comment: this.comment });
                this.name = '';
                this.comment = '';
            }
        }
    }
    });
</script>
</body>
</html>