JSFiddle - React, Tailwind, and code Playground

by Crystal Su

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<body>
<div class="banner">
  <h1>歡迎來到元太的個人網頁</h1>
  <button id="eventdemo">灌水</button>
  <marquee>請點擊按鈕幫我灌灌水唷^^</marquee>
  <div class="navbar">
    <a class="scroll" href="#about" id="eventdemo">關於我</a>
    <a class="scroll" href="#food">食記</a>
    <a class="scroll" href="#gallery">照片</a>
    <a class="scroll" href="#contact">留言</a>
  </div>
</div>
<div class="content-section" id="about">
  <h1>關於我</h1>
  <p id="demo"></p>
</div>
<div class="content-section" id="food">
  <h1>元太的食記</h1>
  <p>還沒寫完QQ 而且都是鰻魚飯唷....</p>
</div>
<div class="content-section" id="gallery">
    <img src="http://img.zwbk.org/baike/bpic/2011/05/12/20110512054202237_2569.jpg" height="200px" >
</div>
<div class="content-section" id="contact">
  <h1>留言給我</h1>
  <p>留言板近期會上線唷</p>
</div>
</body>

CSS

.banner{
  background-color: yellow;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
marquee{
 font-size:14px; 
}
a:link {
  text-decoration: none;
  color: #444444;
}
a:hover{
  background-color: grey;
}

.content-section{
  text-align: center;
  margin-top: 5px;
  height: 200px;
  border: 2px dotted black;
}

JavaScript

//demo on object
function myFriends(name, age, school) {
    this.name = name;
    this.age = age;
    this.school = school;
}

var Conan = new myFriends("柯南", 10, "帝丹小學");
var Ayumi = new myFriends("步美", 10, "帝丹小學");
var Nobita = new myFriends("大雄", 8, "下町小學");

document.getElementById("demo").innerHTML =
"我的好朋友有：" + Conan.name+"、" + Ayumi.name + "<br>" + "我最近想認識" + Nobita.school + "的" + Nobita.name; 

//demo on event listening
document.getElementById("eventdemo").addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("eventdemo").innerHTML = "謝謝你～我也會去幫你回灌唷～";
};

//scroll-depth plugin 
$(function() {
    $('a.scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});