Forum2

Developer
Zoe
Size
4,267 Kb
Views
8,096
  1. Forum2 Previews
  2. Forum2 HTML Codes
  3. Forum2 CSS Codes
  4. Forum2 JS Codes

How do I make an forum2?

What is a forum2? How do you make a forum2? This script and codes were developed by Zoe on 05 January 2023, Thursday.

Forum2 Previews
IQ Test

Forum2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>forum2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://necolas.github.io/css3-github-buttons/'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div id="latest-post" class="row"> <a href="https://codepen.io/zoe19971230/full/vydvoV/"><button id="bk-list"class="button">Back </button></a> <h2>Froum</h2> <img class="right" id="t-logo" src="https://s11.postimg.org/43abf4rnn/Untitled_1.png" width="50" height="50"> </div> <div id="ownpost-title" class="row ownpost"> <h3>Create your own post</h3> </div> <div id="own-post" class="row post"> <label for="lname" id="title">Title:</label> <input type="text" id="lname" name="lastname"> <p> <label for="content" id="text-content">Content:</label> </p> <textarea rows="5" id="comment"></textarea> <br> <input type="submit" value="Submit" id="submit" target> </div> </div>
<br><br>
<div id="latest"><h>Latest Post<h> </div> <div id="blank"></div> <div class="post" id="add-content"> <div id="content" class="post-content row"> <button class="accordion col-md-8"> <div class="col-md-8"> <h3>My student resist to listen my words</h3> <h5>My student keep playing with his pen & do not do his homework, how could I do ?</h5> </div> <div class="col-md-4"> <div id="img" class="col-md-4"> <img src="https://s11.postimg.org/agoa4g5kz/account.png" width="50" height="50"> </div> <div> <br>By Kelvin Chan <br>Post at: 2017-12-20 15:00 </div> </div> </button> <div id="app" class="panel"> <ol> <li v-for="comment in comments"> <span>{{comment.body}}</span> <button @click="editComment(comment)">Edit Comment</button> </li> </ol> <input type="text" placeholder="write comment here..." v-model="comment" ref="comment"> <button @click="addComment">Add Comment</button> </div> </div> <div id="content" class="post-content row"> <button class="accordion col-md-8"> <div class="col-md-8"> <h3>Plays tricks on me</h3> <h5>My student always plays tricks on me,I don't know what to do.He is driving me crazy!</h5> </div> <div class="col-md-4"> <div id="img" class="col-md-4"> <img src="https://s11.postimg.org/agoa4g5kz/account.png" width="50" height="50"> </div> <div> <br>By Mary Lam <br>Post at: 2017-12-1 12:45 </div> </div> </button> <div id="app" class="panel"> <ol> <li v-for="comment in comments"> <span>you should punish him Lol</span> <button @click="editComment(comment)">Edit</button> </li> </ol> <input type="text" placeholder="write comment here..." v-model="comment" ref="comment"> <button @click="addComment">Add Comment</button> </div> </div> <div id="content" class="post-content row"> <button class="accordion col-md-8"> <div class="col-md-8"> <h3>rewarding scheme</h3> <h5>Hey, lets share how to reward your students:D I usually gift them some cartoon stickers.They love it haha:D</h5> </div> <div class="col-md-4"> <div id="img" class="col-md-4"> <img src="https://s11.postimg.org/agoa4g5kz/account.png" width="50" height="50"> </div> <div> <br>By Zoe Lau <br>Post at: 2017-11-27 00:23 </div> </div> </button> <div id="app" class="panel"> <ol> <li v-for="comment in comments"> <span>I give them a kiss haha</span> <button @click="editComment(comment)">Edit</button> </li> </ol> <input type="text" placeholder="write comment here..." v-model="comment" ref="comment"> <button @click="addComment">Add Comment</button> </div> </div> <div id="content" class="post-content row"> <button class="accordion col-md-8"> <div class="col-md-8"> <h3>Emotional student</h3> <h5>One of my students always cries in the class.What should I do:( ?</h5> </div> <div class="col-md-4"> <div id="img" class="col-md-4"> <img src="https://s11.postimg.org/agoa4g5kz/account.png" width="50" height="50"> </div> <div> <br>By Jacky Ip <br>Post at: 2017-11-2 17:54 </div> </div> </button> <div id="app" class="panel"> <ol> <li v-for="comment in comments"> <span>Some advice for you, maybe you should find out why he always cries. </span> <button @click="editComment(comment)">Edit</button> </li> </ol> <input type="text" placeholder="write comment here..." v-model="comment" ref="comment"> <button @click="addComment">Add Comment</button> </div> </div> <div id="content" class="post-content row"> <button class="accordion col-md-8"> <div class="col-md-8"> <h3>Bullying</h3> <h5>I found that bullying is happening in my class. I want to help but I don't know what to do....</h5> </div> <div class="col-md-4"> <div id="img" class="col-md-4"> <img src="https://s11.postimg.org/agoa4g5kz/account.png" width="50" height="50"> </div> <div> <br>By Vivian Wan <br>Post at: 2107-10-12 16:14 </div> </div> </button> <div id="app" class="panel"> <ol> <li v-for="comment in comments"> <span>We can't help you.</span> <button @click="editComment(comment)">Edit</button> </li> </ol> <input type="text" placeholder="write comment here..." v-model="comment" ref="comment"> <button @click="addComment">Add Comment</button> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-beta.5/vue.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Forum2 - Script Codes CSS Codes

div{ font-family:verdana;
}
li { display: list-item; text-align: -webkit-match-parent; padding:10px;
}
#latest{ font-size:30px; margin:10px; min-height:50px; border-radius:10px 10px 0px 0px; text-align:center; color:#5cbcac;
}
#t-logo{ position:relative; bottom:55px; left:100px;
}
#latest-post{ background-color:#5cbcac; min-height:80px; color:#fff; text-indent:20px; border-radius: 0px 0px 15px 15px; text-align:center; height:80px;
}
.button { background-color:white; /* Green */ border-radius: 12px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border: none; color: #5CBCAC; padding: 10px 20px; text-align: center; text-decoration: none; font-size: 16px;
}
#bk-list:hover{ background-color:#347F72; text-decoration:none; color:white; cursor:pointer;
}
#bk-list{ position:absolute; left:50px; top:15px;
}
#ownpost-title{ margin:10px; background-color:white; min-height:50px; border-radius:10px 10px 0px 0px; text-align:center; color:#5cbcac; border-color:#5cbcac;
}
#own-post{ background-color:#5cbcac; min-height:210px; margin:10px; border-radius:0px 0px 10px 10px;
}
.post-content{ padding:2px; margin:2px; text-indent:20px; border:3px solid #ddd; border-color:#5cbcac;
}
#title{ text-indent:10px;
}
#lname{ width:30%; margin:10px;
}
#comment{ width:70%; top:220px; margin-left:20px;
}
#text-content{ text-indent:10px;
}
label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;
}
#submit{ margin:20px;
}
#img{ padding:15px;
}
#app{ color:#000; margin:10px; float:left;
}
button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s;
}
button.accordion.active, button.accordion:hover { background-color: #ddd;
}
div.panel { padding: 0 18px; display: none; background-color: white; width: 70%;
}
div.panel.show { display: block;
}

Forum2 - Script Codes JS Codes

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); }
}
new Vue({ el: '#app', data: { comment: '', comments: [ ] }, methods: { addComment: function(){ var comment = this.comment this.comments.push({body:comment}) this.comment = '' }, editComment: function(comment){ var getComment = this.comments.indexOf(comment) this.comments.splice(getComment, 1) this.comment = comment.body this.$refs.comment.focus() } }
})
$('#submit').click(function() { $("#blank").append('<div id="content" class="post-content row"><button class="accordion col-md-8"><div class="col-md-8"><h3>!-Your post-!</h3><h5>XXXXXXXXXXXXXXXXXXX</h5></div><div class="col-md-4"><div id="img" class="col-md-4"><img src="https://s11.postimg.org/agoa4g5kz/account.png" width="50" height="50"></div><div><br>By XXXXX<br>Post at: YYYY-MM-DD XX:XX</div></div></button><div id="app" class="panel"><ol><li v-for="comment in comments"><span>Some advice for you, maybe you should find out why he always cries. </span><button @click="editComment(comment)">Edit</button></li></ol><input type="text" placeholder="write comment here..." v-model="comment" ref="comment"><button @click="addComment">Add Comment</button></div> </div>');
});
Forum2 - Script Codes
Forum2 - Script Codes
Home Page Home
Developer Zoe
Username zoe19971230
Uploaded January 05, 2023
Rating 3
Size 4,267 Kb
Views 8,096
Do you need developer help for Forum2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zoe (zoe19971230) Script Codes
Name
Conclusion
Assignment 3 15072257D
Main-page-list-construction
Fullpage 1
A Pen by Zoe
Reminder
Personalize
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!